Difference between revisions of "Team:Fudan-TSI/Public Engagement"

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-18 -->
+
−
<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 Public_Engagement</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 orangeBg">
+
<!--- 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%;
 +
}
 +
 
 +
 
 +
</style>
 +
 +
<style>
 +
 +
@media only screen and (max-width:1200px){
 +
#mobileBar{
 +
margin-left:4%;
 +
}
 +
.navLi{
 +
font-size:18px;
 +
margin-top:3.5%;
 +
}
 +
}
 +
 +
 +
@media only screen and (max-width:1100px){
 +
 +
#navUl{
 +
display:block;
 +
float:right;
 +
margin-top:0;
 +
top:80px;
 +
right:0;
 +
background-color:rgba(0,0,0,0);
 +
padding:0;
 +
}
 +
 +
#mobileNav{
 +
display:block;
 +
}
 +
 +
#navImg{
 +
display:none;
 +
}
 +
 +
 +
#navBar{
 +
margin:0 1% 0 0;
 +
padding-right:2%;
 +
padding-left:1%;
 +
position:relative;
 +
display:none;
 +
}
 +
 +
#mobileNav img{
 +
display:inline-block;
 +
margin:5px 0;
 +
padding:0;
 +
}
 +
#mobileControl{
 +
margin-top:8px;
 +
}
 +
 
 +
.logo{
 +
height:45px;
 +
margin-top:7px;
 +
}
 +
.navLi{
 +
display:block;
 +
position:relative;
 +
float:right;
 +
clear:both;
 +
white-space:nowrap;
 +
text-align:right;
 +
margin:0;
 +
height:60px;
 +
width:100%;
 +
background-color:#00324a;
 +
}
 +
.navA{
 +
display:block;
 +
text-align:right;
 +
position:relative;
 +
float:right;
 +
padding:20px 20px !important;
 +
}
 +
.n2{
 +
display:none;
 +
width:0;
 +
position:relative;
 +
float:left;
 +
text-align:right;
 +
}
 +
.ul2{
 +
background:none;
 +
padding-top:0;
 +
background-color:#00557b;
 +
text-align:right;
 +
display:block;
 +
position:relative;
 +
float:right;
 +
right:100%;
 +
transform:translateX(0%);
 +
top:0;
 +
transform:translateY(1%);
 +
border-radius:0 0 0 10px;
 +
}
 +
.open{
 +
display:block;
 +
}
 +
 +
.title2{
 +
font-size:1.8rem;
 +
line-height:140%;
 +
}
 +
.para1{
 +
font-size:1.3rem;
 +
}
 +
.pic2{
 +
width:120%;
 +
}
 +
 +
.highlightIcon{
 +
margin:20% auto 10% auto;
 +
}
 +
.highlightTitle{
 +
margin-bottom:15%;
 +
}
 +
 
 +
 +
}
 +
 +
 +
@media only screen and (max-width:992px){
 +
 +
#navUl{
 +
display:block;
 +
float:right;
 +
margin:0;
 +
top:80px;
 +
right:0;
 +
}
 +
 +
#mobileNav{
 +
display:block;
 +
}
 +
 +
#navImg{
 +
display:none;
 +
}
 +
 +
#navTeamName{
 +
display:none;
 +
}
 +
 +
#navBar{
 +
margin:0 1% 0 0 ;
 +
margin-right:2%;
 +
padding-right:1%;
 +
padding-left:1%;
 +
position:relative;
 +
display:none;
 +
}
 +
#mobileControl{
 +
margin-top:10px;
 +
}
 +
#mobileNav img{
 +
display:inline-block;
 +
margin:5px 0;
 +
padding:0;
 +
}
 +
.logo{
 +
height:40px;
 +
}
 +
.navLi{
 +
display:block;
 +
position:relative;
 +
float:right;
 +
clear:both;
 +
white-space:nowrap;
 +
text-align:right;
 +
height:60px;
 +
width:100%;
 +
}
 +
.navA{
 +
display:block;
 +
text-align:right;
 +
position:relative;
 +
float:right;
 +
font-size:15px;
 +
}
 +
.n2{
 +
display:none;
 +
width:0;
 +
position:relative;
 +
float:left;
 +
}
 +
.ul2{
 +
font-size:13px;
 +
}
 +
.open{
 +
display:block;
 +
}
 +
 +
 
 +
 +
#animation_container{
 +
display:none;
 +
}
 +
#teamLogo{
 +
display:block;
 +
}
 +
 
 +
 +
.title2{
 +
font-size:1.5rem;
 +
}
 +
.para1{
 +
font-size:1.2rem;
 +
}
 +
.pic2{
 +
width:100%;
 +
}
 +
 
 +
 +
}
 +
 +
 +
@media only screen and (max-width:768px){
 +
.col-md-4{
 +
clear:both;
 +
}
 +
.col-md-8{
 +
clear:both;
 +
}
 +
.pic2{
 +
margin-bottom:10%;
 +
width:80%;
 +
}
 +
.title2{
 +
font-size:1.2rem;
 +
}
 +
.para1{
 +
font-size:1rem;
 +
}
 +
.pic2{
 +
width:80%;
 +
}
 +
#sponser img {
 +
width:60%;
 +
}
 +
 +
#containerWithLeftNav{
 +
margin-left:auto;
 +
}
 +
 +
}
 +
 +
</style>
 +
 
 +
 
 +
 +
 +
 
 +
 
 +
<style>
 +
#footContainer{
 +
width:90%;
 +
}
 +
#FudanFooter{
 +
margin:auto 0;
 +
width:100%;
 +
padding:3% 0;
 +
}
 +
#FudanFooter #usefulLinks {
 +
color: #cacaca;
 +
padding-left: 1rem;
 +
}
 +
 
 +
#FudanFooter #usefulLinks ul {
 +
font-size: 13px;
 +
line-height: 14px;
 +
border-top: solid 2px;
 +
color: inherit;
 +
text-decoration: none;
 +
padding-top: 5px;
 +
margin:0;
 +
}
 +
 
 +
#FudanFooter #usefulLinks div {
 +
color: #cacaca;
 +
}
 +
 
 +
#FudanFooter #usefulLinks div:hover {
 +
color: white;
 +
}
 +
 
 +
#FudanFooter #usefulLinks a {
 +
color: inherit;
 +
}
 +
 
 +
#FudanFooter #usefulLinks a:hover {
 +
text-decoration: underline;
 +
}
 +
 
 +
#FudanFooter #usefulLinks div.active,
 +
#FudanFooter #usefulLinks div.active a {
 +
color: white;
 +
}
 +
 
 +
#FudanFooter #usefulLinks div.active ul {
 +
border-top: solid white 2px;
 +
}
 +
 
 +
#FudanFooter #usefulLinks li {
 +
padding: 3px 0 6px 3px;
 +
list-style:none;
 +
}
 +
 
 +
#usefulLinks span {
 +
font-size: 20px;
 +
}
 +
 +
 
 +
#FudanFooter div.footer-copyright {
 +
font-size: 13px;
 +
line-height: 15px;
 +
}
 +
