Difference between revisions of "Team:Fudan-TSI/Demonstrate"

(Undo revision 470845 by Wave (talk))
m
 
(30 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{Fudan-TSI}}
+
{{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 -->
<html>
+
<html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8">
 
+
  <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
 
+
  <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
<script>
+
  <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" />
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
$(document).ready(function() {
+
 
+
//remove the HQ_page id
+
$("#HQ_page").attr('id','');
+
+
 
+
//highlight current page on the menu
+
highlight_current_page_menu();
+
+
//accessing submenus
+
$(".menu_item").click(function(){
+
$(".submenu_control_icon", this).toggleClass("open");
+
$(this).next(".submenu").fadeToggle(400);
+
});
+
+
//mobile menu access
+
$(".igem_2019_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
+
var page_url="https://2019.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
+
}
+
}
+
 
+
 
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
</script>
+
 
+
 
+
 
<style>
 
<style>
/**************************************************************************************************************************************************************************************************/
+
/*****************************************************************************/
 
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
 
/* DEFAULT WIKI SETTINGS */
 
/* DEFAULT WIKI SETTINGS */
/**************************************************************************************************************************************************************************************************/
+
/*****************************************************************************/
 
+
  #home_logo, #sideMenu { display:none; }
 
+
  #sideMenu, #top_title, .patrollink { display:none; }
#home_logo, #sideMenu { display:none; }
+
  #content { margin-left: 0; padding:0px; width:100%;}
#sideMenu, #top_title, .patrollink {display:none;}
+
  .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; }
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
/* css clean * */
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  #FudanTSIBody li { list-style: none; }
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
    </style>
+
    <title>Demonstration | 2019 iGEM Team:Fudan-TSI</title>
+
</head>
 
+
<body>
 
+
<div id="FudanTSIdivWrapper"><div id="FudanTSIBody">
/**************************************************************************************************************************************************************************************************/
+
  <header>
/* MENU */
+
  <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right">
/**************************************************************************************************************************************************************************************************/
+
    <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human&nbsp;practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li>
 
+
    <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
/*wrapping for the menu*/
+
    <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav>
.igem_2019_team_menu {  
+
  <!-- Dropdown and List elements in navigation bar -->
background-color:#cecece;
+
  <ul id="dropdown1" class="dropdown-content">
border-left: 1px solid #635d5d;
+
      <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
float:right;
+
      <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
height:100vh;
+
      <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
max-width: 270px;
+
      <li><a href="/Team:Fudan-TSI/Applied_Design">Applied&nbsp;design</a></li>
overflow-y: auto;
+
  </ul>
overflow-x: hidden;
+
  <ul id="dropdown2" class="dropdown-content">
padding:0px;
+
      <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse&nbsp;transcription</a></li>
position:fixed;
+
      <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li>
right:0%;
+
      <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
text-align:left;
+
      <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
width: 15%;  
+
      <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
}
+
  </ul>
 
+
  <ul id="dropdown3" class="dropdown-content">
/*controlling menu visibility*/
+
      <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
.igem_2019_team_menu.displaying_menu{
+
      <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
display:block;
+
      <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
}
+
  </ul>
 
+
  <ul id="dropdown4" class="dropdown-content">
/*links in the menu*/
+
      <li><a href="/Team:Fudan-TSI/Basic_Part">Basic&nbsp;parts</a></li>
.igem_2019_team_menu  a {
+
      <li><a href="/Team:Fudan-TSI/Composite_Part">Composite&nbsp;parts</a></li>
color: #484848;
+
      <li><a href="/Team:Fudan-TSI/Improve">Part&nbsp;improvement</a></li>
text-decoration:none;
+
      <li><a href="/Team:Fudan-TSI/Part_Collection">Part&nbsp;collection</a></li>
}
+
  </ul>
 
+
  <ul id="dropdown5" class="dropdown-content">
/*images in the menu*/
+
      <li><a href="/Team:Fudan-TSI/Public_Engagement">Public&nbsp;engagement</a></li>
.igem_2019_team_menu img {
+
      <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated&nbsp;HP</a></li>
width:100%;
+
      <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
}
+
      <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
 
+
  </ul>
/*level 1 menu items*/
+
  <ul id="dropdown6" class="dropdown-content">
.igem_2019_team_menu .menu_item {
+
      <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
    background-color: #cecece;
+
      <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
    border-bottom: 1px solid #635d5d;
+
      <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li>
    clear: both;
+
      <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li>
color: #484848;
+
  </ul>
    cursor: pointer;
+
float: left;
+
    font-size: 120%;
+
    font-weight: bold;
+
    padding: 15px 0px 15px 5%;
+
  width: 100%;
+
}
+
 
+
/*level 1 menu items without submenus*/
+
.igem_2019_team_menu .menu_item.direct_link {
+
color: #484848;
+
padding-left: 15%;
+
}
+
 
+
+
/*level 1 menu items on hover*/
+
.igem_2019_team_menu .menu_item:hover {
+
background-color: #ecb656 !important;
+
}
+
 
+
/*icon for expanding and collapsing level 1 menut items*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon {
+
color: #484848;
+
float: left;
+
width: 10%;
+
}
+
 
+
/* submenu icon  "-"*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
+
content: "+";
+
}
+
 
+
/* submenu icon  "-"*/
+
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
+
content: "-";
+
}
+
 
+
+
/*level 2 menu (submenu) wrapper*/
+
.igem_2019_team_menu .submenu{
+
background-color: #ececec;
+
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
 
+
/*level 2 menu (submenu) item*/
+
.igem_2019_team_menu .submenu .submenu_item {
+
border-bottom: 1px solid #cecece;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
 
+
/*level 2 menu (submenu) items on hover*/
+
.igem_2019_team_menu .submenu .submenu_item:hover {
+
background-color: #ecb656 !important;
+
}
+
 
+
/*color for highlighting current page on the wiki*/
+
.igem_2019_team_menu .submenu .submenu_item.current_page,
+
.igem_2019_team_menu .menu_item.current_page,
+
.igem_2019_team_menu .menu_item.direct_link.current_page {
+
background-color:#a2d3d0;
+
}
+
 
+
 
+
/*mobile menu bar styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*mobile bar that controls the menu*/
+
.igem_2019_team_mobile_bar {
+
background-color:#ececec;
+
border-bottom: 1px solid #cecece;
+
cursor:pointer;
+
display:none;
+
float:left;
+
margin-top: 0;
+
padding: 5px 0;
+
position:fixed;
+
width:100%;
+
}
+
+
/*mobile logo*/
+
.igem_logo_mobile {
+
float:left;
+
padding-left: 5%;
+
width: 30%;
+
}
+
 
+
/*image within the mobile logo*/
+
.igem_logo_mobile img {
+
width:70px;
+
}
+
+
/*mobile expand collapse button*/
+
.igem_menu_control_mobile {
+
float:right;
+
padding-right:5%;
+
padding-top:5px;
+
text-align:right;
+
width: 30%;
+
}
+
 
+
/*image for mobile expand collapse button*/
+
.igem_menu_control_mobile img {
+
width:25px;
+
}
+
 
+
 
+
/*add extra padding to the menu to improve mobile scrolling*/
+
.menu_padding{
+
float:left;
+
height:100px;
+
}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* CONTENT OF THE PAGE */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/* general wrapper for the content */
+
.igem_2019_team_content {
+
background-color:white;
+
display:block;
+
width: 87%;
+
}
+
 
+
/* subwrapper to center content */
+
.igem_2019_team_content .igem_2019_team_column_wrapper {
+
margin:auto;
+
max-width: 1400px;
+
width:90%;
+
}
+
 
+
 
+
 
+
/*general styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*size for title h tags*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
+
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
+
 
+
 
+
/*titles h1, h2*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
+
border-bottom:0px;
+
color: white;
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 10px 0px;
+
}
+
 
+
/*titles h3, h3, h5, h6 */
+
.igem_2019_team_content .igem_2019_team_column_wrapper h3,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h4,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h5,
+
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {
+
border-bottom:0px;
+
color: white; 
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 5px 0px;
+
}
+
 
+
/* text p tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper p {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding: 5px 0px;
+
text-align: left;
+
color: white;
+
}
+
 
+
/* Links a tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper a {
+
color: #00a19b;
+
font-weight: bold;
+
text-decoration: underline;
+
text-decoration-color:#00a19b;
+
transition: all 0.4s ease;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
+
color: #085156;
+
text-decoration:none;
+
}
+
 
+
 
+
/* Table tag*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper table {
+
border: 1px solid #635d5d;
+
border-collapse: collapse;
+
font-size: 130%;
+
width: 100%;
+
}
+
 
+
/* table cells */
+
.igem_2019_team_content .igem_2019_team_column_wrapper td {
+
border: 1px solid #cecece;
+
border-collapse: collapse;
+
font-size: 105%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
/* table headers */
+
.igem_2019_team_content .igem_2019_team_column_wrapper th {
+
background-color:#cecece;
+
border: 1px solid #635d5d;
+
border-collapse: collapse;
+
font-size: 110%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
 
+
 
+
/* non numbered lists */
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding:0px 20px;
+
}
+
 
+
 
+
/*font sizing within list nesting*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
+
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
 
+
 
+
 
+
/*layout classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*main layout class */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {
+
float:left;
+
margin: 1% 2%;
+
padding: 0px;
+
}
+
 
+
/* 100% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
+
 
+
/* 66% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
 
+
/* 33% */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
+
 
+
 
+
 
+
 
+
/*all images*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
+
margin-bottom: 15px;
+
width: 100%;
+
}
+
 
+
 
+
/* page break */
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
+
clear:both;
+
}
+
/*add extra space to page break with clear class*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
+
height: 30px;
+
}
+
 
+
/* horizontal line to divide the page*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
+
    border-top: 1px solid #cecece;
+
  margin: auto;
+
  width: 98%;
+
}
+
 
+
 
+
 
+
+
/*support classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/*Button  */
+
/************************************************/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
+
font-size: 130%;
+
margin: 30px auto;
+
text-align: center;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a {
+
background-color: #00a19bad !important;
+
color: #000 !important;
+
font-weight: bold;
+
margin: auto;
+
text-decoration: none !important;
+
padding: 10px 15px !important;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
+
background-color: #ffb819 !important;  
+
}
+
 
+
+
 
+
/*highlight */
+
/************************************************/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
+
padding: 15px 20px;
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
+
padding: 5px 15px;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
+
background-color: #ececec;  
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
+
    border-top: 4px solid #00a19bad;
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
+
    border: 4px solid #00a19bad;
+
}
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
+
    border-top: 4px solid #ffb819
+
}
+
 
+
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
+
    border: 4px solid #ffb819;
+
}
+
 
+
 
+
 
+
 
+
/*mobile*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/* 1800px  */
+
/************************************************/
+
@media only screen and (max-width: 1800px) {
+
.igem_2019_team_content { width: 85%;}
+
.igem_2019_team_menu {display:block;}
+
+
}
+
 
+
/* 1400px  */
+
/************************************************/
+
@media only screen and (max-width: 1400px) {
+
.igem_2019_team_menu .menu_item { font-size:100%;}
+
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
+
.igem_2019_team_menu {display:block;}
+
}
+
 
+
 
