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

(0915)
Line 1: Line 1:
−
{{Fudan-TSI}}
+
 
−
<html lang="en">
+
<!DOCTYPE html>
−
<!--
+
<html lang="en" dir="ltr" class="client-nojs">
−
This html document is created by Tian Huang for Team Fudan iGEM 2018.
+
−
We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2.
+
−
-->
+
−
<!-- LC check on 2018-10-25 -->
+
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
<meta charset="UTF-8" />
 +
<title>Team:Fudan-TSI/Model - 2019.igem.org</title>
 +
<meta name="generator" content="MediaWiki 1.24.1" />
 +
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:Fudan-TSI/Model&amp;action=edit" />
 +
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:Fudan-TSI/Model&amp;action=edit" />
 +
<link rel="shortcut icon" href="/favicon.ico" />
 +
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2019.igem.org (en)" />
 +
<link rel="alternate" hreflang="x-default" href="/Team:Fudan-TSI/Model" />
 +
<link rel="copyright" href="https://creativecommons.org/licenses/by/3.0/" />
 +
<link rel="alternate" type="application/atom+xml" title="2019.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
 +
<link rel="stylesheet" href="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
 +
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
 +
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
 +
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
 +
/* cache key: 2019_igem_org:resourceloader:filter:minify-css:7:35f114711b15fda1f15f5df02b43e4bc */</style>
 +
<script src="https://2019.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
 +
<script>if(window.mw){
 +
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Team:Fudan-TSI/Model","wgTitle":"Team:Fudan-TSI/Model","wgCurRevisionId":255868,"wgRevisionId":255868,"wgArticleId":6656,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"Ehtele","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Team:Fudan-TSI/Model","wgUserId":968,"wgUserEditCount":124,"wgUserRegistration":1554186546000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[]});
 +
}</script><script>if(window.mw){
 +
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
 +
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"f819197f99d3522904e632cd5247f449+\\","patrolToken":"7687537c7e4f8501c1f08cc2b7d45819+\\","watchToken":"b0477fe8d466bef68921a7ea88e84574+\\"});},{},{});
 +
/* cache key: 2019_igem_org:resourceloader:filter:minify-js:7:1f270e27a739568ed4ba2b74a7c289b6 */
 +
}</script>
 +
<script>if(window.mw){
 +
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
 +
}</script>
 +
</head>
 +
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Team_Fudan-TSI_Model skin-igem action-view">
  
−
    <!-- CSS -->
+
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></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" />
+
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
 +
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
  
−
    <!-- Font-awesome icons 4.7.0 -->
+
        <script type='text/javascript'        src ='/wiki/skins/Igem/resources/2019_skin.js'></script>
−
    <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
+
  
−
    <!-- Materialize 1.0.0-rc.2 (Material Design like) -->
 
−
    <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
 
  
−
     <!-- Clear default CSS settings; CSS reset -->
+
     <div id='globalWrapper'>
−
    <style>
+
        <div id='top_menu_under' class='noprint'></div>
−
        *{margin: 0;padding: 0;list-style: none;}
+
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
−
        /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
+
<script>jQuery('#top_menu_14').load('https://2019.igem.org/cgi/top_menu_14/menubar_reply.cgi',
 +
    {  t:"Team%3AFudan-TSI%2FModel",
 +
a:"View+%2FTeam%3AFudan-TSI%2FModel++Edit+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FModel%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FModel%26action%3Dhistory++Move+%2FSpecial%3AMovePage%2FTeam%3AFudan-TSI%2FModel++Unwatch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AFudan-TSI%2FModel%26action%3Dunwatch%26token%3D40bdcb18d4c8b5d0387090a55372c460%252B%255C++Page+%2FTeam%3AFudan-TSI%2FModel++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3AFudan-TSI%2FModel%26action%3Dedit%26redlink%3D1++" });
 +
</script>
 +
 
 +
        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
 +
<div id="content" class="mw-body" role="main">
 +
    <a id="top"></a>
 +
 
 +
            <div id="top_title">
 +
                <div class="logo_2019">
 +
                    <a href="https://2019.igem.org">
 +
                    <img src="https://static.igem.org/mediawiki/2019/8/8b/HQ_page_logo.jpg" width="100px">
 +
                    </a>
 +
                </div>
 +
 
 +
        <h1 id="firstHeading" class="firstHeading">
 +
            <span dir="auto">Team:Fudan-TSI/Model</span>
 +
        </h1>
 +
            </div>
 +
 
 +
            <div id="HQ_page">
 +
                <div id="bodyContent">
 +
            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
 +
 
 +
 
 +
<script>
 +
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
 
 +
$(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>
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* DEFAULT WIKI SETTINGS */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 +
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* MENU */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*wrapping for the menu*/
 +
.igem_2019_team_menu {
 +
background-color:#cecece;
 +
border-left: 1px solid #635d5d;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
}
 +
 
 +
/*controlling menu visibility*/
 +
.igem_2019_team_menu.displaying_menu{
 +
display:block;
 +
}
 +
 
 +
/*links in the menu*/
 +
.igem_2019_team_menu  a {
 +
color: #484848;
 +
text-decoration:none;
 +
}
 +
 
 +
/*images in the menu*/
 +
.igem_2019_team_menu img {
 +
width:100%;
 +
}
 +
 
 +
/*level 1 menu items*/
 +
.igem_2019_team_menu .menu_item {
 +
    background-color: #cecece;
 +
    border-bottom: 1px solid #635d5d;
 +
    clear: both;
 +
color: #484848;
 +
    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%;}
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
 
  
−
        /** 清除内外边距 **/
 
−
        body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 
−
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 
−
        pre, /* text formatting elements 文本格式元素 */
 
−
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 
−
        th, td /* table elements 表格元素 */ {
 
−
            margin: 0;
 
−
            padding: 0;
 
−
        }
 
  
−
        /** 设置默认字体 **/
 
  
−
        h1, h3, h3, h4, h5, h6 { font-size: 100%; }
 
−
        address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
 
−
        code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 
−
        small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 
  
−
        /** 重置列表元素 **/
+
</style>
−
        ul, ol { list-style: none; }
+
  
−
        /** 重置文本格式元素 **/
 
−
        a { text-decoration: none; }
 
−
        a:hover { text-decoration: underline; }
 
  
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
        /** 重置表单元素 **/
+
<head>
−
        legend { color: #000; } /* for ie6 */
+
−
        fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+
−
        button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+
−
        /* 注：optgroup 无法扶正 */
+
  
−
        /** 重置表格元素 **/
+
<!-- This tells the browser that your page is responsive -->
−
        table { border-collapse: collapse; border-spacing: 0; }
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
        #FudanBody .imgNoM img{
+
−
            width:100%;
+
<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>
−
        }
+
−
        #FudanBody .imgNoM{
+
−
            text-align:center;
+
−
        }