.footerUl{
 +
margin:2% 4%;
 +
}
 +
</style>
 +
 
 +
<script>
 +
 +
$(document).ready(function(){
 +
 +
 +
var winWidth=$(window).width();
 +
 +
if (winWidth>1100){
 +
$(".navA").mouseenter(function(){
 +
$(this).parent().find(".ul2").stop().fadeIn(400);
 +
});
 +
$(".navLi").mouseleave(function(){
 +
$(this).find(".ul2").stop().fadeOut(400);
 +
});
 +
 +
 +
}
 +
else{
 +
$(".navA:not(.noSubmenu)").removeAttr("href");
 +
$("#mobileNav").click(function(){
 +
$("#navBar").toggle();
 +
});
 +
$(document).click(function(event){
 +
var m = $("#mobileNav,#navBar");
 +
if (!m.is(event.target)){
 +
if (m.has(event.target).length===0){
 +
$("#navBar").hide();
 +
$(".open").parent().find(".navA").css("color","white");
 +
$(".open").removeClass("open");
 +
}
 +
 
 +
}
 +
});
 +
$(".navLi").click(function(){
 +
if ($(this).find(".n2").hasClass("open")){
 +
$(".open").parent().find(".navA").css("color","white");
 +
$(this).find(".n2").removeClass("open");
 +
}
 +
else{
 +
$(".open").parent().find(".navA").css("color","white");
 +
$(".open").removeClass("open");
 +
$(this).find(".n2").addClass("open");
 +
$(this).find(".navA").css("color","#7dded4");
 +
}
 +
});
 +
}
 +
 +
 +
 +
 +
 +
 +
});
 +
 +
 +
</script>
 +
 +
 +
 +
<div id="global_wrapper">
 +
<div id="mobileNav">
 +
 +
<div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
 +
<div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
 +
 +
</div>
 +
 +
<ul id="navUl">
 +
 +
<li id="navImg">
 +
<img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
 +
 +
</li>
 +
 +
 +
<ul id="navBar">
 +
 +
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
 +
 +
<li class="navLi">
 +
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
 +
<div class="n2">
 +
<ul class="ul2">
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
 +
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/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/2/2d/T--Fudan-TSI--coverCollaboration.gif"></div>
 +
</div>
 +
<style>
 +
#pageCover{
 +
width:100%;
 +
margin:0;
 +
padding-top:80px;
 +
}
 +
#demoCover{
 +
width:100vw;
 +
height:80vh;
 +
position:absolute;
 +
background-color:rgba(8,39,58,0.5);
 +
top:70px;
 +
left:0;
 +
text-align:center;
 +
}
 +
#coverPic{
 +
width:900px;
 +
margin:20vh auto;
 +
}
 +
#demo{
 +
width:100vw;
 +
height:70vh;
 +
position:relative;
 +
}
 +
#demo svg {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: fixed;
 +
}
 +
#demo svg g {
 +
  mix-blend-mode: lighten;
 +
}
 +
#demo svg polygon {
 +
  stroke: none;
 +
  fill: white;
 +
}
 +
 +
@media only screen and (max-width:1100px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
height:30vh;
 +
}
 +
#demo{
 +
height:30vh;
 +
}
 +
#coverPic{
 +
width:800px;
 +
margin:7vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:992px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:700px;
 +
margin:6vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:768px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:500px;
 +
margin:8vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:500px){
 +
#coverPic{
 +
width:250px;
 +
margin:8vh auto;
 +
}
 +
}
 +
</style>
 +
<script>
 +
//////////////////////////////
 +
// Demo Functions
 +
//////////////////////////////
 +
function bkgFunction(showStats) {
 +
  // stats
 +
  if (showStats) {
 +
var stats = new Stats();
 +
stats.domElement.style.position = 'absolute';
 +
stats.domElement.style.left = '0';
 +
stats.domElement.style.top = '0';
 +
document.body.appendChild(stats.domElement);
 +
requestAnimationFrame(function updateStats(){
 +
  stats.update();
 +
  requestAnimationFrame(updateStats);
 +
});
 +
  }
 +
  // init
 +
  var svg = document.getElementById('demo');
 +
  tesselation.setup(svg);
 +
  gradients.setup();
 +
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
  function playNextTransition() {
 +
tesselation.next(transitionDuration);
 +
gradients.next(transitionDuration);
 +
  };
 +
  function tick(time) {
 +
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
  lastTransitionAt = time;
 +
  playNextTransition();
 +
}
 +
window.requestAnimationFrame(tick);
 +
  }
 +
  window.requestAnimationFrame(tick);
 +
}
 +
//////////////////////////////
 +
// Delaunay Triangulation
 +
//////////////////////////////
 +
