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

m
Line 1: Line 1:
−
{{Fudan-TSI}}<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+
{{Fudan-TSI}}
−
<html lang="en">
+
<html>
−
<!--
+
−
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-26 -->
+
−
<head>
+
−
    <meta charset="UTF-8">
+
  
−
    <!-- CSS -->
 
−
    <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" />
 
  
−
    <!-- Font-awesome icons 4.7.0 -->
+
<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) -->
+
$(document).ready(function() {
−
    <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 -->
+
//remove the HQ_page id
−
    <style>
+
$("#HQ_page").attr('id','');
−
        *{margin: 0;padding: 0;list-style: none;}
+
−
        /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
+
  
−
        /** 清除内外边距 **/
+
//highlight current page on the menu
−
        body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+
highlight_current_page_menu();
−
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+
−
        pre, /* text formatting elements 文本格式元素 */
+
//accessing submenus
−
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+
$(".menu_item").click(function(){
−
        th, td /* table elements 表格元素 */ {
+
$(".submenu_control_icon", this).toggleClass("open");
−
            margin: 0;
+
$(this).next(".submenu").fadeToggle(400);
−
            padding: 0;
+
});
−
        }
+
 +
//mobile menu access
 +
$(".igem_2019_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
  
−
        /** 设置默认字体 **/
 
  
−
        /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
+
function highlight_current_page_menu() {
−
        address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+
−
        code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+
var page_url="https://2019.igem.org/";
−
        /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
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");
 +
 +
}
 +
}
  
−
        /** 重置列表元素 **/
 
−
        ul, ol { list-style: none; }
 
  
−
        /** 重置文本格式元素 **/
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
        a { text-decoration: none; }
+
</script>
−
        a:hover { text-decoration: underline; }
+
  
  
−
        /** 重置表单元素 **/
+
<style>
−
        legend { color: #000; } /* for ie6 */
+
/**************************************************************************************************************************************************************************************************/
−
        fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+
−
        button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+
−
        /* 注：optgroup 无法扶正 */
+
  
−
        /** 重置表格元素 **/
+
 
−
        table { border-collapse: collapse; border-spacing: 0; }
+
 
−
#FudanBody .imgNoM img{
+
/**************************************************************************************************************************************************************************************************/
−
    width:100%;
+
/* 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;}
 +
 
}
 
}
−
#FudanBody .imgNoM{
+
 
−
    text-align:center;
+
/* 1400px  */
−
}
+
/************************************************/
−
    </style>
+
@media only screen and (max-width: 1400px) {
−
    <title>2019 Team:Fudan-TSI Measurement</title>
+
.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%;}
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
<head>
 +
 
 +
<!-- This tells the browser that your page is responsive -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
<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>
 +
 +
 +
 
</head>
 
</head>
  
−
<body>
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
−
<!-- Fudan div at igem.org -->
+
 
−
<div id="FudanWrapper" class="white">
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
    <div id="FudanBody" class="white">
+
<!--- Menu --->
−
        <header>
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
            <!-- empty bar -->
+
−
            <div id="emptyBar" style="position:relative;width: 100%;"></div>
+
 
 +
<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;
 +
}
 +
 
 +
/** 设置默认字体 **/
 +
 
 +
/* @@@@ 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 正常化 */
 +
 
 +
/** 重置列表元素 **/
 +
ul, ol { list-style: none; }
 +
 
 +
/** 重置文本格式元素 **/
 +
a { text-decoration: none; }
 +
a:hover { text-decoration: underline; }
 +
 
 +
 
 +
/** 重置表单元素 **/
 +
legend { color: #000; } /* for ie6 */
 +
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
 +
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 +
/* 注：optgroup 无法扶正 */
 +
 
 +
/** 重置表格元素 **/
 +
table { border-collapse: collapse; border-spacing: 0; }
 +
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content begins    --------------------------------------------------------------------------------------------------------------------------------->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 +
 +
 +
 +
 +
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 +
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 +
 +
 +
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&amp;action=raw&amp;ctype=text/css">
 +
 +
<style>
 +
 +
body{
 +
margin:0;
 +
padding:0;
 +
background-color:#08273a;
 +
}
 +
a{
 +
text-decoration:none;
 +
}
 +
#global_wrapper{
 +
width:100%;
 +
height:auto;
 +
margin:0;
 +
position:absolute;
 +
}
 +
#navUl{
 +
width:100%;
 +
height:110px;
 +
padding:40px 0 0 0;
 +
overflow:visible;
 +
position:fixed;
 +
list-style:none;
 +
z-index:999;
 +
background-color:#08273a;
 +
margin:0;
 +
top:0;
 +
}
 +
#mobileNav{
 +
width:100%;
 +
height:80px;
 +
padding:20px 0 0 0;
 +
top:0;
 +
background-color:#001d2a;
 +
position:fixed;
 +
display:none;
 +
text-align:center;
 +
z-index:999;
 +
}
 +
#mobileNav img{
 +
display:none;
 +
margin:0;
 +
padding:0;
 +
 
 +
}
 +
#mobileLogo{
 +
display:inline-block;
 +
}
 +
#mobileControl{
 +
float:right;
 +
display:inline-block;
 +
margin-right:15px;
 +
margin-top:3px;
 +
}
 +
#mobileCtrl{
 +
height:25px;
 +
}
 +
#mobileTeamName{
 +
display:inline-block;
 +
}
 +
#navImg{
 +
display:inline-block;
 +
float:left;
 +
height:70px;
 +
width:auto;
 +
position:relative;
 +
margin-left:4%;
 +
margin-top:0;
 +
}
 +
.logo{
 +
height:55px;
 +
width:auto;
 +
margin-top:1.3%;
 +
}
 +
.teamname{
 +
height:28px;
 +
}
 +
 
 +
#navBar{
 +
float:right;
 +
position:relative;
 +
width:auto;
 +
display:inline-block;
 +
margin-right:4%;
 +
}
 +
.navLi{
 +
float:left;
 +
display:inline-block;
 +
margin-top:3%;
 +
color:white;
 +
font-size:20px;
 +
position:relative;
 +
margin-left:18px;
 +
text-align:center;
 +
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
 +
text-decoration:none;
 +
}
 +
.navA{
 +
display:block;
 +
text-align:center;
 +
color:white;
 +
text-decoration:none;
 +
}
 +
.navA2{
 +
display:block;
 +
overflow:visible;
 +
color:white;
 +
height:auto;
 +
}
 +
.ul2{
 +
list-style:none;
 +
position:absolute;
 +
display:none;
 +
overflow:hidden;
 +
padding:10px 0 0 0 !important;
 +
margin:0 !important;
 +
font-size:17px;
 +
left:50%;
 +
transform:translateX(-50%);
 +
border-bottom-left-radius: 10px;
 +
border-bottom-right-radius: 10px;
 +
background:linear-gradient(#08273a,rgba(0,138,201,1));
 +
}
 +
.li2{
 +
padding:0;
 +
margin:10px 20px;
 +
text-align:center;
 +
display:block;
 +
}
 +
.navA:link,.navA2:link{
 +
text-decoration:none;
 +
}
 +
.navA:visited{
 +
color:white;
 +
}
 +
.navA2:visited,.navA2:active{
 +
color:white;
 +
}
 +
.navA:hover{
 +
color:#7dded4;
 +
}
 +
.navA2:hover{
 +
color:#7dded4;
 +
}
 +
.jqhover{
 +
color:#7dded4;
 +
}
 +
.navA:hover{
 +
text-decoration:none;
 +
}
 +
.navA:active{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
 
 +
</style>
 +
 
 +
 +
 
 +
 +
<style>
 +
 +
#pageContent{
 +
margin:100px 0 0 0;
 +
text-align:center;
 +
}
 +
 +
.row{
 +
clear:both!important;
 +
}
 +
 
 +
.title1{
 +
font-size:2.3rem;
 +
text-align:center;
 +
color:white;
 +
display:block;
 +
margin-top:10%;
 +
margin-bottom:7%;
 +
line-height:110%;
 +
}
 +
.title2{
 +
color:white;
 +
text-align:left;
 +
font-size:2rem;
 +
line-height:130%;
 +
display:block;
 +
width:100%;
 +
}
 +
.title3{
 +
font-size:1.4rem;
 +
color:white;
 +
text-align:left !important;
 +
display:block;
 +
width:100%;
 +
line-height:110%;
 +
padding-left:2%;
 +
}
 +
.para1{
 +
color:white;
 +
text-align:justify !important;
 +
align-items:flex-start;
 +
line-height:140%;
 +
font-size:1.3rem;
 +
margin-bottom:50px !important;
 +
width:100%;
 +
margin:auto 0;
 +
}
 +
.para1 a{
 +
text-decoration:underline !important;
 +
color:white;
 +
}
 +
.para1 a:visited, .para1 a:active{
 +
color:white;
 +
}
 +
.para1 a:hover{
 +
color:rgba(96,255,249,1.00)!important;
 +
}
 +
.content1{
 +
margin:7% auto;
 +
}
 +
.pic2{
 +
width:150%;
 +
}
 +
.reverseDiv{
 +
position:relative !important;
 +
float:right !important;
 +
}
 +
 
 +
 +
.paraUl{
 +
list-style-type:decimal !important;
 +
list-style-position:outside;
 +
padding-left:auto;
 +
font-size:1rem;
 +
}
 +
.paraUl li{
 +
padding-right:4% ;
 +
}
 +
 +
 +
#containerWithLeftNav{
 +
display:block;
 +
margin-left:25%;
 +
}
 +
.legend{
 +
color:white;
 +
text-align:center;
 +
}
 +
.legend>div{
 +
width:100%;
 +
text-align:justify!important;
 +
font-size:1.1rem;
 +
}
 +
.legends{
 +
margin:auto 15%;
 +
}
  
−
            <!-- Navigation bar 2019-9-15 -->
 
−
            <nav id="topNav" class="white z-depth-0_5">
 
−
                <div class="nav-wrapper">
 
−
                    <div id="teamLogo" class="brand-logo">
 
−
                        <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/3/3c/T--Fudan-TSI--Logo0.gif"></a>
 
−
                    </div>
 