+
/* 1100px  */
+
/************************************************/
+
@media only screen and (max-width: 1100px) {
+
.igem_2019_team_content {width:100%; margin-left:0px;}
+
+
.igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
+
+
.igem_2019_team_mobile_bar {display:block;}
+
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
+
 
+
}
+
 
+
/* 850px  */
+
/************************************************/
+
@media only screen and (max-width: 850px) {
+
.igem_2019_team_menu {width:40%;}
+
}
+
 
+
/*500px  */
+
/************************************************/
+
@media only screen and (max-width: 500px) {
+
.igem_2019_team_menu {min-width:100%;width:100%;}
+
}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
 
+
  
  
 +
  <ul id="slide-out" class="sidenav">
 +
    <li style="padding: 0"><div class="sidenavBanner">
 +
      <div class="background"></div>
 +
      <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Demonstration</span></p>
 +
    </div></li>
 +
    <li>
 +
      <ul class="collapsible expandable">
 +
        <li class="onThisPageNav"><span>On this page</span></li>
 +
        <li class="onThisPageNav"><a href="#section1">Transcription</a></li>
 +
        <li class="onThisPageNav"><a href="#ReverseTranscription">Reverse transcription</a></li>
 +
        <li class="onThisPageNav"><a href="#Recombination">Recombination</a></li>
 +
        <li class="onThisPageNav"><a href="#section4">Modeling</a></li>
  
 +
        <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li>
 +
      </ul><!-- .expandable -->
 +
    </li>
 +
    <li><div class="placeHolder"></div></li>
 +
  </ul>
 +
  </header>
  
 +
  <div id="pageContent">
 +
      <div id="contentBanner" class="figureBanner">
 +
          <div class="row">
 +
              <div class="col s12 hide-on-med-and-up">
 +
                  <h1><br/>Demonstration</h1>
 +
                  <p class="flow-text">Mutation library generation is critical for biological and medical research. Our R-Evolution toolbox is orthogonal and provides a wide range of applications among various species, and serves as a foundational advance to synthetic biology.</p>
 +
              </div>
 +
          </div>
 +
          <div class="hide-on-small-only">
 +
<style>
 +
#demo {width:100%;height:100%;position:relative;z-index:-100;}
 +
#demo svg {width:100%;height:100%;position:fixed;}
 +
#demo svg g {mix-blend-mode:lighten;}
 +
#demo svg polygon {stroke:none;fill:white;}
 
</style>
 
</style>
 +
<div id="pageCover">
 +
  <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice">
 +
        <defs>
 +
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
 +
          <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
 +
        </linearGradient>
 +
        <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
 +
          <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
 +
        </linearGradient>
 +
        </defs>
 +
        <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
 +
        <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
 +
  </svg>
 +
</div><!-- #pageCover -->
 +
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
 +
        <script>
 +
      //////////////////////////////
 +
      // Demo Functions
 +
      //////////////////////////////
 +
      function bkgFunction(showStats) {
 +
        // stats
 +
        if (showStats) {
 +
        var stats = new Stats();
 +
        stats.domElement.style.position = 'absolute';
 +
        stats.domElement.style.left = '0';
 +
        stats.domElement.style.top = '0';
 +
        document.body.appendChild(stats.domElement);
 +
        requestAnimationFrame(function updateStats(){
 +
          stats.update();
 +
          requestAnimationFrame(updateStats);
 +
        });
 +
        }
 +
        // init
 +
        var svg = document.getElementById('demo');
 +
        tesselation.setup(svg);
 +
        gradients.setup();
 +
        var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
        function playNextTransition() {
 +
        tesselation.next(transitionDuration);
 +
        gradients.next(transitionDuration);
 +
        };
 +
        function tick(time) {
 +
        if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
          lastTransitionAt = time;
 +
          playNextTransition();
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
      }
 +
      //////////////////////////////
 +
      // Delaunay Triangulation
 +
      //////////////////////////////
 +
      var calcDelaunayTriangulation = (function() {
 +
        var EPSILON = 1.0 / 1048576.0;
 +
        function getSuperT(vertices) {
 +
        var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
          xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
          i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
        for(i = vertices.length; i--; ) {
 +
          if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
          if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
          if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
          if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
        }
 +
        xDiff = xMax - xMin;
 +
        yDiff = yMax - yMin;
 +
        maxDiff = Math.max(xDiff, yDiff);
 +
        xCenter = xMin + xDiff * 0.5;
 +
        yCenter = yMin + yDiff * 0.5;
 +
        return [
 +
          [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
          [xCenter, yCenter + 20 * maxDiff],
 +
          [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
        ];
 +
        }
 +
        function circumcircle(vertices, i, j, k) {
 +
        var xI = vertices[i][0], yI = vertices[i][1],
 +
          xJ = vertices[j][0], yJ = vertices[j][1],
 +
          xK = vertices[k][0], yK = vertices[k][1],
 +
          yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
          xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
        // bail condition
 +
        if(yDiffIJ < EPSILON){
 +
          if (yDiffJK < EPSILON){
 +
            throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
          }
 +
        }
  
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        // calc circumcircle center x/y, radius
<!--- THIS IS WHERE THE HTML BEGINS --->
+
        m1  = -((xJ - xI) / (yJ - yI));
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        m2  = -((xK - xJ) / (yK - yJ));
 
+
        xMidIJ = (xI + xJ) / 2.0;
<head>
+
        xMidJK = (xJ + xK) / 2.0;
 
+
        yMidIJ = (yI + yJ) / 2.0;
<!-- This tells the browser that your page is responsive -->
+
        yMidJK = (yJ + yK) / 2.0;
<meta name="viewport" content="width=device-width, initial-scale=1">
+
        xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
+
          (yDiffJK < EPSILON) ? xMidJK :
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&amp;action=raw&amp;ctype=text/javascript"></script>
+
          (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
+
        yCenter  = (yDiffIJ > yDiffJK) ?
+
          m1 * (xCenter - xMidIJ) + yMidIJ :
+
          m2 * (xCenter - xMidJK) + yMidJK;
</head>
+
        xDiff = xJ - xCenter;
 
+
        yDiff = yJ - yCenter;
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
+
        // return
 
+
        return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        }
<!--- Menu --->
+
        function dedupeEdges(edges) {
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
        var i, j, a, b, m, n;
+
        for(j = edges.length; j; ) {
 
+
          b = edges[--j]; a = edges[--j];
<style>
+
          for(i = j; i; ) {
+
          n = edges[--i]; m = edges[--i];
    *{margin: 0;padding: 0;list-style: none;}
+
          if(a === m){
/* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
+
            if (b===n){
 
+
              edges.splice(j, 2); edges.splice(i, 2);
/** 清除内外边距 **/
+
              break;
body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+
            }
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+
          }
pre, /* text formatting elements 文本格式元素 */
+
          if(a === n){
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+
            if (b===m){
th, td /* table elements 表格元素 */ {
+
              edges.splice(j, 2); edges.splice(i, 2);
margin: 0;
+
              break;
padding: 0;
+
            }
}
+
          }
 
+
          }
/** 设置默认字体 **/
+
        }
 
+
        }
/* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
+
        return function(vertices) {
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+
        var n = vertices.length,
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+
          i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
/* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
+
        // bail if too few / too many verts
 
+
        if(n < 3 || n > 2000)
/** 重置列表元素 **/
+
          return [];
ul, ol { list-style: none; }
+
        // copy verts and sort indices by x-position
 
+
        vertices = vertices.slice(0);
/** 重置文本格式元素 **/
+
        indices = new Array(n);
a { text-decoration: none; }
+
        for(i = n; i--; )
a:hover { text-decoration: underline; }
+
          indices[i] = i;
 
+
        indices.sort(function(i, j) {
 
+
          return vertices[j][0] - vertices[i][0];
/** 重置表单元素 **/
+
        });
legend { color: #000; } /* for ie6 */
+
        // supertriangle
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
+
        st = getSuperT(vertices);
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+
        vertices.push(st[0], st[1], st[2]);
/* 注:optgroup 无法扶正 */
+
        // init candidates/locked tris list
 
+
        candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
/** 重置表格元素 **/
+
        locked = [];
table { border-collapse: collapse; border-spacing: 0; }
+
        edges = [];
+
        // scan left to right
</style>
+
        for(i = indices.length; i--; edges.length = 0) {
 
+
          c = indices[i];
 
+
          // check candidates tris against point
 
+
          for(j = candidates.length; j--; ) {
 
+
          // lock tri if point to right of circumcirc
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content begins    --------------------------------------------------------------------------------------------------------------------------------->
+
          dx = vertices[c][0] - candidates[j].x;
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
          if (dx > 0.0){
 
+
            if(dx * dx > candidates[j].r){
 
+
              locked.push(candidates[j]);
+
            candidates.splice(j, 1);
+
            continue;
+
            }
+
          }
+
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&amp;action=raw&amp;ctype=text/css">
+
+
<style>
+
+
body{
+
margin:0;
+
padding:0;
+
background-color:#08273a;
+
}
+
a{
+
text-decoration:none;
+
}
+
#global_wrapper{
+
width:100%;
+
height:auto;
+
margin:0;
+
position:absolute;
+
}
+
#navUl{
+
width:100%;
+
height:110px;
+
padding:40px 0 0 0;
+
overflow:visible;
+
position:fixed;
+
list-style:none;
+
z-index:999;
+
background-color:#08273a;
+
margin:0;
+
top:0;
+
}
+
#mobileNav{
+
width:100%;
+
height:80px;
+
padding:20px 0 0 0;
+
top:0;
+
background-color:#001d2a;
+
position:fixed;
+
display:none;
+
text-align:center;
+
z-index:999;
+
}
+
#mobileNav img{
+
display:none;
+
margin:0;
+
padding:0;
+
}
+
#mobileLogo{
+
display:inline-block;
+
}
+
#mobileControl{
+
float:right;
+
display:inline-block;
+
margin-right:15px;
+
margin-top:3px;
+
}
+
#mobileCtrl{
+
height:25px;
+
}
+
#mobileTeamName{
+
display:inline-block;
+
}
+
#navImg{
+
display:inline-block;
+
float:left;
+
height:70px;
+
width:auto;
+
position:relative;
+
margin-left:4%;
+
margin-top:0;
+
}
+
.logo{
+
height:55px;
+
width:auto;
+
margin-top:1.3%;
+
}
+
.teamname{
+
height:28px;
+
}
+
 