+
−
    </style>
+
−
    <title>2019 Team:Fudan-TSI Software</title>
+
 
</head>
 
</head>
  
−
<body>
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&amp;action=raw&amp;ctype=text/css" />
−
<!-- Fudan div at igem.org -->
+
−
<div id="FudanWrapper" class="white">
+
−
    <div id="FudanBody" class="white orangeBg">
+
−
        <header>
+
−
            <!-- empty bar -->
+
−
            <div id="emptyBar" style="position:relative;width: 100%;"></div>
+
  
−
            <!-- Navigation bar 2019-9-15 -->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
            <nav id="topNav" class="white z-depth-0_5">
+
<!--- Menu --->
−
                <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/3/3c/T--Fudan-TSI--Logo0.gif"></a>
+
−
                    </div>
+
−
                    <ul id="nav-mobile" class="right orangeBorder">
+
−
                        <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>
+
−
            <!-- Dropdown and List elements in navigation bar -->
+
−
            <!-- Slide-out navigator contents 2019-9-15 -->
+
−
            <ul id="slide-out" class="sidenav">
+
−
                <li style="padding: 0"><div class="sidenavBanner">
+
−
                    <div class="background">
+
−
                    </div>
+
−
                    <p style="width: 100%;text-align: center;font-size: 24px"><span class="white-text">Software</span></p>
+
−
                </div></li>
+
−
                <li>
+
−
                    <ul class="collapsible expandable">
+
−
                        <li>Team: Fudan-TSI</li>
+
−
<li><div class="collapsible-header">Project</div>
+
−
    <div class="collapsible-body"><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>
+
−
</li>
+
−
<li><div class="collapsible-header">Results</div>
+
−
    <div class="collapsible-body"><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>
+
−
</li>
+
−
<li><div class="collapsible-header">Model</div>
+
−
    <div class="collapsible-body"><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>
+
−
</li>
+
−
<li><div class="collapsible-header">Parts</div>
+
−
    <div class="collapsible-body"><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>
+
−
</li>
+
−
<li><div class="collapsible-header">Outreach</div>
+
−
    <div class="collapsible-body"><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>
+
−
</li>
+
−
<li><div class="collapsible-header">Team</div>
+
−
    <div class="collapsible-body"><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">&copy; 2019</a></li>
+
−
    </ul></div>
+
−
</li>
+
−
                    </ul><!-- .expandable -->
+
−
                </li>
+
−
                <li><div class="placeHolder"></div></li>
+
−
            </ul>
+
−
        </header>
+
  
−
        <div id="pageContent" style="">
+
<style>
 +
 +
    *{margin: 0;padding: 0;list-style: none;}
 +
/* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
  
 +
/** 清除内外边距 **/
 +
body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 +
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 +
pre, /* text formatting elements 文本格式元素 */
 +
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 +
th, td /* table elements 表格元素 */ {
 +
margin: 0;
 +
padding: 0;
 +
}
  
−
            <div id="contentBanner" class="figureBanner orangeBg">
+
/** 设置默认字体 **/
−
                <div class="row">
+
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <h1>Software</h1>
+
−
                    </div>
+
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <span>...</span>
+
−
                    </div>
+
−
                </div>
+
−
                <div id="figureBannerTitle" class="hide-on-small-only">
+
−
                    <h1>Software</h1>
+
−
                    <p><span>...</span></p>
+
−
                </div>
+
−
                <div class="hide-on-small-only">
+
−
                    <img src="https://static.igem.org/mediawiki/2018/2/26/T--Fudan--title_software.jpg">
+
−
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
+
−
                        <defs>
+
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraleft">
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="0%"/>
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="100%"/>
+
−
                            </linearGradient>
+
−
                        </defs>
+
−
                        <g>
+
−
                            <rect id="svg_1" fill="url(#blackgraleft)" height="100%" width="100%"/>
+
−
                        </g>
+
−
                    </svg>
+
−
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; right:0;top:0; width: 4%;height: 100%;">
+
−
                        <defs>
+
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraright">
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="0%"/>
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="100%"/>
+
−
                            </linearGradient>
+
−
                        </defs>
+
−
                        <g>
+
−
                            <rect id="svg_2" fill="url(#blackgraright)" height="100%" width="100%"/>
+
−
                        </g>
+
−
                    </svg>
+
−
                </div>
+
−
            </div>
+
  
−
            <!-- main content of the page -->
+
/* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
−
            <div class="container">
+
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
−
                <!-- side navigator of page content -->
+
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
−
                <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
+
/* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
−
                    <li><a href="/Team:Fudan-TSI/Addon#ribo">Addon: ribo</a></li>
+
−
                    <li><a href="/Team:Fudan-TSI/Addon#TALE">Addon: TALE</a></li>
+
−
                    <li><a href="/Team:Fudan-TSI/Addon#T2">Addon: T2</a></li>
+
−
                    <li><a href="/Team:Fudan-TSI/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
+
−
                    <li><a href="/Team:Fudan-TSI/Model#NotchLigandKinetics">Model: Notch-ligand&nbsp;kinetics</a></li>
+
−
                    <li>Software</li>
+
−
                    <li class="onThisPageNav"><a href="#section1">Abstract</a></li>
+
−
                    <li class="onThisPageNav"><a href="#section2">Introduction</a></li>
+
−
                    <li class="onThisPageNav"><a href="#section3">Method</a></li>
+
−
                    <li class="onThisPageNav"><a href="#section4">Tutorials</a></li>
+
−
                </ul>
+
−
                <main>
+
−
                    <div id="section1" class="section container scrolSpy">
+
−
                        <p>Our software tool was built based on (1) <a href="/Team:Fudan-TSI/Model">modeled parameters</a> characterizing our 3-layer design; (2) populational description of individual cellular behaviors. We found that several cell behaviors and ENABLE signaling have key impact on the evolution of a cell colony with mixed cell types. In an object-oriented-programming and user-friendly style, our software allows users to adjust those key factors and profile the fate of their own mixed cells. Our software bridges a nanoscopic transcriptional design of biological circuits, with microscopic cellular behaviors, up to a macroscopic population output, from which clinical outcome could be predicted, artificial tissue could be assembled, etc.
+
−
                        </p>
+
  
−
                    </div>
+
/** 重置列表元素 **/
−
<div class="expFigureHolder" style="width:100%">
+
ul, ol { list-style: none; }
−
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan--LC-gj-software.png" />
+
−
    <p>In our GJ presentation (10/25 Room 311 9:00-9:25), we used the image above to demonstrate a possible clinical outcome with cells having 100-fold granzyme release.</p>