var calcDelaunayTriangulation = (function() {
 +
  var EPSILON = 1.0 / 1048576.0;
 +
  function getSuperT(vertices) {
 +
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
for(i = vertices.length; i--; ) {
 +
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
}
 +
xDiff = xMax - xMin;
 +
yDiff = yMax - yMin;
 +
maxDiff = Math.max(xDiff, yDiff);
 +
xCenter = xMin + xDiff * 0.5;
 +
yCenter = yMin + yDiff * 0.5;
 +
return [
 +
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
  [xCenter, yCenter + 20 * maxDiff],
 +
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
];
 +
  }
 +
  function circumcircle(vertices, i, j, k) {
 +
var xI = vertices[i][0], yI = vertices[i][1],
 +
xJ = vertices[j][0], yJ = vertices[j][1],
 +
xK = vertices[k][0], yK = vertices[k][1],
 +
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
// bail condition
 +
if(yDiffIJ < EPSILON){
 +
if (yDiffJK < EPSILON){
 +
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
}
 +
}
 +
 +
 +
// calc circumcircle center x/y, radius
 +
m1  = -((xJ - xI) / (yJ - yI));
 +
m2  = -((xK - xJ) / (yK - yJ));
 +
xMidIJ = (xI + xJ) / 2.0;
 +
xMidJK = (xJ + xK) / 2.0;
 +
yMidIJ = (yI + yJ) / 2.0;
 +
yMidJK = (yJ + yK) / 2.0;
 +
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
 +
  (yDiffJK < EPSILON) ? xMidJK :
 +
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
 +
yCenter  = (yDiffIJ > yDiffJK) ?
 +
  m1 * (xCenter - xMidIJ) + yMidIJ :
 +
  m2 * (xCenter - xMidJK) + yMidJK;
 +
xDiff = xJ - xCenter;
 +
yDiff = yJ - yCenter;
 +
// return
 +
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
 +
  }
 +
  function dedupeEdges(edges) {
 +
var i, j, a, b, m, n;
 +
for(j = edges.length; j; ) {
 +
  b = edges[--j]; a = edges[--j];
 +
  for(i = j; i; ) {
 +
n = edges[--i]; m = edges[--i];
 +
if(a === m){
 +
  if (b===n){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
if(a === n){
 +
  if (b===m){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
  }
 +
}
 +
  }
 +
  return function(vertices) {
 +
var n = vertices.length,
 +
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
 +
// bail if too few / too many verts
 +
if(n < 3 || n > 2000)
 +
  return [];
 +
// copy verts and sort indices by x-position
 +
vertices = vertices.slice(0);
 +
indices = new Array(n);
 +
for(i = n; i--; )
 +
  indices[i] = i;
 +
indices.sort(function(i, j) {
 +
  return vertices[j][0] - vertices[i][0];
 +
});
 +
// supertriangle
 +
st = getSuperT(vertices);
 +
vertices.push(st[0], st[1], st[2]);
 +
// init candidates/locked tris list
 +
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
 +
locked = [];
 +
edges = [];
 +
// scan left to right
 +
for(i = indices.length; i--; edges.length = 0) {
 +
  c = indices[i];
 +
  // check candidates tris against point
 +
  for(j = candidates.length; j--; ) {
 +
// lock tri if point to right of circumcirc
 +
dx = vertices[c][0] - candidates[j].x;
 +
if (dx > 0.0){
 +
if(dx * dx > candidates[j].r){
 +
locked.push(candidates[j]);
 +
  candidates.splice(j, 1);
 +
  continue;
 +
}
 +
}
 +
 
 +
 
 +
// point outside circumcirc = leave candidates
 +
dy = vertices[c][1] - candidates[j].y;
 +
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
 +
  continue;
 +
// point inside circumcirc = break apart, save edges
 +
edges.push(
 +
  candidates[j].i, candidates[j].j,
 +
  candidates[j].j, candidates[j].k,
 +
  candidates[j].k, candidates[j].i
 +
);
 +
candidates.splice(j, 1);
 +
  }
 +
  // new candidates from broken edges
 +
  dedupeEdges(edges);
 +
  for(j = edges.length; j; ) {
 +
b = edges[--j];
 +
a = edges[--j];
 +
candidates.push(circumcircle(vertices, a, b, c));
 +
  }
 +
}
 +
// close candidates tris, remove tris touching supertri verts
 +
for(i = candidates.length; i--; )
 +
  locked.push(candidates[i]);
 +
candidates.length = 0;
 +
for(i = locked.length; i--; )
 +
  if(locked[i].i < n){
 +
  if(locked[i].j < n){
 +
  if(locked[i].k < n){
 +
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
  }
 +
  }
 +
  }
 +
 +
 +
// done
 +
return candidates;
 +
  };
 +
})();
 +
var tesselation = (function() {
 +
  var svg, svgW, svgH, prevGroup;
 +
  function createRandomTesselation() {
 +
var wW = window.innerWidth;
 +
var wH = window.innerHeight;
 +
var gridSpacing = 250, scatterAmount = 0.75;
 +
var gridSize, i, x, y;
 +
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
 +
  gridSize = gridSpacing * svgW / wW;
 +
} else { // window taller than svg = use height for gridSize
 +
  gridSize = gridSpacing * svgH / wH;
 +
}
 +
var vertices = [];
 +
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
 +
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
 +
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
 +
vertices.push(
 +
  [
 +
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
 +
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
 +
  ]
 +
);
 +
  }
 +
}
 +
var triangles = calcDelaunayTriangulation(vertices);
 +
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
 +
var polygon;
 +
for(i = triangles.length; i; ) {
 +
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 +
  polygon.setAttribute('points',
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
 +
  );
 +
  group.appendChild(polygon);
 +
}
 +
return group;
 +
  }
 +
  return {
 +
setup: function(svgElement) {
 +
  svg = svgElement;
 +
  var vb = svg.getAttribute('viewBox').split(/\D/g);
 +
  svgW = vb[2];
 +
  svgH = vb[3];
 +
},
 +
next: function(t) {
 +
  var toRemove, i, n;
 +
  t /= 1000;
 +
if(prevGroup){
 +
if(prevGroup.children){
 +
if(prevGroup.children.length){
 +
toRemove = prevGroup;
 +
n = toRemove.children.length;
 +
for (i = n; i--; ) {
 +
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
 +
}
 +
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
 +
}
 +
}
 +
}
 +
 +
  var g = createRandomTesselation();
 +
  n = g.children.length;
 +
  for (i = n; i--; ) {
 +
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
 +
  }
 +
  svg.appendChild(g);
 +
  prevGroup = g;
 +
}
 +
  }
 +
})();
 +
//////////////////////////////
 +
// Gradients
 +
//////////////////////////////
 +
var gradients = (function() {
 +
  var grad1, grad2, showingGrad1;
 +
  // using colors from IBM Design Colors this time
 +
  var colors = [ // 14 colors - use 3-5 span
 +
'#3c6df0', // ultramarine50
 +
'#12a3b4', // aqua40
 +
'#00a78f', // teal40
 +
'#00aa5e', // green40
 +
'#81b532', // lime30
 +
'#e3bc13', // yellow20
 +
'#ffb000', // gold20
 +
'#fe8500', // orange30
 +
'#fe6100', // peach40
 +
'#e62325', // red50
 +
'#dc267f', // magenta50
 +
'#c22dd5', // purple50
 +
'#9753e1', // violet50
 +
'#5a3ec8'  // indigo60
 +
  ];
 +
  function assignRandomColors(gradObj) {
 +
var rA = Math.floor(colors.length * Math.random());
 +
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
 +
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
 +
gradObj.stopA.setAttribute('stop-color', colors[rA]);
 +
gradObj.stopB.setAttribute('stop-color', colors[rB]);
 +
  }
 +
  return {
 +
setup: function() {
 +
  showingGrad1 = false;
 +
  grad1 = {
 +
stopA: document.getElementById('stop1a'),
 +
stopB: document.getElementById('stop1b'),
 +
rect:  document.getElementById('rect1')
 +
  };
 +
  grad2 = {
 +
stopA: document.getElementById('stop2a'),
 +
stopB: document.getElementById('stop2b'),
 +
rect:  document.getElementById('rect2')
 +
  };
 +
  grad1.rect.style.opacity = 0;
 +
  grad2.rect.style.opacity = 0;
 +
},
 +
next: function(t) {
 +
  t /= 1000;
 +
  var show, hide;
 +
  if (showingGrad1) {
 +
hide = grad1;
 +
show = grad2;
 +
  } else {
 +
hide = grad2;
 +
show = grad1;
 +
  }
 +
  showingGrad1 = !showingGrad1;
 +
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
 +
  assignRandomColors(show);
 +
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
 +
}
 +
  };
 +
})();
 +
//////////////////////////////
 +
// Start
 +
//////////////////////////////
 +
bkgFunction();
 +
</script>
 +
 +
 
 +
 
 +
 
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Left Navigator ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 
 +
<ul class="leftNav" style="margin:0;padding:0;">
 +
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Fudan</a></li>
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Shanghai_YGQ</a></li>
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">Nanjing-China</a></li>
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">ECUST_China</a></li>
 +
<li class="leftNavLi"><a class="leftNavA" href="#mainTitle5">SMMU-China</a></li>
 +
</ul>
 +
 +
<style>
 +
.leftNav{
 +
position: absolute;
 +
top:20vw;
 +
left:4%;
 +
list-style: none;
 +
z-index: 3;
 +
text-align:left !important;
 +
width:15vw;
 +
}
 +
.leftNav .leftNavA2{
 +
position: relative;
 +
}
 +
.leftNav .leftNavA2:before {
 +
content: "";
 +
display: inline-block;
 +
width: 5px;
 +
height: 5px;
 +
background-color: rgba(55,55,62,0.7);
 +
border-radius: 50%;
 +
position: absolute;
 +
left: 0.3vw;
 +
top:50%;
 +
margin: 0;
 +
padding: 0;
 +
transform: translateY(-50%);
 +
}
 +
.leftNavUl2{
 +
list-style: none;
 +
}
 +
.leftNavA{
 +
display: block;
 +
font-size: 1.1vw;
 +
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
padding: 0.2vw 0.8vw;
 +
color:#4CA198;
 +
text-decoration: none;
 +
}
 +
.leftNavLi2{
 +
width: 13vw;
 +
margin:0.3vw  0;
 +
line-height: 17px;
 +
}
 +
.leftNavA:visited{
 +
text-decoration: none;
 +
color:#4CA198;
 +
}
 +
.leftNavA:focus{
 +
text-decoration: none;
 +
color:#4CA198;
 +
}
 +
.leftNavA:hover,.leftNavA:active{
 +
text-decoration: none;
 +
color: #B0EBE4;
 +
}
 +
 
 +
.leftNavA2{
 +
display: block;
 +
font-size: 1vw;
 +
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 +
padding: 0.1vw 1.5vw;
 +
color:rgba(168,168,168,1);
 +
text-decoration: none;
 +
}
 +
.leftNavA2:visited{
 +
text-decoration: none;
 +
color:rgba(168,168,168,1);
 +
}
 +
.leftNavA2:focus{
 +
text-decoration: none;
 +
color:rgba(168,168,168,1);
 +
}
 +
.leftNavA2:hover,.leftNavA2:active{
 +
text-decoration: none;
 +
color: white;
 +
}
 +
.menu-active,.menu-active:focus{
 +
text-decoration: none;
 +
color: white;
 +
}
 +
.menu-active2,.menu-active2:focus{
 +
text-decoration:none;
 +
color:#B0EBE4;
 +
}
 +
 +
 +
@media only screen and (max-width:768px){
 +
.leftNav{
 +
display:none;
 +
}
 +
}
 +
</style>
 +
 
 +
 
 +
 +
<div id="pageContent">
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Content ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div class="container" id="containerWithLeftNav">
 +
<div class="row">
 +
 +
 +
<div class="row title1" id="mainTitle1">
 +
<div class="col">Fudan</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
We kept close collaboration with team Fudan since we two teams were set up in January 2019. We shared our ideas and suggestions with each other. Besides, they gave us a sample of their plasmid containing the Tetracycline resistance gene to us. In return, we provided our experiment protocols and equipment to them. The continuous communication between members of the two teams contributes to promoting respective projects.
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle2">
 +
<div class="col">Shanghai_YGQ</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
This year, we also welcomed a high school team to our campus, Shanghai_YGQ. They set up their team based on the lab space at Fudan University, so we got to be in close contact. We both worked on the same floor in the Life Science Building. Due to the convenience, we exchanged ideas with each other frequently. We offered them some advice on experiments, lab safety and other details regarding competition. Correspondingly they showed us what nowadays high school students thought of synthetic biology, which helped with our public engagement human practice.
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle3">
 +
<div class="col">Nanjing-China</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
We communicated with team Nanjing-China about our project for the first time in May 2019 at the BUDS, Biology Undergraduate Development Symposium, through which we exchanged our experience about how to perform experiments in practice. Then during the 6th Conference of China iGEMers Community (CCiC), we made collaboration on modeling. We recommended them to assume that the phosphorus absorption rate was inversely proportional to the amount of phosphorus absorbed in their phosphorus absorption rate curve model. In return they suggested us to combine the three process of transcription, reverse transcription and recombination in the modeling. We both made great progress through the interchange between each other.
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle4">
 +
<div class="col">ECUST_China</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
We received valuable suggestions on the activity forms of Education and Public Engagement HP from them. In exchange, we offered them a protocol for reference to verify that their parts could work.
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="row title1" id="mainTitle5">
 +
<div class="col">SMMU-China</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col">
 +
We gave them plasmid samples containing various transcription factors and promotors constructed by the 2017 iGEM team Fudan.
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
</div>
 +
 +
 
 +
 
 +
</div>
 +
 +
 
 +
 +
</div>
 +
 +
 +
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Foot ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<footer id="FudanFooter" class="page-footer grey">
 +
 +
<div class="container" id="footContainer">
 +
<div class="row">
 +
<div class="col-md-4" id="sponser" style="padding-top:3%;">
 +
<div class="row">
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-sm-6" style="padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col">
 +
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
 +
</div>
 +
<div class="col">
 +
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-8" id="usefulLinks">
 +
<div class="row">
 +
<div class="col-lg-6" style="padding:0;">
 +
<div class="row">
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
 +
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
 +
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
 +
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
 +
<li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
 +
<li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
 +
<li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
 +
<li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
<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 active">
 +
  <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
 +
<li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
 +
<li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
 +
<li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="col-sm-4">
 +
<div class="footerUl align-items-center">
 +
  <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
 +
<ul>
 +
<li><a href="/Team:Fudan-TSI/Team">Members</a></li>
 +
<li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
 +
<li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
 +
<li><a href="/Team:Fudan-TSI">&#169; 2019</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="footer-copyright">
 +
<div class="container" style="width:90%;">
 +
<div class="contactUS row">
 +
  <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
 +
  </div>
 +
<div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
</footer>
 +
 +
 +
 
 +
</div>
 +
 
 +
 +
 +
<script>
 +
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var pagePosition=$("#pageContent").offset().top+90;
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
$(window).resize(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var topDistance=$(window).scrollTop()+0.25*winHeight;
 +
var navHeight=$(".leftNav").height();
 +
var footerHeight=$("#FudanFooter").height();
 +
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
 +
var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
if (leftNavFromTop<0.25*winHeight){
 +
if(topDistance<maxTopDistance){
 +
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
}
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
}
 +
});
 +
 
 +