+
#navBar{
+
float:right;
+
position:relative;
+
width:auto;
+
display:inline-block;
+
margin-right:4%;
+
}
+
.navLi{
+
float:left;
+
display:inline-block;
+
margin-top:3%;
+
color:white;
+
font-size:20px;
+
position:relative;
+
margin-left:18px;
+
text-align:center;
+
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
+
text-decoration:none;
+
}
+
.navA{
+
display:block;
+
text-align:center;
+
color:white;
+
text-decoration:none;
+
}
+
.navA2{
+
display:block;
+
overflow:visible;
+
color:white;
+
height:auto;
+
}
+
.ul2{
+
list-style:none;
+
position:absolute;
+
display:none;
+
overflow:hidden;
+
padding:10px 0 0 0 !important;
+
margin:0 !important;
+
font-size:17px;
+
left:50%;
+
transform:translateX(-50%);
+
border-bottom-left-radius: 10px;
+
border-bottom-right-radius: 10px;
+
background:linear-gradient(#08273a,rgba(0,138,201,1));
+
}
+
.li2{
+
padding:0;
+
margin:10px 20px;
+
text-align:center;
+
display:block;
+
}
+
.navA:link,.navA2:link{
+
text-decoration:none;
+
}
+
.navA:visited{
+
color:white;
+
}
+
.navA2:visited,.navA2:active{
+
color:white;
+
}
+
.navA:hover{
+
color:#7dded4;
+
}
+
.navA2:hover{
+
color:#7dded4;
+
}
+
.jqhover{
+
color:#7dded4;
+
}
+
.navA:hover{
+
text-decoration:none;
+
}
+
.navA:active{
+
text-decoration:none;
+
color:white;
+
}
+
 
+
</style>
+
 
+
+
 
+
+
<style>
+
+
#pageContent{
+
margin:100px 0 0 0;
+
text-align:center;
+
}
+
+
.row{
+
clear:both!important;
+
}
+
 
+
.title1{
+
font-size:2.3rem;
+
text-align:center;
+
color:white;
+
display:block;
+
margin-top:10%;
+
margin-bottom:7%;
+
line-height:110%;
+
}
+
.title2{
+
color:white;
+
text-align:left;
+
font-size:2rem;
+
line-height:130%;
+
display:block;
+
width:100%;
+
}
+
.title3{
+
font-size:1.4rem;
+
color:white;
+
text-align:left !important;
+
display:block;
+
width:100%;
+
line-height:110%;
+
padding-left:2%;
+
}
+
.para1{
+
color:white;
+
text-align:justify !important;
+
align-items:flex-start;
+
line-height:140%;
+
font-size:1.3rem;
+
margin-bottom:50px !important;
+
width:100%;
+
margin:auto 0;
+
}
+
.para1 a{
+
text-decoration:underline !important;
+
color:white;
+
}
+
.para1 a:visited, .para1 a:active{
+
color:white;
+
}
+
.para1 a:hover{
+
color:rgba(96,255,249,1.00)!important;
+
}
+
.content1{
+
margin:7% auto;
+
}
+
.pic2{
+
width:150%;
+
}
+
.reverseDiv{
+
position:relative !important;
+
float:right !important;
+
}
+
 
+
+
.paraUl{
+
list-style-type:decimal !important;
+
list-style-position:outside;
+
padding-left:auto;
+
font-size:1rem;
+
}
+
.paraUl li{
+
padding-right:4% ;
+
}
+
+
+
#containerWithLeftNav{
+
display:block;
+
margin-left:25%;
+
}
+
.legend{
+
color:white;
+
text-align:center;
+
}
+
.legend>div{
+
width:100%;
+
text-align:justify!important;
+
font-size:1.1rem;
+
}
+
.legends{
+
margin:auto 15%;
+
}
+
 
+
 
+
</style>
+
+
<style>
+
+
@media only screen and (max-width:1200px){
+
#mobileBar{
+
margin-left:4%;
+
}
+
.navLi{
+
font-size:18px;
+
margin-top:3.5%;
+
}
+
}
+
+
+
@media only screen and (max-width:1100px){
+
+
#navUl{
+
display:block;
+
float:right;
+
margin-top:0;
+
top:80px;
+
right:0;
+
background-color:rgba(0,0,0,0);
+
padding:0;
+
}
+
+
#mobileNav{
+
display:block;
+
}
+
+
#navImg{
+
display:none;
+
}
+
+
+
#navBar{
+
margin:0 1% 0 0;
+
padding-right:2%;
+
padding-left:1%;
+
position:relative;
+
display:none;
+
}
+
+
#mobileNav img{
+
display:inline-block;
+
margin:5px 0;
+
padding:0;
+
}
+
#mobileControl{
+
margin-top:8px;
+
}
+
 
+
.logo{
+
height:45px;
+
margin-top:7px;
+
}
+
.navLi{
+
display:block;
+
position:relative;
+
float:right;
+
clear:both;
+
white-space:nowrap;
+
text-align:right;
+
margin:0;
+
height:60px;
+
width:100%;
+
background-color:#00324a;
+
}
+
.navA{
+
display:block;
+
text-align:right;
+
position:relative;
+
float:right;
+
padding:20px 20px !important;
+
}
+
.n2{
+
display:none;
+
width:0;
+
position:relative;
+
float:left;
+
text-align:right;
+
}
+
.ul2{
+
background:none;
+
padding-top:0;
+
background-color:#00557b;
+
text-align:right;
+
display:block;
+
position:relative;
+
float:right;
+
right:100%;
+
transform:translateX(0%);
+
top:0;
+
transform:translateY(1%);
+
border-radius:0 0 0 10px;
+
}
+
.open{
+
display:block;
+
}
+
+
.title2{
+
font-size:1.8rem;
+
line-height:140%;
+
}
+
.para1{
+
font-size:1.3rem;
+
}
+
.pic2{
+
width:120%;
+
}
+
+
.highlightIcon{
+
margin:20% auto 10% auto;
+
}
+
.highlightTitle{
+
margin-bottom:15%;
+
}
+
 
+
+
}
+
+
+
@media only screen and (max-width:992px){
+
+
#navUl{
+
display:block;
+
float:right;
+
margin:0;
+
top:80px;
+
right:0;
+
}
+
+
#mobileNav{
+
display:block;
+
}
+
+
#navImg{
+
display:none;
+
}
+
+
#navTeamName{
+
display:none;
+
}
+
+
#navBar{
+
margin:0 1% 0 0 ;
+
margin-right:2%;
+
padding-right:1%;
+
padding-left:1%;
+
position:relative;
+
display:none;
+
}
+
#mobileControl{
+
margin-top:10px;
+
}
+
#mobileNav img{
+
display:inline-block;
+
margin:5px 0;
+
padding:0;
+
}
+
.logo{
+
height:40px;
+
}
+
.navLi{
+
display:block;
+
position:relative;
+
float:right;
+
clear:both;
+
white-space:nowrap;
+
text-align:right;
+
height:60px;
+
width:100%;
+
}
+
.navA{
+
display:block;
+
text-align:right;
+
position:relative;
+
float:right;
+
font-size:15px;
+
}
+
.n2{
+
display:none;
+
width:0;
+
position:relative;
+
float:left;
+
}
+
.ul2{
+
font-size:13px;
+
}
+
.open{
+
display:block;
+
}
+
+
 
+
+
#animation_container{
+
display:none;
+
}
+
#teamLogo{
+
display:block;
+
}
+
 
+
+
.title2{
+
font-size:1.5rem;
+
}
+
.para1{
+
font-size:1.2rem;
+
}
+
.pic2{
+
width:100%;
+
}
+
 
+
+
}
+
+
+
@media only screen and (max-width:768px){
+
.col-md-4{
+
clear:both;
+
}
+
.col-md-8{
+
clear:both;
+
}
+
.pic2{
+
margin-bottom:10%;
+
width:80%;
+
}
+
.title2{
+
font-size:1.2rem;
+
}
+
.para1{
+
font-size:1rem;
+
}
+
.pic2{
+
width:80%;
+
}
+
#sponser img {
+
width:60%;
+
}
+
+
#containerWithLeftNav{
+
margin-left:auto;
+
}
+
+
}
+
+
</style>
+
 
+
 
+
+
+
 
+
 
+
<style>
+
#footContainer{
+
width:90%;
+
}
+
#FudanFooter{
+
margin:auto 0;
+
width:100%;
+
padding:3% 0;
+
}
+
#FudanFooter #usefulLinks {
+
color: #cacaca;
+
padding-left: 1rem;
+
}
+
 
+
#FudanFooter #usefulLinks ul {
+
font-size: 13px;
+
line-height: 14px;
+
border-top: solid 2px;
+
color: inherit;
+
text-decoration: none;
+
padding-top: 5px;
+
margin:0;
+
}
+
 
+
#FudanFooter #usefulLinks div {
+
color: #cacaca;
+
}
+
 
+
#FudanFooter #usefulLinks div:hover {
+
color: white;
+
}
+
 
+
#FudanFooter #usefulLinks a {
+
color: inherit;
+
}
+
 
+
#FudanFooter #usefulLinks a:hover {
+
text-decoration: underline;
+
}
+
 
+
#FudanFooter #usefulLinks div.active,
+
#FudanFooter #usefulLinks div.active a {
+
color: white;
+
}
+
 
+
#FudanFooter #usefulLinks div.active ul {
+
border-top: solid white 2px;
+
}
+
  
#FudanFooter #usefulLinks li {
 
padding: 3px 0 6px 3px;
 
list-style:none;
 
}
 
  
#usefulLinks span {
+
          // point outside circumcirc = leave candidates
font-size: 20px;
+
          dy = vertices[c][1] - candidates[j].y;
}
+
          if(dx * dx + dy * dy - candidates[j].r > EPSILON)
+
            continue;
 +
          // point inside circumcirc = break apart, save edges
 +
          edges.push(
 +
            candidates[j].i, candidates[j].j,
 +
            candidates[j].j, candidates[j].k,
 +
            candidates[j].k, candidates[j].i
 +
          );
 +
          candidates.splice(j, 1);
 +
          }
 +
          // new candidates from broken edges
 +
          dedupeEdges(edges);
 +
          for(j = edges.length; j; ) {
 +
          b = edges[--j];
 +
          a = edges[--j];
 +
          candidates.push(circumcircle(vertices, a, b, c));
 +
          }
 +
        }
 +
        // close candidates tris, remove tris touching supertri verts
 +
        for(i = candidates.length; i--; )
 +
          locked.push(candidates[i]);
 +
        candidates.length = 0;
 +
        for(i = locked.length; i--; )
 +
          if(locked[i].i < n){
 +
            if(locked[i].j < n){
 +
              if(locked[i].k < n){
 +
                candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
              }
 +
            }
 +
          }
  
#FudanFooter div.footer-copyright {
 
font-size: 13px;
 
line-height: 15px;
 
}
 
.footerUl{
 
margin:2% 4%;
 
}
 
</style>
 
  
<script>
+
        // done
+
        return candidates;
$(document).ready(function(){
+
        };
+
      })();
