Team:SUSTC-Shenzhen-B/lab introduction

From 2012.igem.org

(Difference between revisions)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<meta charset="utf-8" />
+
  <meta charset="utf-8" />
-
<meta name="description" content="" />
+
  <meta name="description" content="" />
-
<meta name="author" content="tengattack" />
+
  <meta name="author" content="tengattack" />
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Title</title>
+
  <title>Title</title>
<style type="text/css">
<style type="text/css">
Line 58: Line 58:
  *
  *
  * Dual licensed under the MIT and GPL licenses:
  * Dual licensed under the MIT and GPL licenses:
-
  * http://www.opensource.org/licenses/mit-license.php
+
  * http://www.opensource.org/licenses/mit-license.php
-
  * http://www.gnu.org/licenses/gpl.html
+
  * http://www.gnu.org/licenses/gpl.html
  *
  *
  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
Line 65: Line 65:
;(function($){
;(function($){
-
$.fn.superfish = function(op){
+
  $.fn.superfish = function(op){
-
var sf = $.fn.superfish,
+
    var sf = $.fn.superfish,
-
c = sf.c,
+
      c = sf.c,
-
$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
+
      $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
-
over = function(){
+
      over = function(){
-
var $$ = $(this), menu = getMenu($$);
+
        var $$ = $(this), menu = getMenu($$);
-
clearTimeout(menu.sfTimer);
+
        clearTimeout(menu.sfTimer);
-
$$.showSuperfishUl().siblings().hideSuperfishUl();
+
        $$.showSuperfishUl().siblings().hideSuperfishUl();
-
},
+
      },
-
out = function(){
+
      out = function(){
-
var $$ = $(this), menu = getMenu($$), o = sf.op;
+
        var $$ = $(this), menu = getMenu($$), o = sf.op;
-
clearTimeout(menu.sfTimer);
+
        clearTimeout(menu.sfTimer);
-
menu.sfTimer=setTimeout(function(){
+
        menu.sfTimer=setTimeout(function(){
-
o.retainPath=($.inArray($$[0],o.$path)>-1);
+
          o.retainPath=($.inArray($$[0],o.$path)>-1);
-
$$.hideSuperfishUl();
+
          $$.hideSuperfishUl();
-
//if (o.$path.length &amp;&amp; $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+
          //if (o.$path.length &amp;&amp; $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
-
if (o.$path.length) {
+
          if (o.$path.length) {
-
if ($$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+
            if ($$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
-
}
+
          }
-
},o.delay);
+
        },o.delay);  
-
},
+
      },
-
getMenu = function($menu){
+
      getMenu = function($menu){
-
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
+
        var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
-
sf.op = sf.o[menu.serial];
+
        sf.op = sf.o[menu.serial];
-
return menu;
+
        return menu;
-
},
+
      },
-
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
+
      addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
-
+
     
-
return this.each(function() {
+
    return this.each(function() {
-
var s = this.serial = sf.o.length;
+
      var s = this.serial = sf.o.length;
-
var o = $.extend({},sf.defaults,op);
+
      var o = $.extend({},sf.defaults,op);
-
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
+
      o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
-
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
+
        $(this).addClass([o.hoverClass,c.bcClass].join(' '))
-
.filter('li:has(ul)').removeClass(o.pathClass);
+
          .filter('li:has(ul)').removeClass(o.pathClass);
-
});
+
      });
-
sf.o[s] = sf.op = o;
+
      sf.o[s] = sf.op = o;
-
var bcheck = false;
+
      var bcheck = false;
-
if ($.fn.hoverIntent) {
+
      if ($.fn.hoverIntent) {
-
if (!o.disableHI) bcheck = true;
+
        if (!o.disableHI) bcheck = true;
-
}
+
      }
-
$('li:has(ul)',this)[(bcheck) ? 'hoverIntent' : 'hover'](over,out).each(function() {
+
      $('li:has(ul)',this)[(bcheck) ? 'hoverIntent' : 'hover'](over,out).each(function() {
-
if (o.autoArrows) addArrow( $('>a:first-child',this) );
+
        if (o.autoArrows) addArrow( $('>a:first-child',this) );
-
})
+
      })
-
.not('.'+c.bcClass)
+
      .not('.'+c.bcClass)
-
.hideSuperfishUl();
+
        .hideSuperfishUl();
-
+
     
-
var $a = $('a',this);
+
      var $a = $('a',this);
-
$a.each(function(i){
+
      $a.each(function(i){
-
var $li = $a.eq(i).parents('li');
+
        var $li = $a.eq(i).parents('li');
-
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
+
        $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
-
});
+
      });
-
o.onInit.call(this);
+
      o.onInit.call(this);
-
+
     
-
}).each(function() {
+
    }).each(function() {
-
var menuClasses = [c.menuClass];
+
      var menuClasses = [c.menuClass];
-
//if (sf.op.dropShadows  &amp;&amp; !($.browser.msie &amp;&amp; $.browser.version < 7)) menuClasses.push(c.shadowClass);
+
      //if (sf.op.dropShadows  &amp;&amp; !($.browser.msie &amp;&amp; $.browser.version < 7)) menuClasses.push(c.shadowClass);
-
if (sf.op.dropShadows) if (!$.browser.msie) if (!($.browser.version < 7)) menuClasses.push(c.shadowClass);
+
      if (sf.op.dropShadows) if (!$.browser.msie) if (!($.browser.version < 7)) menuClasses.push(c.shadowClass);
-
$(this).addClass(menuClasses.join(' '));
+
      $(this).addClass(menuClasses.join(' '));
-
});
+
    });
-
};
+
  };
-
var sf = $.fn.superfish;
+
  var sf = $.fn.superfish;
-
sf.o = [];
+
  sf.o = [];
-
sf.op = {};
+
  sf.op = {};
-
sf.IE7fix = function(){
+
  sf.IE7fix = function(){
-
var o = sf.op;
+
    var o = sf.op;
-
//if ($.browser.msie &amp;&amp; $.browser.version > 6 &amp;&amp; o.dropShadows &amp;&amp; o.animation.opacity!=undefined)
+
    //if ($.browser.msie &amp;&amp; $.browser.version > 6 &amp;&amp; o.dropShadows &amp;&amp; o.animation.opacity!=undefined)
-
if ($.browser.msie) if($.browser.version > 6) if (o.dropShadows) if (o.animation.opacity!=undefined)
+
    if ($.browser.msie) if($.browser.version > 6) if (o.dropShadows) if (o.animation.opacity!=undefined)
-
this.toggleClass(sf.c.shadowClass+'-off');
+
      this.toggleClass(sf.c.shadowClass+'-off');
-
};
+
    };
-
sf.c = {
+
  sf.c = {
-
bcClass    : 'sf-breadcrumb',
+
    bcClass    : 'sf-breadcrumb',
-
menuClass  : 'sf-js-enabled',
+
    menuClass  : 'sf-js-enabled',
-
anchorClass : 'sf-with-ul',
+
    anchorClass : 'sf-with-ul',
-
arrowClass  : 'sf-sub-indicator',
+
    arrowClass  : 'sf-sub-indicator',
-
shadowClass : 'sf-shadow'
+
    shadowClass : 'sf-shadow'
-
};
+
  };
-
sf.defaults = {
+
  sf.defaults = {
-
hoverClass : 'sfHover',
+
    hoverClass : 'sfHover',
-
pathClass : 'overideThisToUse',
+
    pathClass : 'overideThisToUse',
-
pathLevels : 1,
+
    pathLevels : 1,
-
delay : 800,
+
    delay   : 800,
-
animation : {opacity:'show'},
+
    animation : {opacity:'show'},
-
speed : 'normal',
+
    speed   : 'normal',
-
autoArrows : true,
+
    autoArrows : true,
-
dropShadows : true,
+
    dropShadows : true,
-
disableHI : false, // true disables hoverIntent detection
+
    disableHI : false,   // true disables hoverIntent detection
-
onInit : function(){}, // callback functions
+
    onInit   : function(){}, // callback functions
-
onBeforeShow: function(){},
+
    onBeforeShow: function(){},
-
onShow : function(){},
+
    onShow   : function(){},
-
onHide : function(){}
+
    onHide   : function(){}
-
};
+
  };
-
$.fn.extend({
+
  $.fn.extend({
-
hideSuperfishUl : function(){
+
    hideSuperfishUl : function(){
-
var o = sf.op,
+
      var o = sf.op,
-
not = (o.retainPath===true) ? o.$path : '';
+
        not = (o.retainPath===true) ? o.$path : '';
-
o.retainPath = false;
+
      o.retainPath = false;
-
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
+
      var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
-
.find('>ul').hide().css('visibility','hidden');
+
          .find('>ul').hide().css('visibility','hidden');
-
o.onHide.call($ul);
+
      o.onHide.call($ul);
-
return this;
+
      return this;
-
},
+
    },
-
showSuperfishUl : function(){
+
    showSuperfishUl : function(){
-
var o = sf.op,
+
      var o = sf.op,
-
sh = sf.c.shadowClass+'-off',
+
        sh = sf.c.shadowClass+'-off',
-
$ul = this.addClass(o.hoverClass)
+
        $ul = this.addClass(o.hoverClass)
-
.find('>ul:hidden').css('visibility','visible');
+
          .find('>ul:hidden').css('visibility','visible');
-
sf.IE7fix.call($ul);
+
      sf.IE7fix.call($ul);
-
o.onBeforeShow.call($ul);
+
      o.onBeforeShow.call($ul);
-
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
+
      $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
-
return this;
+
      return this;
-
}
+
    }
-
});
+
  });
})(jQuery);
})(jQuery);
Line 188: Line 188:
  *
  *
  * Dual licensed under the MIT and GPL licenses:
  * Dual licensed under the MIT and GPL licenses:
-
  * http://www.opensource.org/licenses/mit-license.php
+
  * http://www.opensource.org/licenses/mit-license.php
-
  * http://www.gnu.org/licenses/gpl.html
+
  * http://www.gnu.org/licenses/gpl.html
  *
  *
  *
  *
Line 200: Line 200:
(function($){ // $ will refer to jQuery within this closure
(function($){ // $ will refer to jQuery within this closure
-
$.fn.supersubs = function(options){
+
  $.fn.supersubs = function(options){
-
var opts = $.extend({}, $.fn.supersubs.defaults, options);
+
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
-
// return original object to support chaining
+
    // return original object to support chaining
-
return this.each(function() {
+
    return this.each(function() {
-
// cache selections
+
      // cache selections
-
var $$ = $(this);
+
      var $$ = $(this);
-
// support metadata
+
      // support metadata
-
var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
+
      var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
-
// get the font size of menu.
+
      // get the font size of menu.
-
// .css('fontSize') returns various results cross-browser, so measure an em dash instead
+
      // .css('fontSize') returns various results cross-browser, so measure an em dash instead
-
var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
+
      var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
-
'padding' : 0,
+
        'padding' : 0,
-
'position' : 'absolute',
+
        'position' : 'absolute',
-
'top' : '-999em',
+
        'top' : '-999em',
-
'width' : 'auto'
+
        'width' : 'auto'
-
}).appendTo($$).width(); //clientWidth is faster, but was incorrect here
+
      }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
-
// remove em dash
+
      // remove em dash
-
$('#menu-fontsize').remove();
+
      $('#menu-fontsize').remove();
-
// cache all ul elements
+
      // cache all ul elements
-
$ULs = $$.find('ul');
+
      $ULs = $$.find('ul');
-
// loop through each ul in menu
+
      // loop through each ul in menu
-
$ULs.each(function(i) {
+
      $ULs.each(function(i) {  
-
// cache this ul
+
        // cache this ul
-
var $ul = $ULs.eq(i);
+
        var $ul = $ULs.eq(i);
-
// get all (li) children of this ul
+
        // get all (li) children of this ul
-
var $LIs = $ul.children();
+
        var $LIs = $ul.children();
-
// get all anchor grand-children
+
        // get all anchor grand-children
-
var $As = $LIs.children('a');
+
        var $As = $LIs.children('a');
-
// force content to one line and save current float property
+
        // force content to one line and save current float property
-
var liFloat = $LIs.css('white-space','nowrap').css('float');
+
        var liFloat = $LIs.css('white-space','nowrap').css('float');
-
// remove width restrictions and floats so elements remain vertically stacked
+
        // remove width restrictions and floats so elements remain vertically stacked
-
var emWidth = $ul.add($LIs).add($As).css({
+
        var emWidth = $ul.add($LIs).add($As).css({
-
'float' : 'none',
+
          'float' : 'none',
-
'width' : 'auto'
+
          'width' : 'auto'
-
})
+
        })
-
// this ul will now be shrink-wrapped to longest li due to position:absolute
+
        // this ul will now be shrink-wrapped to longest li due to position:absolute
-
// so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
+
        // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
-
.end().end()[0].clientWidth / fontsize;
+
        .end().end()[0].clientWidth / fontsize;
-
// add more width to ensure lines don't turn over at certain sizes in various browsers
+
        // add more width to ensure lines don't turn over at certain sizes in various browsers
-
emWidth += o.extraWidth;
+
        emWidth += o.extraWidth;
-
// restrict to at least minWidth and at most maxWidth
+
        // restrict to at least minWidth and at most maxWidth
-
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; }
+
        if (emWidth > o.maxWidth)   { emWidth = o.maxWidth; }
-
else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
+
        else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
-
emWidth += 'em';
+
        emWidth += 'em';
-
// set ul to width in ems
+
        // set ul to width in ems
-
$ul.css('width',emWidth);
+
        $ul.css('width',emWidth);
-
// restore li floats to avoid IE bugs
+
        // restore li floats to avoid IE bugs
-
// set li width to full width of this ul
+
        // set li width to full width of this ul
-
// revert white-space to normal
+
        // revert white-space to normal
-
$LIs.css({
+
        $LIs.css({
-
'float' : liFloat,
+
          'float' : liFloat,
-
'width' : '100%',
+
          'width' : '100%',
-
'white-space' : 'normal'
+
          'white-space' : 'normal'
-
})
+
        })
-
// update offset position of descendant ul to reflect new width of parent
+
        // update offset position of descendant ul to reflect new width of parent
-
.each(function(){
+
        .each(function(){
-
var $childUl = $('>ul',this);
+
          var $childUl = $('>ul',this);
-
var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
+
          var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
-
$childUl.css(offsetDirection,emWidth);
+
          $childUl.css(offsetDirection,emWidth);
-
});
+
        });
-
});
+
      });
-
+
     
-
});
+
    });
-
};
+
  };
