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

m
 
(8 intermediate revisions by 4 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>Design | 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">Design</span></p>
 +
    </div></li>
 +
    <li>
 +
      <ul class="collapsible expandable">
 +
        <li class="onThisPageNav"><span>On this page</span></li>
 +
        <li class="onThisPageNav"><a href="#section1">MMLV-RT</a></li>
 +
        <li class="onThisPageNav"><a href="#section2">tRNA primer</a></li>
 +
        <li class="onThisPageNav"><a href="#section3">Flanking sequences</a></li>
 +
        <li class="onThisPageNav"><a href="#section4">Cre recombinase</a></li>
 +
        <li class="onThisPageNav"><a href="#section5">Experiments</a></li>
 +
        <li class="onThisPageNav"><a href="#section6">Testing</a></li>
 +
        <li class="onThisPageNav"><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li>
 +
        <li class="onThisPageNav"><a href="#section7">References</a></li>
  
 +
        <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header active"><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"><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/>Design</h1>
 +
                  <p class="flow-text">We hereby present a toolbox for <i>in vivo</i> continuous mutation library construction. R-Evolution could mutate coding sequences and regulatory sequences, which enables the evolution of individual proteins or multiple targets at a time, promotes high-throughput research, 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;
+
width:100%!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{
+
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 {
+
font-size: 20px;
+
}
+
+
 
+
#FudanFooter div.footer-copyright {
+
font-size: 13px;
+
line-height: 15px;
+
}
+
.footerUl{
+
margin:2% 4%;
+
}
+
</style>
+
 
+
<script>
+
+
$(document).ready(function(){
+
+
+
var winWidth=$(window).width();
+
+
if (winWidth>1100){
+
$(".navA").mouseenter(function(){
+
$(this).parent().find(".ul2").stop().fadeIn(400);
+
});
+
$(".navLi").mouseleave(function(){
+
$(this).find(".ul2").stop().fadeOut(400);
+
});
+
+
+
}
+
else{
+
$(".navA:not(.noSubmenu)").removeAttr("href");
+
$("#mobileNav").click(function(){
+
$("#navBar").toggle();
+
});
+
$(document).click(function(event){
+
var m = $("#mobileNav,#navBar");
+
if (!m.is(event.target)){
+
if (m.has(event.target).length===0){
+
$("#navBar").hide();
+
$(".open").parent().find(".navA").css("color","white");
+
$(".open").removeClass("open");
+
}
+
 
+
}
+
});
+
$(".navLi").click(function(){
+
if ($(this).find(".n2").hasClass("open")){
+
$(".open").parent().find(".navA").css("color","white");
+
$(this).find(".n2").removeClass("open");
+
}
+
else{
+
$(".open").parent().find(".navA").css("color","white");
+
$(".open").removeClass("open");
+
$(this).find(".n2").addClass("open");
+
$(this).find(".navA").css("color","#7dded4");
+
}
+
});
+
}
+
+
+
+
+
+
+
});
+
+
+
</script>
+
+
+
+
<div id="global_wrapper">
+
<div id="mobileNav">
+
+
<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>
+
+
</div>
+
+
<ul id="navUl">
+
+
<li id="navImg">
+
<img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
+
+
</li>
+
+
+
<ul id="navBar">
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Applied_Design" style="white-space:nowrap">Applied Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiments">Experiment</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
+
<div class="n2">
+
<ul class="ul2">
+
<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>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model">Model</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
</ul>
+
</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/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/Attribution">Attribution</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Acknowledgment">Acknowledgement</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Team/Judging">Judging</a></li>
+
+
</ul>
+
+
+
</ul>
+
 
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Cover ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
<div id="pageCover">
+
+
<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>
+
<script>
+
$(document).ready(function($){
+
var $root = $('html, body');
+
$('a[href^="#"]').click(function() {
+
var href = $.attr(this, 'href');
+
$root.animate({
+
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/d/d9/T--Fudan-TSI--coverDesign.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:550px;
+
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:500px;
+
margin:7vh auto;
+
}
+
}
+
@media only screen and (max-width:992px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:500px;
+
margin:6vh auto;
+
}
+
}
+
@media only screen and (max-width:768px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:400px;
+
margin:8vh auto;
+
}
+
}
+
@media only screen and (max-width:500px){
+
#coverPic{
+
width:200px;
+
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>
+
+
 
+
 
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Left Navigator ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
+
 
+
<ul class="leftNav" style="margin:0;padding:0;">
+
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Reverse transcription</a>
+
<ul class="leftNavUl2">
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle1_1">MMLV RT</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle1_2">tRNA</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle1_3">Flanking sequences</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle1_4">Experimental design</a></li>
+
</ul>
+
</li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Recombination</a>
+
<ul class="leftNavUl2">
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_1">Cre recombinase</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_2">Flanking sequence</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_3">Cre mutation and alternative versions</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_4">Testing</a></li>
+
</ul>
+
</li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">Demonstration</a>
+
<ul class="leftNavUl2">
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_1">System verification</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_2">Sequence specificity</a></li>
+
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_3">Host adaptability</a></li>
+
<li class="leftNavLi2" style="display:none;"><a class="leftNavA2" href="#mainTitle3_4"></a></li>
+
</ul>
+
</li>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">References</a></li>
+
 
+
 
+
 
+
</ul>
+
+
 
+
 
+
 
+
<style>
+
.leftNav{
+
position: absolute;
+
top:30vw;
+
left:4%;
+
list-style: none;
+
z-index: 3;
+
text-align:left !important;
+
width:17vw;
+
}
+
.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.3vw;
+
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{
 
display: block;
 
font-size: 1.15vw;
 
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 
padding: 0.2vw 1.5vw;
 
color:rgba(168,168,168,1);
 
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>
 
  
 +
          // 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);
 +
              }
 +
            }
 +
          }
  
 
<div id="pageContent">
 
<!----------------------------------------------------------------------------------------------------------------------------------------->
 
<!---- Content ---->
 
<!----------------------------------------------------------------------------------------------------------------------------------------->
 
 
<div class="container" id="containerWithLeftNav">
 
<div class="row">
 
 
<div class="row title1" id="mainTitle1">
 
<div class="col">Reverse transcription</div>
 
</div>
 
 
<div class="row title2" id="mainTitle1_1">
 
<div class="col">Moloney murine leukemia virus reverse transcriptase</div>
 
</div>
 
 
 
 
<div class="row title3">
 
<div class="col"><i>Why MMLV?</i></div>
 
</div>
 
 
 
<div class="row para1">
 
<div class="row">
 
<div class="col">
 
Reverse transcriptase (RT) is one of the most crucial part in our system, we chose it from Moloney murine leukemia virus (MMLV) for five reasons.
 
</div>
 
</div>
 
<div class="row">
 
<div class="col">
 
 
1. MMLV-RT’s enhanced version is commonly used in <i>in vitro</i> reverse transcription, which guarantees the safety and well characterization of this part.<br />
 
2. Unlike the reverse transcriptase of HIV, MMLV-RT acts as a monomer, this brings less trouble to its production in an heterogenous host.<br />
 
3. MMLV is a eukaryotic virus, which means it’s orthogonal to prokaryotic species. This orthogonality makes up of the host adaptability of our system.<br />
 
4. MMLV-RT has a higher processivity in relation to other viruses’ RT such as HIV and AMV. This feature gives our system a greater range of mutagenesis length.<br />
 
5. MMLV-RT has low primer specificity, which means that if we change the sequence of its primer and its corresponding primer binding site (PBS), unlike HIV, the change will not be reverted in the following reverse transcription process. This makes it possible for us to customize the sequence of the tRNA primer used in accord with the target sequence <a href="https://2019.igem.org/Team:Fudan-TSI/Software"><u>in our software</u></a>.<br />
 
 
</div>
 
</div>
 
</div>
 
  
 +
        // 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);
 +
              }
 +
            }
 +
          }
  
<div class="row legend">
+
          var g = createRandomTesselation();
<div class="row">
+
          n = g.children.length;
<img src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--4mh8.gif" style="width:30%; margin:auto;">
+
          for (i = n; i--; ) {
</div>
+
          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});
<div class="row legends">
+
          }
Figure 1. Crystal structure of MMLV reverse transcriptase (PDB:4MH8).
+
          svg.appendChild(g);