−
                    <ul id="nav-mobile" class="right">
 
−
                        <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 class="flow-text" style="width:100%;text-align:center"><span class="white-text">Measurement</span></p>
 
−
                </div></li>
 
−
                <li>
 
−
                    <ul class="collapsible expandable">
 
−
                        <li class="onThisPageNav"><span>On this page</span></li>
 
−
                        <li class="onThisPageNav"><a href="#section1">div with id section1</a></li>
 
−
                        <li class="onThisPageNav"><a href="#section2">div with id section2</a></li>
 
−
                        <li class="onThisPageNav"><a href="#section3">div with id section3</a></li>
 
−
                        <li class="onThisPageNav"><span>Team: Fudan-TSI</span></li>
 
−
<li><div class="collapsible-header"><span>Project</span></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"><span>Results</span></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"><span>Model</span></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"><span>Parts</span></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"><span>Outreach</span></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"><span>Team</span></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>
 
−
    </ul></div>
 
−
</li>
 
−
                    </ul><!-- .expandable -->
 
−
                </li>
 
−
                <li><div class="placeHolder"></div></li>
 
−
            </ul>
 
−
        </header>
 
  
−
        <div id="pageContent" style="">
+
</style>
 +
 +
<style>
 +
 +
@media only screen and (max-width:1200px){
 +
#mobileBar{
 +
margin-left:4%;
 +
}
 +
.navLi{
 +
font-size:18px;
 +
margin-top:3.5%;
 +
}
 +
}
 +
 +
 +
@media only screen and (max-width:1100px){
 +
 +
#navUl{
 +
display:block;
 +
float:right;
 +
margin-top:0;
 +
top:80px;
 +
right:0;
 +
background-color:rgba(0,0,0,0);
 +
padding:0;
 +
}
 +
 +
#mobileNav{
 +
display:block;
 +
}
 +
 +
#navImg{
 +
display:none;
 +
}
 +
 +
 +
#navBar{
 +
margin:0 1% 0 0;
 +
padding-right:2%;
 +
padding-left:1%;
 +
position:relative;
 +
display:none;
 +
}
 +
 +
#mobileNav img{
 +
display:inline-block;
 +
margin:5px 0;
 +
padding:0;
 +
}
 +
#mobileControl{
 +
margin-top:8px;
 +
}
  
 +
.logo{
 +
height:45px;
 +
margin-top:7px;
 +
}
 +
.navLi{
 +
display:block;
 +
position:relative;
 +
float:right;
 +
clear:both;
 +
white-space:nowrap;
 +
text-align:right;
 +
margin:0;
 +
height:60px;
 +
width:100%;
 +
background-color:#00324a;
 +
}
 +
.navA{
 +
display:block;
 +
text-align:right;
 +
position:relative;
 +
float:right;
 +
padding:20px 20px !important;
 +
}
 +
.n2{
 +
display:none;
 +
width:0;
 +
position:relative;
 +
float:left;
 +
text-align:right;
 +
}
 +
.ul2{
 +
background:none;
 +
padding-top:0;
 +
background-color:#00557b;
 +
text-align:right;
 +
display:block;
 +
position:relative;
 +
float:right;
 +
right:100%;
 +
transform:translateX(0%);
 +
top:0;
 +
transform:translateY(1%);
 +
border-radius:0 0 0 10px;
 +
}
 +
.open{
 +
display:block;
 +
}
 +
 +
.title2{
 +
font-size:1.8rem;
 +
line-height:140%;
 +
}
 +
.para1{
 +
font-size:1.3rem;
 +
}
 +
.pic2{
 +
width:120%;
 +
}
 +
 +
.highlightIcon{
 +
margin:20% auto 10% auto;
 +
}
 +
.highlightTitle{
 +
margin-bottom:15%;
 +
}
  
−
            <div id="contentBanner" class="figureBanner">
+
−
                <div class="row">
+
}
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <h1>Measurement</h1>
+
−
                    </div>
+
@media only screen and (max-width:992px){
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <span>A dual-fluorescence dual-plasmid quantification system was used to rapidly and robustly measure the performance of synthetic transcription factor-promoter pairs.</span>
+
#navUl{
−
                    </div>
+
display:block;
−
                </div>
+
float:right;
−
                <div id="figureBannerTitle" class="hide-on-small-only">
+
margin:0;
−
                    <h1>Measurement</h1>
+
top:80px;
−
                    <p class="flow-text"><span>A dual-fluorescence dual-plasmid quantification system was used to rapidly and robustly measure the performance of synthetic transcription factor-promoter pairs.</span></p>
+
right:0;
−
                </div>
+
}
−
                <div class="hide-on-small-only">
+
−
                    <img src="https://static.igem.org/mediawiki/2018/a/a3/T--Fudan--title_quantification.jpg">
+
#mobileNav{
−
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
+
display:block;
−
                        <defs>
+
}
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraleft">
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="0%"/>
+
#navImg{
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="100%"/>
+
display:none;
−
                            </linearGradient>
+
}
−
                        </defs>
+
−
                        <g>
+
#navTeamName{
−
                            <rect id="svg_1" fill="url(#blackgraleft)" height="100%" width="100%"/>
+
display:none;
−
                        </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%;">
+
#navBar{
−
                        <defs>
+
margin:0 1% 0 0 ;
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraright">
+
margin-right:2%;
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="0%"/>
+
padding-right:1%;
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="100%"/>
+
padding-left:1%;
−
                            </linearGradient>
+
position:relative;
−
                        </defs>
+
display:none;
−
                        <g>
+
}
−
                            <rect id="svg_2" fill="url(#blackgraright)" height="100%" width="100%"/>
+
#mobileControl{
−
                        </g>
+
margin-top:10px;
−
                    </svg>
+
}
−
                </div>
+
#mobileNav img{
−
            </div>
+
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;
 +
}
 +
  
−
            <!-- main content of the page -->
+
−
            <div class="container">
+
#animation_container{
−
                <!-- side navigator of page content -->
+
display:none;
−
                <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
+
}
−
                    <li>Measurement</li>
+
#teamLogo{
−
                    <li class="onThisPageNav"><a href="#section1">Introduction</a></li>
+
display:block;
−
                    <li class="onThisPageNav"><a href="#section2">Method</a></li>
+
}
−
                    <li class="onThisPageNav"><a href="#section3">Results</a></li>
+
−
                    <li class="onThisPageNav"><a href="#section4">Discussion</a></li>
+
−
                </ul>
+
−
                <main>
+
−
<div class="expFigureHolder" style="width:100%">
+
−
    <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/2/23/T--Fudan--LC-gj-measure.png" />
+
−
    <p class="flow-text">In our GJ presentation (10/25 Room 311 9:00-9:25), we used the image above to summarize our measurement used for receptor optimization and logic gate characterization.</p>
+
−
</div>
+
−
                    <div id="section1" class="section container scrolSpy">
+
  
−
                            <h2>Introduction</h2>
+
−
                            <p class="flow-text">
+
.title2{
−
                                Transcription factors and promoters are the basis of the genetic circuit. Compared with prokaryotic promoters, the mechanism of action of eukaryotic promoters is complex <a href="https://www.ncbi.nlm.nih.gov/pubmed/10412974" target=_blank>(Struhl, 1999)</a>, which increases the difficulty of our new design and transformation. The limited number of eukaryotic transcription factors and promoters is currently limiting the design and implementation of complex gene circuits in mammalian cells from meeting a variety of clinical or industrial applications.
+
font-size:1.5rem;
−
                            </p>
+
}
−
                            <p class="flow-text">
+
.para1{
−
                                In order to obtain a sufficient number of orthogonal synthetic transcription factor-promoter pairs, it is often necessary to carry out a certain number of constructions and select candidates with an excellent performance from the complex construction. This requires us to develop a robust, fast and cost-controllable method suitable for large-scale screening. Therefore, testing using transient transfection methods is an effective method.
+
font-size:1.2rem;
−
                            </p>
+
}
 +
.pic2{
 +
width:100%;
 +
}
  
−
                        <div class="expFigureHolder width60 left-on-med-and-up">
+
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/0/01/T--Fudan--Measurement-M1.svg">
+
}
 +
 +
 +
@media only screen and (max-width:768px){
 +
.col-md-4{
 +
clear:both;
 +
}
 +
.col-md-8{
 +
clear:both;
 +
}
 +
.pic2{
 +
margin-bottom:10%;
 +
width:80%;
 +
}
 +
.title2{
 +
font-size:1.2rem;
 +
}
 +
.para1{
 +
font-size:1rem;
 +
}
 +
.pic2{
 +
width:80%;
 +
}
 +
#sponser img {
 +
width:60%;
 +
}
 +
 +
#containerWithLeftNav{
 +
margin-left:auto;
 +
}
 +
 +
}
 +
 +
</style>
  
−
                            <p class="flow-text">
 
−
                                <b>Figure 1. Using a dual fluorescence system to effectively remove data-to-data differences due to differences in transient efficiency.
 
−
                                </b><br/>
 
−
                                (a) Testing with a single fluorescence system is susceptible to transient effects resulting in measurement errors. U, untransfected cell; T, transfected cell. The two distinct peak shapes here are only for convenience of display. In actual tests, it is often difficult to distinguish a clear trough because of the copy number variability of the transiently transferred plasmid. This effect is more pronounced when a promoter has a higher background expression or an unstable expression.<br/>
 
−
                                (b) Testing with dual fluorescence system can effectively eliminate the difference in transfection efficiency. Orange indicates more cell aggregation in this area, and yellow indicates less cell aggregation in this area.
 
−
                            </p>
 
  
−
                        </div>
+
−
                            <p class="flow-text">Since transient transfection experiments will introduce a heterogeneous number of plasmid copies into cells <a href="https://www.ncbi.nlm.nih.gov/pubmed/19211029" target=_blank>(Cohen et al., 2009)</a>, the differences between experiments will be expanded compared to stable expression cell lines. We found that a reasonable way to distinguish successfully transfected cells is to maintain test robustness while quantifying the promoter. As an example taken from a group of experiments, when a transcription factor and its corresponding promoter which controls a downstream reporter gene are co-transfected, transient transfection will result in a high degree of heterogeneity in the fluorescent expression of the cells. If it is impossible to gate out cells that have been unsuccessfully transfected by any means, the transfection efficiency of each change in each experiment will make these untransfected cells have a catastrophic effect on the statistical results <font color=”purple”>(Figure 1a)</font>. However, by introducing an additional fluorescent signal, we can clearly distinguish cells that have been successfully transfected <font color=”purple”> (Figure 1b) </font>. Thus, this method contains important implementation value.