+
      var tesselation = (function() {
var winWidth=$(window).width();
+
        var svg, svgW, svgH, prevGroup;
+
        function createRandomTesselation() {
if (winWidth>1100){
+
        var wW = window.innerWidth;
$(".navA").mouseenter(function(){
+
        var wH = window.innerHeight;
$(this).parent().find(".ul2").stop().fadeIn(400);
+
        var gridSpacing = 250, scatterAmount = 0.75;
});
+
        var gridSize, i, x, y;
$(".navLi").mouseleave(function(){
+
        if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
$(this).find(".ul2").stop().fadeOut(400);
+
          gridSize = gridSpacing * svgW / wW;
});
+
        } else { // window taller than svg = use height for gridSize
+
          gridSize = gridSpacing * svgH / wH;
+
        }
}
+
        var vertices = [];
else{
+
        var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
$(".navA:not(.noSubmenu)").removeAttr("href");
+
        for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
$("#mobileNav").click(function(){
+
          for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
$("#navBar").toggle();
+
          vertices.push(
});
+
            [
$(document).click(function(event){
+
            xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
var m = $("#mobileNav,#navBar");
+
            yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
if (!m.is(event.target)){
+
            ]
if (m.has(event.target).length===0){
+
          );
$("#navBar").hide();
+
          }
$(".open").parent().find(".navA").css("color","white");
+
        }
$(".open").removeClass("open");
+
        var triangles = calcDelaunayTriangulation(vertices);
}
+
        var group = document.createElementNS('http://www.w3.org/2000/svg','g');
 +
        var polygon;
 +
        for(i = triangles.length; i; ) {
 +
          polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 +
          polygon.setAttribute('points',
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
 +
          );
 +
          group.appendChild(polygon);
 +
        }
 +
        return group;
 +
        }
 +
        return {
 +
        setup: function(svgElement) {
 +
          svg = svgElement;
 +
          var vb = svg.getAttribute('viewBox').split(/\D/g);
 +
          svgW = vb[2];
 +
          svgH = vb[3];
 +
        },
 +
        next: function(t) {
 +
          var toRemove, i, n;
 +
          t /= 1000;
 +
          if(prevGroup){
 +
            if(prevGroup.children){
 +
              if(prevGroup.children.length){
 +
                toRemove = prevGroup;
 +
                n = toRemove.children.length;
 +
                for (i = n; i--; ) {
 +
                  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
 +
                }
 +
                TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
 +
              }
 +
            }
 +
          }
  
}
+
          var g = createRandomTesselation();
});
+
          n = g.children.length;
$(".navLi").click(function(){
+
          for (i = n; i--; ) {
if ($(this).find(".n2").hasClass("open")){
+
          TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
$(".open").parent().find(".navA").css("color","white");
+
          }
$(this).find(".n2").removeClass("open");
+
          svg.appendChild(g);
}
+
          prevGroup = g;
else{
+
        }
$(".open").parent().find(".navA").css("color","white");
+
        }
$(".open").removeClass("open");
+
      })();
$(this).find(".n2").addClass("open");
+
      //////////////////////////////
$(this).find(".navA").css("color","#7dded4");
+
      // Gradients
}
+
      //////////////////////////////
});
+
      var gradients = (function() {
}
+
        var grad1, grad2, showingGrad1;
+
        // using colors from IBM Design Colors this time
+
        var colors = [ // 14 colors - use 3-5 span
+
        '#3c6df0', // ultramarine50
+
        '#12a3b4', // aqua40
+
        '#00a78f', // teal40
+
        '#00aa5e', // green40
});
+
        '#81b532', // lime30
+
        '#e3bc13', // yellow20
+
        '#ffb000', // gold20
</script>
+
        '#fe8500', // orange30
+
        '#fe6100', // peach40
+
        '#e62325', // red50
+
        '#dc267f', // magenta50
<div id="global_wrapper">
+
        '#c22dd5', // purple50
<div id="mobileNav">
+
        '#9753e1', // violet50
+
        '#5a3ec8'  // indigo60
<div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
+
        ];
<div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
+
        function assignRandomColors(gradObj) {
+
        var rA = Math.floor(colors.length * Math.random());
</div>
+
        var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
+
        rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
<ul id="navUl">
+
        gradObj.stopA.setAttribute('stop-color', colors[rA]);
+
        gradObj.stopB.setAttribute('stop-color', colors[rB]);
<li id="navImg">
+
        }
<img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
+
        return {
+
        setup: function() {
</li>
+
          showingGrad1 = false;
+
          grad1 = {
+
          stopA: document.getElementById('stop1a'),
<ul id="navBar">
+
          stopB: document.getElementById('stop1b'),
+
          rect: document.getElementById('rect1')
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
+
          };
+
          grad2 = {
<li class="navLi">
+
          stopA: document.getElementById('stop2a'),
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
+
          stopB: document.getElementById('stop2b'),
<div class="n2">
+
          rect: document.getElementById('rect2')
<ul class="ul2">
+
          };
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
+
          grad1.rect.style.opacity = 0;
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
+
          grad2.rect.style.opacity = 0;
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design" style="white-space:nowrap">Applied Design</a></li>
+
        },
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiment">Experiment</a></li>
+
        next: function(t) {
</ul>
+
          t /= 1000;
</div>
+
          var show, hide;
</li>
+
          if (showingGrad1) {
+
          hide = grad1;
<li class="navLi">
+
          show = grad2;
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
+
          } else {
<div class="n2">
+
          hide = grad2;
<ul class="ul2">
+
          show = grad1;
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
+
          }
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
+
          showingGrad1 = !showingGrad1;
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
          TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
          assignRandomColors(show);
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
          TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
</ul>
+
        }
</div>
+
        };
</li>
+
      })();
+
      //////////////////////////////
<li class="navLi">
+
      // Start
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model_Software">Model</a>
+
      //////////////////////////////
<div class="n2">
+
      bkgFunction();
<ul class="ul2">
+
    </script>
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
+
              <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover gif 1st added" src="https://static.igem.org/mediawiki/2019/8/83/T--Fudan-TSI--coverDemonstration.gif" /></center></div>
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
+
          </div>
</ul>
+
      </div>
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education &amp; <br />Public Engagement</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">Integrated <br />Human Practice</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">Attribution</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://igem.org/2019_Judging_Form?id=3257">Judging</a></li>
+
+
</ul>
+
+
+
</ul>
+
  
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!--////////////////////////////////////////////////////
<!---- Cover ---->
+
      do not edit above, if must BE CAREFUL
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
  //////////////////////////////////////////////////////-->
+
      <div class="container">
<div id="pageCover">
+
          <!-- side navigator of page content -->
+
          <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&amp;action=raw&amp;ctype=text/javascript"></script>
+
              <li class="onThisPageNav"><a href="#section1">Transcription</a></li>
<script>
+
              <li class="onThisPageNav"><a href="#ReverseTranscription">Reverse&nbsp;transcription</a></li>
$(document).ready(function($){
+
              <li class="onThisPageNav"><a href="#Recombination">Recombination</a></li>
var $root = $('html, body');
+
              <li class="onThisPageNav"><a href="#section4">Modeling</a></li>
$('a[href^="#"]').click(function() {
+
          </ul>
var href = $.attr(this, 'href');
+
          <!-- main content of the page -->
$root.animate({
+
          <main><article>
scrollTop: $(href).offset().top
+
}, 1000, function () {
+
window.location.hash = href;
+
});
+
return false;
+
});
+
})
+
</script>
+
+
<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
+
  <defs>
+
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
+
  <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
+
</linearGradient>
+
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
+
  <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
+
</linearGradient>
+
  </defs>
+
  <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
+
  <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
+
</svg>
+
<div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/8/83/T--Fudan-TSI--coverDemonstration.gif"></div>
+
</div>
+
<style>
+
#pageCover{
+
width:100%;
+
margin:0;
+
padding-top:80px;
+
}
+
#demoCover{
+
width:100vw;
+
height:80vh;
+
position:absolute;
+
background-color:rgba(8,39,58,0.5);
+
top:70px;
+
left:0;
+
text-align:center;
+
}
+
#coverPic{
+
width:900px;
+
margin:20vh auto;
+
}
+
#demo{
+
width:100vw;
+
height:70vh;
+
position:relative;
+
}
+
#demo svg {
+
  width: 100%;
+
  height: 100%;
+
  position: fixed;
+
}
+
#demo svg g {
+
  mix-blend-mode: lighten;
+
}
+
#demo svg polygon {
+
  stroke: none;
+
  fill: white;
+
}
+
+
@media only screen and (max-width:1100px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
height:30vh;
+
}
+
#demo{
+
height:30vh;
+
}
+
#coverPic{
+
width:800px;
+
margin:7vh auto;
+
}
+
}
+
@media only screen and (max-width:992px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:700px;
+
margin:6vh auto;
+
}
+
}
+
@media only screen and (max-width:768px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:450px;
+
margin:8vh auto;
+
}
+
}
+
@media only screen and (max-width:500px){
+
#coverPic{
+
width:250px;
+
margin:8vh auto;
+
}
+
}
+
</style>
+
<script>
+
//////////////////////////////
+
// Demo Functions
+
//////////////////////////////
+
function bkgFunction(showStats) {
+
  // stats
+
  if (showStats) {
+
var stats = new Stats();
+
stats.domElement.style.position = 'absolute';
+
stats.domElement.style.left = '0';
+
stats.domElement.style.top = '0';
+
document.body.appendChild(stats.domElement);
+
requestAnimationFrame(function updateStats(){
+
  stats.update();
+
  requestAnimationFrame(updateStats);
+
});
+
  }
+
  // init
+
  var svg = document.getElementById('demo');
+
  tesselation.setup(svg);
+
  gradients.setup();
+
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
+
  function playNextTransition() {
+
tesselation.next(transitionDuration);
+
gradients.next(transitionDuration);
+
  };
+
  function tick(time) {
+
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
+
  lastTransitionAt = time;
+
  playNextTransition();
+
}
+
window.requestAnimationFrame(tick);
+
  }
+
  window.requestAnimationFrame(tick);