+
−
</div>
+
−
                    <div id="section2" class="section container scrolSpy">
+
−
                        <h2>Introduction
+
−
                        </h2>
+
−
                        <p>
+
−
                            Modeling is necessary for quantifying biological processes and designing biological systems for customized function. With the increasingly rapid development of synthetic biology, many models are based on different branches of applied mathematics, as exampled by stochastic process, cellular automaton, dynamic systems, and Boltzmann kinetics for different biological processes. For example, automaton is often used to model birth and death processes, stochastic processes is often used to model transcription factor-DNA binding，dynamic systems is often used in population ecology to predict the evolution of colony, and Boltzmann kinetics is often used to quantitatively describe chemical reactions. Some toolkit based on this model, like <a href="http://www.compucell3d.org/" target=_blank>CompCell3D</a>, has been developed for computational nanotechnology and simulating tissue development.
+
−
                        </p>
+
−
                        <p>
+
−
                            However, there hasn’t a ready single model for our ENABLE project. It is because an overall model for our project should not only consist the 3-layer standard design (for more details please visit <a href="/Team:Fudan-TSI/Results">our Results page</a>) but also the biological mechanism underlying it (for more details please visit <a href="/Team:Fudan-TSI/Model">our Modeling page</a>).
+
−
                        </p>
+
−
                        <p>
+
−
                            Here we present a software (<a href="https://github.com/0vioiano/iGEM2018_Team_Fudan" target=_blank>github.com/0vioiano/iGEM2018_Team_Fudan</a>) using multiscale mathematical tools for different biological processes, which serves as a reusable tool for cell colony design. We use different modules packaged in different <i>Classes</i> to simulate different biological processes. Based on the object-oriented principal, it is easy for users to realize customized Classes and simulate cell colony using our software.
+
−
                        </p>
+
−
                        <p>
+
−
                            A colony is occupied by different populations, a population is unitized by abundant individuals, be it a cell or an ensemble of various cells, and a cell is a network of chemicals, for example, proteins, lipids, nucleotides, etc. To simulate cell colony, our software bridges a nanoscopic transcriptional design of biological circuits, with microscopic cellular behaviors, up to a macroscopic population output, from which clinical outcome could be predicted, artificial tissue could be assembled, etc.
+
−
                        </p>
+
−
                        <p>
+
−
                            A demonstration using our software to simulate the process of our engineered cells collaborating to wipe out cancer cells are offered as <a href="https://github.com/0vioiano/iGEM2018_Team_Fudan/tree/master/demo" target=_blank>a demo</a>.
+
  
−
                        </p>
+
/** 重置文本格式元素 **/
 +
a { text-decoration: none; }
 +
a:hover { text-decoration: underline; }
  
−
                    </div>
 
−
                    <div id="section3" class="section container scrolSpy">
 
−
                        <h2>Method
 
−
                        </h2>
 
−
                        <p>Our software is built based on OOP algorithm and MATLAB. The workflow of our software is shown below. For more details, please refer to <a href="https://github.com/0vioiano/iGEM2018_Team_Fudan" target=_blank>src and demo folders on GitHub</a>.
 
−
                        </p>
 
−
                        <div class="expFigureHolder" style="width:100%">
 
−
                            <img style="width: 100%" src="https://static.igem.org/mediawiki/2018/5/57/T--Fudan--Software-1.png">
 
−
                            <p>Figure.1 UML of our toolbox.
 
−
                            </p>
 
  
−
                        </div>
+
/** 重置表单元素 **/
−
                        <div class="expFigureHolder" style="width:100%;margin-top: 23px">
+
legend { color: #000; } /* for ie6 */
−
                            <img style="width: 100%" src="https://static.igem.org/mediawiki/2018/1/17/T--Fudan--Software-2.png">
+
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
−
                            <p>Figure.2 Workflow of our software.
+
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
−
                            </p>
+
/* 注：optgroup 无法扶正 */
  
−
                        </div>
+
/** 重置表格元素 **/
−
                        <p>
+
table { border-collapse: collapse; border-spacing: 0; }
−
                            <b>Initialization:</b> First, initialize the system. Use the formative text as input, then designate the initial state of each cell (life span, type, vitality), properties of each cell type (type of Ligand and Notch, proliferation rate, mean vitality, and special chemical reactions in cells of this type), and relationship between cells (binding affinity between cells, which can be related to cell type and expression of membrane proteins, such as Notch and Ligand).
+
 +
</style>
  
−
                        </p>
 
−
                        <div class="tableHolder">
 
−
                            <table>
 
−
                                <tr>
 
−
                                    <th>Parameter</th>
 
−
                                    <th>Meaning</th>
 
−
                                </tr>
 
−
                                <tr>
 
−
                                    <td>T</td>
 
−
                                    <td>Temperate, measuring the effect of random move.</td>
 
−
                                </tr>
 
−
                                <tr>
 
−
                                    <td>E_neighbor</td>
 
−
                                    <td>Affinity, measuring the effect of directional movement of cell based on cell-cell recognition.</td>
 
−
                                </tr>
 
−
                                <tr>
 
−
                                    <td>Nm</td>
 
−
                                    <td>Sampling rate in dt, measuring the rate of cell movement.</td>
 
−
                                </tr>
 
−
                                <tr>
 
−
                                    <td>dt</td>
 
−
                                    <td>The step length of Euler method in our simulation.</td>
 
−
                                </tr>
 
−
                                <tr>
 
−
                                    <td>T</td>
 
−
                                    <td>Simulation time, measuring how long we want to simulate with our software.
 
−
                                    </td>
 
−
                                </tr>
 
−
                            </table>
 
−
                        </div>
 
−
                        <p>
 
−
                            <b>Iteration:</b> After initiation, an iteration is made. In a period of &delta;t (very short time, and at the scale at 1-10 seconds), the cell may try to migrate, proliferate, or contact to neighboring cells to gather information for choice making. What is worth noticing is that if the cell moves/divides/dies, the Notch-Ligand kinetics may change abruptly for the changing cell-cell interaction, and a movement is relatively rapid compared with cell size. Therefore, it only takes little time for the switching of cell-cell network, but the process of finding proper movement takes some.
 
  
−
                        </p>
 
−
                        <p>
 
−
                            Within the interval of two “cellular movements (proliferation/migration/death included)”, “chemical movements” happens. This refers to the Notch-Ligand kinetics between cell membranes, the amplification of the signal of Notch ICD (intracellular domain) and the combination of augmented signals. Using <a href="https://en.wikipedia.org/wiki/Euler_method" target=_blank>Euler method</a> (for kinetics) and discrete <a href="https://en.wikipedia.org/wiki/Gillespie_algorithm" target="_blank">Gillespie algorithm</a> (for stochastic process), we have predicted how a single cell works in a period within the interval of <b>cellular movements</b> (proliferation/migration/death included) and <b>chemical movements</b>, which refers to the <a href="/Team:Fudan-TSI/Model#NotchLigandKinetics">Notch-Ligand kinetics</a> between cell membranes, the amplification of the signal of Notch intracellular domain and the combination of augmented signals.
 
  
−
                        </p>
 
−
                        <p>
 
−
                            After this prediction, we construct some functions to record the general state of each cell, including index, position, age, and then tendency to die or divide, for further data analysis. A snapshot of our cell colony is taken simultaneously for further simulation visualization. A judgement statement is executed to determine whether to terminate (when &delta;t multiples iteration time is greater than T, the full length of the simulation) or continue to iterate (both cellular movements and chemical movements). Movements in a single iteration seems negligible, but a big number of iterations would show a difference.
 
  
−
                        </p>
+
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content begins    --------------------------------------------------------------------------------------------------------------------------------->
−
                        <p>For more details of cellular movement, please refer to the <a href="#">supplementary material</a>; for more details of chemical movement, please refer to our modeling of <a href="/Team:Fudan-TSI/Model#NotchLigandKinetics">Notch-Ligand Kinetics</a>.
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
                        </p>
+
−
                        <p>
+
−
                            <b>Data analysis:</b> Upon simulation termination, data will be analyzed using prepared functions. We offer APIs for cell track, cell census and cell network analysis.
+
 +
 +
 +
<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;
 +
}
  