$(window).scroll(function(){
 +
var winHeight=$(window).height();
 +
var winWidth=$(window).width();
 +
var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
var topDistance=$(window).scrollTop()+0.25*winHeight;
 +
if (leftNavFromTop<0.25*winHeight){
 +
if(topDistance<maxTopDistance){
 +
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
};
 +
}
 +
else{
 +
$(".leftNav").css({"position":"absolute","top":pagePosition});
 +
}
 +
});
 +
 +
$(".leftNav a").click(function () {
 +
$('html, body').animate({
 +
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
 +
}, 500);
 +
return false;
 +
});
  
−
            <!-- 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 orangeBorder">
 
−
                        <li>
 
−
                            <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right">
 
−
                                <i class="fa fa-navicon" style="font-size:24px"></i>
 
−
                            </a>
 
−
                        </li>
 
−
                    </ul>
 
−
                </div>
 
−
            </nav>
 
−
            <!-- Dropdown and List elements in navigation bar -->
 
−
            <!-- Slide-out navigator contents 2019-9-15 -->
 
−
            <ul id="slide-out" class="sidenav">
 
−
                <li style="padding: 0"><div class="sidenavBanner">
 
−
                    <div class="background">
 
−
                    </div>
 
−
                    <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Education &amp; public engagement</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="">