+
}
+
//////////////////////////////
+
// Delaunay Triangulation
+
//////////////////////////////
+
var calcDelaunayTriangulation = (function() {
+
  var EPSILON = 1.0 / 1048576.0;
+
  function getSuperT(vertices) {
+
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
+
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
+
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
+
for(i = vertices.length; i--; ) {
+
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
+
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
+
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
+
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
+
}
+
xDiff = xMax - xMin;
+
yDiff = yMax - yMin;
+
maxDiff = Math.max(xDiff, yDiff);
+
xCenter = xMin + xDiff * 0.5;
+
yCenter = yMin + yDiff * 0.5;
+
return [
+
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
+
  [xCenter, yCenter + 20 * maxDiff],
+
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
+
];
+
  }
+
  function circumcircle(vertices, i, j, k) {
+
var xI = vertices[i][0], yI = vertices[i][1],
+
xJ = vertices[j][0], yJ = vertices[j][1],
+
xK = vertices[k][0], yK = vertices[k][1],
+
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
+
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
+
// bail condition
+
if(yDiffIJ < EPSILON){
+
if (yDiffJK < EPSILON){
+
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
+
}
+
}
+
+
+
// calc circumcircle center x/y, radius
+
m1  = -((xJ - xI) / (yJ - yI));
+
m2  = -((xK - xJ) / (yK - yJ));
+
xMidIJ = (xI + xJ) / 2.0;
+
xMidJK = (xJ + xK) / 2.0;
+
yMidIJ = (yI + yJ) / 2.0;
+
yMidJK = (yJ + yK) / 2.0;
+
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
+
  (yDiffJK < EPSILON) ? xMidJK :
+
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
+
yCenter  = (yDiffIJ > yDiffJK) ?
+
  m1 * (xCenter - xMidIJ) + yMidIJ :
+
  m2 * (xCenter - xMidJK) + yMidJK;
+
xDiff = xJ - xCenter;
+
yDiff = yJ - yCenter;
+
// return
+
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
+
  }
+
  function dedupeEdges(edges) {
+
var i, j, a, b, m, n;
+
for(j = edges.length; j; ) {
+
  b = edges[--j]; a = edges[--j];
+
  for(i = j; i; ) {
+
n = edges[--i]; m = edges[--i];
+
if(a === m){
+
  if (b===n){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
if(a === n){
+
  if (b===m){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
  }
+
}
+
  }
+
  return function(vertices) {
+
var n = vertices.length,
+
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
+
// bail if too few / too many verts
+
if(n < 3 || n > 2000)
+
  return [];
+
// copy verts and sort indices by x-position
+
vertices = vertices.slice(0);
+
indices = new Array(n);
+
for(i = n; i--; )
+
  indices[i] = i;
+
indices.sort(function(i, j) {
+
  return vertices[j][0] - vertices[i][0];
+
});
+
// supertriangle
+
st = getSuperT(vertices);
+
vertices.push(st[0], st[1], st[2]);
+
// init candidates/locked tris list
+
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
+
locked = [];
+
edges = [];
+
// scan left to right
+
for(i = indices.length; i--; edges.length = 0) {
+
  c = indices[i];
+
  // check candidates tris against point
+
  for(j = candidates.length; j--; ) {
+
// lock tri if point to right of circumcirc
+
dx = vertices[c][0] - candidates[j].x;
+
if (dx > 0.0){
+
if(dx * dx > candidates[j].r){
+
locked.push(candidates[j]);
+
  candidates.splice(j, 1);
+
  continue;
+
}
+
}
+
 
+
 
+
// point outside circumcirc = leave candidates
+
dy = vertices[c][1] - candidates[j].y;
+
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
+
  continue;
+
// point inside circumcirc = break apart, save edges
+
edges.push(
+
  candidates[j].i, candidates[j].j,
+
  candidates[j].j, candidates[j].k,
+
  candidates[j].k, candidates[j].i
+
);
+
candidates.splice(j, 1);
+
  }
+
  // new candidates from broken edges
+
  dedupeEdges(edges);
+
  for(j = edges.length; j; ) {
+
b = edges[--j];
+
a = edges[--j];
+
candidates.push(circumcircle(vertices, a, b, c));
+
  }
+
}
+
// close candidates tris, remove tris touching supertri verts
+
for(i = candidates.length; i--; )
+
  locked.push(candidates[i]);
+
candidates.length = 0;
+
for(i = locked.length; i--; )
+
  if(locked[i].i < n){
+
  if(locked[i].j < n){
+
  if(locked[i].k < n){
+
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
+
  }
+
  }
+
  }
+
+
+
// done
+
return candidates;
+
  };
+
})();
+
var tesselation = (function() {
+
  var svg, svgW, svgH, prevGroup;
+
  function createRandomTesselation() {
+
var wW = window.innerWidth;
+
var wH = window.innerHeight;
+
var gridSpacing = 250, scatterAmount = 0.75;
+
var gridSize, i, x, y;
+
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
+
  gridSize = gridSpacing * svgW / wW;
+
} else { // window taller than svg = use height for gridSize
+
  gridSize = gridSpacing * svgH / wH;
+
}
+
var vertices = [];
+
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
+
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
+
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
+
vertices.push(
+
  [
+
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
+
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
+
  ]
+
);
+
  }
+
}
+
var triangles = calcDelaunayTriangulation(vertices);
+
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
+
var polygon;
+
for(i = triangles.length; i; ) {
+
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
+
  polygon.setAttribute('points',
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
+
  );
+
  group.appendChild(polygon);
+
}
+
return group;
+
  }
+
  return {
+
setup: function(svgElement) {
+
  svg = svgElement;
+
  var vb = svg.getAttribute('viewBox').split(/\D/g);
+
  svgW = vb[2];
+
  svgH = vb[3];
+
},
+
next: function(t) {
+
  var toRemove, i, n;
+
  t /= 1000;
+
if(prevGroup){
+
if(prevGroup.children){
+
if(prevGroup.children.length){
+
toRemove = prevGroup;
+
n = toRemove.children.length;
+
for (i = n; i--; ) {
+
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
+
}
+
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
+
}
+
}
+
}
+
+
  var g = createRandomTesselation();
+
  n = g.children.length;
+
  for (i = n; i--; ) {
+
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
+
  }
+
  svg.appendChild(g);
+
  prevGroup = g;
+
}
+
  }
+
})();
+
//////////////////////////////
+
// Gradients
+
//////////////////////////////
+
var gradients = (function() {
+
  var grad1, grad2, showingGrad1;
+
  // using colors from IBM Design Colors this time
+
  var colors = [ // 14 colors - use 3-5 span
+
'#3c6df0', // ultramarine50
+
'#12a3b4', // aqua40
+
'#00a78f', // teal40
+
'#00aa5e', // green40
+
'#81b532', // lime30
+
'#e3bc13', // yellow20
+
'#ffb000', // gold20
+
'#fe8500', // orange30
+
'#fe6100', // peach40
+
'#e62325', // red50
+
'#dc267f', // magenta50
+
'#c22dd5', // purple50
+
'#9753e1', // violet50
+
'#5a3ec8'  // indigo60
+
  ];
+
  function assignRandomColors(gradObj) {
+
var rA = Math.floor(colors.length * Math.random());
+
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
+
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
+
gradObj.stopA.setAttribute('stop-color', colors[rA]);
+
gradObj.stopB.setAttribute('stop-color', colors[rB]);
+
  }
+
  return {
+
setup: function() {
+
  showingGrad1 = false;
+
  grad1 = {
+
stopA: document.getElementById('stop1a'),
+
stopB: document.getElementById('stop1b'),
+
rect:  document.getElementById('rect1')
+
  };
+
  grad2 = {
+
stopA: document.getElementById('stop2a'),
+
stopB: document.getElementById('stop2b'),
+
rect:  document.getElementById('rect2')
+
  };
+
  grad1.rect.style.opacity = 0;
+
  grad2.rect.style.opacity = 0;
+
},
+
next: function(t) {
+
  t /= 1000;
+
  var show, hide;
+
  if (showingGrad1) {
+
hide = grad1;
+
show = grad2;
+
  } else {
+
hide = grad2;
+
show = grad1;
+
  }
+
  showingGrad1 = !showingGrad1;
+
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
+
  assignRandomColors(show);
+
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
+
}
+
  };
+
})();
+
//////////////////////////////
+
// Start
+
//////////////////////////////
+
bkgFunction();
+
</script>
+
+
  
 +
<div id="section1" class="section container scrolSpy">
 +
  <p class="flow-text">Our system can be divided into three biochemical steps: 1) transcription of the target sequence into mRNA, 2) reverse transcription of the target sequence into double-stranded cDNA, 3) recombination for the cDNA to replace the target sequence. We set out to separately verify each step before integrating together. Our team logo shows the mutants accumulated by varying blue colors.</p>
  
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
  <h2>Transcription</h2>
<!---- Left Navigator ---->
+
  <div class="figureHolder" id="Fig1">
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/4b/T--Fudan-TSI--Result_Fig1.gif" />
+
    <p><b>Figure 1. The flanking of reverse transcription initiation and loxP sequences does not disrupt Chl functionality.</b><br/>
 +
    Wildtype Chl gene continues to express and colonies are grown on the plate containing chloramphenicol (plate on the right). The L158X mutant cannot express functional resistance gene and thus the plate is devoid of cell colony (plate on the right).</p>
 +
  </div>
 +
  <p class="flow-text">We put the target sequence and its flanking elements together under a T7 stable promoter for high expression level of target RNA. To verify our R-Evolution system, we constructed 8 nonsense mutant of chloramphenicol resistance gene (Chl), bearing the 8 base pair substitution from sense codon to nonsense mutant. We verified this construct through culturing bacteria carrying the original version or mutant on plates containing chloramphenicol. We found that bacteria carrying the original Chl grow naturally, while no colony was formed on the plates of mChl (Table. 1). After adding the flanking sequences on both ends, we used the C158X mutant and showed that the gene’s function has not been changed by our conduct <a href="#Fig1">(Figure 1)</a>.</p>
  
<ul class="leftNav" style="margin:0;padding:0;">
+
  <div class="figureHolder">
+
    <p><b>Table 1. Nonsense mutation disrupts the chloramphenicol resistance ability of Chl.</b><br/>
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Transcription</a>
+
      Amp stands for ampicillin, Chl stands for chloramphenicol, the left column means that they are added to the plate. Chl acts as the positive control, cells grow naturally on both plates, while cells transformed with the negative control plasmid can only grow on plates containing ampicillin. Chl gene carrying nonsense mutation at different sites does not affect its ampicillin resistance, but chloramphenicol resistance is lost as no colony is formed. Single colony was picked and shook in liquid culture overnight, the plate was coated with 100 μL culture after 104 dilution.
</li>
+
    </p>
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Reverse transcription</a>
+
<table style="color:white;border:1px solid white">
<ul class="leftNavUl2">
+
  <tr style="border:1px solid white">
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_1">The successful expression of reverse transcriptase</a></li>
+
    <td></td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_2">RT can complete reverse transcription in vitro</a></li>
+
    <td>Control</td>
</ul>
+
    <td>&nbsp;Chl&nbsp;&nbsp;&nbsp;&nbsp;</td>
</li>
+
    <td>Chl-Y33X</td>
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">Recombination</a>
+
    <td>Chl-W85X</td>
<ul class="leftNavUl2">
+
    <td>Chl-E97X</td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_1">Cre expression is controlled by Tet operon</a></li>
+
    <td>Chl-S121X</td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_2">RT can complete reverse transcription in vitro</a></li>
+
    <td>Chl-L158X</td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_3">lox5171 is most incompatible with wildtype loxP (wtlox)</a></li>
+
    <td>Chl-K182X</td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_4">Cre with degradation tags</a></li>
+
    <td>Chl-Q190X</td>
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_4">Cre performs strand exchange between two plasmids</a></li>
+
  </tr>
</ul>
+
  <tr style="border:1px solid white">
</li>
+
    <td>Amp</td>
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">References</a></li>
+
    <td>19</td>
 +
    <td>192</td>
 +
    <td>291</td>
 +
    <td>128</td>
 +
    <td>236</td>
 +
    <td>138</td>
 +
    <td>255</td>
 +
    <td>175</td>
 +
    <td>276</td>
 +
  </tr>
 +
  <tr style="border:1px solid white">
 +
    <td>Amp &amp; Chl</td>
 +
    <td>0</td>
 +
    <td>30</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
    <td>0</td>
 +
  </tr>
 +