</div>
+
          prevGroup = g;
</div>
+
        }
+
        }
<div class="row title3">
+
      })();
<div class="col"><i>Design</i></div>
+
      //////////////////////////////
</div>
+
      // Gradients
+
      //////////////////////////////
<div class="row para1">
+
      var gradients = (function() {
<div class="row">
+
        var grad1, grad2, showingGrad1;
<div class="col">
+
        // using colors from IBM Design Colors this time
Even though RT does the function of reverse transcription, what is expressed in the cell is its polyprotein version. The gag-pol polyprotein has four parts—capsid protein, protease (stop codon separated), reverse transcriptase, and integrase. The integrase is deleted from the polyprotein to eliminate the possibility of genome interference. The protease contains a UAG stop codon at its 5<sup>th</sup> amino acid site<sup>1</sup>, which is readthrough as glutamine at a 5% efficiency in its native host cells, to enable the 20:1 ratio between capsid and reverse transcriptase protein. As its readthrough efficiency is much lower in <i>E. coli</i> cells, and studies have shown that lower efficiency greatly damages the activity of reverse transcriptase<sup>2</sup>, we mutated the UAG codon into CAG, making a complete readthrough of the polyprotein. This will slightly decrease the activity of RT but within an acceptable range. The capsid protein is necessary as it has been found to promote the annealing of tRNA primer to the primer binding site (PBS) in MMLV, and plays an important role in the following two strand transfer steps<sup>3,4</sup>. To be certain of this design, we have consulted <a href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice"><u>Prof. Alper</u></a> through mail and received his confirmation on the necessity of the capsid protein.<br /><br />
+
        var colors = [ // 14 colors - use 3-5 span
To increase the mutation of our RT, we built a mutated version (Y1245F). This mutation has been shown to increase the mutation level by 5 times<sup>5</sup>.<br /><br />
+
        '#3c6df0', // ultramarine50
The gag-pol polyprotein is placed under Lac operon, whose expression controlled by IPTG.<br /><br />
+
        '#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 style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover Design" src="https://static.igem.org/mediawiki/2019/d/d9/T--Fudan-TSI--coverDesign.gif" /></center></div>
 +
          </div>
 +
      </div>
  
</div>
+
<!--////////////////////////////////////////////////////
</div>
+
      do not edit above, if must BE CAREFUL
</div>
+
  //////////////////////////////////////////////////////-->
+
      <div class="container">
<div class="row title2" id="mainTitle1_2">
+
          <!-- side navigator of page content -->
<div class="col">tRNA</div>
+
          <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
</div>
+
              <li class="onThisPageNav"><a href="#section1">MMLV-RT</a></li>
+
              <li class="onThisPageNav"><a href="#section2">tRNA&nbsp;primer</a></li>
<div class="row para1">
+
              <li class="onThisPageNav"><a href="#section3">Flanking&nbsp;sequences</a></li>
<div class="col">
+
              <li class="onThisPageNav"><a href="#section4">Cre&nbsp;recombinase</a></li>
The initiation of reverse transcription requires its cognate tRNA primer. For MMLV-RT, the primer is tRNA<sup>Pro</sup>(AGG)<sup>6</sup>. After comparing its sequence to the endogenous tRNA sequences in <i>E. coli</i>, we found very little homology between them, which again proves our system’s orthogonality to prokaryotic system. However, this also arises problems regarding its post-transcriptional processing. To make sure that the exogenous tRNA could be successfully expressed and processed in <i>E. coli</i> cells into its matured form, we placed it under two promoters, one T7 promoter, and another pGlnW promoter, which is the endogenous promoter for GlnW and its downstream MetU. The CCA motif is added to the 3’ end, and followed by the interval sequence between two tRNA<sup>Gln</sup>, and a T7Te terminator.<br /><br />
+
              <li class="onThisPageNav"><a href="#section5">Experiments</a></li>
 +
              <li class="onThisPageNav"><a href="#section6">Testing</a></li>
 +
              <li class="onThisPageNav"><a href="/Team:Fudan-TSI/Applied_Design">Applied&nbsp;design</a></li>
 +
              <li class="onThisPageNav"><a href="#section7">References</a></li>
 +
          </ul>
 +
          <!-- main content of the page -->
 +
          <main><article>
  
Apart from using the native tRNA<sup>Pro</sup>, which requires an additional PBS outside the target sequence, we have designed a software tool which can design novel tRNAs aligning with the target sequence.
+
<div id="section1" class="section container scrolSpy">
 +
  <h2>Moloney murine leukemia virus (MMLV) reverse transcriptase</h2>
 +
  <h4>Why MMLV?</h4>
 +
  <p class="flow-text">Reverse transcriptase (RT) is one of the most crucial part in our system, we chose it from Moloney murine leukemia virus (MMLV) for five reasons.</p>
 +
  <ul class="flow-text">
 +
    <li>MMLV-RT’s enhanced version is commonly used in in vitro reverse transcription, which guarantees the safety and well characterization of this part.</li>
 +
    <li>Unlike the reverse transcriptase of HIV, MMLV-RT acts as a monomer, this brings less trouble to its production in an heterogenous host.</li>
 +
    <li>MMLV is a eukaryotic virus, which means it’s orthogonal to prokaryotic species. This orthogonality makes up of the host adaptability of our system.</li>
 +
    <li>MMLV-RT has a higher processivity in relation to other viruses’ RT such as HIV and AMV. This feature gives our system a greater range of mutagenesis length.</li>
 +
    <li>MMLV-RT has low primer specificity, which means that if we change the sequence of its primer and its corresponding primer binding site (PBS), unlike HIV, the change will not be reverted in the following reverse transcription process. This makes it possible for us to customize the sequence of the tRNA primer used in accord with the target sequence in <a href="/Team:Fudan-TSI/Software">our software</a>.</li>
 +
  </ul>
 +
  <p class="flow-text">Even though RT does the function of reverse transcription, what is expressed in the cell is its polyprotein version. The gag-pol polyprotein has four parts—capsid protein, protease (stop codon separated), reverse transcriptase, and integrase. The integrase is deleted from the polyprotein to eliminate the possibility of genome interference. The protease contains a UAG stop codon at its 5<sup>th</sup> amino acid site <a href="#Ref1">(Yoshinaka et al.)</a>, which is readthrough as glutamine at a 5% efficiency in its native host cells, to enable the 20:1 ratio between capsid and reverse transcriptase protein. As its readthrough efficiency is much lower in <i>E. coli</i> cells, and studies have shown that lower efficiency greatly damages the activity of reverse transcriptase <a href="#Ref2">(Csibra et al.)</a>, we mutated the UAG codon into CAG, making a complete readthrough of the polyprotein. This will slightly decrease the activity of RT but within an acceptable range.</p>
  
</div>
+
  <div class="figureHolder" id="Fig1">
</div>
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--4mh8.gif" />
+
    <p>Figure 1. Crystal structure of MMLV reverse transcriptase (PDB:4MH8).</p>
<div class="row legend" style="margin-bottom:10%;">
+
  </div>
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/9/9a/T--Fudan-TSI--designRT.gif" style="width:70%; margin:auto;">
+
</div>
+
<div class="row legends">
+
Figure 2.
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle1_3">
+
<div class="col">Flanking sequences</div>
+
</div>
+
+
<div class="row para1">
+
<div class="row">
+
<div class="col col-md-12">
+
The reverse transcriptase has three functions: 1) RNA-dependent DNA polymerase 2) DNA-dependent DNA polymerase 3) RNaseH activity.<br /><br />
+
In a full reverse transcription process, the target strand will go through annealing with tRNA primer, and two strand transfer. To make sure that all three stages will be completed successfully, the noncoding sequences on the MMLV genome has been cloned to flank the target sequence. Flanking sequences include the following components:
+
</div>
+
</div>
+
<div class="row">
+
<div class="col">
+
<ul class="paraUl" style="list-style:none;">
+
<li>Primer binding site (PBS) recognizes and anneals with tRNA<sup>7</sup>, initiates reverse transcription.</li>
+
<li>5’ noncoding sequence (U5) has been shown to affect the replication ability of RT and its alteration affects the synthesis of minus strand DNA<sup>8</sup>, it is also linked with the efficiency of the first strand transfer.</li>
+
<li>Poly-purine tract (PPT) is resistant to RNaseH digestion, its remaining RNA serves as primer for the plus strand initiation<sup>9,10</sup>. We also reserved several nucleotides near its site for they have shown to impact the function of PPT<sup>11</sup>.</li>
+
</ul>
+
</div>
+
</div>
+
<div class="row" style="margin:0;">
+
<div class="col">
+
These sequences are transcribed with the target and helps to accomplish reverse transcription.
+
</div>
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle1_4">
+
<div class="col">Experimental design</div>
+
</div>
+
+
<div class="row title3">
+
<div class="col"><i>Successful induction and processing of reverse transcriptase</i></div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
EGFP is cloned in the place of the reverse transcriptase, and fluorescence level is measured.<br /><br />
+
The gag-pol polyprotein is induced and SDS-PAGE is run to see if it has been successfully processed by the protease.
+
</div>
+
</div>
+
+
<div class="row title3">
+
<div class="col"><i>Reverse transcription completion</i></div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
When Cre is not present in the cell, the system’s outcome would be reverse transcribed double-stranded cDNA. After lysing the cell and extracting its DNA components within, PCR amplification of the cDNA product would be performed and after electrophoresis, we could observe a brighter band if RT is induced to express compared to RT non-existent cells. For more quantitative analysis, qPCR would be performed.
+
</div>
+
</div>
+
+
<div class="row title1" id="mainTitle2">
+
<div class="col">Recombination</div>
+
</div>
+
+
<div class="row title2" id="mainTitle2_1">
+
<div class="col">Cre recombinase</div>
+
</div>
+
+
+
+
<div class="row para1">
+
<div class="col">
+
Cre recombinase is derived from P1 bacteriophage, which could initiate recombination events between two loxP sites. Cre recombinase binds to the palindromic sequence in loxP, and after forming a tetramer (two Cre on one loxP), its active site would initiate different recombination process based on the orientation of the two loxP<sup>12</sup>. Two loxP sites in the same direction would initiate self-splicing, resulting the sequence in between be excised and form a circular loop. If the two loxP sites are oriented opposingly, the sequence in between would be inverted. If the two loxP sites are placed on different sequences, the two sequence would be transferred into each other’s place, but at a lower efficiency than the other two events. Our system utilizes its strand-transfer recombination activity to insert the mutated target into its original place, thus replacing the unmutated version and allows for another round of mutation.<br /><br />
+
  