−
                        </p>
+
#navBar{
−
                        <p><b>Simulation visualization:</b> Using <i>clips</i> recorded in Iteration step, it’s easy to get our simulation visualized using built-in Matlab function <i>videowrite</i>. Cell colony composition can be checked by watching the output video.
+
float:right;
−
                        </p>
+
position:relative;
−
                    </div>
+
width:auto;
−
                    <div id="section4" class="section container scrolSpy">
+
display:inline-block;
−
                        <h2>Tutorials (single functions)
+
margin-right:4%;
−
                        </h2>
+
}
−
                        <p>To make users familiar to our toolbox, a tutorial is as follows.</p>
+
.navLi{
−
                        <h4>Notch-Ligand kinetics (using <i>ChemicalReactions</i> toolkit)
+
float:left;
−
                        </h4>
+
display:inline-block;
−
                        <p><i>ChemicalReactions</i> toolkit is a toolkit for chemical reaction modeling using <a href="https://en.wikipedia.org/wiki/Petri_net#Mathematical_properties_of_Petri_nets" target=_blank>Petri net</a> and Possion process. Here we demonstrate the usage of <i>ChemicalReactions</i> through an example of Notch-Ligand kinetics modeling.
+
margin-top:3%;
−
                        </p>
+
color:white;
−
                        <div class="expFigureHolder" style="width:100%;margin-top: 23px">
+
font-size:20px;
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/5/5f/T--Fudan--Software-3.png">
+
position:relative;
−
                            <p>
+
margin-left:18px;
−
                                Figure 3. Notch-Ligand kinetics analysis using ChemicalReactions toolkit. Code are offered on <a href="https://github.com/0vioiano/iGEM2018_Team_Fudan" target=_blank>Github</a>.
+
text-align:center;
−
                            </p>
+
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;
 +
}
  
−
                        </div>
+
</style>
−
                        <h4>STEP 1</h4>
+
−
                        <p>Open MATLAB, and open the file ChemicalReactions.md in folder @ChemicalReactions.</p>
+
−
                        <h4>STEP 2</h4>
+
−
                        <p>prepare MATLAB variables.<br/>
+
−
                            >>[Pre,Post]=Pre_Notch_Ligand(2)<br/>
+
−
                                    >>obj= ChemicalReactions(‘’,’’,Post,Pre,@H_Notch_Ligand,zeros(1,12),2)
+
−
</p><p>
+
−
                                    Here Pre_Notch_Ligand() is a function to generate transition matrix for chemical reactions, @H_Notch_Ligand is a function handle for calculation of reaction possibilities, zeros(1,12) designates the initial condition of the system, and 2 refers to 2 kinds of Notch/Ligand exist.
+
  
−
                        </p>
+
−
                        <h4>STEP 3</h4>
+
−
                        <p> Enter in the command line window<br/>
+
−
                            >>XMat=obj.iteration(100,1)<br>
+
−
                            >>for i =1:12<br>
+
−
                            >>plot(XMat(:,i));<br>
+
−
                            >>hold on<br>
+
−
                            >>end
+
−
                        </p><p>
+
−
                            Here iteration() is a method of class <i>ChemicalReactions</i> for predicting the state of the system. (100, 1) is the setting step for data recording, and XMat is for data storage.
+
−
                        </p><p>
+
−
                            To repeat the results of Figure 3, please refer to <a href="https://github.com/0vioiano/iGEM2018_Team_Fudan" target=_blank>Github</a> for code.
+
−
                        </p>
+
−
                        <h3>War predictor (using <i>Cell2DProl</i> toolkit)
+
−
                        </h3>
+
−
                        <p>
+
−
                            <i>Cell2DProl</i> toolkit is a toolkit for Cell colony simulation. For more details, please refer to the <a href="#">supplementary material at the end of this page</a> or <a href="https://github.com/0vioiano/iGEM2018_Team_Fudan" target=_blank>Github</a>.
+
−
                            Here we demonstrate the usage of <i>Cell2DProl</i> through an example of therapeutic engineered cell design.
+
−
                        </p>
+
−
                        <div class="expFigureHolder" style="width:100%;margin-top: 23px">
+
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--Software-4.png">
+
−
                            <p>
+
−
                                Figure 4. Demo - visualization function in the <i>Cell2DProl</i> toolkit
+
−
                            </p>
+
  
−
                        </div>
+
−
                        <div class="expFigureHolder" style="width:100%;margin-top: 23px">
+
<style>
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/b/be/T--Fudan--Software-5.png">
+
−
                            <p>
+
#pageContent{
−
                                Figure 5. Demo - Data analysis functions in <i>Cell2DProl</i> toolkit
+
margin:100px 0 0 0;
−
                            </p>
+
text-align:center;
 +
}
 +
 +
.row{
 +
clear:both!important;
 +
}
  
−
                        </div>