+
$(window).scroll(function(){
 +
 +
var currentScroll=$(this).scrollTop();
 +
var firstHeight=$("#pageCover").height();
 +
var footerFromTop=$("#FudanFooter").offset().top;
 +
var $currentSection=null;
 +
$(".leftNavA").each(function(){
 +
$('.leftNavA').removeClass('menu-active');
 +
var hePoint=$($(this).attr("href"));
 +
var divPosition=hePoint.offset().top-$("#navUl").height()-50;
 +
if (divPosition-1<currentScroll){
 +
$currentSection=$(this);
 +
}
 +
if (currentScroll>firstHeight){
 +
$(".leftNavA").removeClass("menu-active");
 +
$currentSection.addClass("menu-active");
 +
}
 +
});
 +
 +
var $currentSection2;
 +
$('.leftNavA2').each(function(){
 +
$('.leftNavA2').removeClass('menu-active2');
 +
var hePoint2=$($(this).attr("href"));
 +
var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
 +
if (divPosition2-1<currentScroll){
 +
$currentSection2=$(this);
 +
}
 +
if (currentScroll>firstHeight){
 +
$('.leftNavA2').removeClass('menu-active2');
 +
$currentSection2.addClass('menu-active2');
 +
}
 +
});
 +
});
  
 +
</script>
 +
  
−
            <div id="contentBanner" class="figureBanner orangeBg">
+
<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 class="row">
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <h1>Public Engagement</h1>
+
−
                    </div>
+
−
                    <div class="col s12 hide-on-med-and-up">
+
−
                        <span>We want to unlock the creativity and intelligence in as many people as possible.</span>
+
−
                    </div>
+
−
                </div>
+
−
                <div id="figureBannerTitle" class="hide-on-small-only">
+
−
                    <h1>Public Engagement</h1>
+
−
                    <p class="flow-text"><span>We want to unlock the creativity and intelligence in as many people as possible.</span></p>
+
−
                </div>
+
−
                <div class="hide-on-small-only">
+
−
                    <img src="https://static.igem.org/mediawiki/2018/e/ed/T--Fudan--public-section3-1.png">
+
−
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
+
−
                        <defs>
+
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraleft">
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="0%"/>
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="100%"/>
+
−
                            </linearGradient>
+
−
                        </defs>
+
−
                        <g>
+
−
                            <rect id="svg_1" fill="url(#blackgraleft)" height="100%" width="100%"/>
+
−
                        </g>
+
−
                    </svg>
+
−
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; right:0;top:0; width: 4%;height: 100%;">
+
−
                        <defs>
+
−
                            <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraright">
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="0%"/>
+
−
                                <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="100%"/>
+
−
                            </linearGradient>
+
−
                        </defs>
+
−
                        <g>
+
−
                            <rect id="svg_2" fill="url(#blackgraright)" height="100%" width="100%"/>
+
−
                        </g>
+
−
                    </svg>
+
−
                </div>
+
−
            </div>
+
  
−
            <!-- main content of the page -->
 
−
            <div class="container">
 
−
                <!-- side navigator of page content -->
 
−
                <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0">
 
−
                    <li><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></li>
 
−
                    <li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practices</a></li>
 
−
                    <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
 
−
                    <li>Education &amp; public engagement</li>
 
−
                    <li class="onThisPageNav"><a href="#section1">High school</a></li>
 
−
                    <li class="onThisPageNav"><a href="#section2">Journal clubs</a></li>
 
−
                    <li class="onThisPageNav"><a href="#section3">Bio-Art display</a></li>
 
−
                    <li class="onThisPageNav"><a href="#section4">Debate</a></li>
 
−
                </ul>
 
−
                <main>
 
−
                    <div id="section1" class="section container scrolSpy">
 
−
                        <h2>Farseeing educational activities for high school students</h2>
 
−
                        <p class="flow-text">
 
−
                            Our Human Practice activities include dialogues (debate and interviews), presentations, <a href="/Team:Fudan-TSI/Bio-Art" target=_blank>Bio-Art display</a> and hands-on practices, all of which centered around <b>farseeing</b>. We want to unlock the creativity and intelligence in as many people as possible.
 
−
                        </p>
 
−
                        <p class="flow-text">We chose high school students as our start because we're close in age and it would be easier and more effective for us to communicate with them. More importantly, a farseeing youth development is the most critical matter for humankind, and we want to be a part of this noble course.
 
−
                        </p>
 
−
                        <h3>Step 1. What is engineering nature like — Farseeing camp for high school students to excite their interest in synthetic biology</h3>
 
−
                        <p class="flow-text">From our previous survey on high school students, we learned that their current understanding of synthetic biology and scientific research is below our expectation. The majority of them have rarely encountered either of these. To achieve our farseeing youth development step by step, we believe the very first step is to stimulate their interest in synthetic biology.</p>
 
−
                        <p class="flow-text">
 
−
                            <img class="left-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/b/ba/T--Fudan--public-section1-2.png">
 
−
                            With this mission in hand, we participated in a Biology Summer Camp that hosted over 300 students from 30 high schools around China. In a half-day section, we shared our research experience in synthetic biology with them. These students also got tours in our school, participated presentations given by our school's Academicians in Chinese Academia of Science, and had face-to-face discussions with professors from different research backgrounds, including but not limited to synthetic biology. By participating in the camp, we have introduced synthetic biology to more high school students.
 
−
                        </p>
 
−
                        <p class="flow-text">
 
−
                            Through the experience of Fudan iGEMers from previous years' teams (<a href="https://2015.igem.org/Team:Fudan" target="_blank">2015</a>, <a href="https://2016.igem.org/Team:Fudan" target="_blank">2016</a> and <a href="https://2017.igem.org/Team:Fudan" target="_blank">2017</a> competition), we know that first-hand experience sharing is the most effective way to promote understanding.</p>
 
−
                        <p class="flow-text">
 
−
                            During the camp, we tried a captivating way to make young students interested in synthetic biology. Four of our team members, who have been doing extensive real lab research, shared their compelling experiences and thoughts about synthetic biology, in the form of a series of questions and discussions.
 
−
                        </p>
 
−
                        <p class="flow-text">Three high schools in Shanghai contacted us after the camp to invite us to their school campus to give a follow-up presentation on synthetic biology. We were delighted to be invited. It looks like we did an excellent job during the camp.</p>
 
−
                        <h3>Step 2. What is synthetic biology and iGEM — Farseeing presentations for high school students to excite their participation in synthetic biology</h3>
 
−
                        <p style="text-indent:0"><img src="https://static.igem.org/mediawiki/2018/1/18/T--Fudan--public-section1-3.png"></p>
 
−
                        <p class="flow-text">
 
−
                            <img class="right-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/9/91/T--Fudan--public-section1-4.png">
 