</table>
 +
  </div>
  
 +
  <p class="flow-text">In addition, we also constructed and verified nonsense mutants of fluorescent protein EGFP and mCherry at the 158<sup>th</sup> and 159<sup>th</sup> amino acid <a href="#Fig2">(Figure 2)</a>.</p>
  
 +
  <div class="figureHolder" id="Fig2">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/45/T--Fudan-TSI--Result_Fig2.gif" />
 +
    <p><b>Figure 2. mCherry cannot emit fluorescence.</b><br/>
 +
    The vertical axis shows the quantified level of EGFP expression. Mutants of the fluorescence proteins cannot emit fluorescence while the wildtype protein functions naturally. The fluorescence level (EGFP: excitation wavelength 485 nm, detection wavelength 528 nm; mCherry: excitation 550 nm, detection 590 nm) is quantified by the concentration of fluorescein, and normalized by the measured OD600 equivalent to the number of beads in the system. The fluorescein for EGFP and silica beads are from the iGEM distributed measurement kit, red fluorescence is quantified by rhodamine B (Sigma-Aldrich, #S1402-1G). Error bar in the two graphs on the first row indicates the SEM of three replicates.</p>
 +
  </div>
 +
</div>
  
</ul>
+
<div id="ReverseTranscription" class="section container scrolSpy">
+
  <h2>Reverse transcription (RT)</h2>
<style>
+
  <h4>The successful expression of RT</h4>
.leftNav{
+
  <p class="flow-text">RT is expressed under an IPTG controlled promoter, we constructed a series of promoters by placing a LacO fragment under a stable promoter, and hopes to determine under which we could achieve most stringent control. The constructs we tested are: T5, T5-LacO, T7-LacO, LacUV5-LacO, J23119-LacO.</p>
position: absolute;
+
  <p class="flow-text">We initially attempted to verify RT’s expression through an EGFP fusion protein. We fused the EGFP to the C’ end of pol protein, linked by a GS tag. But this construct proved unsuccessful (data not shown), possibly due to the length and complexity of the gag-pol polyprotein. Then we turned to directly expressing EGFP in the place of RT under the control of IPTG. If EGFP can be successfully expressed, so should RT. And results are obtained for each induction promoter construct (figure would be supplemented in presentation and poster).</p>
top:30vw;
+
  <p class="flow-text">We found through careful examination that this failure is due to problems with our plasmid construct, so we moved the RT to another tested plasmid, and through SDS-PAGE, verified its successful expression <a href="#Fig3">(Figure 3)</a>. Gag-pol polyprotein is expressed as a whole with its stop codon mutated into its readthrough product, glutamine. The polyprotein has three functional parts, capsid protein, protease and reverse transcriptase. We made Y586F mutation on reverse transcriptase to increase its mutation rate. From the PAGE gel, we can see that all three bands could be seen when induced.</p>
left:4%;
+
list-style: none;
+
z-index: 3;
+
text-align:left !important;
+
width:15vw;
+
}
+
.leftNav .leftNavA2{
+
position: relative;
+
}
+
.leftNav .leftNavA2:before {
+
content: "";
+
display: inline-block;
+
width: 5px;
+
height: 5px;
+
background-color: rgba(55,55,62,0.7);
+
border-radius: 50%;
+
position: absolute;
+
left: 0.3vw;
+
top:50%;
+
margin: 0;
+
padding: 0;
+
transform: translateY(-50%);
+
}
+
.leftNavUl2{
+
list-style: none;
+
}
+
.leftNavA{
+
display: block;
+
font-size: 1.1vw;
+
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
+
padding: 0.2vw 0.8vw;
+
color:#4CA198;
+
text-decoration: none;
+
}
+
.leftNavLi2{
+
width: 13vw;
+
margin:0.3vw  0;
+
line-height: 17px;
+
}
+
.leftNavA:visited{
+
text-decoration: none;
+
color:#4CA198;
+
}
+
.leftNavA:focus{
+
text-decoration: none;
+
color:#4CA198;
+
}
+
.leftNavA:hover,.leftNavA:active{
+
text-decoration: none;
+
color: #B0EBE4;
+
}
+
  
.leftNavA2{
+
  <div class="figureHolder" id="Fig3">
display: block;
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--Result_Fig3.gif" />
font-size: 1vw;
+
    <p><b>Figure 3. gag-pol polyprotein is successfully expressed and underwent excision in the cell.</b><br/>
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
+
    SDS-PAGE is performed on whole cell-lysis. The gag-pol polyprotein is split into three pieces, capsid protein (60.4 kDa), protease (13.5 kDa) and reverse transcriptase (69.1 kDa). Both versions of reverse transcriptase, one wildtype, the other Y586F mutant, are tested. -’ stands for uninduced sample, while ‘+’ stands for sample after induction. From the gel we could see that all three bands are brighter in the induced sample.</p>
padding: 0.1vw 1.5vw;
+
  </div>
color:rgba(168,168,168,1);
+
</div>
text-decoration: none;
+
}
+
.leftNavA2:visited{
+
text-decoration: none;
+
color:rgba(168,168,168,1);
+
}
+
.leftNavA2:focus{
+
text-decoration: none;
+
color:rgba(168,168,168,1);
+
}
+
.leftNavA2:hover,.leftNavA2:active{
+
text-decoration: none;
+
color: white;
+
}
+
.menu-active,.menu-active:focus{
+
text-decoration: none;
+
color: white;
+
}
+
.menu-active2,.menu-active2:focus{
+
text-decoration:none;
+
color:#B0EBE4;
+
}
+
+
+
@media only screen and (max-width:768px){
+
.leftNav{
+
display:none;
+
}
+
}
+
</style>
+
  
 +
<div id="Recombination" class="section container scrolSpy">
 +
  <h2>Recombination</h2>
 +
  <h4>Cre expression is controlled by Tet operon</h4>
 +
  <p class="flow-text">We placed Cre under the promoter ptetR, whose expression is controlled by its inhibitor TetR. Regarding where we should place the inhibitor gene to maximize its expression, we opted between 2 options, one is placing it downstream of the LacI inhibitor, the other is to place it downstream of the kanamycin resistance gene (KanR). We tested both construct by placing an EGFP in these two places and measuring its fluorescence emission. Results show that the expression level is almost the same in both construct. </p>
  
+
  <h4>Cre initiates excision between two homologous loxP site</h4>
<div id="pageContent">
+
  <p class="flow-text">Placing 2 wild-type loxP on both ends of the target sequence (mCherry) in the same direction, and expressing it under a stable promoter (J23101). By co-transforming the target plasmid with another plasmid carrying Cre recombinase, we verified that our Cre protein functions accordingly by excising the mCherry sequence from the promoter <a href="#Fig4">(Figure 4)</a>.</p>
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Content ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<div class="container" id="containerWithLeftNav">
+
<div class="row">
+
+
<div class="row para1">
+
<div class="row">
+
<div class="col">
+
Our system can be divided into three biochemical steps: transcription of the target sequence into mRNA, reverse transcription of the target sequence into double-stranded cDNA, and recombination for the cDNA to replace the target sequence. We set out to separately verify each step.
+
</div>
+
</div>
+
</div>
+
+
<div class="row title1" id="mainTitle1">
+
<div class="col">Transcription</div>
+
</div>
+
+
<div class="row para1">
+
<div class="row">
+
<div class="col">
+
We put the target sequence and its flanking elements together under a T7 stable promoter for high expression level of target RNA. To verify our R-Evolution system, we constructed 8 nonsense mutant of chloramphenicol resistance gene (Chl), bearing the 8 base pair substitution from sense codon to nonsense mutant. We verified this construct through culturing bacteria carrying the original version or mutant on plates containing chloramphenicol. We found that bacteria carrying the original Chl grow naturally, while no colony was formed on the plates of mChl (Table. 1). After adding the flanking sequences on both ends, we used the C158X mutant and showed that the gene’s function has not been changed by our conduct (Fig. 1).
+
</div>
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Table 1. Nonsense mutation disrupts the chloramphenicol resistance ability of Chl. </b><br />
+
Amp stands for ampicillin, Chl stands for chloramphenicol, the left column means that they are added to the plate. Chl acts as the positive control, cells grow naturally on both plates, while cells transformed with the negative control plasmid can only grow on plates containing ampicillin. Chl gene carrying nonsense mutation at different sites does not affect its ampicillin resistance, but chloramphenicol resistance is lost as no colony is formed.
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="row">
+
<div class="col">
+
In addition, we also constructed and verified nonsense mutants of fluorescent protein EGFP and mCherry at the 158th and 159th amino acid (Fig. 2), based on the split EGFP assay that either half of the protein cannot emit fluorescence1.
+
</div>
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 2.</b><br />
+
...
+
</div>
+
</div>
+
+
<div class="row title1" id="mainTitle2">
+
<div class="col">Reverse transcription</div>
+
</div>
+
+
<div class="row title2" id="mainTitle2_1">
+
<div class="col">The successful expression of reverse transcriptase</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
RT is expressed under an IPTG controlled promoter, we constructed a series of promoters by placing a LacO fragment under a stable promoter, and hopes to determine under which we could achieve most stringent control. The constructs we tested are—T5, T5-LacO, T7-LacO, LacUV5-LacO, J23119-LacO.
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
We initially attempted to verify RT’s expression through an EGFP fusion protein. We fused the EGFP to the C’ end of pol protein, linked by a GS tag. But this construct proved unsuccessful (data not shown), possibly due to the length and complexity of the gag-pol polyprotein. Then we turned to directly expressing EGFP in the place of RT under the control of IPTG. If EGFP can be successfully expressed, so should RT. Unfortunately, we failed to detect green fluorescence in either case (Fig. 3).
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 3.</b><br />
+
...
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
We found through careful examination that this failure is due to problems with our plasmid construct, so we moved the RT to another tested plasmid, and through SDS-PAGE, verified its successful expression (Fig. 4).
+
  
</div>
+
  <div class="figureHolder" id="Fig4">
</div>
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/e8/T--Fudan-TSI--Result_Fig5.gif" />
+
    <p><b>Figure 4. lox511 remains compatible with wildtype loxP, though at a lower excision rate.</b><br/>
<div class="row legend">
+
    Wildtype loxP and lox511-mCherry-loxP are analyzed on two different gels, their marker bands are indicated. Wildtype loxP only has an excision band. lox511 has a slight full-length mCherry band slightly longer than 1000 bp, which correlates with the full length between two loxP, but excision band is still visible and brighter than that of full-length mCherry. This result suggests that lox511 still interacts with wildtype loxP and go through excision, but at a lower efficiency.</p>
<div class="row">
+
  </div>
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 4. </b><br />
+
...
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle2_2">
+
<div class="col">RT can complete reverse transcription in vitro</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
!!! don’t know if this result is able to obtain or not
+
</div>
+
</div>
+
+
<div class="row title1" id="mainTitle3">
+
<div class="col">Recombination</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_1">
+
<div class="col">Cre expression is controlled by Tet operon</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
We placed Cre under the promoter ptetR, whose expression is controlled by its inhibitor TetR. Regarding where we should place the inhibitor gene to maximize its expression, we opted between 2 options, one is placing it downstream of the LacI inhibitor, the other is to place it downstream of the kanamycin resistance gene (KanR). We tested both construct by placing an EGFP in these two places and measuring its fluorescence emission. Results show that the expression level is almost the same in both construct (Fig. 5).
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 5. EGFP expression level is relatively the same downstream of LacI or KanR.</b><br />
+
The vertical axe shows the semiquantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600).
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_2">
+
<div class="col">Cre initiates excision between two homologous loxP site</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
Placing 2 wild-type loxP on both ends of the target sequence (mCherry) in the same direction, and expressing it under a stable promoter (J23101). By co-transforming the target plasmid with another plasmid carrying Cre recombinase, we verified that our Cre protein functions accordingly by excising the mCherry sequence from the promoter (Fig. 6). Through PCR amplification with the primers annealing to sequences outside the target, and subsequent electrophoresis, we found that the band from bacteria co-transforming Cre corresponds to the excision of mCherry.
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 6. Cre excises sequences flanked by homologous loxP sites, but are incompatible with its mutant version. </b><br />
+
Ctr stands for control, Ctr+ means the positive control group in which mCherry is transformed with an empty plasmid without Cre, while Ctr- means the negative control group in which Cre is transformed with an empty plasmid without mCherry. The 3 middle lanes stand for Cre co-transforming with mCherry flanked on both ends by wildtype loxP (Lane 3), or with wildtype loxP on only one end, the other end being lox2272 (Lane 4) or lox5171 (Lane 5). mCherry flanked with lox2272 or lox5171 on one end does not go through excision so a full-length band was detectable, while mCherry flanked with wildtype loxP on both ends are excised and only a shorter band was seen.
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 7. lox511 remains compatible with wildtype loxP, though at a lower excision rate. </b><br />
+
Wildtype loxP and lox511-mCherry-loxP are analyzed on two different gels, their marker bands are indicated. Wildtype loxP only has an excision band. lox511 has a slight full-length mCherry band slightly longer than 1000 bp, which corresponds with the Ctr+ result in Fig. 6, but excision band is still visible and brighter than that of full-length mCherry. This result suggests that lox511 still interacts with wildtype loxP and go through excision, but at a lower efficiency.
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_3">
+
<div class="col">lox5171 is most incompatible with wildtype loxP (wtlox)</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
When we were carrying out integrated human practice, we were warned by Prof. Wang that two homologous loxP would be excised at a much higher efficiency than performing recombination as we wished, so we searched the literature and selected 3 mutants that are said to be incompatible with wtlox but are compatible with themselves, they are lox511, lox2272 and lox5171. We tested their incompatibility with wtlox by replacing one of wtlox into the mutant at the ends of mCherry, and co-transformed the plasmid with Cre (Fig. 6 &amp; 7). The result we obtained showed that lox5171-mCherry-wtlox performs best, and used it in further analysis (Fig. 6).
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_4">
+
<div class="col">Cre with degradation tags</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
When our modelling demonstrated to us that the expression level of Cre needs to be much lower than that of RT, we introduced degradation tags. By attaching them to the C terminal of Cre recombinase, the protein would be rapidly recognized and degraded by the E. coli’s native SsrA-SmpB degradation system. This construct could also solve the problem of basal leakage and continued existence after inducer removal. Apart from the native AANDENYALAA tag, we also modified its last three or five amino acids into YALAV, YALVA, YALVV and WVLAA. We tested the stable expression level, as well as the degradation dynamic of each tag by attaching them to the C terminal of EGFP protein and measuring the change in fluorescence level (Fig. 8 &amp; 9). The stable state expression increases as the number of mutated amino acids increase, or the mutated site nears the N’ of the tag. Supported by our modelling result, we deemed that the XXX tag performs best and chose to use it in further experiments.
+
</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
</div>
+
<div class="row legends">
+
<b>Figure 8. Degradation tag greatly reduces the protein level at stable state.</b><br />
+
WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axe shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescent level below detection level are eliminated from the result. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P&lt;0.0001 (****).
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
<div class="col">
+
!!! don’t know if this result is able to obtain or not
+
</div>
+
</div>
+
</div>
+
+
+
<div class="row title3" id="mainTitle4">
+
<div class="col">References</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
<div class="col">
+
<ul class="paraUl" style="list-style:none;">
+
<li>Pathmanathan, S., Barnard, E. &amp; Timson, D. J. Interactions between the budding yeast IQGAP homologue Iqg1p and its targets revealed by a split-EGFP bimolecular fluorescence complementation assay. Cell Biol. Int. 32, 1318–1322 (2008).</li>
+
</ul>
+
</div>
+
</div>
+
</div>
+
+
+
</div>
+
</div>
+
+
  