+
.title1{
−
                        <h4>STEP 1</h4><p>Open MATLAB, and open the file Cell2DShadeProl.md in your folder.</p>
+
font-size:2.3rem;
−
                        <h4>STEP 2</h4><p>Click the ‘run’ on the panel.</p>
+
text-align:center;
−
                        <p>Here all the parameters are set proper previously. For more details on parameters, please refer to the supplementary PDF below. If your simulation results are visualized successfully, a video called 1_6_1_6 can be found in your current folder.
+
color:white;
−
                        </p>
+
display:block;
−
                        <h4>STEP 3</h4><p>The left Figure in Figure 5 will be plotted automatically. To get the right figure, Enter in the command line window<br/>
+
}
−
                            >> res1 = -Culture.*(Culture&lt;-1);<br/>
+
.title2{
−
                            >> res2 = res1(:);<br/>
+
color:white;
−
                            >> ecdf(res2);</p>
+
text-align:left;
−
                        <h3>OOP-based AND gate design (using <i>Cell</i> toolkit)</h3>
+
font-size:2rem;
−
                        <p><i>Cell</i> toolkit is a toolkit to design combinational circuits by linking user-defined cellular movement (element) together. Here we show you how to use our toolkit <i>Cell</i> by an example of AND gate circuit design.
+
line-height:130%;
−
                        </p>
+
display:block;
−
                        <div class="expFigureHolder" style="width:100%;margin-top: 23px">
+
width:100%;
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/8/84/T--Fudan--Software-6.png">
+
}
−
                            <p>
+
.title3{
−
                                Figure 6. Demo - Simulation of 3-layer ENABLE using <i>Cell</i> toolkit
+
font-size:1.4rem;
−
                            </p>
+
color:white;
 +
text-align:left !important;
 +
display:block;
 +
width:100%;
 +
line-height:110%;
 +
padding-left:2%;
 +
}
 +
.para1{
 +
color:white;
 +
text-align:justify;
 +
align-items:flex-start;
 +
line-height:140%;
 +
font-size:1.2rem;
 +
margin-bottom:50px !important;
 +
width:100%;
 +
margin:auto 0;
 +
}
 +
.para1 a{
 +
text-decoration:underline !important;
 +
}
 +
.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;
 +
}
  
−
                        </div>
+
−
                        <h4>STEP 1</h4><p>Open MATLAB, and open the folder with subfolder @Cell.
+
.paraUl{
−
                        </p >
+
list-style-type:decimal !important;
−
                        <h4>STEP 2</h4><p>Run kinetic_notch_test.m, kinetic_addgate_test_signal.m, kinetic_addgate_test.m<br/>
+
list-style-position:outside;
−
                        Here we use kinetic model for Notch activation and signal amplification, and 3-step kinetics for intein kinetics to validate the function of our toolkit.
+
padding-left:auto;
−
                        </p>
+
font-size:1rem;
−
                        <h4>STEP 3</h4><p>Figure 6 will be output automatically.
+
}
−
                        </p>
+
.paraUl li{
−
                    </div>
+
padding-right:4% ;
−
                    <div class="section container">
+
}
−
                        <h4>Supplementary PDF with references
+
−
                        </h4>
+
−
                        <p><a href="https://static.igem.org/mediawiki/2018/c/c1/T--Fudan--model-cell-colony.pdf" target="_blank">Model_cell_colony</a></p>
+
#containerWithLeftNav{
−
                    </div>
+
display:block;
−
                </main>
+
margin-left:25%;
−
            </div>
+
}
−
            <!-- end of main content of the page -->
+
  
−
<!--Abstract on content page-->
 
−
            <div id="abstractContent" class="z-depth-2">
 
−
                <a href="#!"><img alt="project summary" src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a>
 
−
                <div class="container">
 
−
                    <h2 style="margin: 0;padding: 10px 0;">Project Summary</h2>
 
−
                    <p style="margin: 0">Mutation library generation is critical for biological and medical research, but current methods cannot mutate a specific sequence continuously without manual intervention. Here we present a toolbox for <i>in vivo</i> continuous mutation library construction. First, the target DNA is transcribed into RNA. Next, our reverse transcriptase reverts RNA into cDNA, during which the target is randomly mutated by enhanced error-prone reverse transcription. Finally, the mutated version replaces the original sequence through recombination. These steps will be carried out iteratively, generating a random mutation library of the target with high efficiency as mutations accumulate along with bacterial growth. Our toolbox is orthogonal and provides a wide range of applications among various species. R-Evolution could mutate coding sequences and regulatory sequences, which enables the <i>in vivo</i> 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>
 
  
−
            <!-- Floating Btns -->
+
</style>
−
            <div class="floatingBtn">
+
−
                <a href="#!" id="abstractBtn" class="btn">
+
<style>
−
                    <i class="fa fa-sticky-note" style="font-size: 30px;line-height: 50px"></i>
+
−
                </a>
+
@media only screen and (max-width:1200px){
−
                <a href="#FudanWrapper" class="btn">
+
#mobileBar{
−
                    <i class="fa fa-angle-up" style="font-size: 48px;line-height: 45px"></i>
+
margin-left:4%;
−
                </a>
+
}
−
            </div>
+
.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;
 +
}
  
−
            <!-- Footer with sponsors and contact methods -->
+
.logo{
−
            <footer id="FudanFooter" class="page-footer grey">
+
height:45px;
−
                <div class="container">
+
margin-top:7px;
−
                    <div class="row">
+
}
−
                        <div id="sponsor" class="col m3 s12 row">
+
.navLi{
−
                            <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2018 Team:Fudan logo white" class="col s3 m6 l3" style="position:relative; padding: 0.5em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/7/7f/T--Fudan-TSI--Logo0-crop-grey.png">
+
display:block;
−
                            </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">
+
position:relative;
−
                        </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点，排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png">
+
float:right;
−
                        </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">
+
clear:both;
−
                        </a>
+
white-space:nowrap;
−
                            <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
+
text-align:right;
−
                        </div>
+
margin:0;
−
                        <div id="usefulLinks" class="col m9 s12 row">
+
height:60px;
−
                            <div class="col s12 l6 row">
+
width:100%;
−
                                <div class="col s12 m4">
+
background-color:#00324a;
−
                                  <span><a href="/Team:Fudan-TSI/Description">Project</a></span>
+
}
−
                                    <ul>
+
.navA{
−
                                        <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
+
display:block;
−
                                        <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
+
text-align:right;
−
                                        <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
+
position:relative;
−
                                        <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
+
float:right;
−
                                        <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
+
padding:20px 20px !important;
−
                                    </ul>
+
}
−
                                </div>
