Difference between revisions of "Team:Hong Kong HKU/Design"

m
(Update information)
Line 3: Line 3:
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<style>
 
<style>
−
        #sideMenu
+
#sideMenu
−
        {
+
{display:none; /* Disable the display of the annoying side main menu*/}
−
        display:none; /* Disable the display of the annoying side main menu*/
+
#top_title
−
        }
+
{display:none; /* Disable the annoying title*/}
−
       
+
#content
−
        #top_title
+
{padding:0px; width:90%; margin-left:5%; margin-right:5%;background-color: rgba(255,255,255,0);}
−
        {
+
body
−
        display:none; /* Disable the annoying title*/
+
{margin: 0;
−
        }
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
−
 
+
font-size: 24px;
−
#content { padding:0px; width:90%; margin-left:5%; margin-right:5%;}
+
color: #333333;
 +
background-color: #fafafa;
 +
background-image:url(https://static.igem.org/mediawiki/2016/a/ae/T--Hong_Kong_HKU--Background_image.png);
 +
background-position:center center;
 +
background-repeat:no-repeat;
 +
-moz-background-size: cover;
 +
background-size: cover;
 +
background-attachment:fixed;}
 +
.container
 +
{background-color: rgba(255,255,255,0.4);
 +
padding-top:80px;}
 +
p {font-size: 16px;}
 +
h1,h2,h3,h4,h5,h6 {color: #282828;}
 +
h1 {font-size:72px;} h2 {font-size:48px;} h3 {font-size:36px;}
 +
h4 {font-size:32px;} h5 {font-size:28px;} h6 {font-size:24px;}
 +
.nav-pills>li.active>a{background-color:#93d66b !important;}
 +
.nav-pills>li>a:hover{background-color:#b2dd75 !important; color:#FFFFFF!important;}
 +
.nav-pills>li.active>a:hover{background-color:#93d66b !important;}
 
</style>
 
</style>
−
 
+
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
 +
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 +
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
<!--[if lt IE 9]>
 +
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 +
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
<![endif]-->
 
<head>
 
<head>
 
<meta charset="utf-8">
 
<meta charset="utf-8">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<!-- Bootstrap -->
 
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/default?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/default?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
−
<!-- custom style -->
 
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/custom?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/custom?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
</head>
 
</head>
−
 
+
</html>
 +
{{Hong_Kong_HKU/Header}}
 +
<html>
 
<body>
 
<body>
−
<nav class="navbar navbar-default">
+
<div class="container" align="center">
−
  <div class="container-fluid">  
+
    <h2>Project</h2>
−
    <!-- Brand and toggle get grouped for better mobile display -->
+
    <ul class="nav nav-pills">
−
     <div class="navbar-header">
+
      <li class="dropdown">
−
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Description<span class="caret"></span></a>
−
      <a class="navbar-brand" href="#">HKU iGEM Team</a>
+
            <ul class="dropdown-menu">
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Inspiration">Inspiration</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Objectives">Objectives</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Progress">Progress</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Sigificances">Sigificances</a></li>
 +
            </ul>
 +
      </li>
 +
      <li class="active"><a data-toggle="pill" href="#">Design</a></li>
 +
    </ul>
 +
     <div class="tab-content">
 +
       <div id="Design" class="tab-pane fade in active">
 +
        <h3>Design</h3>
 +
    <p class="text-justify"><font size="3">
 +
        The tetrahedron consists of 5 oligos lengthing from 30 to 97 nucleotides.
 +
        The tetrahedron is composed of 362 nucleotides in total.
 +
        The formation of the structures is allowed by a standard procedure of heating it up followed by step-wise cooling. <br>
 +
        The detailed protocol can be found <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Experiments">here</a>.<br>
 +
        From the diagram above, several combinations of oligos are expected to anneal to form dimers, trimers and quadruplexes. <br>
 +
        The results from PAGE can be found <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Results">here</a>.<br>
 +
        </font></p>
 +
        <table class="table">
 +
        <thead>
 +
            <tr>
 +
                <th style="text-align:center">Tetra forming Oligo</th>
 +
                    <th>Sequence</th>
 +
                    <th style="text-align:center">Size (nucleotide)</th>
 +
                </tr>
 +
            </thead>
 +
            <tbody>
 +
            <tr>
 +
                <td style="text-align:center">O1</td>
 +
                    <td>CTACTAGCTGCACGACGTAGTGGGTTGGGTCTAACTCCACTGGGTAGGGTCGTCGAGCTCACGTGCGTCACGCGCGATAGTCGAGTGCTGCTGAGTA</td>
 +
                    <td style="text-align:center">97</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">O2</td>
 +
                    <td>CTACGAGTGATGACGAGACATGTGACAGTGCACACTATGTGCGCTCATCGCACGATAGCAGACGACG</td>
 +
                    <td style="text-align:center">67</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">O3</td>
 +
                    <td>TGACGCACGTGAGCACTGCTATCGTGCGATGAGCGCACATAGACTGACACACGCATGACGCTATCGCAGCACGACTATCGCGCG</td>
 +
                    <td style="text-align:center">84</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">O4</td>
 +
                    <td>GTCTCGTCATCACACGTGCAGCTAGTAGTACTCAGCAGCACAGCTGCGATAGCGTCATGCGTGTGTCAGAGTGCACTGTCACAT</td>
 +
                    <td style="text-align:center">84</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">O5</td>
 +
                    <td>ATGGCACCCAGTGGAGTTAGACCCTGATTG</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            </tbody>
 +
        </table>
 +
        <br>
 +
        <table class="table">
 +
        <thead>
 +
            <tr>
 +
                <th style="text-align:center">Input Oligo</th>
 +
                    <th>Sequence</th>
 +
                    <th style="text-align:center">Size (nucleotide)</th>
 +
                </tr>
 +
            </thead>
 +
            <tbody>
 +
            <tr>
 +
                <td style="text-align:center">Input</td>
 +
                    <td>CAATCAGGGTCTAACTCCACTGGGTGCCAT</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">RNA Input</td>
 +
                    <td>CAAUCAGGGUCUAACUCCACUGGGUGCCAU</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            </tbody>
 +
        </table>
 +
        <div id="carousel1" class="carousel slide" data-ride="carousel">
 +
          <ol class="carousel-indicators">
 +
            <li data-target="#carousel1" data-slide-to="0" class="active"></li>
 +
            <li data-target="#carousel1" data-slide-to="1"></li>
 +
            <li data-target="#carousel1" data-slide-to="2"></li>
 +
          </ol>
 +
          <div class="carousel-inner" role="listbox">
 +
            <div class="item active"><img src="https://static.igem.org/mediawiki/2016/d/d7/T--Hong_Kong_HKU--TetraDesign-Frontview.jpg" alt="" class="center-block">
 +
              <div class="carousel-caption">
 +
                <p>Front view</p>
 +
              </div>
 +
            </div>
 +
            <div class="item"><img src="https://static.igem.org/mediawiki/2016/8/8d/T--Hong_Kong_HKU--TetraDesign-Sideview.jpg" alt="" class="center-block">
 +
              <div class="carousel-caption">
 +
                <p>Side view</p>
 +
              </div>
 +
            </div>
 +
            <div class="item"><img src="https://static.igem.org/mediawiki/2016/7/78/T--Hong_Kong_HKU--TetraDesign-Topview.jpg" alt="" class="center-block">
 +
              <div class="carousel-caption">
 +
                <p>Top view</p>
 +
              </div>
 +
            </div>
 +
            <div class="item"><img src="https://static.igem.org/mediawiki/2016/f/fc/T--Hong_Kong_HKU--TetraDesign-Perspectiveview.jpg" alt="" class="center-block">
 +
              <div class="carousel-caption">
 +
                <p>Perspective view</p>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
 +
  <img class="img-responsive center-block" width="600px" height="auto" src="https://static.igem.org/mediawiki/2016/9/91/T--Hong_Kong_HKU--TetraDesign1.png" alt="">
 +
          <p class="text-justify"><font size="3">
 +
          The design employs the strand displacement mechanism, which is commonly employed in DNA nanostructure designs.
 +
          In our design, we include this as a major part and we thought out and performed various ways to detect such reaction. <br>
 +
          During the reaction, two strands with partly or fully complementary sequences hybridize each other, displacing one or more pre-hybridized strands.
 +
          This process is initiated at a single-stranded site called a  "toehold".
 +
          Since RNA is a lot more unstable than DNA, we first test our designs with DNA-version of the input strand, instead of RNA. <br>
 +
          You are encouraged to check out more results <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Results">here</a> for the examination of properties of this nanostructure.
 +
        </font></p>
 +
          <img class="img-responsive center-block" width="600px" height="auto" src="https://static.igem.org/mediawiki/2016/a/af/T--Hong_Kong_HKU--StrandDisplacement.jpg" alt="">
 +
      </div>
 
     </div>
 
     </div>
−
     
+
</div>
−
   
+
−
    <!-- Collect the nav links, forms, and other content for toggling -->
+
−
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
−
      <ul class="nav navbar-nav">
+
−
        <li class="active"><a href="https://2016.igem.org/Team:Hong_Kong_HKU">Homepage</a> </li>
+
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Project<span class="caret"></span></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description">Description</a> </li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Design">Design</a> </li>
+
−
            <li role="separator" class="divider"></li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Proof">Proof of concept</a> </li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Demostrate">Demostrate</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li class="dropdown"> <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Notebook" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Notebook<span class="caret"></span></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Protocol">Protocol</a> </li>
+
−
            <li role="separator" class="divider"></li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Results">Results</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Parts">Parts</a></li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Human_Practices">Human Practices</a></li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Collaborations">Collaborations</a></li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Attributions">Attributions</a></li>
+
−
      </ul>
+
−
      <form class="navbar-form navbar-right" role="search">
+
−
        <div class="form-group">
+
−
        <a href="https://www.facebook.com/igemhku2016" target="_blank"><img style="float:right"  src="https://static.igem.org/mediawiki/2016/e/ea/T--Hong_Kong_HKU--FB.jpg" width="24px" height="24px" alt="Placeholder image"></a>
+
−
        </div>
+
−
      </form>
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
      </ul>
+
−
    </div>
+
−
    <span class="dropdown"></span>    <!-- /.navbar-collapse -->
+
−
  </div>
+
−
  <!-- /.container-fluid -->
+
−
</nav>
+
−
 
+
−
 
+
−
<img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/a/a8/T--Hong_Kong_HKU--Logo_HKU_2460x1860.jpg" style="width:240px; height:180px;" alt="Placeholder image">
+
−
<div class="container" align="center">
+
−
<h3>Design</h3>
+
  
 
<!-- footer -->
 
<!-- footer -->
−
<hr>
+
<footer class="text-center"></footer>
−
<footer class="text-center">
+
<script src="https://2016.igem.org/Team:Hong_Kong_HKU/JS/jQuery?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
  <div class="container">
+
−
  <table cellspacing="0" cellpadding="0" max-width="90%" height="78" border="0" align="center">
+
−
  <tbody>
+
−
    <tr align="center">
+
−
      <td width="70%"><h4>Sponsors</h4></td>
+
−
      <td width="20%"><h4>Contact</h4></td>
+
−
    </tr>
+
−
    <tr>
+
−
      <td><img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/c/cd/T--Hong_Kong_HKU--IDT-Logo.png" width="185px" height="51px" alt="Placeholder image">
+
−
      <img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/7/76/T--Hong_Kong_HKU--SnapGeneLogo72.jpg" width="180px" height="51px" alt="Placeholder image"></td>
+
−
      <td>Email: <a href="mailto:igemhku@hku.hk" target="_blank">igemhku@hku.hk</a></td>
+
−
    </tr>
+
−
  </tbody>
+
−
</table>
+
−
    <div class="row">
+
−
      <div class="col-xs-12">
+
−
        <p style="text-align: center;">Copyright © 2016 HKU iGEM. All rights reserved.</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
</footer>
+
 
<script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
<script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
 
 
</body>
 
</body>
−
 
 
</html>
 
</html>
 +
{{Hong_Kong_HKU/Footer}}

Revision as of 03:32, 19 October 2016

Project

Design

The tetrahedron consists of 5 oligos lengthing from 30 to 97 nucleotides. The tetrahedron is composed of 362 nucleotides in total. The formation of the structures is allowed by a standard procedure of heating it up followed by step-wise cooling.
The detailed protocol can be found here.
From the diagram above, several combinations of oligos are expected to anneal to form dimers, trimers and quadruplexes.
The results from PAGE can be found here.

Tetra forming Oligo Sequence Size (nucleotide)
O1 CTACTAGCTGCACGACGTAGTGGGTTGGGTCTAACTCCACTGGGTAGGGTCGTCGAGCTCACGTGCGTCACGCGCGATAGTCGAGTGCTGCTGAGTA 97
O2 CTACGAGTGATGACGAGACATGTGACAGTGCACACTATGTGCGCTCATCGCACGATAGCAGACGACG 67
O3 TGACGCACGTGAGCACTGCTATCGTGCGATGAGCGCACATAGACTGACACACGCATGACGCTATCGCAGCACGACTATCGCGCG 84
O4 GTCTCGTCATCACACGTGCAGCTAGTAGTACTCAGCAGCACAGCTGCGATAGCGTCATGCGTGTGTCAGAGTGCACTGTCACAT 84
O5 ATGGCACCCAGTGGAGTTAGACCCTGATTG 30

Input Oligo Sequence Size (nucleotide)
Input CAATCAGGGTCTAACTCCACTGGGTGCCAT 30
RNA Input CAAUCAGGGUCUAACUCCACUGGGUGCCAU 30

The design employs the strand displacement mechanism, which is commonly employed in DNA nanostructure designs. In our design, we include this as a major part and we thought out and performed various ways to detect such reaction.
During the reaction, two strands with partly or fully complementary sequences hybridize each other, displacing one or more pre-hybridized strands. This process is initiated at a single-stranded site called a "toehold". Since RNA is a lot more unstable than DNA, we first test our designs with DNA-version of the input strand, instead of RNA.
You are encouraged to check out more results here for the examination of properties of this nanostructure.


Copyright © 2016 HKU iGEM. All rights reserved.