Difference between revisions of "Team:TCFSH Taiwan/Results"

(Prototype team page)
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
 +
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<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">
  
−
<div class="column full_size" >
 
  
−
<h1>Results</h1>
+
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
  
−
<p>Here you can describe the results of your project and your future plans. </p>
 
  
−
<h5>What should this page contain?</h5>
+
html, body, div, span, applet, object, iframe,
−
<ul>
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
<li> Clearly and objectively describe the results of your work.</li>
+
a, abbr, acronym, address, big, cite, code,
−
<li> Future plans for the project. </li>
+
del, dfn, em, font, img, ins, kbd, q, s, samp,
−
<li> Considerations for replicating the experiments. </li>
+
small, strike, strong, sub, tt, var,
−
</ul>
+
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
  
−
<h5>You should also describe what your results mean: </h5>
+
}
  
−
<ul>
 
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
 
−
<li> Show data, but remember all measurement and characterization data must be on part pages in the Registry. </li>
 
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
 
−
</ul>
 
  
−
</div>
+
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
  
−
<div class="clear"></div>
+
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
  
−
<div class="column half_size" >
+
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:auto ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
    margin-top:10px;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 +
}
  
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
  
−
<h5> Project Achievements </h5>
+
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
}
  
−
<ul>
+
.line {
−
<li>A list of linked bullet points of the successful results during your project</li>
+
  position: absolute;
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
+
  width:1px;
−
</ul>
+
  height:705px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
  
−
</div>
+
}
  
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 15%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
  
−
<div class="column half_size" >
+
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
  
−
<h5>Inspiration</h5>
+
.node {
−
<p>See how other teams presented their results.</p>
+
  margin-left: 40px;/*調node間距*/
−
<ul>
+
  width: 20px;
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
  height: 20px;
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
  margin-top: 30px;
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
  position: relative;
−
</ul>
+
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
  
−
</div>
+
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
  
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:red;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
  
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
  
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    color:#ffd11a;
 +
    text-shadow:1px 1px 10px rgb(153, 153, 255);
 +
    border-left:3px solid rgb(153, 153, 255);
 +
    padding-left:10px !important; 
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
    font-weight:bold;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color: #cc3399;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
}
 +
 +
.content-image{
 +
    color:#F3F7F7 !important;
 +
    font-size:11pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
    width:50vw;
 +
    margin:auto;
 +
    padding-left:60px;
 +
}
 +
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
 +
 +
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 +
 +
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:20px;
 +
    padding-bottom:20px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:8vw;
 +
    width:80%;
 +
    padding-bottom:10px;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:17vw;
 +
    width:50%;
 +
    padding-bottom:10px;
 +
}
 +
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
 +
</style>
 +
</head>
 +
<body>
 +
<h1>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
      <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Vitamin</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">Experiment</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">UV</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>
 +
 +
 +
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2017/6/60/Resultstcfsh.jpeg" class="main-img" width="75%">
 +
  </div>
 +
 +
 +
 +