The expression of Cre recombinase is placed under a different operon, and anhydrotetracycline (aTc) serves as its inducer. The reason behind placing RT and Cre under different control has been elaborated in <a href="https://2019.igem.org/Team:Fudan-TSI/Model"><u>our modelling</u></a>. Apart from the need of different final concentration of these two proteins for the system to achieve its optimal function, putting them under different promoters also enables better control over the system’s status.
+
  <p class="flow-text">The capsid protein is necessary as it has been found to promote the annealing of tRNA primer to the primer binding site (PBS) in MMLV, and plays an important role in the following two strand transfer steps <a href="#Ref3">(Mak et al.</a>, <a href="#Ref4">Gonsky et al.)</a>. To be certain of this design, we have consulted <a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Prof. Alper</a> through email and received his confirmation on the necessity of the capsid protein.</p>
 +
  <p class="flow-text">To increase the mutation of our RT, we built a mutated version (Y1245F). This mutation has been shown to increase the mutation level by 5 times <a href="#Ref5">(Zhang et al.)</a>.</p>
 +
  <p class="flow-text">The gag-pol polyprotein is placed under Lac operon, whose expression controlled by IPTG.</p>
 +
</div>
  
</div>
+
<div id="section2" class="section container scrolSpy">
</div>
+
  <h2>tRNA primer</h2>
 +
  <p class="flow-text">The initiation of reverse transcription requires its cognate tRNA primer. For MMLV-RT, the primer is tRNA<sup>Pro</sup>(AGG) <a href="#Ref6">(Harada et al.)</a>. After comparing its sequence to the endogenous tRNA sequences in <i>E. coli</i>, we found very little homology between them, which again proves our system’s orthogonality to prokaryotic system. However, this also arises problems regarding its post-transcriptional processing.</p>
  
<div class="row legend">
+
  <div class="figureHolder" id="Fig2">
<div class="row">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/9/9a/T--Fudan-TSI--designRT.gif" />
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
+
    <p>Figure 2. Schematic diagram of reverse transcription process.</p>
</div>
+
  </div>
<div class="row legends">
+
Figure 3. Crystal structure of Cre recombinase bound to a loxP holliday junction (PDB:3MGV).
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle2_2">
+
<div class="col">Flanking sequence</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
Cre recognizes loxP sites and after forming a tetramer, initiates the recombination process<sup>12</sup>. The 2 loxP sites are placed at the farthest 5’ and 3’ end of the target sequence respectively. Since we need to utilize the recombination activity and eliminate its self-splicing ability, the two loxP sites need to be compatible with itself but incompatible with each other. We chose lox511, lox5171 and lox2272 to pair with wild-type loxP sites<sup>13,14</sup>, and examined their incompatibility with wild-type loxP.
+
  
</div>
+
  <p class="flow-text">To make sure that the exogenous tRNA could be successfully expressed and processed in <i>E. coli</i> cells into its matured form, we placed it under two promoters, one T7 promoter, and another pGlnW promoter, which is the endogenous promoter for GlnW and its downstream MetU. The CCA motif is added to the 3’ end, and followed by the interval sequence between two tRNA<sup>Gln</sup>, and a T7Te terminator.</p>
</div>
+
  <p class="flow-text">Apart from using the native tRNA<sup>Pro</sup>, which requires an additional PBS outside the target sequence, we have designed <a href="/Team:Fudan-TSI/Software">a software tool</a> which can design novel tRNAs aligning with the target sequence.</p>
+
</div>
<div class="row title2" id="mainTitle2_3">
+
<div class="col">Cre mutation and alternative versions</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/e/ee/T--Fudan-TSI--creVersions.gif" style="width:50%; margin:auto;">
+
</div>
+
<div class="row legends">
+
Figure 4.  
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
We found that even though we’re putting Cre under a controllable promoter, its small leakage already can initiate self-splicing between 2 wildtype loxP (see <a href="https://2019.igem.org/Team:Fudan-TSI/Results"><u>Results</u></a> for elaboration). This is undesirable as uncontrollable recombination could greatly damage the confidentiality of our result. The desired sequence could be recombined and expressed for a time and then be gone with the ongoing recombination. <a href="https://2019.igem.org/Team:Fudan-TSI/Model"><u>Our modelling</u></a> result also shows that Cre expression needs to stay at a low level for a higher recombination rate.<br /><br />
+
  
To bring Cre expression under more stringent control, we made several different versions of Cre.<br /><br />
+
<div id="section3" class="section container scrolSpy">
 +
  <h2>Flanking sequences</h2>
 +
  <p class="flow-text">The reverse transcriptase has three functions: 1) RNA-dependent DNA polymerase; 2) DNA-dependent DNA polymerase; 3) RNaseH activity.</p>
 +
  <p class="flow-text">In a full reverse transcription process, the target strand will go through annealing with tRNA primer, and two strand transfer. To make sure that all three stages will be completed successfully, the noncoding sequences on the MMLV genome has been cloned to flank the target sequence. Flanking sequences include the following components, which are transcribed with the target and helps to accomplish reverse transcription.</p>
 +
  <ul class="flow-text">
 +
    <li>Primer binding site (PBS) recognizes and anneals with tRNA <a href="#Ref7">(Lund et al.)</a>, initiates reverse transcription.</li>
 +
    <li>5’ noncoding sequence (U5) has been shown to affect the replication ability of RT and its alteration affects the synthesis of minus strand DNA <a href="#Ref8">(Kulpa et al.)</a>. It is also linked with the efficiency of the first strand transfer.</li>
 +
    <li>Poly-purine tract (PPT) is resistant to RNaseH digestion, its remaining RNA serves as primer for the plus strand initiation <a href="#Ref9">(Finston et al.</a>, <a href="#Ref10">Kelleher et al.)</a>. We also reserved several nucleotides near its site for they have shown to impact the function of PPT <a href="#Ref11">(Robson et al.)</a>.</li>
 +
  </ul>
 +