+
−
                            </p>
+
−
                            <p class="flow-text">In transient transfection, the introduction of additional plasmids may result in that not all cells are able to take up all of the components of the plasmid set. Thus, the use of such a method does not effectively distinguish whether those cells are successfully transferred to all of the plasmid groups based on the presence or absence of the internal reference fluorescence. However, in contrast, the success rate of co-transfection can be significantly improved by reducing the amount of plasmid used.
+
−
                            </p>
+
−
                            <p class="flow-text">Therefore, we developed a dual-fluorescence dual-plasmid (DFDP) quantification system (DFDP), in which we keep only two plasmids that allow us to confidently perform a co-transfection experiment. Simultaneously, the P2A element couples the expression of the internal reference fluorescence with transcription factor (TF) so that we can gate out the cells that have not been successfully transferred into the plasmid by distinguishing the presence or absence of one of the fluorescences. Thereby we can minimize the interference caused by utilizing the difference in transfection efficiency between the repeats. Thus, DFDP quantification system helps us measure transcription factor-promoter pair strength quickly and robustly.
+
−
                            </p>
+
−
                            <p class="flow-text">Here we summarize the comparison of using a 2A element to construct DFDP relative to co-transfecting an internal reference plasmid (Table 1).
+
−
                            </p>
+
−
                            <div class="tableHolder">
+
−
                            <table>
+
−
                                <tr style="border-top: #AAAAAA solid 1px">
+
−
                                    <th></th>
+
−
                                    <th>Dual-fluorescence dual-plasmid (DFDP)</th>
+
−
                                    <th>Co-transfecting an internal reference fluorescence</th>
+
−
                                </tr>
+
−
                                <tr>
+
−
                                    <td rowspan="2">Pro</td>
+
−
                                    <td>Using only two plasmids for co-transfection experiments, it is better to ensure that the fluorescence expressed in association with TF is able to indicate that the cell already contains two other plasmids.</td>
+
−
                                    <td rowspan="2">Molecular cloning may be relatively simple due to the elimination of the need to construct a fusion protein.
+
−
                                    </td>
+
−
                                </tr>
+
−
                                <tr>
+
−
                                    <td>Using 2A to link TF and fluorescent protein, you can roughly understand the expression level of transcription factor by mCherry intensity.</td>
+
−
                                </tr>
+
  
−
                                <tr>
 
−
                                    <td>Con</td>
 
−
                                    <td>
 
−
                                        Need to construct a fusion protein, so molecular cloning requires some experience (this can be improved by our careful plasmid design).
 
−
                                    </td>
 
−
                                    <td>
 
−
                                        Due to the need to introduce an additional plasmid, co-transfection with 3 plasmids (even if 4 plasmids are required for co-transfection if the NIMPLY-form promoter is to be tested) actually reduces the efficiency of transfection. It is not guaranteed that cells with internal reference fluorescence do contain the two or three other plasmids.
 
−
                                    </td>
 
−
                                </tr>
 
−
                                <caption style="text-align:left">Table 1. Comparison of advantages and disadvantages between DFDP and the method of co-transfecting an internal reference fluorescence.
 
  
 +
<style>
 +
#footContainer{
 +
width:90%;
 +
}
 +
#FudanFooter{
 +
margin:auto 0;
 +
width:100%;
 +
padding:3% 0;
 +
}
 +
#FudanFooter #usefulLinks {
 +
color: #cacaca;
 +
padding-left: 1rem;
 +
}
  
−
                                    </caption>
+
#FudanFooter #usefulLinks ul {
−
                            </table>
+
font-size: 13px;
−
                        </div>
+
line-height: 14px;
−
                    </div>
+
border-top: solid 2px;
−
                        <div id="section2" class="section container scrolSpy">
+
color: inherit;
−
                            <h2>Method</h2>
+
text-decoration: none;
 +
padding-top: 5px;
 +
margin:0;
 +
}
  
−
                            <h3>The design of DFDP
+
#FudanFooter #usefulLinks div {
−
                            </h3>
+
color: #cacaca;
 +
}
  
−
                            <p class="flow-text">
+
#FudanFooter #usefulLinks div:hover {
−
                                Based on theoretical assumptions (see <a href="#section5">Supplementary Materials</a> for details), we designed a dual-fluorescence-double plasmid (DFDP) system containing two plasmids <font color=”purple”>(Figure 2)</font>. Spectral overlap problems in multicolor fluorescence signal measurements can interfere with the effectiveness of the measurement.
+
color: white;
−
                                We used mCherry and d2EGFP here as two dual fluorescent signals because of the minimal overlap of their spectra.
+
}
−
                            </p>
+
−
                            <div class="expFigureHolder" style="width: 100%">
+
−
                                <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/8/80/T--Fudan--Measurement-M2.svg">
+
  
−
                                <p class="flow-text"><b>Figure 2. Dual-fluorescence dual-plasmid (DFDP) assay.</b><br/>
+
#FudanFooter #usefulLinks a {
−
                                    Structure of the plasmid with TF (P-TF): conPro-mCherry-P2A-SynTF. mCherry and TF are in one open reading frame linked by P2A and controlled by CMV promoter. P2A is a high efficiency self-cleaving 2A peptide
+
color: inherit;
−
                                    <a href="https://www.ncbi.nlm.nih.gov/pubmed/21602908" target=_blank>(Kim et al., 2011)</a>. P2A are thought to function by making the ribosome skip the synthesis of a peptide bond at the C-terminus element, leading to “cleavage” between the end of the 2A sequence and and the next peptide downstream. The efficiency of cleavage can be improved by adding the Gly-Ser-Gly sequence at the N-terminus of the 2A peptide <a href="https://www.ncbi.nlm.nih.gov/pubmed/15064769" target=_blank>(Szymczak et al., 2004)</a>. Cleavage occurs between the Gly and Pro residues on the C-terminus causing the upstream cistron will have a few additional residues added to the C-terminus, while the downstream cistron will start with an additional Proline. Another advantage of using the 2A structure is that each molecule of mCherry expresses one molecule of TF at the same time, so that the relative expression level of TF can be indirectly known by detecting the fluorescence intensity of mCherry (see <a href="#section5">Supplementary Materials</a> for details).<br/>
+
}
−
                                    Structure of the plasmid with Pro (P-Pro): Pro-d2EGFP. Promoter drives the expression of d2EGFP, which allows us to indirectly reflect the expression intensity of Pro in different states (for example, conditions with the presence of TF and conditions without the presence of TF) by detecting the fluorescence intensity of d2EGFP (see <a href="#section5">Supplementary Materials</a> for details). At the same time, since our theoretical assumptions is derived under steady-state conditions, the key to the establishment of this test is that [d2EGFP] has reached steady state at the time of testing. Therefore, it is important to speed up the system to achieve fast response time. The response time can be accelerated by accelerating the rate of protein degradation
+
−
                                    <a href="https://www.ncbi.nlm.nih.gov/pubmed/12787666" target=_blank>(Rosenfeld and Alon, 2003)</a>. Therefore, compared to the traditional fluorescence reporting system, we used rapidly degradable EGFP (d2EGFP)
+
−
                                    <a href="https://www.ncbi.nlm.nih.gov/pubmed/9857028" target=_blank>(Li et al., 1998)</a> as a surrogate for EGFP. Comparing with EGFP, d2EGFP has a faster degradation rate, which will make promoter-driven fluorescence expression reach steady state faster, ensuring that we are as steady as possible in each test.
+
−
                                </p>
+
  
−
                            </div>
+
#FudanFooter #usefulLinks a:hover {
 +
text-decoration: underline;
 +
}
  
−
                            <h3>Optimize DHDP plasmid vector backbone for easier molecular cloning</h3>
+
#FudanFooter #usefulLinks div.active,
−
                            <p class="flow-text">In our design, the P-TF plasmid requires the construction of a fusion protein, we specifically designed p2Y-C-mCherry-P2A as the basic skeleton for P-TF construction. We also designed multiple cloning sites (MCS) at the mCherry-P2A backend and we inserted a BamHI site after the last Pro on the C-terminus of P2A. Furthermore, TF can be inserted directly after digestion with BamHI and HindIII. In addition to the restriction enzyme digestion method, we inserted two BbsI sites after the 3' end of BamHI and 5' of HindIII to meet the potential requirements of the Golden Gate cloning method while the restriction sites were specially designed. Make the same as the cleavage site of BamHI and HindIII. A stop codon was also inserted between the two BbsI sites, such that the p2Y-C-mCherry-P2A backbone without the insertion of TF was normally terminated after transcription initiation. Therefore, the p2Y-C-mCherry-P2A plasmid can be used as a control plasmid (P-Ctrl). We also optimized the base sequence after the 5' end of BamHI and the 3' end of HindIII to reduce the hairpin structure which makes it very easy to use when using ClonExpress or Gibson assembly. Although insertion of the BamHI site will result in three amino acids at the N-terminal residual (Pro-Gly-Ser) of the TF; yet as far as we know, this does not affect the function of SynTF. While, you can also use the ClonExpress or NEBuilder cloning method to remove the BamHI site during assembly, leaving only one Pro.
+
#FudanFooter #usefulLinks div.active a {
−
                            </p>
+
color: white;
−
                            <p class="flow-text">Molecular cloning of the plasmids based on this specially optimized backbone system enables DFDP, making much easier and more convenient like never before.
+
}
−
                            </p>