−
                            In addition to that one new invitation from a high school we have never communicated with before, we continued our yearly science lectures to several other high schools, with which we had long established relationships over the past years. During all those presentations, we began by sharing general stories concerning biology. We not only shared concepts and potentials of synthetic biology with them but also presented topics on the latest advances in the field, and showed how synthetic biology is changing the world at every moment. We want high school students to learn that synthetic biology is making our lives better. <a href="https://www.youtube.com/watch?v=LXJY43Y_gss&feature=youtu.be" target="_blank">One of our presentation</a> at Fudan University Affiliated High School has been uploaded to YouTube.
 
−
                        </p>
 
−
                        <p class="flow-text">
 
−
                            Furthermore, our presentations were all aimed to inspire them to form their own perspectives and views about the field. Therefore, in the presentations, we included a myriad of activities to stimulate the high school students to find their own fields of interest and new ideas on what they might be able to achieve in synthetic biology. For instance, we gave examples of the most recent advances in the field of synthetic biology such as <a href="https://en.wikipedia.org/wiki/Chimeric_antigen_receptor" target="_blank">CAR-T</a>, <a href="https://www.ncbi.nlm.nih.gov/pubmed/29862966" target=_blank>CAR-P</a>, <a href="https://2017.igem.org/Team:Fudan" target="_blank">our Swords project</a> last year and several equally interesting projects from other 2017 teams. Furthurmore, we brainstormed ideas with our attentive young audiences. We hope our advocation will motivate them to assemble a high school team and participate in the iGEM competition.</p>
 
−
                        <div class="row">
 
−
                            <div class="col s12 m6" style=""><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/8/8f/T--Fudan--public-section1-5.png"></div>
 
−
                            <div class="col s12 m6" style=""><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/7/73/T--Fudan--public-section1-6.png"></div>
 
−
                        </div>
 
−
                        <h3>Step 3. What else do you want to know? — Online Q &amp; A and a broader education</h3>
 
−
                        <p class="flow-text">
 
−
                            Through further interactions with the high school students during our presentations and post-presentation discussions, we realized that in addition to the presentation, we needed a more convenient method to promote synthetic biology to high school students, or even more people.
 
−
                        </p>
 
−
                        <p class="flow-text">
 
−
                            We formed a WeChat Group for online Q & A. Apart from that, we wrote a series of short articles (such as <a href="https://mp.weixin.qq.com/s/VqMiwS7NlbCy5Z033vZgrg" target="_blank"><i>Introduction to synthetic biology-1</i></a>/<a href="https://mp.weixin.qq.com/s/-1811uohFRm-Z6Qu4llCjA" target="_blank"><i>-2</i></a>, <a href="https://mp.weixin.qq.com/s/rFBUkpD7R92daN7W9PeuDQ" target="_blank"><i>Scientific experiment & art</i></a> and <a href="https://mp.weixin.qq.com/s/db1Ipxoa35j0slhYJDYNtg" target="_blank"><i>Communication with synthetic biologists</i></a>) to introduce synthetic biology and iGEM to more.</p>
 
−
                        <h3>Step 4. Join us at our lab — Injecting fresh blood into synthetic biology and iGEM competition for students’ further development</h3>
 
−
                        <p class="flow-text">
 
−
                            Inspired by our presentation, Qibao Dwight High School contacted us and voiced their interest in participating in the 2019 iGEM competition. However, the experimental skills and background knowledge of high school students are not sufficient for them to ideally compete internationally. Thus, delighted by their enthusiasm, we helped to set up their team and equipped them with foundational lab skills for the competition. More specifically, we invited them to our laboratory this summer and taught them skills that they may need such as basic molecule cloning and protein purification. <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/f/f1/T--Fudan--public-section1-9.png" /></p>
 
−
                        <p class="flow-text">
 
−
                            Also, aside from learning practical lab techniques, we used the time between experiments to teach them some theoretical knowledge. The results from this training were very satisfying! Along with practical lab work, the students quickly understood and readily applied what they have been taught, both theoretically and experimentally.</p>
 
−
                        <p class="flow-text"><img class="left-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/e/ea/T--Fudan--public-section1-10.png">
 
−
                            Equally important, we paid particular attention to their laboratory safety education, both before and during the experiments. During the teaching process of lab skills, we gave them detailed descriptions of the potential risk in the lab, and asked them to memorize these to ensure their safety in experiments.</p>
 
−
                        <p class="flow-text">After spending a fruitful and intense summer together, we collected the student's feedbacks on our training methods and determined what we need to improve in the future. We also discussed with them their plans and goals for participating in the 2019 iGEM competition. Below is a video related to the summer lab training for Qibao Dwight High School students.</p>
 
  
−
  <video class="responsive-video" style="margin-top:23px;" controls>
 
−
    <source src="https://static.igem.org/mediawiki/2018/4/4e/T--Fudan--video.mp4" type="video/mp4">
 
−
  </video>
 
  
−
                        <p class="flow-text"><img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/a/ae/T--Fudan--public-section1-11.png">
+
−
                            The significance of these four steps we have planned and carried out for high school students is that we have mastered an effective method that could potentially attract more high school students to participate in the field of synthetic biology. Their entry would not be merely for prizes, but to promote recognition of synthetic biology and to introduce a whole and new research mindset to these potential researchers.</p>
+
−
                        <ul>
+
−
                            Here is a summary of our education plan for high school students:
+
−
                            <li>Start with self-telling an interesting experience which is able to attract the attention and excite the interest of high school students.<br>Note: The desirable experience can let high school students get close to you while can still be intrigued by new things.
+
−
                            </li>
+
−
                            <li>
+
−
                                <p style="margin: 0; text-indent:0">
+
−
                                    <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/d/d8/T--Fudan--public-section1-12.png" /></p>
+
−
                                Introduce some exciting topics or projects through a public presentation or workshop to inspire the audience to form ideas on how to realize their interests.
+
−
                            </li>
+
−
                            <li>Use the Internet to have an active Q & A, and answer any lingering questions or discuss new thoughts.</li>
+
−
                            <li>Subsequently, equip them with useful lab skills and teach them sufficient theoretical knowledge to ensure that they are well prepared for <a href="https://2018.igem.org/Main_Page" target="_blank">the iGEM competition</a>. Desirably, let this take place where the team members work close by so that good role models can be set and lab safety can be ensured.</li>
+
−
                            <li>Before conducting experimental training, conduct laboratory safety education. This is primarily because most high school students are new to the lab and unconscious about the all potential dangers. We need to keep an eye on them.</li>
+
−
                        </ul>
+
−
                    </div>
+
−
                    <div id="section2" class="section container scrolSpy">
+
−
                        <h2>Farseeing journal clubs — Constructing efficient dialogues and mutual intelligibility with researchers from multiple backgrounds
+
−
                        </h2>
+
−
                        <p class="flow-text">Building upon the success of nurturing the high school students, we want our project to have a lasting impact on our surrounding communities, apart from focusing on trying to unlock the imagination of teenagers. Making our project products readily applicable is another emphasis of us.</p>
+
  