</div>
  
Firstly, we mutated some of the encoding codons to rare codons in hope that this would bring difficulty to translation and thus bring down the expression level.<br /><br />
+
<div id="section4" class="section container scrolSpy">
 +
  <h2>Cre recombinase</h2>
 +
  <p class="flow-text">Cre recombinase is derived from P1 bacteriophage, which could initiate recombination events between two loxP sites. Cre recombinase binds to the palindromic sequence in loxP, and after forming a tetramer (two Cre on one loxP), its active site would initiate different recombination process based on the orientation of the two loxP <a href="#Ref12">(Stark et al.)</a>. Two loxP sites in the same direction would initiate self-splicing, resulting the sequence in between be excised and form a circular loop. If the two loxP sites are oriented opposingly, the sequence in between would be inverted.</p>
  
Then, we added different degradation tags following it. We designed the tags utilizing the endogenous degradation system of <i>E. coli</i><sup>15</sup>. We tested 5 tags, (YA)LAA, LVA, LAV, LVV, and (WV)LAA based on research literatures<sup>16,17</sup>. With the support of our <a href="https://2019.igem.org/Team:Fudan-TSI/Model"><u>Modelling</u></a>, we found that XXX tag best suits our need, with moderate steady state level and quick degradation dynamic.<br /><br />
+
  <div class="figureHolder" id="Fig3">
 +
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" />
 +
    <p>Figure 3. Crystal structure of Cre recombinase bound to a loxP holliday junction (PDB:3MGV).</p>
 +
  </div>
  
As an alternative approach, we also tested the split-Cre construct<sup>18</sup>. Cre recombinase is split between its 59<sup>th</sup> and 60<sup>th</sup> amino acid, the N- and C-terminal fragments are attached to FRB and FKBP separately. When the inducer rapamycin is absent, the two fragments will not polymerize and no detectable Cre activity is found. After adding rapamycin into the culture, FKBP and FRB will polymerize, thus bringing the two Cre fragments into contact, and recombination activity will be gained.
+
  <p class="flow-text">If the two loxP sites are placed on different sequences, the two sequence would be transferred into each other’s place, but at a lower efficiency than the other two events. Our system utilizes its strand-transfer recombination activity to insert the mutated target into its original place, thus replacing the unmutated version and allows for another round of mutation.</p>
</div>
+
  <p class="flow-text">The expression of Cre recombinase is placed under a different operon, and anhydrotetracycline (aTc) serves as its inducer. The reason behind placing RT and Cre under different control has been elaborated in <a href="/Team:Fudan-TSI/Model">our modeling</a>. Apart from the need of different final concentration of these two proteins for the system to achieve its optimal function, putting them under different promoters also enables better control over the system’s status.</p>
</div>
+
  <h4>Sequences flanking loxP</h4>
+
  <p class="flow-text">Cre recognizes loxP sites and after forming a tetramer, initiates the recombination process (ref12). The 2 loxP sites are placed at the farthest 5’ and 3’ end of the target sequence respectively. Since we need to utilize the recombination activity and eliminate its self-splicing ability, the two loxP sites need to be compatible with itself but incompatible with each other. We chose lox511, lox5171 and lox2272 to pair with wild-type loxP sites <a href="#Ref13">(Hoess et al.</a>, <a href="#Ref14">Lee et al.)</a>, and examined their incompatibility with wild-type loxP.</p>
<div class="row title2" id="mainTitle2_4">
+
  <h4>Cre mutation and alternative versions</h4>
<div class="col">Testing</div>
+
  <p class="flow-text">We found that even though we’re putting Cre under a controllable promoter, its small leakage already can initiate self-splicing between 2 wildtype loxP (see Results for elaboration). This is undesirable as uncontrollable recombination could greatly damage the confidentiality of our result. The desired sequence could be recombined and expressed for a time and then be gone with the ongoing recombination. Our <a href="/Team:Fudan-TSI/Model">modeling</a> result also shows that Cre expression needs to stay at a low level for a higher recombination rate.</p>
</div>
+
  <p class="flow-text">To bring Cre expression under more stringent control, we made several different versions of Cre.</p>
+
  <ul class="flow-text">
<div class="row title3">
+
  <li>Firstly, we mutated some of the encoding codons to rare codons in hope that this would bring difficulty to translation and thus bring down the expression level.</li>
<div class="col"><i>Cre expression</i></div>
+
  <li>Then, we added different degradation tags following it. We designed the tags utilizing the endogenous degradation system of <i>E. coli</i> <a href="#Ref15">(Karzai et al.)</a>. We tested 5 tags, (YA)LAA, LVA, LAV, LVV, and (WV)LAA based on research literatures <a href="#Ref16">(Landry et al.</a>, <a href="#Ref17">Janssen et al.)</a>. With the support of <a href="/Team:Fudan-TSI/Model">our modeling</a>, we found that WVLAA tag best suits our need, with moderate steady state level and quick degradation dynamic.</li>