+
−
                            <p class="flow-text">We use the ClonExpress (Vazyme #C115) or the standard BioBrick assembly for all plasmid assembly.
+
−
                            </p>
+
−
                            <p class="flow-text">Download the file to view our MCS design.
+
−
<a href="https://static.igem.org/mediawiki/2018/b/ba/T--Fudan--Measurement-MCS.txt" target="_blank"><i class="fa fa-download">MCS</i></a>
+
−
                            </p>
+
  
−
                            <h3>Cell culture</h3>
+
#FudanFooter #usefulLinks div.active ul {
−
                            <p class="flow-text">293T (ATCC #CRL-3216) was cultured in DMEM (Gibco #11965092) supplemented with 10% fetal bovine serum (Gibco # 10437036), 1x Penicillin-Streptomycin and GlutaMax.
+
border-top: solid white 2px;
−
                            </p>
+
}
  
−
                            <h3>Transient transfection</h3>
+
#FudanFooter #usefulLinks li {
−
                            <p class="flow-text">Transfection was performed using the cost-effective cationic polymer polyethyleneimine Max (Polysciences #24765). All transient transfection experiments of cells were performed in 24-well plates where the cells were plated one day earlier and transfected the next day at 80% cell confluence. For a well, 1.5 µl 1 µg/µl were added into 23.5 µl Opti-MEM (Thermo Fisher Scientific #11058021). A total of 500 or 450 ng plasmid was added into 25 µl Opti-MEM for 5 min. PEI-Opti-MEM and DNA-Opti-MEM mixture were mixed and placed at room temperature for 10 min before being added into the well.
+
padding: 3px 0 6px 3px;
−
                            </p>
+
list-style:none;
−
                            <p class="flow-text">The amount of plasmids used for activating-, silencing-, NIMPLY-form promoter tests is shown in <font color=”purple”>Table 2</font>.
+
}
−
                            </p>
+
−
                            <div class="tableHolder">
+
−
                                <table class="">
+
−
                                    <tr>
+
−
                                        <th></th>
+
−
                                        <th>-TF group</th>
+
−
                                        <th>+aTF group</th>
+
−
                                        <th>+sTF group</th>
+
−
                                        <th>+aTF +sTF (both) group</th>
+
−
                                    </tr>
+
−
                                    <tr>
+
−
                                        <td>aTF-aPro
+
−
                                        </td>
+
−
                                        <td>P-Ctrl = 250 ng<br>P-aPro = 250 ng</td>
+
−
                                        <td>P-aTF = 250 ng<br>P-aPro = 250 ng</td>
+
−
                                        <td></td>
+
−
                                        <td></td>
+
−
                                    </tr>
+
−
                                    <tr>
+
−
                                        <td>sTF-sPro
+
−
                                        </td>
+
−
                                        <td>P-Ctrl = 250 ng<br>P-sPro = 250 ng</td>
+
−
                                        <td></td>
+
−
                                        <td>P-sTF = 250 ng<br>P-sPro = 250 ng</td>
+
−
                                        <td></td>
+
−
                                    </tr>
+
−
                                    <tr>
+
−
                                        <td>aTF-aPros-sTF
+
−
                                        </td>
+
−
                                        <td>P-Ctrl = 300 ng<br>P-aPros = 150 ng</td>
+
−
                                        <td>P-Ctrl = 150 ng<br>P-aTF = 150 ng<br>P-aPros = 150 ng</td>
+
−
                                        <td>P-Ctrl = 150 ng<br>P-sTF = 150 ng<br>P-aPros = 150 ng</td>
+
−
                                        <td>P-aTF = 150 ng<br>P-sTF = 150 ng<br>P-aPros = 150 ng</td>
+
−
                                    </tr>
+
−
                                    <caption style="text-align:left">Table 2. Plasmids for activating-, silencing-, NIMPLY-form promoter test.
+
  
−
                                    </caption>
+
#usefulLinks span {
−
                                </table>
+
font-size: 20px;
−
                            </div>
+
}
 +
  
−
                            <h3>Flow cytometry</h3>
+
#FudanFooter div.footer-copyright {
−
                            <p class="flow-text">All the flow cytometry data is acquired by FACSJazz (BD Biosciences). After 48 hours of transfection, the cells were fixed with 4% paraformaldehyde for 15 min, and washed twice with PBS before analysis.
+
font-size: 13px;
−
                                Keep in dark as much as possible between operations. The d2EGFP is recorded under the excitation laser of 488 nm with a 530/40 emission filter while the mCherry is recorded under the excitation laser of 561 nm with a 610/20 emission filter.
+
line-height: 15px;
−
                                The photomultiplier tube (PMT) amplification values for FSC, SSC, EGFP, mCherry channel are 28, 28, 28 and 44 separately.
+
}
−
                                Overall, the spectral overlap between EGFP and mCherry is very small; emissions of EGFP and mCherry activated by 2 lasers separated well so no compensation is needed.
+
.footerUl{
−
                            </p>
+
margin:2% 4%;
 +
}
 +
</style>
  
−
                            <h3>Data analysis</h3>
+
<script>
−
                            <p class="flow-text">Three biological replicates were performed for each experiment.
+
−
                                Flow cytometry data are analyzed by FlowJo 10 (TreeStar). Three basic hierarchical populations are gated: FSC-SSC → FSC-Trigger pulse width → 488_530/40-561_610/20. Successfully transfected cells are gated by mCherry positive for the same group. MFI represents the median fluorescence intensity of EGFP in the top 50% of cells with the strongest expression of d2EGFP. Different biological replicates were normalized using the fluorescence intensity of mCherry. For the Fold value, it is calculated according to the formula in the theoretical hypothesis (see <a href="#section5">Supplementary Materials</a> for details). All statistical analysis was performed with Prism 7 (Graphpad).
+
$(document).ready(function(){
−
                            </p>
+
−
                        </div>
+
−
                    <div id="section3" class="section container scrolSpy">
+
var winWidth=$(window).width();
−
                            <h2>Results</h2>
+
−
                            <h3>Testing activating-form promoters using DFDP</h3>
+
if (winWidth>1100){
−
                            <p class="flow-text">We used the artificial zinc finger protein (Synthetic Zinc finger, SynZF)
+
$(".navA").mouseenter(function(){
−
                                <a href="https://www.ncbi.nlm.nih.gov/pubmed/22863014" target=_blank>(Khalil et al., 2012;</a>
+
$(this).parent().find(".ul2").stop().fadeIn(400);
−
                                <a href="https://www.ncbi.nlm.nih.gov/pubmed/22323524" target=_blank>Lohmueller et al., 2012)</a>  to construct three mammalian-adapted DNA binding domains (DBD) of ZF21.16, ZF42.10, and ZF43.8, based on
+
});
−
                                <a href="https://2017.igem.org/Team:Fudan" target=_blank>iGEM 2017 Fudan</a> standardized synthetic transcription factors (SynTF) – synthetic promoter (SynPro) construction paradigm. The tests using DFDP showed that the ZF21.16-, ZF42.10-, ZF43.8-VP64 had good activation characteristics <font color=”purple”>(Figure 3)</font>, and the activation magnification ratio ranged from 51 to 454 fold. Among them, 8×ZF21.16-minCMV had the largest activation ratio (454 fold), while 8×ZF43.8-minCMV had the smallest activation ratio (51 fold). The difference between them is mainly due to the relatively high background expression of 8×ZF43.8-minCMV. Thus, we believe that 8×ZF21.16-minCMV is a
+
$(".navLi").mouseleave(function(){
−
                                better promoter (for our opinion on excellent promoters, please see the discussion section).
+
$(this).find(".ul2").stop().fadeOut(400);
−
                            </p>
+
});
−
                        <div class="expFigureHolder row width80" style="margin: 23px auto 0 auto;">
+
−
                            <div class="col s12 m6"><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/a/af/T--Fudan--Measurement-M3.svg"></div>
+
−
                            <div class="col s12 m6"><p class="flow-text">
+
}
−
                                <b>Figure 3. IDENTITY-form promoter.</b><br/>
+
else{
−
                                The diagram located at the top is the IDENTITY-form promoter working mechanism diagram. The activating-form transcription factor (aTF) is formed by a DNA binding domain (DBD) and a transcriptional activation domain (AD) linked via a linker. The IDENTITY-form promoter is just an activating-form promoter (aPro) because it is expressed only in the presence of aTFs. The aPro is constructed by inserting a plurality of response elements corresponding to aTF (aTF REs) before the minimal promoter (minPro, eg minCMV). At the bottom, DFDP was used to test the aPros. It can be seen that the aPro is fully activated in the presence of its corresponding aTF (n = 3, error bar, SD).
+
$(".navA:not(.noSubmenu)").removeAttr("href");
−
                            </p></div>
+
$("#mobileNav").click(function(){
−
                        </div>
+
$("#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://igem.org/2019_Judging_Form?id=3257">Judging</a></li>
 +
 +
</ul>
 +
 +
 +
</ul>
  
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Cover ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div id="pageCover">
 +
 +
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&amp;action=raw&amp;ctype=text/javascript"></script>
 +
<script>
 +
$(document).ready(function($){
 +
var $root = $('html, body');
 +
$('a[href^="#"]').click(function() {
 +
var href = $.attr(this, 'href');
 +
$root.animate({
 +
scrollTop: $(href).offset().top
 +
}, 1000, function () {
 +
window.location.hash = href;
 +
});
 +
return false;
 +
});
 +
})
 +
</script>
 +
 +
<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
 +
  <defs>
 +
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
  <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
 +
  <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
 +
</linearGradient>
 +
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
  <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
 +
  <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
 +
</linearGradient>
 +
  </defs>
 +
  <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
 +
  <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
 +
</svg>
 +
<div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/d/d9/T--Fudan-TSI--coverDesign.gif"></div>
 +
</div>
 +
<style>
 +
#pageCover{
 +
width:100%;
 +
margin:0;
 +
padding-top:80px;
 +
}
 +
#demoCover{
 +
width:100vw;
 +
height:80vh;
 +
position:absolute;
 +
background-color:rgba(8,39,58,0.5);
 +
top:70px;
 +
left:0;
 +
text-align:center;
 +
}
 +
#coverPic{
 +
width:550px;
 +
margin:20vh auto;
 +
}
 +
#demo{
 +
width:100vw;
 +
height:70vh;
 +
position:relative;
 +
}
 +
#demo svg {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: fixed;
 +
}
 +
#demo svg g {
 +
  mix-blend-mode: lighten;
 +
}
 +