+
.n2{
−
                                <div class="col s12 m4">
+
display:none;
−
                                    <span><a href="/Team:Fudan-TSI/Results">Results</a></span>
+
width:0;
−
                                    <ul>
+
position:relative;
−
                                        <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
+
float:left;
−
                                        <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
+
text-align:right;
−
                                        <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
}
−
                                        <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
.ul2{
−
                                        <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
background:none;
−
                                    </ul>
+
padding-top:0;
−
                                </div>
+
background-color:#00557b;
−
                                <div class="col s12 m4 active">
+
text-align:right;
−
                                    <span><a href="/Team:Fudan-TSI/Model">Model</a></span>
+
display:block;
−
                                    <ul>
+
position:relative;
−
                                        <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
+
float:right;
−
                                        <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
+
right:100%;
−
                                        <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
transform:translateX(0%);
−
                                    </ul>
+
top:0;
−
                                </div>
+
transform:translateY(1%);
−
                            </div>
+
border-radius:0 0 0 10px;
−
                            <div class="col s12 l6 row">
+
}
−
                                <div class="col s12 m4">
+
.open{
−
                                  <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span>
+
display:block;
−
                                    <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>
+
.title2{
−
                                        <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
+
font-size:1.8rem;
−
                                        <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
+
line-height:140%;
−
                                    </ul>
+
}
−
                                </div>
+
.para1{
−
                                <div class="col s12 m4">
+
font-size:1.1rem;
−
                                  <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span>
+
}
−
                                    <ul>
+
.pic2{
−
                                        <li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
+
width:120%;
−
                                        <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>
+
.highlightIcon{
−
                                    </ul>
+
margin:20% auto 10% auto;
−
                                </div>
+
}
−
                                <div class="col s12 m4">
+
.highlightTitle{
−
                                  <span><a href="/Team:Fudan-TSI/Team">Team</a></span>
+
margin-bottom:15%;
−
                                    <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">&copy; 2019</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>
+
 +
 +
@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;
 +
}
  
−
<!-- Javascript files -->
+
−
<!-- Materialize 1.0.0-rc.2 -->
+
.title2{
−
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script>
+
font-size:1.5rem;
 +
}
 +
.para1{
 +
font-size:1rem;
 +
}
 +
.pic2{
 +
width:100%;
 +
}
  
−
<!-- Javascript -->
+
−
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script>
+
}
 +
 +
 +
@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:1rem;
 +
}
 +
.para1{
 +
font-size:0.8rem;
 +
}
 +
.pic2{
 +
width:80%;
 +
}
 +
#sponser img {
 +
width:60%;
 +
}
 +
 +
#containerWithLeftNav{
 +
margin-left:auto;
 +
}
 +
 +
}
 +
 +
</style>
  
−
</body>
+
 
 +
 +
 +
 
 +
 
 +
<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/Design" style="white-space:nowrap">Applied Design</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiment">Experiment</a></li>
 +
</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_Software">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>
 +
</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/Integrated_Human_Practice">Integrated <br />Human Practice</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
 +
<li class="navLi">
 +
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
 +
<div class="n2">
 +
<ul class="ul2">
 +
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">Attribution</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
 +
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Awards">Awards</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/6/6f/T--Fudan-TSI--coverSoftware.gif"></div>
 +
</div>
 +
<style>
 +
#pageCover{
 +
width:100%;
 +
margin:0;
 +
padding-top:80px;
 +
}
 +
#demoCover{
 +
width:100vw;
 +
height:60vh;
 +
position:absolute;
 +
background-color:rgba(8,39,58,0.5);
 +
top:80px;
 +
left:0;
 +
text-align:center;
 +
}
 +
#coverPic{
 +
width:550px;
 +
margin:15vh auto;
 +
}
 +
#demo{
 +
width:100vw;
 +
height:60vh;
 +
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;
 +
}
 +
#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">Motivation</a>
 +
</li>
 +
 
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Theoretical basis</a>
 +
</li>
 +
 
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">User guideline</a>
 +
</li>
 +
 
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">References</a>
 +
</li>
 +
 
 +
 
 +
</ul>
 +
 +
<style>
 +
.leftNav{
 +
position: absolute;
 +
top:20vw;
 +
left:4%;
 +
list-style: none;
 +
z-index: 3;
 +
text-align:left !important;
 +
width:15vw;
 +
}
 +
.leftNav .leftNavA2{
 +
position: relative;
 +
}
 +
.leftNav .leftNavA2:before {
 +
content: "";
 +
display: inline-block;
 +
width: 5px;
 +
height: 5px;
 +
background-color: rgba(55,55,62,0.7);
 +
border-radius: 50%;
 +
position: absolute;
 +
left: 0.3vw;
 +
top:50%;
 +
margin: 0;
 +
padding: 0;
 +
transform: translateY(-50%);
 +
}
 +
.leftNavUl2{
 +
list-style: none;
 +
}
 +
.leftNavA{
 +
display: block;
 +
font-size: 1.1vw;
 +
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
padding: 0.2vw 0.8vw;
 +
color:#4CA198;
 +
text-decoration: none;
 +
}
 +
.leftNavLi2{
 +
width: 13vw;
 +
margin:0.3vw  0;
 +
line-height: 17px;
 +
}
 +
.leftNavA:visited{
 +
text-decoration: none;
 +
color:#4CA198;
 +
}
 +
.leftNavA:focus{
 +
text-decoration: none;
 +
color:#4CA198;
 +
}
 +
.leftNavA:hover,.leftNavA:active{
 +
text-decoration: none;
 +
color: #B0EBE4;
 +
}
 +
 
 +