</div>
+
+
<div class="row para1">
+
<div class="col">
+
EGFP is put under the ptetR promoter in place of Cre, and its fluorescence level is measured.<br /><br />
+
Cre is co-transformed with another plasmid containing a stably expressed mCherry with two wildtype loxP sites flanking. Afterwards the whole sequence is amplified through PCR, and if Cre is in the system, mCherry would be spliced from its plasmid, and the amplification result would be a short sequence, while the non-spliced mCherry would be fully amplified.
+
</div>
+
</div>
+
+
<div class="row title3">
+
<div class="col"><i>loxP sites compatibility test</i></div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
Cre is co-transformed with another plasmid containing a stably expressed mCherry flanking by two different loxP sites. The whole region is PCR amplified, and gel run to see if self-splicing event has occurred.
+
</div>
+
</div>
+
+
<div class="row title3">
+
<div class="col"><i>Degradation tag dynamic</i></div>
+
</div>
+
+
<div class="row para1" style="margin:0;">
+
<div class="col">
+
EGFP carrying all five tags have been cloned and measured for its fluorescent level.
+
</div>
+
</div>
+
+
<div class="row title3">
+
<div class="col"><i>Recombination event test</i></div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/6/6c/T--Fudan-TSI--creFunction.gif" style="width:90%; margin:auto;">
+
</div>
+
<div class="row legends">
+
Figure 5.
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
Cre is co-transformed with two plasmids. One plasmid contains a stably expressed full-length mCherry flanked by 2 different loxP sites; the other carries a truncated version of mCherry, its flanking loxP sites match with the first plasmid. The truncated version is known to be inactive. If recombination occurs successfully, we would detect the first plasmid carrying the truncated version through PCR amplification and agarose gel analysis. Also, the fluorescent level would decrease.
+
</div>
+
</div>
+
+
<div class="row title1" id="mainTitle3">
+
<div class="col">Demonstration</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_1">
+
<div class="col">System verification</div>
+
</div>
+
+
<div class="row legend">
+
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2019/6/6c/T--Fudan-TSI--designDemo.gif" style="width:90%; margin:auto;">
+
</div>
+
<div class="row legends">
+
Figure 6.
+
</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
We have constructed plasmids carrying chloramphenicol resistance gene with <a href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection"><u>different stop-codon mutations</u></a>. The gene is thus inactive, and acts as the target sequence. The two plasmids, carrying the target and other mutation necessary components respectively, are co-transformed. After incubation, the reverse transcriptase would be induced first, then Cre recombinase. The target sequence would be randomly mutated in the system, and if the mutation happens to successfully reverse the stop-codon back into its original coding sequence, the cell would grow successfully on solid medium containing chloramphenicol. By counting the number of cells grown, we could get a picture of the efficiency of single site mutation.
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_2">
+
<div class="col">Sequence specificity</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
The surviving cells would be cultured and plasmid extracted. The plasmids would be sent for sequencing to prove that other sequences unrelative to the target is not mutated. It would also be retransformed into bacteria which has never encountered the system, and be planted on media containing chloramphenicol. If the cell could still grow normally, we could assume that the bacteria’s genome is not mutated in our mutagenesis process.
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_3">
+
<div class="col"> Host adaptability</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
Since we’re using parts that are orthogonal of native bacterial systems, our system is expected to work independently in different species. The system is tested in <sup>E. coli</sup>, and will then expand to species including cyanobacteria and lactic acid bacteria.
+
</div>
+
</div>
+
+
<div class="row title2" id="mainTitle3_4"></div>
+
+
<div class="row title2" id="mainTitle4" style="margin-top:10%;">
+
<div class="col">References</div>
+
</div>
+
+
<div class="row para1">
+
<div class="col">
+
<div class="col">
+
<ul class="paraUl" style="list-style:none;">
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/3885215">1. Yoshinaka, Y., Katoh, I., Copeland, T. D. &amp; Oroszlan, S. Murine leukemia virus protease is encoded by the gag-pol gene and is synthesized through suppression of an amber termination codon. <i>Proc. Natl. Acad. Sci. U. S. A.</i> 82, 1618–1622 (1985).</a></li>
+
<li><a href="http://jvi.asm.org/content/88/18/10364.abstract">2. Csibra, E., Brierley, I. &amp; Irigoyen, N. Modulation of Stop Codon Read-Through Efficiency and Its Effect on the Replication of Murine Leukemia Virus. <i>J. Virol</i>. 88, 10364 (2014).</a>
+
</li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/9343157">3. Mak, J. &amp; Kleiman, L. Primer tRNAs for reverse transcription. <i>J. Virol</i>. 71, 8087–8095 (1997).</a></li>
+
<li><a href= "https://www.ncbi.nlm.nih.gov/pubmed/11222684">4. Gonsky, J., Bacharach, E. &amp; Goff, S. P. Identification of residues of the Moloney murine leukemia virus nucleocapsid critical for viral DNA synthesis in vivo. <i>J. Virol</i>. 75, 2616–2626 (2001).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/12119402">5. Zhang, W.-H., Svarovskaia, E. S., Barr, R. &amp; Pathak, V. K. Y586F mutation in murine leukemia virus reverse transcriptase decreases fidelity of DNA synthesis in regions associated with adenine-thymine tracts. <i>Proc. Natl. Acad. Sci. U. S. A.</i> 99, 10090–10095 (2002).</a></li>
+
<li><a href="http://www.jbc.org/content/254/21/10979">6. Harada, F., Peters, G. G. &amp; Dahlberg, J. E. The primer tRNA for Moloney murine leukemia virus DNA synthesis. Nucleotide sequence and aminoacylation of tRNAPro. <i>J. Biol. Chem.</i> 254, 10979–10985 (1979).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/8995641">7. Lund, A. H., Duch, M., Lovmand, J., Jørgensen, P. &amp; Pedersen, F. S. Complementation of a primer binding site-impaired murine leukemia virus-derived retroviral vector by a genetically engineered tRNA-like primer. <i>J. Virol.</i> 71, 1191–1195 (1997).<a/></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/9049314">8. Kulpa, D., Topping, R. &amp; Telesnitsky, A. Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors. <i>EMBO J.</i> 16, 856–865 (1997).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/6202882">9. Finston, W. I. &amp; Champoux, J. J. RNA-primed initiation of Moloney murine leukemia virus plus strands by reverse transcriptase in vitro. <i>J. Virol.</i> 51, 26–33 (1984).</a></li>
+
<li><a href="http://www.jbc.org/content/275/17/13061">10. Kelleher, C. D. &amp; Champoux, J. J. RNA Degradation and Primer Selection by Moloney Murine Leukemia Virus Reverse Transcriptase Contribute to the Accuracy of Plus Strand Initiation. <i>J. Biol. Chem.</i> 275, 13061–13070 (2000).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/11044073">11. Robson, N. D. &amp; Telesnitsky, A. Selection of optimal polypurine tract region sequences during Moloney murine leukemia virus replication. <i>J. Virol.</i> 74, 10293–10303 (2000).</a></li>
+
<li><a href="https://www.asmscience.org/content/journal/microbiolspec/10.1128/microbiolspec.MDNA3-0046-2014">12. Stark, W. M. The Serine Recombinases. <i>Microbiol. Spectr.</i> 2, (2014).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC339658/">13. Hoess, R. H., Wierzbicki, A. &amp; Abremski, K. The role of the loxP spacer region in P1 site-specific recombination. <i>Nucleic Acids Res.</i> 14, 2287–2300 (1986).</a></li>
+
<li><a href="http://www.sciencedirect.com/science/article/pii/S0378111998003254">14. Lee, G. &amp; Saito, I. Role of nucleotide sequences of loxP spacer region in Cre-mediated recombination. <i>Gene</i> 216, 55–65 (1998).</a></li>
+
<li><a href="https://www.nature.com/articles/nsb0600_449">15. Karzai, A. W., Roche, E. D. &amp; Sauer, R. T. The SsrA–SmpB system for protein tagging, directed degradation and ribosome rescue. <i>Nat. Struct. Biol.</i> 7, 449–455 (2000).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/23396339">16. Landry, B. P., Stöckel, J. &amp; Pakrasi, H. B. Use of degradation tags to control protein levels in the Cyanobacterium Synechocystis sp. Strain PCC 6803. <i>Appl. Environ. Microbiol.</i> 79, 2833–2835 (2013).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/22243584">17. Janssen, B. D. &amp; Hayes, C. S. The tmRNA ribosome-rescue system. ,i>Adv. Protein Chem. Struct. Biol.</i> 86, 151–191 (2012).</a></li>
+
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed/14576331">18. Jullien, N., Sampieri, F., Enjalbert, A. &amp; Herman, J.-P. Regulation of Cre recombinase by ligand-induced complementation of inactive fragments. <i>Nucleic Acids Res.</i> 31, e131–e131 (2003).</a></li>
+
</ul>
+
</div>
+
</div>
+
</div>
+
+
+
</div>
+
</div>
+
+
  
+
  <div class="figureHolder" id="Fig4">
</div>
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/ee/T--Fudan-TSI--creVersions.gif" />
+
    <p>Figure 4. Different versions of Cre recombinase.</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 active">
+
<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">
+
<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>
+
  <li>As an alternative approach, we also tested the split-Cre construct <a href="#Ref18">(Jullien et al.)</a>. Cre recombinase is split between its 59<sup>th</sup> and 60<sup>th</sup> amino acid, the N- and C-terminal fragments are attached to FRB and FKBP separately. When the inducer rapamycin is absent, the two fragments will not polymerize and no detectable Cre activity is found. After adding rapamycin into the culture, FKBP and FRB will polymerize, thus bringing the two Cre fragments into contact, and recombination activity will be gained.</li>
 +
  </ul>
 +
</div>
  
+
<div id="section5" class="section container scrolSpy">
+
  <h2>Experiments</h2>
+
  <h4>Successful induction and processing of reverse transcriptase</h4>
+
  <p class="flow-text">EGFP is cloned in the place of the reverse transcriptase, and fluorescence level is measured. The gag-pol polyprotein is induced and SDS-PAGE is run to see if it has been successfully processed by the protease.</p>
  
+
  <div class="figureHolder" id="Fig5">
<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>
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/6c/T--Fudan-TSI--creFunction.gif" />
<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>
+
    <p>Figure 5. Schematic diagram of the system testing Cre recombination.</p>
+
  </div>
<script>
+
+
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(){
+
  <h4>Reverse transcription completion</h4>
var winHeight=$(window).height();
+
  <p class="flow-text">When Cre is not present in the cell, the system’s outcome would be reverse transcribed double-stranded cDNA. After lysing the cell and extracting its DNA components within, PCR amplification of the cDNA product would be performed and after electrophoresis, we could observe a brighter band if RT is induced to express compared to RT non-existent cells. For more quantitative analysis, qPCR would be performed.</p>
var winWidth=$(window).width();
+
</div>
var leftNavFromTop=pagePosition-$(window).scrollTop();
+
var topDistance=$(window).scrollTop()+0.25*winHeight;
+
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 () {
+
var divHeight=$($.attr(this, 'href')).offset().top-$("#navUl").height()-50;
+
$(document).animate({
+
scrollTop:divHeight
+
}, 200);
+
return false;
+
});
+
  
 +