#demo svg polygon {
 +
  stroke: none;
 +
  fill: white;
 +
}
 +
 +
@media only screen and (max-width:1100px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
height:30vh;
 +
}
 +
#demo{
 +
height:30vh;
 +
}
 +
#coverPic{
 +
width:500px;
 +
margin:7vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:992px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:500px;
 +
margin:6vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:768px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:400px;
 +
margin:8vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:500px){
 +
#coverPic{
 +
width:200px;
 +
margin:8vh auto;
 +
}
 +
}
 +
</style>
 +
<script>
 +
//////////////////////////////
 +
// Demo Functions
 +
//////////////////////////////
 +
function bkgFunction(showStats) {
 +
  // stats
 +
  if (showStats) {
 +
var stats = new Stats();
 +
stats.domElement.style.position = 'absolute';
 +
stats.domElement.style.left = '0';
 +
stats.domElement.style.top = '0';
 +
document.body.appendChild(stats.domElement);
 +
requestAnimationFrame(function updateStats(){
 +
  stats.update();
 +
  requestAnimationFrame(updateStats);
 +
});
 +
  }
 +
  // init
 +
  var svg = document.getElementById('demo');
 +
  tesselation.setup(svg);
 +
  gradients.setup();
 +
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
  function playNextTransition() {
 +
tesselation.next(transitionDuration);
 +
gradients.next(transitionDuration);
 +
  };
 +
  function tick(time) {
 +
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
  lastTransitionAt = time;
 +
  playNextTransition();
 +
}
 +
window.requestAnimationFrame(tick);
 +
  }
 +
  window.requestAnimationFrame(tick);
 +
}
 +
//////////////////////////////
 +
// Delaunay Triangulation
 +
//////////////////////////////
 +
var calcDelaunayTriangulation = (function() {
 +
  var EPSILON = 1.0 / 1048576.0;
 +
  function getSuperT(vertices) {
 +
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
for(i = vertices.length; i--; ) {
 +
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
}
 +
xDiff = xMax - xMin;
 +
yDiff = yMax - yMin;
 +
maxDiff = Math.max(xDiff, yDiff);
 +
xCenter = xMin + xDiff * 0.5;
 +
yCenter = yMin + yDiff * 0.5;
 +
return [
 +
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
  [xCenter, yCenter + 20 * maxDiff],
 +
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
];
 +
  }
 +
  function circumcircle(vertices, i, j, k) {
 +
var xI = vertices[i][0], yI = vertices[i][1],
 +
xJ = vertices[j][0], yJ = vertices[j][1],
 +
xK = vertices[k][0], yK = vertices[k][1],
 +
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
// bail condition
 +
if(yDiffIJ < EPSILON){
 +
if (yDiffJK < EPSILON){
 +
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
}
 +
}
 +
 +
 +
// calc circumcircle center x/y, radius
 +
m1  = -((xJ - xI) / (yJ - yI));
 +
m2  = -((xK - xJ) / (yK - yJ));
 +
xMidIJ = (xI + xJ) / 2.0;
 +
xMidJK = (xJ + xK) / 2.0;
 +
yMidIJ = (yI + yJ) / 2.0;
 +
yMidJK = (yJ + yK) / 2.0;
 +
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
 +
  (yDiffJK < EPSILON) ? xMidJK :
 +
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
 +
yCenter  = (yDiffIJ > yDiffJK) ?
 +
  m1 * (xCenter - xMidIJ) + yMidIJ :
 +
  m2 * (xCenter - xMidJK) + yMidJK;
 +
xDiff = xJ - xCenter;
 +
yDiff = yJ - yCenter;
 +
// return
 +
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
 +
  }
 +
  function dedupeEdges(edges) {
 +
var i, j, a, b, m, n;
 +
for(j = edges.length; j; ) {
 +
  b = edges[--j]; a = edges[--j];
 +
  for(i = j; i; ) {
 +
n = edges[--i]; m = edges[--i];
 +
if(a === m){
 +
  if (b===n){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
if(a === n){
 +
  if (b===m){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
  }
 +
}
 +
  }
 +
  return function(vertices) {
 +
var n = vertices.length,
 +
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
 +
// bail if too few / too many verts
 +
if(n < 3 || n > 2000)
 +
  return [];
 +
// copy verts and sort indices by x-position
 +
vertices = vertices.slice(0);
 +
indices = new Array(n);
 +
for(i = n; i--; )
 +
  indices[i] = i;
 +
indices.sort(function(i, j) {
 +
  return vertices[j][0] - vertices[i][0];
 +
});
 +
// supertriangle
 +
st = getSuperT(vertices);
 +
vertices.push(st[0], st[1], st[2]);
 +
// init candidates/locked tris list
 +
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
 +
locked = [];
 +
edges = [];
 +
// scan left to right
 +
for(i = indices.length; i--; edges.length = 0) {
 +
  c = indices[i];
 +
  // check candidates tris against point
 +
  for(j = candidates.length; j--; ) {
 +
// lock tri if point to right of circumcirc
 +
dx = vertices[c][0] - candidates[j].x;
 +
if (dx > 0.0){
 +
if(dx * dx > candidates[j].r){
 +
locked.push(candidates[j]);
 +
  candidates.splice(j, 1);
 +
  continue;
 +
}
 +
}
 +
 
 +
 
 +
// point outside circumcirc = leave candidates
 +
dy = vertices[c][1] - candidates[j].y;
 +
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
 +
  continue;
 +
// point inside circumcirc = break apart, save edges
 +
edges.push(
 +
  candidates[j].i, candidates[j].j,
 +
  candidates[j].j, candidates[j].k,
 +
  candidates[j].k, candidates[j].i
 +
);
 +
candidates.splice(j, 1);
 +
  }
 +
  // new candidates from broken edges
 +
  dedupeEdges(edges);
 +
  for(j = edges.length; j; ) {
 +
b = edges[--j];
 +
a = edges[--j];
 +
candidates.push(circumcircle(vertices, a, b, c));
 +
  }
 +
}
 +
// close candidates tris, remove tris touching supertri verts
 +
for(i = candidates.length; i--; )
 +
  locked.push(candidates[i]);
 +
candidates.length = 0;
 +
for(i = locked.length; i--; )
 +
  if(locked[i].i < n){
 +
  if(locked[i].j < n){
 +
  if(locked[i].k < n){
 +
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
  }
 +
  }
 +
  }
 +
 +
 +
// done
 +
return candidates;
 +
  };
 +
})();
 +
var tesselation = (function() {
 +
  var svg, svgW, svgH, prevGroup;
 +
  function createRandomTesselation() {
 +
var wW = window.innerWidth;
 +
var wH = window.innerHeight;
 +
var gridSpacing = 250, scatterAmount = 0.75;
 +
var gridSize, i, x, y;
 +
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
 +
  gridSize = gridSpacing * svgW / wW;
 +
} else { // window taller than svg = use height for gridSize
 +
  gridSize = gridSpacing * svgH / wH;
 +
}
 +
var vertices = [];
 +
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
 +
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
 +
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
 +
vertices.push(
 +
  [
 +
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
 +
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
 +
  ]
 +
);
 +
  }
 +
}
 +
var triangles = calcDelaunayTriangulation(vertices);
 +
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
 +
var polygon;
 +
for(i = triangles.length; i; ) {
 +
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 +
  polygon.setAttribute('points',
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
 +
  );
 +
  group.appendChild(polygon);
 +
}
 +
return group;
 +
  }
 +
  return {
 +
setup: function(svgElement) {
 +
  svg = svgElement;
 +
  var vb = svg.getAttribute('viewBox').split(/\D/g);
 +
  svgW = vb[2];
 +
  svgH = vb[3];
 +
},
 +
next: function(t) {
 +
  var toRemove, i, n;
 +
  t /= 1000;
 +
if(prevGroup){
 +
if(prevGroup.children){
 +
if(prevGroup.children.length){
 +
toRemove = prevGroup;
 +
n = toRemove.children.length;
 +
for (i = n; i--; ) {
 +
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
 +
}
 +
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
 +
}
 +
}
 +
}
 +
 +
  var g = createRandomTesselation();
 +
  n = g.children.length;
 +
  for (i = n; i--; ) {
 +
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
 +
  }
 +
  svg.appendChild(g);
 +
  prevGroup = g;
 +
}
 +
  }
 +
})();
 +
//////////////////////////////
 +
// Gradients
 +
//////////////////////////////
 +
var gradients = (function() {
 +
  var grad1, grad2, showingGrad1;
 +
  // using colors from IBM Design Colors this time
 +
  var colors = [ // 14 colors - use 3-5 span
 +
'#3c6df0', // ultramarine50
 +
'#12a3b4', // aqua40
 +
'#00a78f', // teal40
 +
'#00aa5e', // green40
 +
'#81b532', // lime30
 +
'#e3bc13', // yellow20
 +
'#ffb000', // gold20
 +
'#fe8500', // orange30
 +
'#fe6100', // peach40
 +
'#e62325', // red50
 +
'#dc267f', // magenta50
 +
'#c22dd5', // purple50
 +
'#9753e1', // violet50
 +
'#5a3ec8'  // indigo60
 +
  ];
 +
  function assignRandomColors(gradObj) {
 +
var rA = Math.floor(colors.length * Math.random());
 +
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
 +
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
 +
gradObj.stopA.setAttribute('stop-color', colors[rA]);
 +
gradObj.stopB.setAttribute('stop-color', colors[rB]);
 +
  }
 +
  return {
 +
setup: function() {
 +
  showingGrad1 = false;
 +
  grad1 = {
 +
stopA: document.getElementById('stop1a'),
 +
stopB: document.getElementById('stop1b'),
 +
rect:  document.getElementById('rect1')
 +
  };
 +
  grad2 = {
 +
stopA: document.getElementById('stop2a'),
 +
stopB: document.getElementById('stop2b'),
 +
rect:  document.getElementById('rect2')
 +
  };
 +
  grad1.rect.style.opacity = 0;
 +
  grad2.rect.style.opacity = 0;
 +
},
 +
next: function(t) {
 +
  t /= 1000;
 +
  var show, hide;
 +
  if (showingGrad1) {
 +
hide = grad1;
 +
show = grad2;
 +
  } else {
 +
hide = grad2;
 +
show = grad1;
 +
  }
 +
  showingGrad1 = !showingGrad1;
 +
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
 +
  assignRandomColors(show);
 +
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
 +
}
 +
  };
 +
})();
 +
//////////////////////////////
 +
// Start
 +
//////////////////////////////
 +
bkgFunction();
 +
</script>
 +
  
−
                            <h3>
 
−
                                Testing the orthogonality between synthetic DBDs using cross-paired DFDP
 
−
                            </h3>
 
−
                        <div class="expFigureHolder width40 right-on-med-and-up">
 
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/7/78/T--Fudan--Measurement-M4.svg">
 
  
−
                            <p class="flow-text">
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
−
                                <b>
+
<!---- Left Navigator ---->
−
                                    Figure 4. testing of the Orthogonality of aTF-aPro pairs by using the cross-paired DFDP.</b>
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
−
                                <br>
+
−
                                The five aTF-aPro pairs have good orthogonality.
+
−
                            </p>
+
  
−
                        </div>
+
<ul class="leftNav" style="margin:0;padding:0;">
−
                            <p class="flow-text">
+
−
                                Cross-paired DFDP can be used to verify promoter orthogonality by using the co-transfection strategy of P-TF with both corresponding or uncorresponding P-Pro. Since there are 5 aSynTF-aSynPro pairs, 25 (5 x 5) sets of experiments are required. The intensity of d2EGFP under different conditions was examined, and it was observed that the group on the diagonal
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Naked eye detection</a></li>
−
                                (the correctly paired group) had the most significant expression <font color=”purple”>(Figure 4)</font>, indicating that the 5 pairs of aSynTF-sSynProdui pairs were orthogonal to each other. The advantage of using the activated promoter for DNA binding domain orthogonality testing over the use of sSynTF-sSynPro testing is that there is a difference in the basal expression of sSynPro so more normalization is required to rule out differences in basic expression. Abnormal results:
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">PCR verification</a></li>
−
                            </p>
+
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">Fluorescence quantification through measurement kit</a>
 +
<ul class="leftNavUl2">
 +
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_1">Cell quantity</a></li>
 +
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_2">Fluorescence</a></li>
 +
<li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle3_3">Normalization</a></li>
 +
</ul>
 +
</li>
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">SDS-PAGE</a></li>
  
  
  
 +
</ul>
 +
  
−
                            <h3>
 
−
                                Testing silencing-form promoters using DFDP
 
−
                            </h3>
 
  
  
−
                            <p class="flow-text">
+
<style>
−
                                Based on the SynTF of <a href="https://2017.igem.org/Team:Fudan" target=_blank>iGEM 2017 Fudan</a> (see the <font color=”purple”>improvement</font> page), we adjusted the position of the sSynTF corresponding response element (sTF REs) from the 3' end of the promoter to the 5' end, and replaced the original pSV40 with a stronger CMV promoter to serve as the constitutive expression promoter (conPro). Then we constructed a new generation of inhibitory transcription factors <font color=”purple”>(Figure 5)</font>. Such a construction helps to attenuate the interference of sTF REs on the under expression of conPro. Tests using DFDP show that ZF21.16-, ZF42.10-, ZF43.8-KRAB have good inhibition characteristics, with the magnification ranging from 9 to 13 times <font color=”purple”>(Figure 5)</font>. The reason why aSynTF-aSynPro differs by a hundred fold while only having a difference of about tenfold here does not mean that our sSynPro function is not good. Rather, it's because the basic expression of aSynPro is particularly weak, and it was close to the minimum of our flow cytometry detection at the time of testing.
+
.leftNav{
−
                            </p>
+
position: absolute;
−
                        <div class="expFigureHolder row width80" style="margin: 23px auto 0 auto;">
+
top:30vw;
−
                            <div class="col s12 m6"><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/5/55/T--Fudan--Measurement-M5.svg"></div>
+
left:4%;
−
                            <div class="col s12 m6"><p class="flow-text">
+
list-style: none;
−
                                <b>Figure 5. NOT-form promoter.</b><br/>
+
z-index: 3;
−
                                Above is the NOT-form promoter working mechanism diagram. Silencing-form transcription factors (sTFs) are formed by a (DBD) and a transcriptional silencing domain (SD, eg KRAB) linked via a linker. The NOT-form promoter is just a silencing-form promoter (sPro) because it is expressed only in the absence of sTFs. The sPro is structure by inserting a plurality of REs corresponding to sTFs (sTF REs) before a constitutive expression promoter (conPro, eg CMV). At the bottom, DFDP was used to test silencing-form promoters. It is observed that sPro are sufficiently inhibited in the presence of their corresponding inhibitory transcription factors. The dashed line indicates the intensity of expression of the CMV promoter under the same test conditions. Relative to the insertion of REs on the 3-terminus of conPro, the 5’-terminal design can reduce the interference to the basic expression of conPro (n = 3, error bar, SD).
+
text-align:left !important;
−
                            </p></div>
+
width:15vw;
−
                        </div>
+
}
 +
.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>
  
−
                            <h3>
 
−
                                Testing NIMPLY-form promoters using DFDP
 
−
                            </h3>
 
−
                        <div class="expFigureHolder width45 right-on-med-and-up">
 
−
                            <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/e/ef/T--Fudan--Measurement-M6.svg">
 
−
                            <p class="flow-text"><b>Figure 6. NIMPLY-form promoter. </b><br>
 
−
                                Top, the NIMPLY-form promoter working mechanism diagram. The NIMPLY-form promoter is highly expressed in the presence of only aTF and no sTF. When aTF and sTF coexist, sTF plays a major role. Bottom, using DFDP to Test NIMPLY-form promoters. 8×ZF21.16-minCMV-2×ZF43.8 is highly expressed only in the presence of ZF21.16-VP64 without ZF43.8-KRAB, while 8×ZF43.8-minCMV-2×ZF21.16 is only in High expression under conditions of ZF43.8-VP64 without ZF21.16-KRAB.
 
−
                            </p>
 
  
−
                        </div>
+
 +
<div id="pageContent">
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Content ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div class="container" id="containerWithLeftNav">
 +
<div class="row">
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
We focused our measurement on characterizing the fluorescence recovery of EGFP from its nonsense mutation in the following 4 ways:
 +
1) Green fluorescence could be seen on the plate under UV light through naked eyes and recorded by a cellphone camera. Liquid culture could be placed in a culture dish and fluorescence is easily detectable under fluorescent microscopy.<br /><br />
 +