−
                            <p style="text-indent:0;text-align:center;"><img class="width45 right-on-med-and-up" src="https://static.igem.org/mediawiki/2018/c/c7/T--Fudan--public-section2-2.png"></p>
 
  
−
                        <p class="flow-text">
 
−
                            We have organized journal clubs with doctors at the Institute of Immunology, Changhai Hospital, etc. Over the years, we have built lasting collaborations with them. Doctors are usually too busy working by the patients' bed, and our journal clubs introduce latest research to inspire them. Through those journal clubs, we were able to discuss synthetic biology and medical issues with many people. In these discussions, we tried to promote synthetic biology to various experts from different backgrounds and introduce our project to them. Meanwhile, we also listened to their perspectives on synthetic biology and feedbacks on our project, taking them into account to improve our project.
 
−
                        </p>
 
−
                        <p class="flow-text">In the dialogues with these doctors, we learned that although many research results of synthetic biology are widely used, the clinical doctors still lack a comprehensive understanding of synthetic biology. We think it is very dangerous, and the danger is reflected in the following two aspects:<br/>
 
−
                            A lack of knowledge of the mechanism is likely to lead to an increased probability of errors in the application of technology; <br/>
 
−
                            A lack of comprehensive understanding of synthetic biology has made it impossible for them to make requests to researchers for tool improvements when they encounter difficulties in practice.
 
−
                        </p>
 
−
                        <p class="flow-text">
 
−
                            We hope to solve the disconnection between foundational synthetic biology researchers and the technology adopters in a sustainable way. We propose a new methodology of constructing dialogue: by explaining what our foundational advance project has achieved in the lab, we asked doctors to come up with not only applications but also alternative designs that are relevant to their clinical fields and hospital settings. We revisited some of the doctors we had interviewed earlier and continued the dialogues with our updated progress. </p>
 
−
                        <p class="flow-text">We propose a new methodology of constructing dialogue: to converse with these doctors and researchers about what inspirations they get and how they can apply our foundational advance iGEM project to come up with designs or applications that are relevant to their field. We re-visited some of the doctors we interviewed and had a more in-depth discussion with them.
 
−
                        </p>
 
−
                        <ul>
 
−
                            During those discussions, several things caught our special attention:
 
−
                            <li>
 
−
                                <p style="margin: 0; text-indent:0"><img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/9/95/T--Fudan--public-section2-5.png"></p>
 
−
                                Doctors in clinical fields may not be very interested in the detailed mechanisms of synthetic biology research. What's more, they have their distinct terminology, like a niche. Project could be more easily understood when we introduced it using their word choice, like going into their mindsets. For example, it is better to say: “Our modified cells are activated in the nidus where brain tissue is necrotizing, and they will then begin to eliminate the symptoms” instead of “Our system recognizes specific signals A and B expressed in ischemic brain tissue which will then activate corresponding pathways to express effectors.”
 
−
                            </li>
 
−
                            <li>We need to let others know that we have carefully considered the safety of our tools, before introducing why our tool is useful.
 
−
                            </li>
 
−
                        </ul>
 
−
                    </div>
 
−
                    <div id="section3" class="section container scrolSpy">
 
−
                        <h2> Farseeing Bio-Art display—The development of synthetic biology requires the understanding and acceptance of the public as the fertile soil for its growth.
 
−
                        </h2>
 
−
                        <p class="flow-text">
 
−
                            <img class="left-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/e/ed/T--Fudan--public-section3-1.png">
 
−
                            Having gained experience in synthetic biology popularization to people outside its research field through traditional lectures, we hoped to apply this experience to another format. We decided to utilize artistic props and artworks as a medium to showcase synthetic biology. Over centuries and nations, artworks are a great way to stimulate curiosity, trigger discussions, and promote more in-depth understanding. This year, we held a campus-wide Bio-ART Display “CELL•LEGO•LOGIC”.
 
−
                        </p>
 
−
                        <p class="flow-text">Unlike some simple exhibitions or <a href="https://2017.igem.org/Team:Fudan/HP/Gold_Integrated#FW" target="_blank">card signing events</a> in the past, our display invites viewers to join us and experience some of the daily activities of the lab. That is why we use the word “display” to represent this event because its prefix "dis-" means "negative", and "play(-plic-)" means "fold". Putting two meanings together highlights our purpose "to unfold". Through our display, we hope that it can be a means of unfolding synthetic biology and our project (we also picked ENABLE as our project name for a similar consideration). Science should always be transparent and friendly to non-specialists.
 
−
                            <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/d/d7/T--Fudan--public-section3-2.png" />
 
−
                        </p>
 
−
                        <p class="flow-text">
 
−
                            The event name “CELL•LEGO•LOGIC” has its special meaning. We try to use LEGO to indicate the modular concept of synthetic biology. Also, “CELL” and “LOGIC” are the two central parts of our project.
 
−
                        </p>
 
−
                        <ul>
 
−
                            Our display consisted of four parts:
 
−
                            <li>LEGO and Synthetic Biology: We chose Lego pieces to help introduce synthetic biology because they share several similar fundamental traits. Legos utilize small building blocks to organize and construct amazing structures, while synthetic biology similarly builds functional products by using BioBricks.</li>
 
−
                            <li>Electrical Logic Gates: Logic gates are an integral part of our project. To introduce logic gates effectively, we must start with its fundamental principles and system. Hence, we provided basic but common electrical circuits, electrical boards, and light bulbs for the visitors to have the hands-on experience of signal input, output, AND gate, OR gate, etc.</li>
 
−
                            <li>Hands-on art activities: The audience may already learn what is synthetic biology and logic gates after the first two parts. Then, we want to bring out the creativity within the visitors by challenging them to present their understanding on logic circuits artistically on blank postcards, which also helped us get first-hand feedback on how the public perceived our project.</li>
 
−
                            <li>Access to Interactive Lab: Our interactive lab presented the audience with a "lab model" that we built, including many laboratory types of equipment (already sterilized for safety) that are often used. What’s more, we also conducted some training in laboratory safety and delivered some basic sterility concepts to them. It was very successful.</li>
 
−
                        </ul>
 
−
<p style="text-indent:0"><img src="https://static.igem.org/mediawiki/2018/6/6a/T--Fudan--public-long.png"></p>
 
−
                        <p class="flow-text">Audiences are further encouraged to write down their suggestions about the display and their views about the ethical problems in synthetic biology. Our foundational project may be applied into clinical practices one day. It is essential for us to learn the general public's opinions on the relevant topics in advance.</p>
 
−
                        <p class="flow-text">We have prepared <a href="/Team:Fudan-TSI/Bio-Art" target="_blank">a particular page</a> for Bio-ART display.</p>
 
−
                    </div>
 
−
                    <div id="section4" class="section container scrolSpy">
 
−
                        <h2>Farseeing debate with the public — We need to hear voices from different backgrounds.
 
−
                        </h2>
 
−
                        <p class="flow-text">
 
−
                            <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/9/92/T--Fudan--public-section4-1.png">
 