<div id="section6" class="section container scrolSpy">
 +
  <h2>Testing</h2>
 +
  <h4>Cre expression</h4>
 +
  <p class="flow-text">EGFP is put under the ptetR promoter in place of Cre, and its fluorescence level is measured.</p>
 +
  <p class="flow-text">Cre is co-transformed with another plasmid containing a stably expressed mCherry with two wildtype loxP sites flanking. Afterwards the whole sequence is amplified through PCR, and if Cre is in the system, mCherry would be spliced from its plasmid, and the amplification result would be a short sequence, while the non-spliced mCherry would be fully amplified.</p>
 +
  <h4>Compatibility test of loxP sites</h4>
 +
  <p class="flow-text">Cre is co-transformed with another plasmid containing a stably expressed mCherry flanking by two different loxP sites. The whole region is PCR amplified, and gel run to see if self-splicing event has occurred.</p>
 +
  <h4>Degradation tag dynamic</h4>
 +
  <p class="flow-text">EGFP carrying all five tags have been cloned and measured for its fluorescent level.</p>
 +
  <h4>Recombination event test</h4>
 +
  <p class="flow-text">Cre is co-transformed with two plasmids. One plasmid contains a stably expressed full-length mCherry flanked by 2 different loxP sites; the other carries a truncated version of mCherry, its flanking loxP sites match with the first plasmid. The truncated version is known to be inactive. If recombination occurs successfully, we would detect the first plasmid carrying the truncated version through PCR amplification and agarose gel analysis. Also, the fluorescent level would decrease.</p>
 +
  <h4>System verification</h4>
 +
  <p class="flow-text">We have constructed plasmids carrying chloramphenicol resistance gene with <a href="/Team:Fudan-TSI/Part_Collection">different stop-codon mutations</a>. The gene is thus inactive, and acts as the target sequence. The two plasmids, carrying the target and other mutation necessary components respectively, are co-transformed.</p>
 +
  <p class="flow-text">After incubation, the reverse transcriptase would be induced first, then Cre recombinase. The target sequence would be randomly mutated in the system, and if the mutation happens to successfully reverse the stop-codon back into its original coding sequence, the cell would grow successfully on solid medium containing chloramphenicol. By counting the number of cells grown, we could get a picture of the efficiency of single site mutation.</p>
  
$(window).scroll(function(){
+
  <div class="figureHolder" id="Fig6">
+
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/6c/T--Fudan-TSI--designDemo.gif" />
var currentScroll=$(this).scrollTop();
+
    <p>Figure 6. Schematic diagram of the system verification experiment design.</p>
var firstHeight=$("#pageCover").height();
+
  </div>
var footerFromTop=$("#FudanFooter").offset().top;
+
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>
+
  <h4>Sequence specificity</h4>
 +
  <p class="flow-text">The surviving cells would be cultured and plasmid extracted. The plasmids would be sent for sequencing to prove that other sequences unrelative to the target is not mutated. It would also be retransformed into bacteria which has never encountered the system, and be planted on media containing chloramphenicol. If the cell could still grow normally, we could assume that the bacteria’s genome is not mutated in our mutagenesis process.</p>
 +
  <h4>Host adaptability</h4>
 +
  <p class="flow-text">Since we’re using parts that are orthogonal of native bacterial systems, our system is expected to work independently in different species. The system is tested in <i>E. coli</i>, and will then expand to species including cyanobacteria and lactic acid bacteria.</p>
 +
</div>
  
 +
<div id="section7" class="section container scrolSpy">
 +
  <h2>References</h2>
 +
  <ol id="ref" style="margin: 23px 0 0 0;">
 +
      <li>[1] Yoshinaka, Y., Katoh, I., Copeland, T. D. &amp; Oroszlan, S. <a href="https://www.ncbi.nlm.nih.gov/pubmed/3885215" name="Ref1">Murine leukemia virus protease is encoded by the gag-pol gene and is synthesized through suppression of an amber termination codon.</a> <i>Proc. Natl. Acad. Sci. U. S. A.</i> 82, 1618®C1622 (1985).</li>
 +
      <li>[2] Csibra, E., Brierley, I. &amp; Irigoyen, N. <a href="http://jvi.asm.org/content/88/18/10364.abstract" name="Ref2">Modulation of Stop Codon Read-Through Efficiency and Its Effect on the Replication of Murine Leukemia Virus.</a> <i>J. Virol</i>. 88, 10364 (2014).</li>
 +
      <li>[3] Mak, J. &amp; Kleiman, L. <a href="https://www.ncbi.nlm.nih.gov/pubmed/9343157" name="Ref3">Primer tRNAs for reverse transcription. <i>J. Virol</i>. 71, 8087®C8095 (1997).</a></li>
 +
      <li>[4] Gonsky, J., Bacharach, E. &amp; Goff, S. P. <a href= "https://www.ncbi.nlm.nih.gov/pubmed/11222684" name="Ref4">Identification of residues of the Moloney murine leukemia virus nucleocapsid critical for viral DNA synthesis in vivo.</a> <i>J. Virol</i>. 75, 2616®C2626 (2001).</li>
 +
      <li>[5] Zhang, W.-H., Svarovskaia, E. S., Barr, R. &amp; Pathak, V. K. <a href="https://www.ncbi.nlm.nih.gov/pubmed/12119402" name="Ref5">Y586F mutation in murine leukemia virus reverse transcriptase decreases fidelity of DNA synthesis in regions associated with adenine-thymine tracts.</a> <i>Proc. Natl. Acad. Sci. U. S. A.</i> 99, 10090®C10095 (2002).</li>
 +
      <li>[6] Harada, F., Peters, G. G. &amp; Dahlberg, J. E. <a href="http://www.jbc.org/content/254/21/10979" name="Ref6">The primer tRNA for Moloney murine leukemia virus DNA synthesis. Nucleotide sequence and aminoacylation of tRNAPro.</a> <i>J. Biol. Chem.</i> 254, 10979®C10985 (1979).</li>
 +
      <li>[7] Lund, A. H., Duch, M., Lovmand, J., J?rgensen, P. &amp; Pedersen, F. S. <a href="https://www.ncbi.nlm.nih.gov/pubmed/8995641" name="Ref7">Complementation of a primer binding site-impaired murine leukemia virus-derived retroviral vector by a genetically engineered tRNA-like primer.</a> <i>J. Virol.</i> 71, 1191®C1195 (1997).</li>
 +
      <li>[8] Kulpa, D., Topping, R. &amp; Telesnitsky, A. <a href="https://www.ncbi.nlm.nih.gov/pubmed/9049314" name="Ref8">Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors.</a> <i>EMBO J.</i> 16, 856®C865 (1997).</li>
 +
      <li>[9] Finston, W. I. &amp; Champoux, J. J. <a href="https://www.ncbi.nlm.nih.gov/pubmed/6202882" name="Ref9">RNA-primed initiation of Moloney murine leukemia virus plus strands by reverse transcriptase in vitro.</a> <i>J. Virol.</i> 51, 26®C33 (1984).</li>
 +
      <li>[10] Kelleher, C. D. &amp; Champoux, J. J. <a href="http://www.jbc.org/content/275/17/13061" name="Ref10">RNA Degradation and Primer Selection by Moloney Murine Leukemia Virus Reverse Transcriptase Contribute to the Accuracy of Plus Strand Initiation.</a> <i>J. Biol. Chem.</i> 275, 13061®C13070 (2000).</li>
 +
      <li>[11] Robson, N. D. &amp; Telesnitsky, A. <a href="https://www.ncbi.nlm.nih.gov/pubmed/11044073" name="Ref11">Selection of optimal polypurine tract region sequences during Moloney murine leukemia virus replication.</a> <i>J. Virol.</i> 74, 10293®C10303 (2000).</li>
 +
      <li>[12] Stark, W. M. <a href="https://www.asmscience.org/content/journal/microbiolspec/10.1128/microbiolspec.MDNA3-0046-2014" name="Ref12">The Serine Recombinases.</a> <i>Microbiol. Spectr.</i> 2, (2014).</li>
 +
      <li>[13] Hoess, R. H., Wierzbicki, A. &amp; Abremski, K. <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC339658/" name="Ref13">The role of the loxP spacer region in P1 site-specific recombination.</a> <i>Nucleic Acids Res.</i> 14, 2287®C2300 (1986).</li>
 +
      <li>[14] Lee, G. &amp; Saito, I. <a href="http://www.sciencedirect.com/science/article/pii/S0378111998003254" name="Ref14">Role of nucleotide sequences of loxP spacer region in Cre-mediated recombination.</a> <i>Gene</i> 216, 55®C65 (1998).</li>
 +
      <li>[15] Karzai, A. W., Roche, E. D. &amp; Sauer, R. T. <a href="https://www.nature.com/articles/nsb0600_449" name="Ref15">The SsrA®CSmpB system for protein tagging, directed degradation and ribosome rescue.</a> <i>Nat. Struct. Biol.</i> 7, 449®C455 (2000).</li>
 +
      <li>[16] Landry, B. P., St?ckel, J. &amp; Pakrasi, H. B. <a href="https://www.ncbi.nlm.nih.gov/pubmed/23396339" name="Ref16">Use of degradation tags to control protein levels in the Cyanobacterium Synechocystis sp. Strain PCC 6803.</a> <i>Appl. Environ. Microbiol.</i> 79, 2833®C2835 (2013).</li>
 +
      <li>[17] Janssen, B. D. &amp; Hayes, C. S. <a href="https://www.ncbi.nlm.nih.gov/pubmed/22243584" name="Ref17">The tmRNA ribosome-rescue system.</a>, <i>Adv. Protein Chem. Struct. Biol.</i> 86, 151®C191 (2012).</li>
 +
      <li>[18] Jullien, N., Sampieri, F., Enjalbert, A. &amp; Herman, J.-P. <a href="https://www.ncbi.nlm.nih.gov/pubmed/14576331" name="Ref18">Regulation of Cre recombinase by ligand-induced complementation of inactive fragments.</a> <i>Nucleic Acids Res.</i> 31, e131®Ce131 (2003).</li>
 +
  </ol>
 +
</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 active"> <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"> <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:54, 16 November 2019

Design | 2019 iGEM Team:Fudan-TSI


Design

We hereby present a toolbox for in vivo continuous mutation library construction. R-Evolution could mutate coding sequences and regulatory sequences, which enables the evolution of individual proteins or multiple targets at a time, promotes high-throughput research, and serves as a foundational advance to synthetic biology.

cover Design

Moloney murine leukemia virus (MMLV) reverse transcriptase

Why MMLV?

Reverse transcriptase (RT) is one of the most crucial part in our system, we chose it from Moloney murine leukemia virus (MMLV) for five reasons.

  • MMLV-RT’s enhanced version is commonly used in in vitro reverse transcription, which guarantees the safety and well characterization of this part.
  • Unlike the reverse transcriptase of HIV, MMLV-RT acts as a monomer, this brings less trouble to its production in an heterogenous host.
  • MMLV is a eukaryotic virus, which means it’s orthogonal to prokaryotic species. This orthogonality makes up of the host adaptability of our system.
  • MMLV-RT has a higher processivity in relation to other viruses’ RT such as HIV and AMV. This feature gives our system a greater range of mutagenesis length.
  • MMLV-RT has low primer specificity, which means that if we change the sequence of its primer and its corresponding primer binding site (PBS), unlike HIV, the change will not be reverted in the following reverse transcription process. This makes it possible for us to customize the sequence of the tRNA primer used in accord with the target sequence in our software.

Even though RT does the function of reverse transcription, what is expressed in the cell is its polyprotein version. The gag-pol polyprotein has four parts—capsid protein, protease (stop codon separated), reverse transcriptase, and integrase. The integrase is deleted from the polyprotein to eliminate the possibility of genome interference. The protease contains a UAG stop codon at its 5th amino acid site (Yoshinaka et al.), which is readthrough as glutamine at a 5% efficiency in its native host cells, to enable the 20:1 ratio between capsid and reverse transcriptase protein. As its readthrough efficiency is much lower in E. coli cells, and studies have shown that lower efficiency greatly damages the activity of reverse transcriptase (Csibra et al.), we mutated the UAG codon into CAG, making a complete readthrough of the polyprotein. This will slightly decrease the activity of RT but within an acceptable range.

Figure 1. Crystal structure of MMLV reverse transcriptase (PDB:4MH8).

The capsid protein is necessary as it has been found to promote the annealing of tRNA primer to the primer binding site (PBS) in MMLV, and plays an important role in the following two strand transfer steps (Mak et al., Gonsky et al.). To be certain of this design, we have consulted Prof. Alper through email and received his confirmation on the necessity of the capsid protein.

To increase the mutation of our RT, we built a mutated version (Y1245F). This mutation has been shown to increase the mutation level by 5 times (Zhang et al.).

The gag-pol polyprotein is placed under Lac operon, whose expression controlled by IPTG.

tRNA primer

The initiation of reverse transcription requires its cognate tRNA primer. For MMLV-RT, the primer is tRNAPro(AGG) (Harada et al.). After comparing its sequence to the endogenous tRNA sequences in E. coli, we found very little homology between them, which again proves our system’s orthogonality to prokaryotic system. However, this also arises problems regarding its post-transcriptional processing.

Figure 2. Schematic diagram of reverse transcription process.

To make sure that the exogenous tRNA could be successfully expressed and processed in E. coli cells into its matured form, we placed it under two promoters, one T7 promoter, and another pGlnW promoter, which is the endogenous promoter for GlnW and its downstream MetU. The CCA motif is added to the 3’ end, and followed by the interval sequence between two tRNAGln, and a T7Te terminator.

Apart from using the native tRNAPro, which requires an additional PBS outside the target sequence, we have designed a software tool which can design novel tRNAs aligning with the target sequence.

Flanking sequences

The reverse transcriptase has three functions: 1) RNA-dependent DNA polymerase; 2) DNA-dependent DNA polymerase; 3) RNaseH activity.

