Difference between revisions of "Team:NTU-Singapore/Attributions"

Line 157: Line 157:
 
                 <!-- Main jumbotron for a primary marketing message or call to action -->
 
                 <!-- Main jumbotron for a primary marketing message or call to action -->
 
                 <div class="jumbotron content-page" style="font-family: 'Just Me Again Down Here', cursive; padding-top: 140px; margin-bottom: -10px;">
 
                 <div class="jumbotron content-page" style="font-family: 'Just Me Again Down Here', cursive; padding-top: 140px; margin-bottom: -10px;">
−
<h1 style="font-size: 70px;"><span style="color: #0089A7; ">CRISPRy</span> Public Sharing</h1>
+
<h1 style="font-size: 70px;"><span style="color: #0089A7; ">Thanks</span>for the help and guidance!</h1>
−
<p style="font-family: 'Annie Use Your Telescope', cursive; font-size: 26px; line-height: 51px;">With informing the community about CRISPR gene therapy in mind, we have designed several educational materials for a nation-wide exhibition. 3D models and fluorescent illustrators were some of our highlights during our exhibition. Yay!!</p>
+
 
</div>
 
</div>
  
−
<div class="content-overview" style="padding: 0px 201px;">
+
−
 
+
−
<div class="circle-overview circle1">
+
−
<a href="#dCas" style="top: -9px; width:200px; height:200px;" class="overview-content"><img src="https://static.igem.org/mediawiki/2016/a/a8/T--NTU-Singapore--RNAg.png" width="200px"><span class="overview-text">The Making Of</span> <br></a>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="circle-overview circle3">
+
−
<a href="#dCas" style="top: -9px; width:200px; height:200px;" class="overview-content"><img src="https://static.igem.org/mediawiki/2016/a/a8/T--NTU-Singapore--RNAg.png" width="200px"><span class="overview-text">Exhibition Day</span> <br></a>
+
−
</div>
+
−
+
−
 
+
−
</div>
+
−
 
+
 
<br><br><br><br>
 
<br><br><br><br>
 
 
Line 183: Line 170:
 
 
 
<div class="page-header">
 
<div class="page-header">
−
<h1>The Making Of...</h1>
+
<h1>Advisors</h1>
 
</div>
 
</div>
 
<div class="well">
 
<div class="well">
−
<p>The <a href="http://www.onenorthfestival.sg/index.php" style="color: #81C7D4">One-North Festival</a> is a two-day event jointly organised by the Agency for Science Technology and Research (A*STAR) and JTC. The event features leading scientist from different backgrounds to showcase cutting-edge reseach and developments efforts to reshape human life. Our team was lucky enough to be invited to exhibit about the CRISPR/Cas9 Technology and share our knowledge regarding CRISPR/Cas9 to the community of Singapore. The excitement from the invitation got us started with  full enthusiasm and we started to think about how to come out with more creative materials so that the public is able to grasp the concept of genome editing combined Cas9-induced double stranded breaks.</p>
 
−
<p>As a start, we designed 4 informative cards explaining the fundamental features of the Cas9 enzyme: <br>1. The guide RNA &nbsp;&nbsp;&nbsp;2. PAM specificity &nbsp;&nbsp;&nbsp;3. Nuclease activity &nbsp;&nbsp;&nbsp;4. Usage in DNA editing. <br>
 
−
</p>
 
−
<div style="margin: auto; width: 900px;">
 
−
<img id="myImg" class="content-img" src="https://static.igem.org/mediawiki/2016/6/6f/T--NTU-Singapore--guide.jpg" alt="" >
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal" class="modal">
 
−
<span class="close">×</span>
 
−
<img class="modal-content" id="img01" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg2" class="content-img" style="margin-left: 20px;" src="https://static.igem.org/mediawiki/2016/c/c3/T--NTU-Singapore--pam.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal2" class="modal">
 
−
<span class="close close2">×</span>
 
−
<img class="modal-content" id="img02" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg3" class="content-img" style="margin-left: 20px;" src="https://static.igem.org/mediawiki/2016/3/32/T--NTU-Singapore--cutter.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal3" class="modal">
 
−
<span class="close close3">×</span>
 