+
  <p class="flow-text">Through PCR amplification with the primers annealing to sequences outside the target, and subsequent electrophoresis, we found that the band from bacteria co-transforming Cre corresponds to the excision of mCherry.</p>
</div>
+
+
+
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Foot ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<footer id="FudanFooter" class="page-footer grey">
+
+
<div class="container" id="footContainer">
+
<div class="row">
+
<div class="col-md-4" id="sponser" style="padding-top:3%;">
+
<div class="row">
+
<div class="col-sm-6" style="padding:0;">
+
<div class="row align-items-center">
+
<div class="col">
+
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
+
</div>
+
<div class="col">
+
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
+
</div>
+
</div>
+
</div>
+
<div class="col-sm-6" style="padding:0;">
+
<div class="row align-items-center">
+
<div class="col">
+
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
+
</div>
+
<div class="col">
+
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="row">
+
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
+
</div>
+
</div>
+
+
<div class="col-md-8" id="usefulLinks">
+
<div class="row">
+
<div class="col-lg-6" style="padding:0;">
+
<div class="row">
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
+
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
+
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
+
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
+
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center active">
+
<span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
+
<li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
+
<li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
<li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
<li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
<span style="text-decoration:none;">Model</span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
+
<li><a href="/Team:Fudan-TSI/Software">Software</a></li>
+
<li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
</ul>
+
</div>
+
</div>
+
+
</div>
+
</div>
+
<div class="col-lg-6" style="padding:0;">
+
<div class="row">
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
+
<li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
+
<li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
+
<li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
+
<li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
+
</ul>
+
</div>
+
</div>
+
+
<div class="col-sm-4">
+
<div class="footerUl align-items-center">
+
  <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
+
<ul>
+
<li><a href="/Team:Fudan-TSI/Team">Members</a></li>
+
<li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
+
<li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
+
<li><a href="/Team:Fudan-TSI">&#169; 2019</a></li>
+
</ul>
+
</div>
+
</div>
+
+
</div>
+
</div>
+
+
+
</div>
+
</div>
+
</div>
+
</div>
+
+
<div class="footer-copyright">
+
<div class="container" style="width:90%;">
+
<div class="contactUS row">
+
  <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
+
  </div>
+
<div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
+
  </div>
+
</div>
+
</div>
+
</div>
+
</footer>
+
+
+
  
</div>
+
  <h4>lox5171 is most incompatible with wildtype loxP (wtlox)</h4>
 +
  <p class="flow-text">When we were carrying out integrated human practice, we were warned by <a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Prof. Wang</a> that two homologous loxP would be excised at a much higher efficiency than performing recombination as we wished, so we searched the literature and selected 3 mutants that are said to be incompatible with wtlox but are compatible with themselves, they are lox511, lox2272 and lox5171.</p>
 +
  <p class="flow-text">We tested their incompatibility with wtlox by replacing one of wtlox into the mutant at the ends of mCherry, and co-transformed the plasmid with Cre <a href="#Fig5">(Figure 5</a><a href="#Fig6"> &amp; 6)</a>. The result we obtained showed that lox5171-mCherry-wtlox performs best, and used it in further analysis <a href="#Fig6">(Figure 6)</a>.</p>
  
+
  <div class="figureHolder" id="Fig5">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/9/9e/T--Fudan-TSI--Result_Fig6.gif" />
<script>
+
    <p><b>Figure 5. Schematic diagram of loxP mutant incompatibility test.</b></p>
+
  </div>
var winHeight=$(window).height();
+
var winWidth=$(window).width();
+
var pagePosition=$("#pageContent").offset().top+90;
+
var navHeight=$(".leftNav").height();
+
var footerHeight=$("#FudanFooter").height();
+
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
$(window).resize(function(){
+
var winHeight=$(window).height();
+
var winWidth=$(window).width();
+
var topDistance=$(window).scrollTop()+0.25*winHeight;
+
var navHeight=$(".leftNav").height();
+
var footerHeight=$("#FudanFooter").height();
+
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
+
var leftNavFromTop=pagePosition-$(window).scrollTop();
+
if (leftNavFromTop<0.25*winHeight){
+
if(topDistance<maxTopDistance){
+
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
+
}
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
}
+
});
+
  
$(window).scroll(function(){
+
  <div class="figureHolder" id="Fig5">
var winHeight=$(window).height();
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/b/b3/T--Fudan-TSI--Result_Fig7.gif" />
var winWidth=$(window).width();
+
    <p><b>Figure 6. Cre excises sequences flanked by homologous loxP sites, but are incompatible with its mutant version.</b><br/>
var leftNavFromTop=pagePosition-$(window).scrollTop();
+
    The above column shows which plasmids are transformed. The 3 middle lanes stand for Cre co-transforming with mCherry flanked on both ends by wildtype loxP (Lane 3), or with wildtype loxP on only one end, the other end being lox2272 (Lane 4) or lox5171 (Lane 5). mCherry flanked with lox2272 or lox5171 on one end does not go through excision so a full-length band was detectable, while mCherry flanked with wildtype loxP on both ends are excised and only a shorter band was seen.</p>
var topDistance=$(window).scrollTop()+0.25*winHeight;
+
  </div>
if (leftNavFromTop<0.25*winHeight){
+
if(topDistance<maxTopDistance){
+
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
+
};
+
}
+
else{
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
+
}
+
});
+
+
$(".leftNav a").click(function () {
+
$('html, body').animate({
+
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
+
}, 500);
+
return false;
+
});
+
  
 +
  <h4 id="degradation">Cre with degradation tags</h4>
 +
  <p class="flow-text">When our <a href="/Team:Fudan-TSI/Model">modeling</a> demonstrated to us that the expression level of Cre needs to be much lower than that of RT, we introduced degradation tags. By attaching them to the C terminal of Cre recombinase, the protein would be rapidly recognized and degraded by the <i>E. coli</i>’s native SsrA-SmpB degradation system. This construct could also solve the problem of basal leakage and continued existence after inducer removal.</p>
  
$(window).scroll(function(){
+
  <div class="figureHolder" id="Fig7">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Result_Fig8.gif" />
var currentScroll=$(this).scrollTop();
+
    <p><b>Figure 7. Degradation tag greatly reduces the protein level at stable state.</b><br/>
var firstHeight=$("#pageCover").height();
+
    <br/>WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axis shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescence below detection level are eliminated. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P<0.0001 (****).</p>
var footerFromTop=$("#FudanFooter").offset().top;
+
  </div>
var $currentSection=null;
+
$(".leftNavA").each(function(){
+
$('.leftNavA').removeClass('menu-active');
+
var hePoint=$($(this).attr("href"));
+
var divPosition=hePoint.offset().top-$("#navUl").height()-50;
+
if (divPosition-1<currentScroll){
+
$currentSection=$(this);
+
}
+
if (currentScroll>firstHeight){
+
$(".leftNavA").removeClass("menu-active");
+
$currentSection.addClass("menu-active");
+
}
+
});
+
+
var $currentSection2;
+
$('.leftNavA2').each(function(){
+
$('.leftNavA2').removeClass('menu-active2');
+
var hePoint2=$($(this).attr("href"));
+
var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
+
if (divPosition2-1<currentScroll){
+
$currentSection2=$(this);
+
}
+
if (currentScroll>firstHeight){
+
$('.leftNavA2').removeClass('menu-active2');
+
$currentSection2.addClass('menu-active2');
+
}
+
});
+
});
+
  
</script>
+
  <p class="flow-text">Apart from the native AANDENYALAA tag, we also modified its last three or five amino acids into YALAV, YALVA, YALVV and WVLAA. We tested the stable expression level, as well as the degradation dynamic of each tag by attaching them to the C terminal of EGFP protein and measuring the change in fluorescence level <a href="#Fig7">(Figure 7)</a>. The stable state expression increases as the number of mutated amino acids increase, or the mutated site nears the N’ of the tag. Supported by our modeling result, we deemed that the XXX tag performs best and chose to use it in further experiments.</p>
 +