.leftNavA2{
 +
display: block;
 +
font-size: 1vw;
 +
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 +
padding: 0.1vw 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>
 +
 
 +
 
 +
 +
<div id="pageContent">
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Content ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div class="container" id="containerWithLeftNav">
 +
<div class="row">
 +
 +
<div class="row title1">
 +
<div class="col">tRNA primer designer</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle1">
 +
<div class="col">Motivation</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
Previous studies have shown that a tRNA primer is required for the initiation of reverse transcription <a>(Dahlberg et al.)</a>. In our system, we express the tRNA primer in E.coli by cloning it onto the plasmid that is used for generating the tools for mutation, i.e. P_mutant. However, designing the primer sequence according to different target sequences is time-consuming and needs many adjustments to find the perfect match. This motivates us to build a software for tRNA primer designing.
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle2">
 +
<div class="col">Theoretical basis</div>
 +
</div>
 +
 
 +
<div class="row para1">
 +
<div class="col">
 +
Previous studies have reported that the interactions between tRNA primer and mRNA template as well as the reverse transcriptase are crucial in directing subsequent cDNA synthesis <a>(James E. Dahlberg et al.)</a>. Specifically, according to the model for reverse transcription proposed by Kulpa et al., reverse transcription includes 5 steps (Fig. 1), in which the annealing of tRNA primer to the primer binding site (PBS) region on mRNA template is crucial for the synthesis of minus strand strong stop DNA (–ssDNA) and the following cDNA synthesis process. <br /><br />
 +
Many researchers have studied the reverse transcription process in viruses, from which we find two critical properties in the annealing process of tRNA primer and PBS that should be taken into consideration when building the tRNA primer designer. <br /><br />
 +
The first property is that the 3'-terminal of the tRNA primer should be complementary to the PBS on mRNA template <a>(Kosloff et al.)</a>(Kosloff et al.). The second one is that different viruses prefer specific type of tRNA primer for reverse transcription <a>(Kulpa et al.,</a><a> Kosloff et al.)</a>. What should also be noted is that for different viruses, the lengths of PBS as well as the types of tRNA primer are different. The PBS lengths and the preferred tRNA types of 3 most well-studied retroviruses are listed in Table I.<br /><br />
 +
These discoveries serve as the theoretical basis for our tRNA primer designer. So basically, the function of our tRNA primer designer is to change the tRNA template in order to suit the basic properties of the reverse transcriptase (MMLV RT/ HIV-1 RT/ RSV RT) selected by the user as well as to replace several nucleotides (17 or 18) on 3'-terminal of the tRNA templates to match with nucleotides at the 5'-terminal of the GOI which users input. Also, to make sure that the RNA sequence is a tRNA sequence, the secondary structure should be revealed. We achieve this goal by using the similar tRNA secondary structure prediction scheme as the one implemented in the opensource software tRNAfinder <a>(Kurokawa et al.)</a>.<br /><br />
 +
Studies have shown that the primary factor guiding the selection of tRNA primer for MMLV RT is the PBS sequence instead of the inherent nature of reverse transcriptase <a>(A. H. Lund et al.,</a><a> S. P. Goff et al.)</a>. So, by making mutations on both the PBS and tRNA sequence, the researchers have found that reverse transcription could still successfully take place while the virus’ titer is not greatly affected. Also, after several cycles of replication, the mutated sequence is not changed back to its original version <a>(Pedersen et al., 1997)</a>. Even though it is found that the primer is not stringent for MMLV, studies have revealed that the tRNA-like structure is necessary. A study that the inclusion of one single non-Watson-Crick base pair between PBS and tRNA primer would improve the replication efficiency (F. S. Pedersen et al., 1993), but we didn’t adopt this construct as the one base pair mismatch would often be changed to the full-complementary version after the first cycle of replication <a>(Pedersen et al., 1997)</a>(Pedersen et al., 1997), making this addition unnecessary.
 +
 
 +
</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle3">
 +
<div class="col">User guideline</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
Our tRNA primer designer is a web tool for potential users of our mutagenesis system to design their own tRNA primers according to their experimental setups. Here we provide a step-by-step guide to using this software.<br /><br />
 +
Step 1. Input a DNA sequence that you want to mutate. The last 18 nucleotides of the sequence are selected to be PBS. Note that this sequence should be longer than 18 nucleotides. Besides, it shouldn't contain any characters other than A/T/C/G.<br /><br />
 +
Step 2. Choose the type of reverse transcriptase that you want to use based on your experimental design. Note that this software only allows you to choose from MMLV RT/ HIV-1 RT/ RSV RT.<br /><br />
 +
Step3. Click on the "DESIGN FOR ME!!!" button and see the result. The result is composed of two parts. The first part shows you the secondary structure of the template tRNA that you will be using as well as the designed tRNA primer. The fragment that can be annealed to PBS of the input DNA sequence is shown in red. The second part will give you the DNA sequence encoding the tRNA primer that satisfies your need. You can just copy it and use it elsewhere.
 +
</div>
 +
</div>
 +
 +
<div class="row title3 id="mainTitle4"">
 +
<div class="col">References</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
<ul class="paraUl" style="list-style:none;">
 +
<li>[1]: Peters G , Dahlberg J E . RNA-directed DNA synthesis in Moloney murine leukemia virus: interaction between the primer tRNA and the genome RNA.[J]. Journal of Virology, 1979, 31(2):398-407.</li>
 +
<li>[2]: Kulpa, D. Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors[J]. EMBO (European Molecular Biology Organization) Journal, 1997, 16(4):856-865.</li>
 +
<li>[3]: Palmer M T , Kirkman R , Kosloff B R , et al. tRNA Isoacceptor Preference prior to Retrovirus Gag-Pol Junction Links Primer Selection and Viral Translation[J]. Journal of Virology, 2007, 81(9):4397-4404.</li>
 +
<li>[4]: Kinouchi M , Kurokawa K . [Special Issue: Fact Databases and Freewares] tRNAfinder: A Software System To Find All tRNA Genes in the DNA Sequence Based on the Cloverleaf Secondary Structure[J]. Journal of Computer Aided Chemistry, 2006, 7:116-124.</li>
 +
<li>[5]: Lund, Anders H. et al. “Mutated primer binding sites interacting with different tRNAs allow efficient murine leukemia virus replication.” Journal of virology, 67 12 (1993): 7125-30.</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
 +
</div>
 +
</div>
 +
 +
 
 +
 +
</div>
 +
 +
 +
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Foot ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<footer id="FudanFooter" class="page-footer grey">
 +
 +
<div class="container" id="footContainer">
 +
<div class="row">
 +
<div class="col-md-4" id="sponser" style="padding-top:3%;">
 +
<div class="row">
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-8" id="usefulLinks">
 +
<div class="row">
 +
<div class="col-lg-6" style="padding:0;">
 +
<div class="row">
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
 +
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
 +
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<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 active">
 +
<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>
 +
 
 +
 +
 +
<script>
 +
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var pagePosition=$("#pageContent").offset().top;
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#pageContent").height();
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
$(window).resize(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var topDistance=$(window).scrollTop();
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#pageContent").height();
 +
var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
if (leftNavFromTop<0.1*winWidth){
 +
if(topDistance<maxTopDistance){
 +
$(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
}
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
}
 +
});
 +
 
 +
$(window).scroll(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
var topDistance=$(window).scrollTop();
 +
if (leftNavFromTop<0.1*winWidth){
 +
if(topDistance<maxTopDistance){
 +
$(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
};
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
}
 +
});
 +
 +
$(".leftNav a").click(function () {
 +
$('html, body').animate({
 +
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
 +
}, 500);
 +
return false;
 +
});
 +
 
 +
 
 +
$(window).scroll(function(){
 +
 +
var currentScroll=$(this).scrollTop();
 +
var firstHeight=$("#pageCover").height();
 +
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>
 +
 +
 
 +
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 +
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 +
 +
 
 +
 
 +
 +
 +
 +
 +
 +
 +
 +
 
 +
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 
 +
</p>
 +
<!--
 +
NewPP limit report
 +
CPU time usage: 0.008 seconds
 +
Real time usage: 0.008 seconds
 +
Preprocessor visited node count: 6/1000000
 +
Preprocessor generated node count: 34/1000000
 +
Post‐expand include size: 0/2097152 bytes
 +
Template argument size: 0/2097152 bytes
 +
Highest expansion depth: 2/40
 +
Expensive parser function count: 0/100
 +
-->
 +
 
 +
<!-- Saved in parser cache with key 2019_igem_org:pcache:idhash:6656-0!*!*!*!*!*!* and timestamp 20191014083953 and revision id 255868
 +
-->
 +
</div>             <div class="visualClear"></div>
 +
            </div>
 +
    </div>
 +
 
 +
        </div>
 +
    </div>
 
</html>
 
</html>

Revision as of 10:11, 14 October 2019

<!DOCTYPE html> Team:Fudan-TSI/Model - 2019.igem.org

Loading menubar.....

Team:Fudan-TSI/Model

tRNA primer designer
Motivation
Previous studies have shown that a tRNA primer is required for the initiation of reverse transcription (Dahlberg et al.). In our system, we express the tRNA primer in E.coli by cloning it onto the plasmid that is used for generating the tools for mutation, i.e. P_mutant. However, designing the primer sequence according to different target sequences is time-consuming and needs many adjustments to find the perfect match. This motivates us to build a software for tRNA primer designing.
Theoretical basis
Previous studies have reported that the interactions between tRNA primer and mRNA template as well as the reverse transcriptase are crucial in directing subsequent cDNA synthesis (James E. Dahlberg et al.). Specifically, according to the model for reverse transcription proposed by Kulpa et al., reverse transcription includes 5 steps (Fig. 1), in which the annealing of tRNA primer to the primer binding site (PBS) region on mRNA template is crucial for the synthesis of minus strand strong stop DNA (–ssDNA) and the following cDNA synthesis process.

Many researchers have studied the reverse transcription process in viruses, from which we find two critical properties in the annealing process of tRNA primer and PBS that should be taken into consideration when building the tRNA primer designer.

The first property is that the 3'-terminal of the tRNA primer should be complementary to the PBS on mRNA template (Kosloff et al.)(Kosloff et al.). The second one is that different viruses prefer specific type of tRNA primer for reverse transcription (Kulpa et al., Kosloff et al.). What should also be noted is that for different viruses, the lengths of PBS as well as the types of tRNA primer are different. The PBS lengths and the preferred tRNA types of 3 most well-studied retroviruses are listed in Table I.

These discoveries serve as the theoretical basis for our tRNA primer designer. So basically, the function of our tRNA primer designer is to change the tRNA template in order to suit the basic properties of the reverse transcriptase (MMLV RT/ HIV-1 RT/ RSV RT) selected by the user as well as to replace several nucleotides (17 or 18) on 3'-terminal of the tRNA templates to match with nucleotides at the 5'-terminal of the GOI which users input. Also, to make sure that the RNA sequence is a tRNA sequence, the secondary structure should be revealed. We achieve this goal by using the similar tRNA secondary structure prediction scheme as the one implemented in the opensource software tRNAfinder (Kurokawa et al.).

Studies have shown that the primary factor guiding the selection of tRNA primer for MMLV RT is the PBS sequence instead of the inherent nature of reverse transcriptase (A. H. Lund et al., S. P. Goff et al.). So, by making mutations on both the PBS and tRNA sequence, the researchers have found that reverse transcription could still successfully take place while the virus’ titer is not greatly affected. Also, after several cycles of replication, the mutated sequence is not changed back to its original version (Pedersen et al., 1997). Even though it is found that the primer is not stringent for MMLV, studies have revealed that the tRNA-like structure is necessary. A study that the inclusion of one single non-Watson-Crick base pair between PBS and tRNA primer would improve the replication efficiency (F. S. Pedersen et al., 1993), but we didn’t adopt this construct as the one base pair mismatch would often be changed to the full-complementary version after the first cycle of replication (Pedersen et al., 1997)(Pedersen et al., 1997), making this addition unnecessary.
User guideline
Our tRNA primer designer is a web tool for potential users of our mutagenesis system to design their own tRNA primers according to their experimental setups. Here we provide a step-by-step guide to using this software.

Step 1. Input a DNA sequence that you want to mutate. The last 18 nucleotides of the sequence are selected to be PBS. Note that this sequence should be longer than 18 nucleotides. Besides, it shouldn't contain any characters other than A/T/C/G.

Step 2. Choose the type of reverse transcriptase that you want to use based on your experimental design. Note that this software only allows you to choose from MMLV RT/ HIV-1 RT/ RSV RT.

Step3. Click on the "DESIGN FOR ME!!!" button and see the result. The result is composed of two parts. The first part shows you the secondary structure of the template tRNA that you will be using as well as the designed tRNA primer. The fragment that can be annealed to PBS of the input DNA sequence is shown in red. The second part will give you the DNA sequence encoding the tRNA primer that satisfies your need. You can just copy it and use it elsewhere.
References
  • [1]: Peters G , Dahlberg J E . RNA-directed DNA synthesis in Moloney murine leukemia virus: interaction between the primer tRNA and the genome RNA.[J]. Journal of Virology, 1979, 31(2):398-407.
  • [2]: Kulpa, D. Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors[J]. EMBO (European Molecular Biology Organization) Journal, 1997, 16(4):856-865.
  • [3]: Palmer M T , Kirkman R , Kosloff B R , et al. tRNA Isoacceptor Preference prior to Retrovirus Gag-Pol Junction Links Primer Selection and Viral Translation[J]. Journal of Virology, 2007, 81(9):4397-4404.
  • [4]: Kinouchi M , Kurokawa K . [Special Issue: Fact Databases and Freewares] tRNAfinder: A Software System To Find All tRNA Genes in the DNA Sequence Based on the Cloverleaf Secondary Structure[J]. Journal of Computer Aided Chemistry, 2006, 7:116-124.
  • [5]: Lund, Anders H. et al. “Mutated primer binding sites interacting with different tRNAs allow efficient murine leukemia virus replication.” Journal of virology, 67 12 (1993): 7125-30.