−
                            When a novel technology that could potentially have a widespread impact is developed, the public will nearly always immediately focus on its ethical implications and safety. Therefore, we were very curious to find out people's views and initial impression on the safety of our project. Further discussion could lead to the relationship between synthetic biology and morality. To tackle it comprehensively, we organized an open debate. We invited teachers and students from different majors to participate in the debate.</p>
 
−
                        <ul>
 
−
                            We started the debate by introducing our project, focusing on its potential applications. Then we extended the topic to synthetic biology techniques and ethics, where we debated the relationship between artificial life and morality, such as
 
−
<li>What are your views and evaluations on the safety of our project?</li>
 
  
−
<li>What do you think could be called artificial life?
 
−
                            </li><li>Can artificial life be treated in the same way as natural life?
 
−
                        </li><li>Is the creation of artificial life morally significant?</li>
 
−
</ul>
 
  
−
<div class="tableHolder">
 
−
                        <table class="striped">
 
−
<caption style="text-align:left;"><b>We briefly summarize these views from various angles:</b></caption>
 
−
                            <tr><th>What are your views and evaluations on the safety of our project?</th></tr>
 
−
                        <tr><td>To determine whether the whole system will affect the natural activities of the cell, we should seriously investigate whether the transcription factors we are currently using are completely orthogonal to eukaryotic cells
 
−
                      </td></tr><tr><td>It should be noted that the output signal for a specific application should be safe for other organisms.
 
−
                        </td></tr><tr><td>If a single cell could be equipped with a basic binary logic gate unit, a multicellular system would be more flexible and stable when compared to multiple logic gates cramped into one cell.
 
−
                        </td></tr><tr><td>When multiple cells equipped with Boolean logic gates work together, care should be taken to prevent signal loss or leakage between cells.
 
−
                        </td></tr>
 
−
                        </table>
 
−
                            </div>
 
  
−
                            <div class="tableHolder">
 
−
                        <table class="striped">
 
−
                            <tr><th>What do you think could be called artificial life?</th></tr>
 
−
                            <tr><td>From the perspective of Chinese philosophy, the "artificial" sense reflects more on the human involvement during the evolution and reproduction of life.
 
−
                            </td></tr><tr><td>Life represents the characteristic of an entire population. We define a species as an artificial life depending on its source.
 
−
                        </td></tr><tr><td>From a legal point of view, the definition of a species is derived from a series of characteristics. When artificial life does not really appear, we cannot define it.
 
−
                        </td></tr><tr><td>From a technical point of view, artificial life must be <i>de novo</i>, which is reflected in the process it is produced.
 
−
                        </td></tr>
 
−
                        </table>
 
−
                            </div>
 
−
                        <div class="tableHolder">
 
−
                        <table class="striped">
 
−
                            <tr><th>Can artificial life be treated in the same way as natural life?</th></tr>
 
−
                            <tr><td>From a moral point of view, we do not need to treat artificial life in a special way, unless artificial human beings are created, or our creation possesses emotional awareness or even consciousness.
 
−
                            </td></tr><tr><td>I believe that the existence of artificial life should be limited, considering its potential threat to the existing ecological environment.
 
−
                        </td></tr><tr><td>Artificial life should not be treated differently, even if it has the risk of eliminating other species, because this is no different from the competition in natural evolution.
 
−
                        </td></tr><tr><td>Specifically for synthetic biology, we should pay more attention to the attitude towards the technology creating artificial life, as artificial life is only a result of the application of such technology.
 
−
                        </td></tr>
 
−
                        </table>
 
−
                        </div>
 
−
                        <div class="tableHolder">
 
−
                            <p style="text-indent:0">
 
−
                                <img src="https://static.igem.org/mediawiki/2018/4/4d/T--Fudan--public-section4-2.png">
 
−
                            </p>
 
−
                        <table class="striped">
 
−
                            <tr><th>Is the creation of artificial life morally significant?</th></tr>
 
−
                            <tr><td>In Chinese philosophy, life and death are both natural processes, so the process of creating life does not apply to the 'inaction'[无为] point in Eastern philosophy, which means "Do not bother".
 
−
                            </td></tr><tr><td>In a sense, it's not necessary to evaluate a futuristic subject with the current morality as morality will change with reality. We should hold a dynamic view towards artificial life.
 
−
                        </td></tr><tr><td>No matter in which era, artificial beings must comply to the basic principle--be beneficial towards the development of human race.
 
−
                        </td></tr>
 
−
                        </table>
 
−
                        </div>
 
  
−
<p class="flow-text"><b><a href="https://static.igem.org/mediawiki/2018/d/d3/T--Fudan--human_practice-debate.pdf" target="_blank">Click here </a>to know more about our debate.</b></p>
 
−
<p class="flow-text">This university-wide debate was truly rewarding for everyone present. We saw great potential in synthetic biology on impacting the world. We truly hope other people can share this vision and help ensure that ethical principles are always upheld in this field for the safety and future of everyone.
 
−
                        </p>
 
−
                    </div>
 
  
−
                </main>
 
−
            </div>
 
  
−
<!--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 -->
 
−
            <div class="floatingBtn">
 
−
                <a href="#!" id="abstractBtn" class="btn">
 
−
                    <i class="fa fa-sticky-note" style="font-size:30px;line-height:50px"></i>
 
−
                </a>
 
−
                <a href="#FudanWrapper" class="btn">
 
−
                    <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i>
 
−
                </a>
 
−
            </div>
 
  
−
            <!-- Footer with sponsors and contact methods -->
 
−
            <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">
 
−
                                    <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 active">
 
−
                                  <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>
 
−
</div>
 
  
  
−
<!-- 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:03, 17 October 2019

Fudan
We kept close collaboration with team Fudan since we two teams were set up in January 2019. We shared our ideas and suggestions with each other. Besides, they gave us a sample of their plasmid containing the Tetracycline resistance gene to us. In return, we provided our experiment protocols and equipment to them. The continuous communication between members of the two teams contributes to promoting respective projects.
Shanghai_YGQ
This year, we also welcomed a high school team to our campus, Shanghai_YGQ. They set up their team based on the lab space at Fudan University, so we got to be in close contact. We both worked on the same floor in the Life Science Building. Due to the convenience, we exchanged ideas with each other frequently. We offered them some advice on experiments, lab safety and other details regarding competition. Correspondingly they showed us what nowadays high school students thought of synthetic biology, which helped with our public engagement human practice.
Nanjing-China
We communicated with team Nanjing-China about our project for the first time in May 2019 at the BUDS, Biology Undergraduate Development Symposium, through which we exchanged our experience about how to perform experiments in practice. Then during the 6th Conference of China iGEMers Community (CCiC), we made collaboration on modeling. We recommended them to assume that the phosphorus absorption rate was inversely proportional to the amount of phosphorus absorbed in their phosphorus absorption rate curve model. In return they suggested us to combine the three process of transcription, reverse transcription and recombination in the modeling. We both made great progress through the interchange between each other.
ECUST_China
We received valuable suggestions on the activity forms of Education and Public Engagement HP from them. In exchange, we offered them a protocol for reference to verify that their parts could work.
SMMU-China
We gave them plasmid samples containing various transcription factors and promotors constructed by the 2017 iGEM team Fudan.