<!--wiki content-->
 +
 +
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Vitamin Experiment</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/7/75/Vitamin_experiment.png" class="bigphoto" width="70%">
 +
    <p class="content">After we found that UV has an impact on Vitamin, we than wanted to look further inside the relationship between UV and Vitamin. We conducted an experiment on different kinds of bottles and the degradation rate of Vitamin under sunlight. While we visit VEDAN, they told us that most of the refreshing drinks contain lots of Vitamin (especislly Vitamin B) which are easily deteriorated by UV. Generally, manufacturers put their drinks inside brown bottles to protect their product from UV. Than we sent our samples to Food Industry Research and Development Institute(Taiwan) to examine the amount of Vitamin B.</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/c/c8/Vitamin_experiment2.png" class="bigphoto" width="70%">
 +
    <p class="content">However, we also found out that the percentage of Vitamin B remain dropped off rapidly to 30% and 14% in brown bottle and transparent bottle respectively. This result simply means that those refreshing drink need to be protect from UV, and this is time our sticker can show its capabilities.</p>
 +
 +
    <p class="title">Experiment</p>
 +
    <p class="content">Our product aims to reach a high quality of “long-term monitor”, which means considerably stable expression of color is needed. Thus, we choose chromoprotein as our reporter protein due to its steadily expression and low half-life degradation rate. (See more in <a href="https://2008.igem.org/Team:KULeuven/Data/GFP" style="color: orange">here</a>)</p>
 +
    </p>
 +
   
 +
 +
    <p class="content-1">cj-Blue</p>
 +
    <p class="content">We add a LVA tag to cjBlue in order to accelerate its degrade speed. (See more in <a href="https://2014.igem.org/Team:Edinburgh/project/degrons" style="color: orange">here</a>)</p>
 +
    </p>
 +
 +
    <img src="https://static.igem.org/mediawiki/2017/6/6a/Resulttcfsh1.png" class="bigphoto" width="50%">
 +
    <p class="content">Concentration simulation of cjBlue</p>
 +
 +
    <p class="content-1">Chromoprotein</p>
 +
    <p class="content">According to our model of chromoprotein</p>
 +
 +
    <img src="https://static.igem.org/mediawiki/2017/6/6f/Resulttcfsh2.png" class="bigphoto" width="50%">
 +
    <img src="https://static.igem.org/mediawiki/2017/c/c5/Resulttcfsh3.png" class="bigphoto" width="50%">
 +
 +
    <p class="title">Expression</p>
 +
    <p class="content-1">Temperature</p>
 +
    <p class="content">35ﾟC / 37ﾟC / 39ﾟC / 32ﾟC</p>
 +
 +
    <p class="content-1">Chromoprotein o.d. value</p>
 +
    <p class="content"><br>(1)  RFP (E1010): 607nm</br><br>(2) BFP (k592009):588nm</br><br>(3) cjBlue (k592011):610nm</br></p>
 +
 +
    <p class="content-1">Culture Setting</p>
 +
    <p class="content"><br>(1)  32ﾟC, 200rpm, culture12hr (15ml) *continue to log phase</br><br>(2) Add (15ml) LB *re-culture</br><br>(3) TeﾟC, continue cultural</br><br>(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.</br></p>
 +
 +
    <p class="title">UV</p>
 +
    <p class="content-1">Culture setting</p>
 +
    <p class="content"><br>(1)  37ﾟC, 200rpm, culture 12hr (15ml) *continue to log phase</br><br>(2) Add  (15ml) LB *re-culture</br><br>(3) Re-culture at 37ﾟC under UV</br><br>(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.</br></p>
 +
    <p class="content-1">Expression measurement setting</p>
 +
    <p class="content"><br>(1)  Extract:  Take (3ml) bacteria liquid, and centrifuge at 14000rpm, 1min</br><br>(2) Add 1ml PBS, pipetting+vortex</br><br>(3) Measure the O.D. value</br></p>
 +
 +
    <p class="title">Results</p>
 +
    <p class="content">This is the result of the biobrick K2383200 and K2383302. We culture the bacteria for 15 hours. The concentration in the figure is the concentration the bacteria. 100%= the origin liquid. We do dilution to simulate the pass of time. The minimum amount for naked eyes to recognize is 50%.</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/6/6c/Resultstcfshnew.jpeg" class="bigphoto" width="70%">
 +
    <p class="content">                                        </p>
 +
    </div>
 +
</section>
 +
</h1>
 +
 +
 +
 +
<!--JS-->
 +
 +
<script>
 +
 +
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title' );
 +
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
 +
 +
var $nodes =  $( '.node' );
 +
 +
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
 +
 +
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
  $revealBar.height( totalWidth+25 );
 +
  }
 +
 +
})
 +
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)-70}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+500) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
 +
 +
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
 +
 +
 +
 +
$(document).ready(function(
 +
 +
){})
 +
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Latest revision as of 03:48, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Vitamin Experiment

After we found that UV has an impact on Vitamin, we than wanted to look further inside the relationship between UV and Vitamin. We conducted an experiment on different kinds of bottles and the degradation rate of Vitamin under sunlight. While we visit VEDAN, they told us that most of the refreshing drinks contain lots of Vitamin (especislly Vitamin B) which are easily deteriorated by UV. Generally, manufacturers put their drinks inside brown bottles to protect their product from UV. Than we sent our samples to Food Industry Research and Development Institute(Taiwan) to examine the amount of Vitamin B.

However, we also found out that the percentage of Vitamin B remain dropped off rapidly to 30% and 14% in brown bottle and transparent bottle respectively. This result simply means that those refreshing drink need to be protect from UV, and this is time our sticker can show its capabilities.

Experiment

Our product aims to reach a high quality of “long-term monitor”, which means considerably stable expression of color is needed. Thus, we choose chromoprotein as our reporter protein due to its steadily expression and low half-life degradation rate. (See more in here)

cj-Blue

We add a LVA tag to cjBlue in order to accelerate its degrade speed. (See more in here)

Concentration simulation of cjBlue

Chromoprotein

According to our model of chromoprotein

Expression

Temperature

35ﾟC / 37ﾟC / 39ﾟC / 32ﾟC

Chromoprotein o.d. value


(1) RFP (E1010): 607nm

(2) BFP (k592009):588nm

(3) cjBlue (k592011):610nm

Culture Setting


(1) 32ﾟC, 200rpm, culture12hr (15ml) *continue to log phase

(2) Add (15ml) LB *re-culture

(3) TeﾟC, continue cultural

(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.

UV

Culture setting


(1) 37ﾟC, 200rpm, culture 12hr (15ml) *continue to log phase

(2) Add (15ml) LB *re-culture

(3) Re-culture at 37ﾟC under UV

(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.

Expression measurement setting


(1) Extract: Take (3ml) bacteria liquid, and centrifuge at 14000rpm, 1min

(2) Add 1ml PBS, pipetting+vortex

(3) Measure the O.D. value

Results

This is the result of the biobrick K2383200 and K2383302. We culture the bacteria for 15 hours. The concentration in the figure is the concentration the bacteria. 100%= the origin liquid. We do dilution to simulate the pass of time. The minimum amount for naked eyes to recognize is 50%.