-
// expose defaults
+
  // expose defaults
-
$.fn.supersubs.defaults = {
+
  $.fn.supersubs.defaults = {
-
minWidth : 9, // requires em unit.
+
    minWidth   : 9,   // requires em unit.
-
maxWidth : 25, // requires em unit.
+
    maxWidth   : 25,   // requires em unit.
-
extraWidth : 0 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
+
    extraWidth   : 0     // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
-
};
+
  };
-
+
 
})(jQuery); // plugin code ends
})(jQuery); // plugin code ends
Line 277: Line 277:
// custom.js
// custom.js
jQuery(document).ready(function(){
jQuery(document).ready(function(){
-
+
 
-
//Add Class Js to html
+
  //Add Class Js to html
-
jQuery('html').addClass('js');
+
  jQuery('html').addClass('js');
-
+
               
     //=================================== MENU ===================================//
     //=================================== MENU ===================================//
     jQuery("ul.sf-menu").supersubs({  
     jQuery("ul.sf-menu").supersubs({  
-
minWidth : 12, // requires em unit.
+
  minWidth   : 12,   // requires em unit.
-
maxWidth : 17, // requires em unit.
+
  maxWidth   : 17,   // requires em unit.
-
extraWidth : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
+
  extraWidth   : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
                           // due to slight rounding differences and font-family  
                           // due to slight rounding differences and font-family  
     }).superfish();  // call supersubs first, then superfish, so that subs are  
     }).superfish();  // call supersubs first, then superfish, so that subs are  
                     // not display:none when measuring. Call before initialising  
                     // not display:none when measuring. Call before initialising  
                     // containing tabs for same reason.
                     // containing tabs for same reason.
-
+
 
-
//=================================== TABS AND TOGGLE ===================================//
+
  //=================================== TABS AND TOGGLE ===================================//
-
//jQuery tab
+
  //jQuery tab
-
jQuery(".tab-content").hide(); //Hide all content
+
  jQuery(".tab-content").hide(); //Hide all content
-
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
+
  jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
-
jQuery(".tab-content:first").show(); //Show first tab content
+
  jQuery(".tab-content:first").show(); //Show first tab content
-
//On Click Event
+
  //On Click Event
-
jQuery("ul.tabs li").click(function() {
+
  jQuery("ul.tabs li").click(function() {
-
jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
+
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
-
jQuery(this).addClass("active"); //Add "active" class to selected tab
+
    jQuery(this).addClass("active"); //Add "active" class to selected tab
-
jQuery(".tab-content").hide(); //Hide all tab content
+
    jQuery(".tab-content").hide(); //Hide all tab content
-
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
+
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
-
jQuery(activeTab).fadeIn(200); //Fade in the active content
+
    jQuery(activeTab).fadeIn(200); //Fade in the active content
-
return false;
+
    return false;
-
});
+
  });
-
+
 
-
//jQuery toggle
+
  //jQuery toggle
-
jQuery(".toggle_container").hide();
+
  jQuery(".toggle_container").hide();
-
jQuery("h2.trigger").click(function(){
+
  jQuery("h2.trigger").click(function(){
-
jQuery(this).toggleClass("active").next().slideToggle("slow");
+
    jQuery(this).toggleClass("active").next().slideToggle("slow");
-
});
+
  });
-
+
 
-
+
 
});
});
Line 384: Line 384:
</head>
</head>
<body>
<body>
-
<div id="bodychild">
+
  <div id="bodychild">