In a full reverse transcription process, the target strand will go through annealing with tRNA primer, and two strand transfer. To make sure that all three stages will be completed successfully, the noncoding sequences on the MMLV genome has been cloned to flank the target sequence. Flanking sequences include the following components, which are transcribed with the target and helps to accomplish reverse transcription.

  • Primer binding site (PBS) recognizes and anneals with tRNA (Lund et al.), initiates reverse transcription.
  • 5’ noncoding sequence (U5) has been shown to affect the replication ability of RT and its alteration affects the synthesis of minus strand DNA (Kulpa et al.). It is also linked with the efficiency of the first strand transfer.
  • Poly-purine tract (PPT) is resistant to RNaseH digestion, its remaining RNA serves as primer for the plus strand initiation (Finston et al., Kelleher et al.). We also reserved several nucleotides near its site for they have shown to impact the function of PPT (Robson et al.).

Cre recombinase

Cre recombinase is derived from P1 bacteriophage, which could initiate recombination events between two loxP sites. Cre recombinase binds to the palindromic sequence in loxP, and after forming a tetramer (two Cre on one loxP), its active site would initiate different recombination process based on the orientation of the two loxP (Stark et al.). Two loxP sites in the same direction would initiate self-splicing, resulting the sequence in between be excised and form a circular loop. If the two loxP sites are oriented opposingly, the sequence in between would be inverted.

Figure 3. Crystal structure of Cre recombinase bound to a loxP holliday junction (PDB:3MGV).

If the two loxP sites are placed on different sequences, the two sequence would be transferred into each other’s place, but at a lower efficiency than the other two events. Our system utilizes its strand-transfer recombination activity to insert the mutated target into its original place, thus replacing the unmutated version and allows for another round of mutation.

The expression of Cre recombinase is placed under a different operon, and anhydrotetracycline (aTc) serves as its inducer. The reason behind placing RT and Cre under different control has been elaborated in our modeling. Apart from the need of different final concentration of these two proteins for the system to achieve its optimal function, putting them under different promoters also enables better control over the system’s status.

Sequences flanking loxP

Cre recognizes loxP sites and after forming a tetramer, initiates the recombination process (ref12). The 2 loxP sites are placed at the farthest 5’ and 3’ end of the target sequence respectively. Since we need to utilize the recombination activity and eliminate its self-splicing ability, the two loxP sites need to be compatible with itself but incompatible with each other. We chose lox511, lox5171 and lox2272 to pair with wild-type loxP sites (Hoess et al., Lee et al.), and examined their incompatibility with wild-type loxP.

Cre mutation and alternative versions

We found that even though we’re putting Cre under a controllable promoter, its small leakage already can initiate self-splicing between 2 wildtype loxP (see Results for elaboration). This is undesirable as uncontrollable recombination could greatly damage the confidentiality of our result. The desired sequence could be recombined and expressed for a time and then be gone with the ongoing recombination. Our modeling result also shows that Cre expression needs to stay at a low level for a higher recombination rate.