2) We designed PCR primers to only amplify the recovered EGFP sequence but not the mutated version. The amplified band could be easily visualized after electrophoresis. <br /><br />
 +
3) Fluorescence level was quantified through microplate reader according to fluorescein solutions and silicon beads, both standard samples are from the distributed measurement kit.<br /><br />
 +
4) We ran PAGE gel of IPTG induced bacterial lysates. The mutated version produced a truncated protein at 17.8 kD, while the recovered EGFP is 26.9 kD.<br /><br />
 +
We used multiple methods to ensure that EGFP is truly recovered from its nonsense mutation.
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle1">
 +
<div class="col">Naked eye detection</div>
 +
</div>
 +
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
Single colony of Escherichia coli (BL21) transformed with plasmid containing EGFP is picked and cultured in liquid medium (2*YT). After overnight 37 ℃ culture, we transferred the liquid into an empty petri dish, and observed its fluorescence under a fluorescence microscope. Green fluorescence can be detected at the place of the bacteria solution while the rest of the plate as we expected. (Fig. 1).
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle2">
 +
<div class="col">PCR verification</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
We designed a set of primers which cannot amplify the nonsense mutant but is able to amplify the recovered EGFP. After PCR reaction, electrophoresis is performed and the recovered EGFP band is visibly bright while the mutant band does not appear (Fig. 2).
 +
</div>
 +
</div>
  
−
                            <p class="flow-text">
+
<div class="row legend">
−
                                In addition to traditional activating- and silencing-from promoters, we have also designed a novel NIMPLY-form promoter where we added multiple REs corresponding to the activating- or silencing-form transcription factors at the 5' and 3' ends of minCMV, respectively. The dominant inhibition can be achieved by (1) KRAB recruitment of transcriptional inhibitors can inhibit promoter expression <a href="https://www.ncbi.nlm.nih.gov/pubmed/8183939" target=_blank>(Margolin et al., 1994)</a>, (2) inhibitory transcription factor binding to the REs. As sTF REs is located downstream of the promoter, when the inhibitory transcription factor binds to the REs, it can cause steric hindrance and enhance the ability of transcriptional inhibition by inhibiting the forward movement of RNA polymerase. This type of promoter exhibits the logical selectivity of NIMPLY under conditions of overexpression of aTFs and sTFs. However, it can only be expressed in the presence of aTFs and the absence of sTFs. 8xZF21.16-minCMV-2xZF43.8 can only be activated in the presence of ZF21.16-VP64 and in the absence of ZF43.8-KRAB. 8xZF43.8-minCMV-2xZF21.16 can only be activated in the presence of ZF43.8-VP64 and in the absence of ZF21.16-KRAB <font color=”purple”>(Figure 5)</font>. It can be observed that in the group transfected with both aTF and sTF, the expression of the NIMPLY-form promoter has increased a little because although sTF is dominant, it can slightly reverse sTF in the condition of an overexpressed aTF.
+
<div class="row">
−
                            </p>
+
<img src="https://static.igem.org/mediawiki/2019/f/f7/T--Fudan-TSI--3mgv.gif" style="width:30%; margin:auto;">
 +
</div>
 +
<div class="row legends">
 +
Figure 3. Crystal structure of Cre recombinase bound to a loxP holliday junction (PDB:3MGV).
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle3">
 +
<div class="col">Fluorescence quantification through measurement kit</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
After being sure that the fluorescence it recovered, we quantified its intensity with a microplate reader and the standard samples from distributed measurement kit. We followed the calibration protocol from measurement community.
 +