-
<div id="outercontainer">
+
  <div id="outercontainer">
-
   
+
     
         <!-- HEADER -->
         <!-- HEADER -->
         <div id="outerheader">
         <div id="outerheader">
             <header id="top">
             <header id="top">
-
           
+
             
                 <section id="navigation">
                 <section id="navigation">
                     <nav>
                     <nav>
                         <ul id="topnav" class="sf-menu">
                         <ul id="topnav" class="sf-menu">
                             <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B">Home</a></li>
                             <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B">Home</a></li>
-
                             <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Software</a>
+
                             <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/project.overview">Project Overview</a></li>
-
                            <ul>
+
                            <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/introduction">Software</a>
-
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/lab%20introduction">Overview</a></li>
+
                              <ul>
 +
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/introduction">Overview</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/algorithm">Algorithm</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/algorithm">Algorithm</a></li>
-
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/achievements">Achievements</a></li>
+
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/achievements">Results</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/Download">Download</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/Download">Download</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/comment">Comment</a></li>
                                     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/comment">Comment</a></li>
Line 434: Line 435:
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/august">August</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/august">August</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/September">September</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/September">September</a></li>
-
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/October">October</a></li>
+
                                    
                               </ul>
                               </ul>
                             </li>
                             </li>
Line 443: Line 444:
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/high.school.visits">High School Visits</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/high.school.visits">High School Visits</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/SynBio.intro">SynBio Intro</a></li>
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/SynBio.intro">SynBio Intro</a></li>
-
                                   <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/October">October</a></li>