To bring Cre expression under more stringent control, we made several different versions of Cre.

  • Firstly, we mutated some of the encoding codons to rare codons in hope that this would bring difficulty to translation and thus bring down the expression level.
  • Then, we added different degradation tags following it. We designed the tags utilizing the endogenous degradation system of E. coli (Karzai et al.). We tested 5 tags, (YA)LAA, LVA, LAV, LVV, and (WV)LAA based on research literatures (Landry et al., Janssen et al.). With the support of our modeling, we found that WVLAA tag best suits our need, with moderate steady state level and quick degradation dynamic.
  • Figure 4. Different versions of Cre recombinase.

  • As an alternative approach, we also tested the split-Cre construct (Jullien et al.). Cre recombinase is split between its 59th and 60th amino acid, the N- and C-terminal fragments are attached to FRB and FKBP separately. When the inducer rapamycin is absent, the two fragments will not polymerize and no detectable Cre activity is found. After adding rapamycin into the culture, FKBP and FRB will polymerize, thus bringing the two Cre fragments into contact, and recombination activity will be gained.

Experiments

Successful induction and processing of reverse transcriptase

EGFP is cloned in the place of the reverse transcriptase, and fluorescence level is measured. The gag-pol polyprotein is induced and SDS-PAGE is run to see if it has been successfully processed by the protease.

Figure 5. Schematic diagram of the system testing Cre recombination.

Reverse transcription completion

When Cre is not present in the cell, the system’s outcome would be reverse transcribed double-stranded cDNA. After lysing the cell and extracting its DNA components within, PCR amplification of the cDNA product would be performed and after electrophoresis, we could observe a brighter band if RT is induced to express compared to RT non-existent cells. For more quantitative analysis, qPCR would be performed.

Testing

Cre expression

EGFP is put under the ptetR promoter in place of Cre, and its fluorescence level is measured.

Cre is co-transformed with another plasmid containing a stably expressed mCherry with two wildtype loxP sites flanking. Afterwards the whole sequence is amplified through PCR, and if Cre is in the system, mCherry would be spliced from its plasmid, and the amplification result would be a short sequence, while the non-spliced mCherry would be fully amplified.

Compatibility test of loxP sites

Cre is co-transformed with another plasmid containing a stably expressed mCherry flanking by two different loxP sites. The whole region is PCR amplified, and gel run to see if self-splicing event has occurred.

Degradation tag dynamic

EGFP carrying all five tags have been cloned and measured for its fluorescent level.

Recombination event test

Cre is co-transformed with two plasmids. One plasmid contains a stably expressed full-length mCherry flanked by 2 different loxP sites; the other carries a truncated version of mCherry, its flanking loxP sites match with the first plasmid. The truncated version is known to be inactive. If recombination occurs successfully, we would detect the first plasmid carrying the truncated version through PCR amplification and agarose gel analysis. Also, the fluorescent level would decrease.

System verification

We have constructed plasmids carrying chloramphenicol resistance gene with different stop-codon mutations. The gene is thus inactive, and acts as the target sequence. The two plasmids, carrying the target and other mutation necessary components respectively, are co-transformed.

After incubation, the reverse transcriptase would be induced first, then Cre recombinase. The target sequence would be randomly mutated in the system, and if the mutation happens to successfully reverse the stop-codon back into its original coding sequence, the cell would grow successfully on solid medium containing chloramphenicol. By counting the number of cells grown, we could get a picture of the efficiency of single site mutation.

Figure 6. Schematic diagram of the system verification experiment design.

Sequence specificity

The surviving cells would be cultured and plasmid extracted. The plasmids would be sent for sequencing to prove that other sequences unrelative to the target is not mutated. It would also be retransformed into bacteria which has never encountered the system, and be planted on media containing chloramphenicol. If the cell could still grow normally, we could assume that the bacteria’s genome is not mutated in our mutagenesis process.

Host adaptability

Since we’re using parts that are orthogonal of native bacterial systems, our system is expected to work independently in different species. The system is tested in E. coli, and will then expand to species including cyanobacteria and lactic acid bacteria.

References

  1. [1] Yoshinaka, Y., Katoh, I., Copeland, T. D. & Oroszlan, S. Murine leukemia virus protease is encoded by the gag-pol gene and is synthesized through suppression of an amber termination codon. Proc. Natl. Acad. Sci. U. S. A. 82, 1618®C1622 (1985).
  2. [2] Csibra, E., Brierley, I. & Irigoyen, N. Modulation of Stop Codon Read-Through Efficiency and Its Effect on the Replication of Murine Leukemia Virus. J. Virol. 88, 10364 (2014).
  3. [3] Mak, J. & Kleiman, L. Primer tRNAs for reverse transcription. J. Virol. 71, 8087®C8095 (1997).
  4. [4] Gonsky, J., Bacharach, E. & Goff, S. P. Identification of residues of the Moloney murine leukemia virus nucleocapsid critical for viral DNA synthesis in vivo. J. Virol. 75, 2616®C2626 (2001).
  5. [5] Zhang, W.-H., Svarovskaia, E. S., Barr, R. & Pathak, V. K. Y586F mutation in murine leukemia virus reverse transcriptase decreases fidelity of DNA synthesis in regions associated with adenine-thymine tracts. Proc. Natl. Acad. Sci. U. S. A. 99, 10090®C10095 (2002).
  6. [6] Harada, F., Peters, G. G. & Dahlberg, J. E. The primer tRNA for Moloney murine leukemia virus DNA synthesis. Nucleotide sequence and aminoacylation of tRNAPro. J. Biol. Chem. 254, 10979®C10985 (1979).
  7. [7] Lund, A. H., Duch, M., Lovmand, J., J?rgensen, P. & Pedersen, F. S. Complementation of a primer binding site-impaired murine leukemia virus-derived retroviral vector by a genetically engineered tRNA-like primer. J. Virol. 71, 1191®C1195 (1997).
  8. [8] Kulpa, D., Topping, R. & Telesnitsky, A. Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors. EMBO J. 16, 856®C865 (1997).
  9. [9] Finston, W. I. & Champoux, J. J. RNA-primed initiation of Moloney murine leukemia virus plus strands by reverse transcriptase in vitro. J. Virol. 51, 26®C33 (1984).
  10. [10] Kelleher, C. D. & Champoux, J. J. RNA Degradation and Primer Selection by Moloney Murine Leukemia Virus Reverse Transcriptase Contribute to the Accuracy of Plus Strand Initiation. J. Biol. Chem. 275, 13061®C13070 (2000).
  11. [11] Robson, N. D. & Telesnitsky, A. Selection of optimal polypurine tract region sequences during Moloney murine leukemia virus replication. J. Virol. 74, 10293®C10303 (2000).
  12. [12] Stark, W. M. The Serine Recombinases. Microbiol. Spectr. 2, (2014).
  13. [13] Hoess, R. H., Wierzbicki, A. & Abremski, K. The role of the loxP spacer region in P1 site-specific recombination. Nucleic Acids Res. 14, 2287®C2300 (1986).
  14. [14] Lee, G. & Saito, I. Role of nucleotide sequences of loxP spacer region in Cre-mediated recombination. Gene 216, 55®C65 (1998).
  15. [15] Karzai, A. W., Roche, E. D. & Sauer, R. T. The SsrA®CSmpB system for protein tagging, directed degradation and ribosome rescue. Nat. Struct. Biol. 7, 449®C455 (2000).
  16. [16] Landry, B. P., St?ckel, J. & Pakrasi, H. B. Use of degradation tags to control protein levels in the Cyanobacterium Synechocystis sp. Strain PCC 6803. Appl. Environ. Microbiol. 79, 2833®C2835 (2013).
  17. [17] Janssen, B. D. & Hayes, C. S. The tmRNA ribosome-rescue system., Adv. Protein Chem. Struct. Biol. 86, 151®C191 (2012).
  18. [18] Jullien, N., Sampieri, F., Enjalbert, A. & Herman, J.-P. Regulation of Cre recombinase by ligand-induced complementation of inactive fragments. Nucleic Acids Res. 31, e131®Ce131 (2003).