</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle3_1">
 +
<div class="col">Cell quantity</div>
 +
</div>
 +
 +
<div class="row legend">
 +
<div class="row">
 +
<img src="https://static.igem.org/mediawiki/2019/6/6c/T--Fudan-TSI--designDemo.gif" style="width:90%; margin:auto;">
 +
</div>
 +
<div class="row legends">
 +
Figure 6.  
 +
</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
For OD600 measurement, we use the silica beads in 2019 iGEM measurement kit as a standard substance.<br /><br />
 +
As a preparation, we have measured a particle standard curve of the silica beads from maximum concentration to 0 (pure ddH2O) and used iGEM official data processing excel to generate the particle standard curve. Then, we determined the best-fitted linear region with maximum correlation coefficient R2 (Fig. 3). Before each time we measure our samples, we will first measure the OD600 of the silica beads samples whose concentration are at both ends of the best-fitted linear region, which in our case, is from 300,000,000/100μl to 18,750,000/100μl for calibration of the particle standard curve. After measuring the bacteria liquid culture samples, we will change the OD600 to the number of particles according to the calibrated standard curve.
 +
</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle3_2">
 +
<div class="col">Fluorescence</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
For fluorescence quantification, we use the fluorescein salt provided in 2019 iGEM measurement kit as a standard substance.<br /><br />
 +
As a preparation, we have measured a fluorescence standard curve of the fluorescein salt from maximum concentration to 0 (pure PBS) and used iGEM official data processing excel to generate the fluorescence standard curve. Then, we determined the best-fitted linear region with maximum correlation coefficient R2 (Fig. 4). Before each time we measure our samples, we will first measure the fluorescence intensity of the fluorescein salt samples whose concentration are at both ends of the best-fitted linear region, which in our case, is from 10μM to 0.0390625μM for calibration of the fluorescence standard curve. After measuring the bacteria liquid culture samples, we have changed the fluorescence intensity to the concentration of fluorescein salt according to the calibrated standard curve.  
  
 +
</div>
 +
</div>
 +
 +
<div class="row title2" id="mainTitle3_3">
 +
<div class="col">Normalization</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
Finally, we would divide the fluorescein salt concentration by the number of silica beads for our final quantified fluorescence intensity which is <b>c[fluorescein salt]/n[silica beads]</b> and has a unit of <b>μM/(pcs per 100 μl)</b>.
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle4" style="margin-top:10%;">
 +
<div class="col">SDS-PAGE</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
The EGFP nonsense mutant can only express a truncated peptide of 17.8 kD, while the full-length EGFP protein is 26.9 kD, the difference between their molecular weight could be visualized through SDS-PAGE. (Fig. 5)
 +
</div>
 +
</div>
 +
 +
 +
</div>
 +
</div>
 +
  
−
                    </div>
+
−
                    <div id="section4" class="section container scrolSpy">
+
</div>
−
                            <h2>Discussion</h2>
+
−
                            <h3>What is a good promoter?</h3>
+
−
                            <p class="flow-text">The performance of a promoter is not always correlated to its expression. For some experiments that require a good control of protein expression,
+
−
                                scientists may not even insert a promoter on the viral vector and rely solely on the LTR element to maintain the protein at a weak expression
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
−
                                <a href="https://www.ncbi.nlm.nih.gov/pubmed/17350576" target=_blank>(Cai et al., 2007)</a>. It was also observed in our SynNotch experiment that comparing with using CMV to control SynNotch, by using a weak promoter of PGK can significantly reduce the basal expression (data not shown). For inducible promoters, we always expect that the activating-form promoter maintains very low background expression when not activated, and produces
+
<!---- Foot ---->
−
                                increased expression when activated. Note that we do not believe that an activating-form promoter is activated as much as possible after being induced, indicating that it works well, and more importantly is whether the background expression of its background is low enough and whether it has sufficient tunability. Similarly, for silencing-form promoters, we always want to maintain stable expression under uninhibited conditions and can be shut down as much as possible after being inhibited. Similarly, we are more concerned about the stability of expression and the degree of inhibition.
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
−
                            </p>
+
 +
<footer id="FudanFooter" class="page-footer grey">
 +
 +
<div class="container" id="footContainer">
 +
<div class="row">
 +
<div class="col-md-4" id="sponser" style="padding-top:3%;">
 +
<div class="row">
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-8" id="usefulLinks">
 +
<div class="row">
 +
<div class="col-lg-6" style="padding:0;">
 +
<div class="row">
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center active">
 +
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
 +
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
 +
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
 +
<li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
 +
<li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
 +
<li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
 +
<li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<span style="text-decoration:none;">Model</span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
 +
<li><a href="/Team:Fudan-TSI/Software">Software</a></li>
 +
<li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
<div class="col-lg-6" style="padding:0;">
 +
<div class="row">
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
  <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
 +
<li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
 +
<li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
 +
<li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
  <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
 +
<li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
 +
<li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
 +
<li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
  <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Team">Members</a></li>
 +
<li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
 +
<li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
 +
<li><a href="/Team:Fudan-TSI">&#169; 2019</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="footer-copyright">
 +
<div class="container" style="width:90%;">
 +
<div class="contactUS row">
 +
  <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
</footer>
 +
 +
  
−
                            <h3>Factors that interfere with DFDP</h3>
+
</div>
−
                            <p class="flow-text">The d2EGFP intensity was used as an indirect characterization of promoter strength in our test system, but it should be noted that d2EGFP stability may vary by cell type. Therefore, the comparison of d2EGFP intensity across cell types may not truly reflect differences in promoter strength in different cell types. Only the same cell type can be used as a common chassis for the promoter test. Under these conditions, the d2EGFP intensity driven by different promoters can be compared to reflect the difference between the strengths of the promoters. At the same time, for mammals, even the same constitutive promoter, its differential performance in different cell lines is still very significant.
+
−
                                For example, the CMV promoter is very active in some cell types (such as 293T cells). But in some other cell types (such as mesenchymal stem cells) it may be quite weak
+
−
                                <a href="https://www.ncbi.nlm.nih.gov/pubmed/20485554" target=_blank>(Qin et al., 2010)</a>. In our measurement protocol, we used 293T cells as chassis cells to screen for functional synthetic transcription factor-promoter pairs. If you need to migrate the potential synthetic transcription factor-promoter pair obtained from the initial screening to other cell lines, we strongly recommend you to use a commonly used transcription factor-promoter that works well in the
+
−
                                chosen cell line as a positive control. And then repeat DFDP test on your target cell line to qualitatively verify the synthetic transcription factor-promoter pair again.
+
−
                            </p>
+
−
                            <p class="flow-text">The success of multicolor flow cytometry depends on many hardware factors.
+
−
                                First, the shape and position of the excitation laser beam; second, the choice and quality of the optical filter; and third, the sensitivity and resolution of photoelectron detection
+
−
                                <a href="https://www.ncbi.nlm.nih.gov/pubmed/23138348" target=_blank>(Perfetto et al., 2012)</a>. The intensity and sensitivity of the excitation fluorescence of different flow cytometers have a certain degree of difference. To ensure that the data between each test is quantitatively comparable, the same flow cytometer should be used for the test. Quality control is required prior to each analysis even if using the same flow cytometer.
+
−
                                If multiple flow machines were used, automatic and manual calibrations between the flow are required.
+
−
                                Dual fluorescent signals should be received using the same optical channel (filter configuration) and should ensure that the sensor-photomultiplying tubes (PMTs) for each channel set the same gain for each test. An unfixed PMT setting will destroy your experiment.
+
−
                                If a flow cytometer with user adjustable PMT value is used, it is important to select and set an appropriate PMT value for the subsequent experimental needs during the initial experiment.
+
−
                                We recommend the following. When you first start your synthetic transcription factor-promoter pair measurement, you could set up a strong double positive cell to determin the proper PMT setting. For Example, we use CMV-mCherry and CMV-d2EGFP in our experiment and add just the two channels to ensure that the brightest group of cells are within the maximum detecting range of the flow cytometer.
+
−
                            </p>
+
−
                            <p class="flow-text">Transient transfection efficiency will interfere with comparability between different experiments. Different transfection reagents, reagent dosages, as well as cell density at the time of transfection, cell status, and the duration of transfection can significantly affect the efficiency of transfection. So you should control these variables as much as possible during the test. For example, try to use the same batch of transfection reagents; optimize the transfection efficiency and then use the same amount of transfection reagent and fix the ratio between the DNA and the transfection reagent; use the same transfection density; use the cells with low passage number; and fix the cell at the same time after transfection for future Flow analysis.
+
−
                            </p>
+
  
 +
 +
 +
<script>
 +
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var pagePosition=$("#pageContent").offset().top+90;
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
$(window).resize(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var topDistance=$(window).scrollTop()+0.25*winHeight;
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
 +
var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
if (leftNavFromTop<0.25*winHeight){
 +
if(topDistance<maxTopDistance){
 +
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
}
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
}
 +
});
  
−
                    </div>
+
$(window).scroll(function(){
−
<div id="section5" class="section container">
+
var winHeight=$(window).height();
−
<h2>Supplementary Materials</h2>
+
var winWidth=$(window).width();
−
<ul class="collapsible expandable">
+
var leftNavFromTop=pagePosition-$(window).scrollTop();
−
                            <li style="list-style-type: none">
+
var topDistance=$(window).scrollTop()+0.25*winHeight;
−
                                <div class="collapsible-header">Click to expand Supplementary Materials</div>
+
if (leftNavFromTop<0.25*winHeight){
−
                                <div class="collapsible-body">
+
if(topDistance<maxTopDistance){
−
                                    <embed src="https://static.igem.org/mediawiki/2018/3/36/T--Fudan--quantification-supplementary.pdf" width="100%" height="800px">
+
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
−
                                </div>
+
}
−
                            </li>
+
else{
−
                        </ul>
+
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
−
</div>
+
};
−
                    <div class="section container">
+
}
−
                        <h4 style="margin-left: 0;">References</h4>
+
else{
−
                        <ol id="ref" style="margin: 23px 0 0 0;">
+
$(".leftNav").css({"position":"absolute","top":pagePosition});
−
                            <li>Cai, L., Marshall, T.W., Uetrecht, A.C., Schafer, D.A., and Bear, J.E.J.C. (2007). Coronin 1B coordinates Arp2/3 complex and cofilin activities at the leading edge.  128, 915-929.</li>
+
}
−
                            <li>Cohen, R.N., van der Aa, M.A., Macaraeg, N., Lee, A.P., and Szoka Jr, F.C.J.J.o.C.R. (2009). Quantification of plasmid DNA copies in the nucleus after lipoplex and polyplex transfection.  135, 166-174.</li>
+
});
−
                            <li>Khalil, A.S., Lu, T.K., Bashor, C.J., Ramirez, C.L., Pyenson, N.C., Joung, J.K., and Collins, J.J. (2012). A synthetic biology framework for programming eukaryotic transcription functions. Cell 150, 647--658.</li>