+
                                    
                               </ul>
                               </ul>
                             </li>
                             </li>
Line 449: Line 450:
                     </nav><!-- nav -->
                     </nav><!-- nav -->
                      
                      
-
                    <ul id="sn">
+
                 
-
                    <li><a href="http://twitter.com" title="Twitter"><span class="icon-img" style="background:url(/wiki/images/1/1a/Sustc-b1-social-twitter.png)"></span></a></li>
+
-
                        <li><a href="http://plus.google.com" title="Google+"><span class="icon-img" style="background:url(/wiki/images/7/70/Sustc-b1-social-google.png)"></span></a></li>
+
-
                        <li><a href="http://facebook.com" title="Facebook"><span class="icon-img" style="background:url(/wiki/images/a/a7/Sustc-b1-social-facebook.png)"></span></a></li>
+
-
                        <li><a href="http://pinterest.com" title="pinterest"><span class="icon-img" style="background:url(/wiki/images/b/bb/Sustc-b1-social-pinterest.png)"></span></a></li>
+
-
                    </ul>
+
                     <div class="clear"></div>
                     <div class="clear"></div>
                 </section>
                 </section>
                 <div class="nav-shadow"></div>
                 <div class="nav-shadow"></div>
-
                 <div id="logo" class="frontpage"><a href="#"><img src="/wiki/images/c/c2/Sustc-b1-logo-koinowana.png" alt=""></a></div>
+
                 <div id="logo" class="frontpage"><a href="#"><img src="https://static.igem.org/mediawiki/2012/3/3a/Tihuan.JPG" alt=""></a></div>
                 <div class="clear"></div>
                 <div class="clear"></div>
             </header>
             </header>