−
<img class="modal-content" id="img03" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg4" class="content-img" style="margin-left: 20px;" src="https://static.igem.org/mediawiki/2016/6/69/T--NTU-Singapore--editor.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal4" class="modal">
 
−
<span class="close close4">×</span>
 
−
<img class="modal-content" id="img04" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
</div>
 
−
 
−
<br>
 
−
<p>Then we went on to design a poster along with brochures to illustrate how did the the discovery and development of CRISPR-Cas9 came about: </p>
 
 
 
−
<div style="margin: auto; width: 900px;">
+
</div>
−
<img id="myImg5" class="content-img" style="" src="info-card/poster.png">
+
−
+
−
<!-- The Modal -->
+
−
<div id="myModal5" class="modal">
+
−
<span class="close close5">×</span>
+
−
<img class="modal-content" id="img05" width="900px;" style="height:1272px;">
+
−
<div id="caption"></div>
+
−
</div>
+
−
<!-- The Modal -->
+
−
</div>
+
−
<br>
+
−
<p>With all these beautifully designed representations, Science can still be boring when they are explained on a 2D paper. Our idea was to print a model to accompany the 4 informative cards that we are displaying. These models would then be used when we introduce the CRISPR/Cas9's working principle to the public. Along with a Computer Aided Design(CAD) software, AutoDesk Fusion and AutoDesk MeshMixer, we designed joints into the Cas9 protein so that visitors can play with our models during the exhibition. Have a look at how we designed them at <a href="">here</a>. :)</p>
+
−
+
−
<div style="margin: auto; width: 900px;">
+
−
<img id="myImg" class="content-img" src="info-card/guide.jpg" alt="" >
+
−
+
−
<!-- The Modal -->
+
−
<div id="myModal" class="modal">
+
−
<span class="close">×</span>
+
−
<img class="modal-content" id="img01" >
+
−
<div id="caption"></div>
+
−
</div>
+
−
<!-- The Modal -->
+
−
+
−
<img id="myImg2" class="content-img" style="margin-left: 15px;" src="info-card/pam.jpg">
+
−
+
−
<!-- The Modal -->
+
−
<div id="myModal2" class="modal">
+
−
<span class="close close2">×</span>
+
−
<img class="modal-content" id="img02" >
+
−
<div id="caption"></div>
+
−
</div>
+
−
<!-- The Modal -->
+
−
+
−
<img id="myImg3" class="content-img" style="margin-left: 15px;" src="info-card/cutter.jpg">
+
−
+
−
<!-- The Modal -->
+
−
<div id="myModal3" class="modal">
+
−
<span class="close close3">×</span>
+
−
<img class="modal-content" id="img03" >
+
−
<div id="caption"></div>
+
−
</div>
+
−
<!-- The Modal -->
+
−
+
−
<img id="myImg4" class="content-img" style="margin-left: 15px;" src="info-card/editor.jpg">
+
−
+
−
<!-- The Modal -->
+
−
<div id="myModal4" class="modal">
+
−
<span class="close close4">×</span>
+
−
<img class="modal-content" id="img04" >
+
−
<div id="caption"></div>
+
−
</div>
+
−
<!-- The Modal -->
+
−
</div>
+
−
+
−
<br>
+
  
−
 
−
<p>Then, we stumbled upon the problem of explaining the usage of the catalytically inactive version of Cas9, the dCas9, to the public. Then came the idea of the dCas9 illustartor. :)</p>
 
−
<p>We adopted the idea from using GFP-tagged dCas9 live cell imaging of the nucleus. We decided to use fluorescent paints, a dark box, a blue-light filter and a UV-light to similate live cell imaging. Hemp ropes are used to represent DNA and a blob attached to Cas9 is used to represent GFP-Cas9. The blob and hemp ropes are painted with different colours of fluorescent paint. When the UV lamp is turned on, only the DNA and GFP will light up.
 
−
</p>
 
−
 
−
<div style="margin: auto; width: 900px;">
 
−
<img id="myImg" class="content-img" src="info-card/guide.jpg" alt="" >
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal" class="modal">
 
−
<span class="close">×</span>
 
−
<img class="modal-content" id="img01" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg2" class="content-img" style="margin-left: 15px;" src="info-card/pam.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal2" class="modal">
 