+
−
                            <li>Kim, J.H., Lee, S.-R., Li, L.-H., Park, H.-J., Park, J.-H., Lee, K.Y., Kim, M.-K., Shin, B.A., and Choi, S.-Y. (2011). High cleavage efficiency of a 2A peptide derived from porcine teschovirus-1 in human cell lines, zebrafish and mice. PLoS ONE 6, e18556.</li>
+
$(".leftNav a").click(function () {
−
                            <li>Li, X., Zhao, X., Fang, Y., Jiang, X., Duong, T., Fan, C., Huang, C.-C., and Kain, S.R. (1998). Generation of destabilized green fluorescent protein as a transcription reporter. Journal of Biological Chemistry 273, 34970-34975.</li>
+
$('html, body').animate({
−
                            <li>Lohmueller, J.J., Armel, T.Z., and Silver, P.A. (2012). A tunable zinc finger-based framework for Boolean logic computation in mammalian cells. Nucleic Acids Research 40, 5180--5187.</li>
+
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
−
                            <li>Margolin, J.F., Friedman, J.R., Meyer, W., Vissing, H., Thiesen, H.-J., and Rauscher, F. (1994). Krüppel-associated boxes are potent transcriptional repression domains. Proceedings of the National Academy of Sciences 91, 4509-4513.</li>
+
}, 500);
−
                            <li>Perfetto, S.P., Ambrozak, D., Nguyen, R., Chattopadhyay, P.K., and Roederer, M.J.n.p. (2012). Quality assurance for polychromatic flow cytometry using a suite of calibration beads.  7, 2067.</li>
+
return false;
−
                            <li>Qin, J.Y., Zhang, L., Clift, K.L., Hulur, I., Xiang, A.P., Ren, B.-Z., and Lahn, B.T.J.P.o. (2010). Systematic comparison of constitutive promoters and the doxycycline-inducible promoter.  5, e10611.</li>
+
});
−
                            <li>Rosenfeld, N., and Alon, U.J.J.o.m.b. (2003). Response delays and the structure of transcription networks.  329, 645-654.</li>
+
−
                            <li>Struhl, K.J.C. (1999). Fundamentally different logic of gene regulation in eukaryotes and prokaryotes.  98, 1-4.</li>
+
−
                            <li>Szymczak, A.L., Workman, C.J., Wang, Y., Vignali, K.M., Dilioglou, S., Vanin, E.F., and Vignali, D.A.J.N.b. (2004). Correction of multi-gene deficiency in vivo using a single'self-cleaving'2A peptide–based retroviral vector.  22, 589.</li>
+
−
                        </ol>
+
−
                    </div>
+
−
                </main>
+
−
            </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">
 
−
                    <h4 style="margin:0;padding:10px 0;">Project Summary</h4>
 
−
                    <p class="flow-text" 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 -->
+
$(window).scroll(function(){
−
            <div class="floatingBtn">
+
−
                <a href="#!" id="abstractBtn" class="btn">
+
var currentScroll=$(this).scrollTop();
−
                    <i class="fa fa-sticky-note" style="font-size:30px;line-height:50px"></i>
+
var firstHeight=$("#pageCover").height();
−
                </a>
+
var footerFromTop=$("#FudanFooter").offset().top;
−
                <a href="#FudanWrapper" class="btn">
+
var $currentSection=null;
−
                    <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i>
+
$(".leftNavA").each(function(){
−
                </a>
+
$('.leftNavA').removeClass('menu-active');
−
            </div>
+
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');
 +
}
 +
});
 +
});
  
−
            <!-- Footer with sponsors and contact methods -->
+
</script>
−
            <footer id="FudanFooter" class="page-footer grey">
+
−
                <div class="container">
+
−
                    <div class="row">
+
−
                        <div id="sponsor" class="col m3 s12 row">
+
−
                            <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="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">
+
−
                            </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png">
+
−
                        </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点，排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png">
+
−
                        </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png">
+
−
                        </a>
+
−
                            <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
+
−
                        </div>
+
−
                        <div id="usefulLinks" class="col m9 s12 row">
+
−
                            <div class="col s12 l6 row">
+
−
                                <div class="col s12 m4">
+
−
                                  <span><a href="/Team:Fudan-TSI/Description">Project</a></span>
+
−
                                    <ul>
+
−
                                        <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/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 class="col s12 m4 active">
+
−
                                    <span><a href="/Team:Fudan-TSI/Results">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 class="col s12 m4">
+
−
                                    <span><a href="/Team:Fudan-TSI/Model">Model</a></span>
+
−
                                    <ul>
+
−
                                        <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
−
                                    </ul>
+
−
                                </div>
+
−
                            </div>
+
−
                            <div class="col s12 l6 row">
+
−
                                <div class="col s12 m4">
+
−
                                  <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span>
+
−
                                    <ul>
+
−
                                        <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
+
−
                                    </ul>
+
−
                                </div>
+
−
                                <div class="col s12 m4">
+
−
                                  <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span>
+
−
                                    <ul>
+
−
                                        <li><a href="/Team:Fudan-TSI/Public_Engagement">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 class="col s12 m4">
+
−
                                  <span><a href="/Team:Fudan-TSI/Team">Team</a></span>
+
−
                                    <ul>
+
−
                                        <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
+
−
                                        <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
+
−
                                        <li><a href="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>
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
−
</div>
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 +
 +
  
  
−
<!-- Javascript files -->
+
−
<!-- Materialize 1.0.0-rc.2 -->
+
−
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script>
+
 +
 +
 +
 +
  
−
<!-- Javascript -->
+
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->
−
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script>
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
</body>
 
 
</html>
 
</html>

Revision as of 14:11, 21 October 2019

We focused our measurement on characterizing the fluorescence recovery of EGFP from its nonsense mutation in the following 4 ways: 1) Green fluorescence could be seen on the plate under UV light through naked eyes and recorded by a cellphone camera. Liquid culture could be placed in a culture dish and fluorescence is easily detectable under fluorescent microscopy.

2) We designed PCR primers to only amplify the recovered EGFP sequence but not the mutated version. The amplified band could be easily visualized after electrophoresis.

3) Fluorescence level was quantified through microplate reader according to fluorescein solutions and silicon beads, both standard samples are from the distributed measurement kit.

4) We ran PAGE gel of IPTG induced bacterial lysates. The mutated version produced a truncated protein at 17.8 kD, while the recovered EGFP is 26.9 kD.

We used multiple methods to ensure that EGFP is truly recovered from its nonsense mutation.
Naked eye detection
Single colony of Escherichia coli (BL21) transformed with plasmid containing EGFP is picked and cultured in liquid medium (2*YT). After overnight 37 ℃ culture, we transferred the liquid into an empty petri dish, and observed its fluorescence under a fluorescence microscope. Green fluorescence can be detected at the place of the bacteria solution while the rest of the plate as we expected. (Fig. 1).
PCR verification
We designed a set of primers which cannot amplify the nonsense mutant but is able to amplify the recovered EGFP. After PCR reaction, electrophoresis is performed and the recovered EGFP band is visibly bright while the mutant band does not appear (Fig. 2).
Figure 3. Crystal structure of Cre recombinase bound to a loxP holliday junction (PDB:3MGV).
Fluorescence quantification through measurement kit
After being sure that the fluorescence it recovered, we quantified its intensity with a microplate reader and the standard samples from distributed measurement kit. We followed the calibration protocol from measurement community.
Cell quantity
Figure 6.
For OD600 measurement, we use the silica beads in 2019 iGEM measurement kit as a standard substance.

As a preparation, we have measured a particle standard curve of the silica beads from maximum concentration to 0 (pure ddH2O) and used iGEM official data processing excel to generate the particle standard curve. Then, we determined the best-fitted linear region with maximum correlation coefficient R2 (Fig. 3). Before each time we measure our samples, we will first measure the OD600 of the silica beads samples whose concentration are at both ends of the best-fitted linear region, which in our case, is from 300,000,000/100μl to 18,750,000/100μl for calibration of the particle standard curve. After measuring the bacteria liquid culture samples, we will change the OD600 to the number of particles according to the calibrated standard curve.
Fluorescence
For fluorescence quantification, we use the fluorescein salt provided in 2019 iGEM measurement kit as a standard substance.

As a preparation, we have measured a fluorescence standard curve of the fluorescein salt from maximum concentration to 0 (pure PBS) and used iGEM official data processing excel to generate the fluorescence standard curve. Then, we determined the best-fitted linear region with maximum correlation coefficient R2 (Fig. 4). Before each time we measure our samples, we will first measure the fluorescence intensity of the fluorescein salt samples whose concentration are at both ends of the best-fitted linear region, which in our case, is from 10μM to 0.0390625μM for calibration of the fluorescence standard curve. After measuring the bacteria liquid culture samples, we have changed the fluorescence intensity to the concentration of fluorescein salt according to the calibrated standard curve.
Normalization
Finally, we would divide the fluorescein salt concentration by the number of silica beads for our final quantified fluorescence intensity which is c[fluorescein salt]/n[silica beads] and has a unit of μM/(pcs per 100 μl).
SDS-PAGE
The EGFP nonsense mutant can only express a truncated peptide of 17.8 kD, while the full-length EGFP protein is 26.9 kD, the difference between their molecular weight could be visualized through SDS-PAGE. (Fig. 5)