Line 466: Line 462:
         <!-- MAIN CONTENT -->
         <!-- MAIN CONTENT -->
         <div id="outermain">
         <div id="outermain">
-
        <div id="maincontent">
+
          <div id="maincontent">
-
        <section id="mainthecontent">
+
          <section id="mainthecontent">
              
              
-
<article>
+
        <article>
-
                                <h1>Introduction</h1>
+
                              <h1><p>Introduction to the Lab Work</p></h1>
-
<h3 class="STYLE10">Transcription：</h3>
+
-
<p>The transcription stage, the reading of genetic information from DNA, is composed of promoter binding and the activation of RNA polymerase, RNA transcript initiation and promoter escape, RNA transcript elongation, and transcript termination, and release. </p>
+
-
<br>
+
-
                <h3 class="STYLE10">What is terminator?</h3>
+
-
<p>Terminators are genetic parts that usually occur at the end of a gene or operon and cause transcription to stop. In prokaryotes, terminators usually fall into two categories (1) rho-independent terminators and (2) rho-dependent terminators.</p>
+
-
<p>Rho-independent terminators are generally composed of palindromic sequence that forms a stem loop rich in G-C base pairs followed by several T bases. The conventional model of transcriptional termination is that the stem loop causes RNA polymerase to pause and transcription of the poly-A tail causes the RNA:DNA duplex to unwind and dissociate from RNA polymerase.
+
-
</p>
+
-
<br>
+
-
              <h3 class="STYLE10">Terminator Efficiency：</h3>
+
-
<p>Although terminators are positioned at the ends of genes, they also play irreplaceable roles. It is important that transcription is imperfectly terminated at some terminator so that the ratio of the amount of the mRNA transcribed from upstream and that from downstream of the terminator is controlled. This regulation is qualified by the termination efficiency.</p>
+
-
<br>
+
-
+
-
                </article>
+
-
<div class="col col13 no_margin_right">
 
-
                <h2><p>Explanations</p></h2>
 
-
                <img src="https://static.igem.org/mediawiki/2012/e/e9/Transcription.jpg" alt="" class="img_fl img_border" /> 
 
-
<p>The process of transcription</p>
 
-
<br>
 
-
                <img src="https://static.igem.org/mediawiki/2012/1/15/Second_structure.JPG " alt="" class="img_fl img_border" />
 
-
<p>the secondary structure of terminator</p>
 
-
                  
+
                 <h3 class="STYLE10">Objective</h3>
-
                 <div class="clear"></div>
+
                 <p>The goal of our wet lab work is to validate our software prediction. Since the terminator efficiency data available in literatures is very limited, we designed 100 terminators through the knowledge of terminator structure, and designed an experiment to measure terminator efficiency. By analyzing experiment results, we can adjust the parameters in our model to make it more accurate.</p>
-
<div class="separator line"></div>
+
 
 +
<h3 class="STYLE10">1, How to measure efficiency:</h3>
 +
 
 +
                <img src="https://static.igem.org/mediawiki/2012/6/62/Project.introduction.3JPG.JPG" alt="" class="img_fl img_border" />
 +
<p>The figure above shows the plasmid designed to measure terminator efficiency. The terminator to be characterized would be flanked by gene sequences of two fluorescent proteins, GFP and RFP. By using flow cytometry, we could measure the fluorescence strength of GFP and RFP, so as to measure the terminator efficiency. </p>
 +
 
 +
The terminator efficiency of a terminator is calculated with the formula:
 +
<p> E = 1- S/T </p>
 +
<p>where S is the fluorescence strength of GFP with terminator, and T is the fluorescence strength of GFP without terminator, which is the baseline strength.</p>
 +
         
 +
 
 +
<a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B/plasmid_construction"><b>2. Plasmid Construction</b></a>
 +
 
 +
 
 +
 
 +
<h3 class="STYLE10">3. Fluorescence strength quantification</h3>
 +
<p>We used flow cytometer to measured the fluorescence strength. Laser was used to be the luminous source and then radiated perpendicular to the sample flow. Under the irradiation of laser, cells expressed fluorescent protein. We calculated the average expression level of those cells and got the average strength of GFP. We also used fluorescence microscope to take a picture of bacterial culture.  </p>
 +
 
 +