−
<span class="close close2">×</span>
 
−
<img class="modal-content" id="img02" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg3" class="content-img" style="margin-left: 15px;" src="info-card/cutter.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal3" class="modal">
 
−
<span class="close close3">×</span>
 
−
<img class="modal-content" id="img03" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
 
−
<img id="myImg4" class="content-img" style="margin-left: 15px;" src="info-card/editor.jpg">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal4" class="modal">
 
−
<span class="close close4">×</span>
 
−
<img class="modal-content" id="img04" >
 
−
<div id="caption"></div>
 
−
</div>
 
−
<!-- The Modal -->
 
−
</div>
 
−
 
−
<br>
 
−
 
−
 
−
 
−
 
−
</div>
 
−
<div class="separator" id="3dprint" style="border-bottom: 0px;">
 
−
 
−
</div>
 
−
 
 
<div class="page-header">
 
<div class="page-header">
−
<h1>Exhibition Day!!</h1>
+
<h1>Adventurers</h1>
 
</div>
 
</div>
 
<div class="well">
 
<div class="well">
−
<p>Our booth setup in our exhibition!</p>
 
−
<p>For us, the most interesting part of our exibition is that kids liked the 3D models alot! The first thing they did when they came to our booth was to grab hold of our models and start exploring the protein. Their curiosity when holding the modles made us feel so happy and all the hardwork in designing the models are worthy.
 
−
</p>
 
−
<p>During our exibition, we asked visitors to answer our survey after we have explained about the technology to them. Results can be found <a href="">here</a>.
 
 
 
−
 
−
</p>
 
 
</div>
 
</div>
 +
 +
                 
 
 
 
<!-- /.container-fluid -->
 
<!-- /.container-fluid -->
Line 372: Line 195:
 
     <!-- /#wrapper -->
 
     <!-- /#wrapper -->
  
−
   <script>
+
    
−
// Get the modal
+
−
var modal = document.getElementById('myModal');
+
−
+
−
// Get the image and insert it inside the modal - use its "alt" text as a caption
+
−
var img = document.getElementById('myImg');
+
−
var modalImg = document.getElementById("img01");
+
−
+
−
img.onclick = function(){
+
−
modal.style.display = "block";
+
−
modalImg.src = this.src;
+
−
}
+
−
+
−
var modal2 = document.getElementById('myModal2');
+
−
var img2 = document.getElementById('myImg2');
+
−
var modalImg2 = document.getElementById("img02");
+
−
+
−
img2.onclick = function(){
+
−
modal2.style.display = "block";
+
−
modalImg2.src = this.src;
+
−
}
+
−
+
−
var modal3 = document.getElementById('myModal3');
+
−
var img3 = document.getElementById('myImg3');
+
−
var modalImg3 = document.getElementById("img03");
+
−
+
−
img3.onclick = function(){
+
−
modal3.style.display = "block";
+
−
modalImg3.src = this.src;
+
−
}
+
−
 
+
−
var modal4 = document.getElementById('myModal4');
+
−
var img4 = document.getElementById('myImg4');
+
−
var modalImg4 = document.getElementById("img04");
+
−
 
+
−
img4.onclick = function(){
+
−
modal4.style.display = "block";
+
−
modalImg4.src = this.src;
+
−
}
+
−
 
+
−
 
+
−
// Get the <span> element that closes the modal
+
−
var span = document.getElementsByClassName("close")[0];
+
−
var span2 = document.getElementsByClassName("close2")[0];
+
−
var span3 = document.getElementsByClassName("close3")[0];
+
−
var span4 = document.getElementsByClassName("close4")[0];
+
−
 
+
−
 
+
−
+
−
// When the user clicks on <span> (x), close the modal
+
−
span.onclick = function() {
+
−
modal.style.display = "none";
+
−
}
+
−
+
−
span2.onclick = function() {
+
−
modal2.style.display = "none";
+
−
}
+
−
+
−
span3.onclick = function() {
+
−
modal3.style.display = "none";
+
−
}
+
−
+
−
span4.onclick = function() {
+
−
modal4.style.display = "none";
+
−
}
+
−
 
+
−
+
−
</script>
+
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 05:15, 15 October 2016

NTU-Singapore