Difference between revisions of "Team:TCFSH Taiwan/Description"
| Line 7: | Line 7: | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | ||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> | ||
| − | |||
<style type="text/css"> | <style type="text/css"> | ||
| Line 23: | Line 22: | ||
small, strike, strong, sub, tt, var, | small, strike, strong, sub, tt, var, | ||
b, u, i, center, | b, u, i, center, | ||
| − | dl, dt, dd, ol | + | dl, dt, dd, ol, |
fieldset, form, label, legend, | fieldset, form, label, legend, | ||
table, caption, tbody, tfoot, thead, tr, th, td { | table, caption, tbody, tfoot, thead, tr, th, td { | ||
| Line 42: | Line 41: | ||
line-height:1; | line-height:1; | ||
} | } | ||
| − | |||
h1{ | h1{ | ||
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg'); | background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg'); | ||
} | } | ||
| − | |||
/*大圖*/ | /*大圖*/ | ||
@media screen and (min-width: 768px) { | @media screen and (min-width: 768px) { | ||
| Line 53: | Line 50: | ||
overflow:hidden ; | overflow:hidden ; | ||
width:100%; | width:100%; | ||
| − | |||
} | } | ||
.main-img{ | .main-img{ | ||
| Line 62: | Line 58: | ||
width: 100%; | width: 100%; | ||
margin: auto; | margin: auto; | ||
| + | margin-top: 40px; | ||
z-index:999; | z-index:999; | ||
} | } | ||
| Line 81: | Line 78: | ||
} | } | ||
} | } | ||
| + | |||
/*scroll navigaiton*/ | /*scroll navigaiton*/ | ||
nav { | nav { | ||
| Line 89: | Line 87: | ||
width: auto; | width: auto; | ||
z-index: 9999; | z-index: 9999; | ||
| − | top: | + | top:15%; |
margin: auto; | margin: auto; | ||
} | } | ||
| Line 95: | Line 93: | ||
nav .wrapper { | nav .wrapper { | ||
padding: 0; | padding: 0; | ||
| − | width: | + | width:47%; |
height: 785px; | height: 785px; | ||
} | } | ||
| Line 109: | Line 107: | ||
position: absolute; | position: absolute; | ||
width:1px; | width:1px; | ||
| − | height: | + | height:564px; |
top: 13px; | top: 13px; | ||
} | } | ||
.line .red { | .line .red { | ||
width:1px; /*調line長度*/ | width:1px; /*調line長度*/ | ||
| − | height: | + | height:50%; /*line寬度*/ |
position:relative; | position:relative; | ||
| Line 121: | Line 119: | ||
.line .blue { | .line .blue { | ||
width: 1px; /*line寬度*/ | width: 1px; /*line寬度*/ | ||
| − | height: | + | height: 35.5%; /*調line長度*/ |
position:relative; | position:relative; | ||
left:51px; | left:51px; | ||
| Line 247: | Line 245: | ||
width:60vw; | width:60vw; | ||
height:auto; | height:auto; | ||
| + | } | ||
| + | |||
| + | .reference-content{ | ||
| + | font-size:13pt !important; | ||
| + | text-align:justify; | ||
| + | color:#F3F7F7; | ||
| + | padding-top:15px; | ||
| + | padding-bottom:15px; | ||
} | } | ||
.title{ | .title{ | ||
| Line 267: | Line 273: | ||
padding-bottom:15px; | padding-bottom:15px; | ||
} | } | ||
| + | |||
| + | |||
/*second title*/ | /*second title*/ | ||
.content-1{ | .content-1{ | ||
font-size:19pt !important; | font-size:19pt !important; | ||
text-align:justify; | text-align:justify; | ||
| − | color:# | + | color:#cc3399; |
font-weight: bold !important; | font-weight: bold !important; | ||
padding-top:30px; | padding-top:30px; | ||
padding-bottom:10px | padding-bottom:10px | ||
| + | font-weight:400 !important; | ||
} | } | ||
.content-image{ | .content-image{ | ||
| + | text-align:center !important; | ||
color:#F3F7F7 !important; | color:#F3F7F7 !important; | ||
| − | font-size: | + | font-size:12pt !important; |
padding-top:10px; | padding-top:10px; | ||
padding-bottom:50px; | padding-bottom:50px; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | |||
.appear{ | .appear{ | ||
| Line 295: | Line 303: | ||
text-align:justify; | text-align:justify; | ||
color:#F3F7F7; | color:#F3F7F7; | ||
| + | padding-top:15px; | ||
| + | padding-bottom:15px; | ||
| + | margin-left:10px !important; | ||
| + | position:relative; | ||
} | } | ||
.quote{ | .quote{ | ||
| Line 301: | Line 313: | ||
color:#F3F7F7; | color:#F3F7F7; | ||
text-indent:2em !important; | text-indent:2em !important; | ||
| − | + | padding-left:40px; | |
| + | padding-top:15px; | ||
| + | padding-bottom:15px; | ||
} | } | ||
| Line 329: | Line 343: | ||
.box{ | .box{ | ||
width:auto; | width:auto; | ||
| − | padding-top: | + | padding-top:10px; |
| − | padding-bottom: | + | padding-bottom:10px; |
} | } | ||
.picture{ | .picture{ | ||
position:relative; | position:relative; | ||
| − | left: | + | left:7vw; |
width:80%; | width:80%; | ||
| − | |||
} | } | ||
.picture-1{ | .picture-1{ | ||
position:relative; | position:relative; | ||
| − | left: | + | left:15vw; |
width:50%; | width:50%; | ||
| − | |||
} | } | ||
| − | |||
.bigphoto{ | .bigphoto{ | ||
| − | + | margin: auto; | |
| − | + | display: block; | |
| − | + | } | |
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | |||
<nav id="scroll"> | <nav id="scroll"> | ||
<div class="wrapper"> | <div class="wrapper"> | ||
| − | + | <div class="nodes"> | |
<div class="line"> | <div class="line"> | ||
<div class="blue"> | <div class="blue"> | ||
| Line 368: | Line 378: | ||
<div class="node"> | <div class="node"> | ||
| − | <div class="topic"><p class="text_color"> | + | <div class="topic"><p class="text_color">DeteColi</p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
| Line 381: | Line 391: | ||
<div class="node"> | <div class="node"> | ||
| − | <div class="topic"><p class="text_color"> | + | <div class="topic"><p class="text_color">How we design our biobrick</p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
| Line 393: | Line 403: | ||
</div> | </div> | ||
| − | |||
<div class="node"> | <div class="node"> | ||
| − | <div class="topic"><p class="text_color"> | + | <div class="topic"><p class="text_color">Operation Model</p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
| − | <div class="cover"> | + | <div class="cover"> |
</div> | </div> | ||
</div> | </div> | ||
| Line 405: | Line 414: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | </div> | + | </div> |
| − | + | ||
| − | + | ||
| − | + | <div class="node"> | |
| − | + | <div class="topic"><p class="text_color">Mechanism</p></div> | |
| + | <div class="active-circle"> | ||
| + | <div class="splash"></div> | ||
| + | <div class="cover"> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="inactive-circle"> | ||
| + | <div class="small-cover"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="node"> | ||
| + | <div class="topic"><p class="text_color">Target</p></div> | ||
| + | <div class="active-circle"> | ||
| + | <div class="splash"></div> | ||
| + | <div class="cover"> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="inactive-circle"> | ||
| + | <div class="small-cover"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </nav> | ||
| + | <h1> | ||
<!--圖片--> | <!--圖片--> | ||
<div class="img-container"> | <div class="img-container"> | ||
| − | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/8/8d/Designnew.jpeg" class="main-img" width="100%"> |
</div> | </div> | ||
| − | |||
<!--wiki content--> | <!--wiki content--> | ||
| − | |||
<section class="content_container"> | <section class="content_container"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <p class="title"> | + | <div> |
| − | <p class="content">We | + | <p class="title">What is “Detecoli”?<p> |
| − | </div> | + | <p class="content">We intend to invent a STICKER called “Detecoli”—a word we coin by combining “detect” and “<span style="font-style:italic;">E. coli</span>”—which changes color in environments of excess sunlight or inadequate temperatures. It will be attached to the product during manufacture and thus is able to monitor the whole process of transportation. Detecoli alerts consumers to possible deterioration or contamination by changing color, and serves as a guarantee of quality.</p> |
| + | </div> | ||
| + | <div> | ||
| + | <p class="title">How we design our biobrick</p> | ||
| + | <p class="content">First, we tried to find a UV promoter, and we located<font style="color: orange">BBa_I765001</font>. However, it simply didn’t work in our experiment. So after searching on the Internet, we found a project that had been conducted by Rice university. They found that protein UirR (<font style="color:orange">K1725420</font>) and UirS (<font style="color: orange">K1725410</font>) can be used as a photo receptor. The UirS protein is anchored in the bacterial membrane where it “sees” the color illuminating the bacterium. If the illumination is UV, UirS activates itself and releases the protein, UirR. UirR will then be phosphorylated, and become active. Active UirR is mobile, capable of binding a specific promoter called (PcsiR1), and triggering the expression of the desired gene—RFP (<font style="color: orange">E1010</font>). However, we couldn’t find the promoter sequence of PcsiR1 at first, so we used Plsir (<font style="color: orange">K1725400</font>) instead. But when we eventually found the sequence, it was too late for us. So we designed this biobrick:</p> | ||
| + | <p class="content"><font style="color: lightblue">Pcon RBS UirR RBS</font> (<font style="color: orange">B0034</font>) <font style="color: lightblue">UirS Ter Ter</font> (<font style="color: orange">B0015</font>)</p> | ||
| + | <p class="content"><font style="color: lightblue">Plsir RBS RFP Ter Ter</font></p> | ||
| + | <p class="content">Then, we needed to find a way to measure the temperature, which is using the temperature regulated RBS (<font style="color: orange">BBa_K115001</font>). This RBS only allows ribosomes to bind on it at the temperature of 37 degree Celsius or above. Originally, we decided to put GFP after it, and the GFP would be activated if it reaches the target temperature. But we then noticed that GFP would produce green light, and green light would cause the protein UirS to reverse back into an inactive state. So we then chose BFP (<font style="color: orange">K592009</font>) instead, and designed this biobrick:</p> | ||
| + | <p class="content"><font style="color: lightgreen">Pcon RBS<sub>Temp</sub> BFP Ter Ter</font></p> | ||
| + | <p class="content">Nevertheless, we were afraid that the length of exposure time to 37 degrees Celsius or above is too short for the bacteria to produce enough amounts of BFP. So we decided to use an irreversible inhibitor, and then we came across the Rhl promoter. When the product of RhlI (K1541017) C4-HSR and protein RhlR (C0171) bind together, Prhl will continuously work without consuming the proteins, and thus will have enough time to produce BFP. Late after, we found that the team iGEM14_ETH_Zurich had improved this gene to prevent the “leakiness”. But unfortunately, it’s again too late for us to change. Eventually, we designed this biobrick:</p> | ||
| + | <p class="content"><font style="color: lightblue">Pcon RBS RhlI RBS RhlR Ter Ter + Prhl RBS BFP Ter Ter</font></p> | ||
| + | <p class="content">For fear that our products might be damaged, causing the bacteria inside to die, we designed a mechanism to guarantee that our product will remain effective. We knew that if we put an LVA tag behind the chromoprotein, it will degrade much faster. So our concept is to make the bacteria produce chromoprotein constantly, and it will be colorful when it is working. Nonetheless, when the bacteria aren’t alive anymore, the color will degrade fast and eventually become colorless. In the end, we designed this biobrick:</p> | ||
| + | <p class="content"><font style="color: lightblue">Pcon RBS cj-Blue-lva Ter Ter</font> <font style="color: red">(note that cj-Blue looks green)</font></p> | ||
| + | <p class="content">Also, to avoid the color mixture and the overconsuming of the amino acid, we designed a negative control promoter. We use LacI at the end, since it is the most popular one.</p> | ||
| + | <p class="content">Lastly, since it would be difficult to transform more than three plasmid into the bacteria, we combined two of them with one in the reverse direction (we are afraid that the gene behind will express poorly), and try to make the sequence as short as possible. So the final biobrick is:</p> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/3/38/Composite3.jpeg" class="bigphoto" width="50%"> | ||
| + | </div> | ||
| + | |||
| + | <div> | ||
| + | <p class="title">Operation Model</p> | ||
| + | <p class="content">We designed a device to detect harmful UV lights and high temperature, and we are able to confirm if it is working. Our design of the device will prevent <span style="font-style:italic;">E. coli</span> from leaking out, and the <span style="font-style:italic;">E. coli</span> in it will be annihilated after use. In the end, it can be freely disposed of without causing any potential health concern.</p> | ||
| + | </div> | ||
| + | |||
| + | <div> | ||
| + | <p class="title">Mechanism</p> | ||
| + | <p class="content-1">UV receptor</p> | ||
| + | <p class="content">Rice University found that protein UirR and UirS can be used as a photo receptor. The UirS protein is anchored in the bacterial membrane where it “sees” the color illuminating the bacterium. If the illumination is UV, UirS activates itself and releases the protein, UirR. UirR will then be phosphorylated, and become active. Active UirR is mobile, capable of binding a specific promoter called (PcsiR1), and triggering the expression of the desired gene.</p> | ||
| + | <p class="content-1">Temperature thermometer</p> | ||
| + | <p class="content">The RBS<sub>Temp</sub> only allows ribosomes to bind on it at the temperature of 37 degree Celsius or above. The main feature of all RNA thermometers is that they function through conformational shifts in structure. These shifts cause conformational changes to expose the Shine-Dalgarno sequence, which acts as a binding site to allow translation.3 For translation to occur, the ribosome must have the aforementioned SD sequence. The structural differences are caused by the transcription regions, but the SD sequence is common.</p> | ||
| + | <p class="content-1">Color changing</p> | ||
| + | <p class="content">The chromoprotein cj-blue, and the fluorescent proteins BFP and RFP can perform different colors.</p> | ||
| + | <p class="content-1">Chromoprotein</p> | ||
| + | <p class="content">The LVA tag, served as a degradation peptide sequence, is one of the most effective of them. If we put LVA tags on our desired gene, we can make them degrade faster.</p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <div> | ||
| + | <p class="title">Target</p> | ||
| + | <p class="content">The principal application for our sticker is to monitor the WHOLE delivery process. That is, from the minute the manufacturing of the product is completed in the factory to the moment the customer receives the product, every moment will be monitored. In fact, the monitoring will continue until the customer finishes using the product. This not only guarantees the quality of the product, but helps to solve the possible legal disputes between the factory and the transport company, since you can add a new sticker in each stage of the delivery process. If the transport company or the customer receives the product with red or blue stickers on it, it indicates that the previous transporting condition is not acceptable. Likewise, the transportation company can also use this kind of stickers as evidence to prove that their employees do treat every cargo properly. This way, we can avoid consumer disputes and the ensuing problems of compensation, and the company will even get more goodwill.</p> | ||
| + | <p class="content">As is shown in the above passage, our goal is to ensure the quality of EVERY product that has our stickers on it and to substantiate the reliability of quality control. Above all, we are able to extend the monitoring process from manufacturing, transportation, and eventually to the customer’s hands, preventing the customer from buying, or using, defective products which are damaged or contaminated due to inappropriate transporting or storing conditions. The most attractive features of this bio-sticker are “long-term monitoring” and “cumulative, layered supervision.” The factors of harmful conditions accumulate, and as soon as they surpass the limits, they activate the color changing process in our stickers. The best part is, the basic material of this bio-sticker is e-coli, and since e-coli replicates itself extremely rapidly, the cost of the sticker will be considerably low. So, either replacing a sticker or adding a new one after each stage of the delivery process should still be cheap enough for the company or the consumer to afford, giving them extra incentive to use the product.</p> | ||
| + | </div> | ||
</section> | </section> | ||
</h1> | </h1> | ||
| Line 455: | Line 521: | ||
var positions = []; | var positions = []; | ||
var heights = []; | var heights = []; | ||
| − | var elements = $( '.title' ); | + | var elements = $( '.title:not(".main")' ); |
// Cache heights and positions | // Cache heights and positions | ||
| Line 492: | Line 558: | ||
var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]); | var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]); | ||
var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance); | var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance); | ||
| − | + | $revealBar.height( totalWidth+10 ); | |
} | } | ||
| Line 501: | Line 567: | ||
var $node = $( this ); | var $node = $( this ); | ||
$node.click( function() { | $node.click( function() { | ||
| − | $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)- | + | $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 1000 ); |
}); | }); | ||
}) | }) | ||
| Line 532: | Line 598: | ||
){}) | ){}) | ||
| + | |||
</script> | </script> | ||
Revision as of 06:35, 31 October 2017