<h3 class="STYLE10">4. Agreement with theoretical prediction</h3>
 +
<P> According to our experiment measured terminator efficiencies and our software predicted d scores, we created a fit curve to relate all the data. The corelation coefficient is 0.8. So we have achieved a good agreement between experimental efficiency and TTEC predicted efficiency.</P>
 +
 
 +
<h3 class="STYLE10">5. Technical Standard</h3>
 +
<P>Our terminator efficiency measurement protocol has been submitted to Biobrick foundation as a technical standard(BBF RFC 90).</P>
 +
 
 +
 
 +
<br>
 +
         
 +
                </article>
-
<article class="row">
 
-
                    <div class="one_fourth">
 
-
                        <span class="dropcap4">1</span>
 
-
                        <h4>Design Ideas</h4>
 
-
                        <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
 
-
                    </div>
 
-
                    <div class="one_fourth">
 
-
                    <span class="dropcap4">2</span>
 
-
                        <h4>Problem Areas</h4>
 
-
                        <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
 
-
                    </div>
 
-
                    <div class="one_fourth">
 
-
                    <span class="dropcap4">3</span>
 
-
                        <h4>Green Garden</h4>
 
-
                        <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
 
-
                    </div>
 
-
                    <div class="one_fourth lastcols">
 
-
                    <span class="dropcap4">4</span>
 
-
                        <h4>Planting Areas</h4>
 
-
                        <p>Pellentesque enim lacus, viverra eu egestas vel, imperdiet non felis. Aliquam erat volutpat. Nullam facilisis aliquet eleifend.</p>
 
-
                    </div>
 
-
        </article>
 
                 <div class="clear"></div>
                 <div class="clear"></div>
             </section>
             </section>
Line 529: Line 510:
         <!-- FOOTER -->
         <!-- FOOTER -->
         <div id="outerfooter">
         <div id="outerfooter">
-
        <div id="footercontainer">
+
          <div id="footercontainer">
-
            <footer id="footer">Downloaded from KickassGFX.net. Theme design by <a href="http://www.kickassgfx.net/">kickassgfx.net</a></footer>
+
              <footer id="footer">South University of Science and Technology of China</footer>
             </div>
             </div>
         </div>
         </div>
Line 536: Line 517:
          
          
         <div class="clear"></div>
         <div class="clear"></div>
-
</div> <!-- end outercontainer -->
+
  </div> <!-- end outercontainer -->
      
      
</div> <!-- end bodychild -->
</div> <!-- end bodychild -->

Latest revision as of 03:22, 27 October 2012

Title

Introduction to the Lab Work

Objective

The goal of our wet lab work is to validate our software prediction. Since the terminator efficiency data available in literatures is very limited, we designed 100 terminators through the knowledge of terminator structure, and designed an experiment to measure terminator efficiency. By analyzing experiment results, we can adjust the parameters in our model to make it more accurate.

1, How to measure efficiency:

The figure above shows the plasmid designed to measure terminator efficiency. The terminator to be characterized would be flanked by gene sequences of two fluorescent proteins, GFP and RFP. By using flow cytometry, we could measure the fluorescence strength of GFP and RFP, so as to measure the terminator efficiency.

The terminator efficiency of a terminator is calculated with the formula:

E = 1- S/T

where S is the fluorescence strength of GFP with terminator, and T is the fluorescence strength of GFP without terminator, which is the baseline strength.

2. Plasmid Construction

3. Fluorescence strength quantification

We used flow cytometer to measured the fluorescence strength. Laser was used to be the luminous source and then radiated perpendicular to the sample flow. Under the irradiation of laser, cells expressed fluorescent protein. We calculated the average expression level of those cells and got the average strength of GFP. We also used fluorescence microscope to take a picture of bacterial culture.

4. Agreement with theoretical prediction

According to our experiment measured terminator efficiencies and our software predicted d scores, we created a fit curve to relate all the data. The corelation coefficient is 0.8. So we have achieved a good agreement between experimental efficiency and TTEC predicted efficiency.

5. Technical Standard

Our terminator efficiency measurement protocol has been submitted to Biobrick foundation as a technical standard(BBF RFC 90).


South University of Science and Technology of China

Retrieved from "http://2012.igem.org/Team:SUSTC-Shenzhen-B/lab_introduction"