</div>
  
+
<div id="section4" class="section container scrolSpy">
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+
  <h2>Modeling</h2>
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
  <div class="figureHolder">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/d/df/T--Fudan-TSI--DemoMd.gif" />
 +
    <p><b>Figure 8. Recombined P<sub>target</sub> would occur when RT and Cre is expressed at a proper level.</b>
 +
    <br/>Dynamics of the percentage of un-recombined / recombined Ptarget among all Ptargets is shown in the upper panel. The distribution of the percentage of substances at the steady-state is shown in the lower panel. Ps: un-recombined Ptarget. Pp: recombined Ptarget. The result that intermediate formed by un-recombined Ptarget and T7RNA polymerase shows that mutation on Parget can accumulate.</p>
 +
  </div>
 +
  <p class="flow-text">Our modelling successfully demonstrated that our system could function and mutation could accumulate along bacteria growth <a href="#Fig8">(Figure 8)</a>. For detailed explanation of our system, please visit our <a href="Team:Fudan-TSI/Model">Modeling</a> page.</p>
 +
</div>
  
  
+
<!--////////////////////////////////////////////////////
+
      do not edit below, if must BE CAREFUL
+
  //////////////////////////////////////////////////////-->
+
      </article></main></div><!-- end of side navigator and main of the page -->
+
+
+
  
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->
+
<!-- Floating Btns, Footer with sponsors -->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
      <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">Project</a></span><ul><li><a href="/Team:Fudan-TSI/Description">Background</a></li><li><a href="/Team:Fudan-TSI/Design">Design</a></li><li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Model">Model</a></span><ul><li><a href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a href="/Team:Fudan-TSI/Software">Software</a></li><li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></div><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span><ul><li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">Team</a></span><ul><li><a href="/Team:Fudan-TSI/Team">Members</a></li><li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4">&nbsp;</div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai</div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727</div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn</div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer>
 +
</div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper -->
  
 +
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 -->
 +
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script>
 +
</body>
 
</html>
 
</html>

Latest revision as of 05:50, 16 November 2019

Demonstration | 2019 iGEM Team:Fudan-TSI


Demonstration

Mutation library generation is critical for biological and medical research. Our R-Evolution toolbox is orthogonal and provides a wide range of applications among various species, and serves as a foundational advance to synthetic biology.

cover gif 1st added

Our system can be divided into three biochemical steps: 1) transcription of the target sequence into mRNA, 2) reverse transcription of the target sequence into double-stranded cDNA, 3) recombination for the cDNA to replace the target sequence. We set out to separately verify each step before integrating together. Our team logo shows the mutants accumulated by varying blue colors.

Transcription

Figure 1. The flanking of reverse transcription initiation and loxP sequences does not disrupt Chl functionality.
Wildtype Chl gene continues to express and colonies are grown on the plate containing chloramphenicol (plate on the right). The L158X mutant cannot express functional resistance gene and thus the plate is devoid of cell colony (plate on the right).

We put the target sequence and its flanking elements together under a T7 stable promoter for high expression level of target RNA. To verify our R-Evolution system, we constructed 8 nonsense mutant of chloramphenicol resistance gene (Chl), bearing the 8 base pair substitution from sense codon to nonsense mutant. We verified this construct through culturing bacteria carrying the original version or mutant on plates containing chloramphenicol. We found that bacteria carrying the original Chl grow naturally, while no colony was formed on the plates of mChl (Table. 1). After adding the flanking sequences on both ends, we used the C158X mutant and showed that the gene’s function has not been changed by our conduct (Figure 1).

Table 1. Nonsense mutation disrupts the chloramphenicol resistance ability of Chl.
Amp stands for ampicillin, Chl stands for chloramphenicol, the left column means that they are added to the plate. Chl acts as the positive control, cells grow naturally on both plates, while cells transformed with the negative control plasmid can only grow on plates containing ampicillin. Chl gene carrying nonsense mutation at different sites does not affect its ampicillin resistance, but chloramphenicol resistance is lost as no colony is formed. Single colony was picked and shook in liquid culture overnight, the plate was coated with 100 μL culture after 104 dilution.

Control  Chl     Chl-Y33X Chl-W85X Chl-E97X Chl-S121X Chl-L158X Chl-K182X Chl-Q190X
Amp 19 192 291 128 236 138 255 175 276
Amp & Chl 0 30 0 0 0 0 0 0 0

In addition, we also constructed and verified nonsense mutants of fluorescent protein EGFP and mCherry at the 158th and 159th amino acid (Figure 2).

Figure 2. mCherry cannot emit fluorescence.
The vertical axis shows the quantified level of EGFP expression. Mutants of the fluorescence proteins cannot emit fluorescence while the wildtype protein functions naturally. The fluorescence level (EGFP: excitation wavelength 485 nm, detection wavelength 528 nm; mCherry: excitation 550 nm, detection 590 nm) is quantified by the concentration of fluorescein, and normalized by the measured OD600 equivalent to the number of beads in the system. The fluorescein for EGFP and silica beads are from the iGEM distributed measurement kit, red fluorescence is quantified by rhodamine B (Sigma-Aldrich, #S1402-1G). Error bar in the two graphs on the first row indicates the SEM of three replicates.

Reverse transcription (RT)

The successful expression of RT

RT is expressed under an IPTG controlled promoter, we constructed a series of promoters by placing a LacO fragment under a stable promoter, and hopes to determine under which we could achieve most stringent control. The constructs we tested are: T5, T5-LacO, T7-LacO, LacUV5-LacO, J23119-LacO.

We initially attempted to verify RT’s expression through an EGFP fusion protein. We fused the EGFP to the C’ end of pol protein, linked by a GS tag. But this construct proved unsuccessful (data not shown), possibly due to the length and complexity of the gag-pol polyprotein. Then we turned to directly expressing EGFP in the place of RT under the control of IPTG. If EGFP can be successfully expressed, so should RT. And results are obtained for each induction promoter construct (figure would be supplemented in presentation and poster).

We found through careful examination that this failure is due to problems with our plasmid construct, so we moved the RT to another tested plasmid, and through SDS-PAGE, verified its successful expression (Figure 3). Gag-pol polyprotein is expressed as a whole with its stop codon mutated into its readthrough product, glutamine. The polyprotein has three functional parts, capsid protein, protease and reverse transcriptase. We made Y586F mutation on reverse transcriptase to increase its mutation rate. From the PAGE gel, we can see that all three bands could be seen when induced.

Figure 3. gag-pol polyprotein is successfully expressed and underwent excision in the cell.
SDS-PAGE is performed on whole cell-lysis. The gag-pol polyprotein is split into three pieces, capsid protein (60.4 kDa), protease (13.5 kDa) and reverse transcriptase (69.1 kDa). Both versions of reverse transcriptase, one wildtype, the other Y586F mutant, are tested. ‘-’ stands for uninduced sample, while ‘+’ stands for sample after induction. From the gel we could see that all three bands are brighter in the induced sample.

Recombination

Cre expression is controlled by Tet operon

We placed Cre under the promoter ptetR, whose expression is controlled by its inhibitor TetR. Regarding where we should place the inhibitor gene to maximize its expression, we opted between 2 options, one is placing it downstream of the LacI inhibitor, the other is to place it downstream of the kanamycin resistance gene (KanR). We tested both construct by placing an EGFP in these two places and measuring its fluorescence emission. Results show that the expression level is almost the same in both construct.

Cre initiates excision between two homologous loxP site

Placing 2 wild-type loxP on both ends of the target sequence (mCherry) in the same direction, and expressing it under a stable promoter (J23101). By co-transforming the target plasmid with another plasmid carrying Cre recombinase, we verified that our Cre protein functions accordingly by excising the mCherry sequence from the promoter (Figure 4).

Figure 4. lox511 remains compatible with wildtype loxP, though at a lower excision rate.
Wildtype loxP and lox511-mCherry-loxP are analyzed on two different gels, their marker bands are indicated. Wildtype loxP only has an excision band. lox511 has a slight full-length mCherry band slightly longer than 1000 bp, which correlates with the full length between two loxP, but excision band is still visible and brighter than that of full-length mCherry. This result suggests that lox511 still interacts with wildtype loxP and go through excision, but at a lower efficiency.

Through PCR amplification with the primers annealing to sequences outside the target, and subsequent electrophoresis, we found that the band from bacteria co-transforming Cre corresponds to the excision of mCherry.

lox5171 is most incompatible with wildtype loxP (wtlox)

When we were carrying out integrated human practice, we were warned by Prof. Wang that two homologous loxP would be excised at a much higher efficiency than performing recombination as we wished, so we searched the literature and selected 3 mutants that are said to be incompatible with wtlox but are compatible with themselves, they are lox511, lox2272 and lox5171.

We tested their incompatibility with wtlox by replacing one of wtlox into the mutant at the ends of mCherry, and co-transformed the plasmid with Cre (Figure 5 & 6). The result we obtained showed that lox5171-mCherry-wtlox performs best, and used it in further analysis (Figure 6).

Figure 5. Schematic diagram of loxP mutant incompatibility test.

Figure 6. Cre excises sequences flanked by homologous loxP sites, but are incompatible with its mutant version.
The above column shows which plasmids are transformed. The 3 middle lanes stand for Cre co-transforming with mCherry flanked on both ends by wildtype loxP (Lane 3), or with wildtype loxP on only one end, the other end being lox2272 (Lane 4) or lox5171 (Lane 5). mCherry flanked with lox2272 or lox5171 on one end does not go through excision so a full-length band was detectable, while mCherry flanked with wildtype loxP on both ends are excised and only a shorter band was seen.

Cre with degradation tags

When our modeling demonstrated to us that the expression level of Cre needs to be much lower than that of RT, we introduced degradation tags. By attaching them to the C terminal of Cre recombinase, the protein would be rapidly recognized and degraded by the E. coli’s native SsrA-SmpB degradation system. This construct could also solve the problem of basal leakage and continued existence after inducer removal.

Figure 7. Degradation tag greatly reduces the protein level at stable state.

WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axis shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescence below detection level are eliminated. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P<0.0001 (****).

Apart from the native AANDENYALAA tag, we also modified its last three or five amino acids into YALAV, YALVA, YALVV and WVLAA. We tested the stable expression level, as well as the degradation dynamic of each tag by attaching them to the C terminal of EGFP protein and measuring the change in fluorescence level (Figure 7). The stable state expression increases as the number of mutated amino acids increase, or the mutated site nears the N’ of the tag. Supported by our modeling result, we deemed that the XXX tag performs best and chose to use it in further experiments.

Modeling

Figure 8. Recombined Ptarget would occur when RT and Cre is expressed at a proper level.
Dynamics of the percentage of un-recombined / recombined Ptarget among all Ptargets is shown in the upper panel. The distribution of the percentage of substances at the steady-state is shown in the lower panel. Ps: un-recombined Ptarget. Pp: recombined Ptarget. The result that intermediate formed by un-recombined Ptarget and T7RNA polymerase shows that mutation on Parget can accumulate.

Our modelling successfully demonstrated that our system could function and mutation could accumulate along bacteria growth (Figure 8). For detailed explanation of our system, please visit our Modeling page.