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

Line 603: Line 603:
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content begins    --------------------------------------------------------------------------------------------------------------------------------->
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    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%;
 +
}
 +
.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;
 +
}
 +
.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;
 +
}
 +
.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:1rem;
 +
}
 +
.para1{
 +
font-size:0.8rem;
 +
}
 +
.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/8/84/T--Fudan-TSI--coverIntegratedHP.gif"></div>
 +
</div>
 +
<style>
 +
#pageCover{
 +
width:100%;
 +
margin:0;
 +
padding-top:80px;
 +
}
 +
#demoCover{
 +
width:100vw;
 +
height:80vh;
 +
position:absolute;
 +
background-color:rgba(8,39,58,0.5);
 +
top:70px;
 +
left:0;
 +
text-align:center;
 +
}
 +
#coverPic{
 +
width:900px;
 +
margin:20vh auto;
 +
}
 +
#demo{
 +
width:100vw;
 +
height:70vh;
 +
position:relative;
 +
}
 +
#demo svg {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: fixed;
 +
}
 +
#demo svg g {
 +
  mix-blend-mode: lighten;
 +
}
 +
#demo svg polygon {
 +
  stroke: none;
 +
  fill: white;
 +
}
 +
 +
@media only screen and (max-width:1100px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
height:30vh;
 +
}
 +
#demo{
 +
height:30vh;
 +
}
 +
#coverPic{
 +
width:800px;
 +
margin:7vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:992px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:700px;
 +
margin:6vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:768px){
 +
#pageCover{
 +
padding-top:55px;
 +
}
 +
#demoCover{
 +
top:55px;
 +
}
 +
#coverPic{
 +
width:450px;
 +
margin:8vh auto;
 +
}
 +
}
 +
@media only screen and (max-width:500px){
 +
#coverPic{
 +
width:250px;
 +
margin:8vh auto;
 +
}
 +
}
 +
</style>
 +
<script>
 +
//////////////////////////////
 +
// Demo Functions
 +
//////////////////////////////
 +
function bkgFunction(showStats) {
 +
  // stats
 +
  if (showStats) {
 +
var stats = new Stats();
 +
stats.domElement.style.position = 'absolute';
 +
stats.domElement.style.left = '0';
 +
stats.domElement.style.top = '0';
 +
document.body.appendChild(stats.domElement);
 +
requestAnimationFrame(function updateStats(){
 +
  stats.update();
 +
  requestAnimationFrame(updateStats);
 +
});
 +
  }
 +
  // init
 +
  var svg = document.getElementById('demo');
 +
  tesselation.setup(svg);
 +
  gradients.setup();
 +
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
  function playNextTransition() {
 +
tesselation.next(transitionDuration);
 +
gradients.next(transitionDuration);
 +
  };
 +
  function tick(time) {
 +
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
  lastTransitionAt = time;
 +
  playNextTransition();
 +
}
 +
window.requestAnimationFrame(tick);
 +
  }
 +
  window.requestAnimationFrame(tick);
 +
}
 +
//////////////////////////////
 +
// Delaunay Triangulation
 +
//////////////////////////////
 +
var calcDelaunayTriangulation = (function() {
 +
  var EPSILON = 1.0 / 1048576.0;
 +
  function getSuperT(vertices) {
 +
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
for(i = vertices.length; i--; ) {
 +
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
}
 +
xDiff = xMax - xMin;
 +
yDiff = yMax - yMin;
 +
maxDiff = Math.max(xDiff, yDiff);
 +
xCenter = xMin + xDiff * 0.5;
 +
yCenter = yMin + yDiff * 0.5;
 +
return [
 +
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
  [xCenter, yCenter + 20 * maxDiff],
 +
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
];
 +
  }
 +
  function circumcircle(vertices, i, j, k) {
 +
var xI = vertices[i][0], yI = vertices[i][1],
 +
xJ = vertices[j][0], yJ = vertices[j][1],
 +
xK = vertices[k][0], yK = vertices[k][1],
 +
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
// bail condition
 +
if(yDiffIJ < EPSILON){
 +
if (yDiffJK < EPSILON){
 +
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
}
 +
}
 +
 +
 +
// calc circumcircle center x/y, radius
 +
m1  = -((xJ - xI) / (yJ - yI));
 +
m2  = -((xK - xJ) / (yK - yJ));
 +
xMidIJ = (xI + xJ) / 2.0;
 +
xMidJK = (xJ + xK) / 2.0;
 +
yMidIJ = (yI + yJ) / 2.0;
 +
yMidJK = (yJ + yK) / 2.0;
 +
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
 +
  (yDiffJK < EPSILON) ? xMidJK :
 +
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
 +
yCenter  = (yDiffIJ > yDiffJK) ?
 +
  m1 * (xCenter - xMidIJ) + yMidIJ :
 +
  m2 * (xCenter - xMidJK) + yMidJK;
 +
xDiff = xJ - xCenter;
 +
yDiff = yJ - yCenter;
 +
// return
 +
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
 +
  }
 +
  function dedupeEdges(edges) {
 +
var i, j, a, b, m, n;
 +
for(j = edges.length; j; ) {
 +
  b = edges[--j]; a = edges[--j];
 +
  for(i = j; i; ) {
 +
n = edges[--i]; m = edges[--i];
 +
if(a === m){
 +
  if (b===n){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
if(a === n){
 +
  if (b===m){
 +
  edges.splice(j, 2); edges.splice(i, 2);
 +
  break;
 +
  }  
 +
}
 +
  }
 +
}
 +
  }
 +
  return function(vertices) {
 +
var n = vertices.length,
 +
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
 +
// bail if too few / too many verts
 +
if(n < 3 || n > 2000)
 +
  return [];
 +
// copy verts and sort indices by x-position
 +
vertices = vertices.slice(0);
 +
indices = new Array(n);
 +
for(i = n; i--; )
 +
  indices[i] = i;
 +
indices.sort(function(i, j) {
 +
  return vertices[j][0] - vertices[i][0];
 +
});
 +
// supertriangle
 +
st = getSuperT(vertices);
 +
vertices.push(st[0], st[1], st[2]);
 +
// init candidates/locked tris list
 +
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
 +
locked = [];
 +
edges = [];
 +
// scan left to right
 +
for(i = indices.length; i--; edges.length = 0) {
 +
  c = indices[i];
 +
  // check candidates tris against point
 +
  for(j = candidates.length; j--; ) {
 +
// lock tri if point to right of circumcirc
 +
dx = vertices[c][0] - candidates[j].x;
 +
if (dx > 0.0){
 +
if(dx * dx > candidates[j].r){
 +
locked.push(candidates[j]);
 +
  candidates.splice(j, 1);
 +
  continue;
 +
}
 +
}
 +
 
 +
 
 +
// point outside circumcirc = leave candidates
 +
dy = vertices[c][1] - candidates[j].y;
 +
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
 +
  continue;
 +
// point inside circumcirc = break apart, save edges
 +
edges.push(
 +
  candidates[j].i, candidates[j].j,
 +
  candidates[j].j, candidates[j].k,
 +
  candidates[j].k, candidates[j].i
 +
);
 +
candidates.splice(j, 1);
 +
  }
 +
  // new candidates from broken edges
 +
  dedupeEdges(edges);
 +
  for(j = edges.length; j; ) {
 +
b = edges[--j];
 +
a = edges[--j];
 +
candidates.push(circumcircle(vertices, a, b, c));
 +
  }
 +
}
 +
// close candidates tris, remove tris touching supertri verts
 +
for(i = candidates.length; i--; )
 +
  locked.push(candidates[i]);
 +
candidates.length = 0;
 +
for(i = locked.length; i--; )
 +
  if(locked[i].i < n){
 +
  if(locked[i].j < n){
 +
  if(locked[i].k < n){
 +
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
  }
 +
  }
 +
  }
 +
 +
 +
// done
 +
return candidates;
 +
  };
 +
})();
 +
var tesselation = (function() {
 +
  var svg, svgW, svgH, prevGroup;
 +
  function createRandomTesselation() {
 +
var wW = window.innerWidth;
 +
var wH = window.innerHeight;
 +
var gridSpacing = 250, scatterAmount = 0.75;
 +
var gridSize, i, x, y;
 +
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
 +
  gridSize = gridSpacing * svgW / wW;
 +
} else { // window taller than svg = use height for gridSize
 +
  gridSize = gridSpacing * svgH / wH;
 +
}
 +
var vertices = [];
 +
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
 +
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
 +
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
 +
vertices.push(
 +
  [
 +
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
 +
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
 +
  ]
 +
);
 +
  }
 +
}
 +
var triangles = calcDelaunayTriangulation(vertices);
 +
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
 +
var polygon;
 +
for(i = triangles.length; i; ) {
 +
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 +
  polygon.setAttribute('points',
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
 +
  );
 +
  group.appendChild(polygon);
 +
}
 +
return group;
 +
  }
 +
  return {
 +
setup: function(svgElement) {
 +
  svg = svgElement;
 +
  var vb = svg.getAttribute('viewBox').split(/\D/g);
 +
  svgW = vb[2];
 +
  svgH = vb[3];
 +
},
 +
next: function(t) {
 +
  var toRemove, i, n;
 +
  t /= 1000;
 +
if(prevGroup){
 +
if(prevGroup.children){
 +
if(prevGroup.children.length){
 +
toRemove = prevGroup;
 +
n = toRemove.children.length;
 +
for (i = n; i--; ) {
 +
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
 +
}
 +
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
 +
}
 +
}
 +
}
 +
 +
  var g = createRandomTesselation();
 +
  n = g.children.length;
 +
  for (i = n; i--; ) {
 +
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
 +
  }
 +
  svg.appendChild(g);
 +
  prevGroup = g;
 +
}
 +
  }
 +
})();
 +
//////////////////////////////
 +
// Gradients
 +
//////////////////////////////
 +
var gradients = (function() {
 +
  var grad1, grad2, showingGrad1;
 +
  // using colors from IBM Design Colors this time
 +
  var colors = [ // 14 colors - use 3-5 span
 +
'#3c6df0', // ultramarine50
 +
'#12a3b4', // aqua40
 +
'#00a78f', // teal40
 +
'#00aa5e', // green40
 +
'#81b532', // lime30
 +
'#e3bc13', // yellow20
 +
'#ffb000', // gold20
 +
'#fe8500', // orange30
 +
'#fe6100', // peach40
 +
'#e62325', // red50
 +
'#dc267f', // magenta50
 +
'#c22dd5', // purple50
 +
'#9753e1', // violet50
 +
'#5a3ec8'  // indigo60
 +
  ];
 +
  function assignRandomColors(gradObj) {
 +
var rA = Math.floor(colors.length * Math.random());
 +
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
 +
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
 +
gradObj.stopA.setAttribute('stop-color', colors[rA]);
 +
gradObj.stopB.setAttribute('stop-color', colors[rB]);
 +
  }
 +
  return {
 +
setup: function() {
 +
  showingGrad1 = false;
 +
  grad1 = {
 +
stopA: document.getElementById('stop1a'),
 +
stopB: document.getElementById('stop1b'),
 +
rect:  document.getElementById('rect1')
 +
  };
 +
  grad2 = {
 +
stopA: document.getElementById('stop2a'),
 +
stopB: document.getElementById('stop2b'),
 +
rect:  document.getElementById('rect2')
 +
  };
 +
  grad1.rect.style.opacity = 0;
 +
  grad2.rect.style.opacity = 0;
 +
},
 +
next: function(t) {
 +
  t /= 1000;
 +
  var show, hide;
 +
  if (showingGrad1) {
 +
hide = grad1;
 +
show = grad2;
 +
  } else {
 +
hide = grad2;
 +
show = grad1;
 +
  }
 +
  showingGrad1 = !showingGrad1;
 +
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
 +
  assignRandomColors(show);
 +
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
 +
}
 +
  };
 +
})();
 +
//////////////////////////////
 +
// Start
 +
//////////////////////////////
 +
bkgFunction();
 +
</script>
 +
 +
 +
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Left Navigator ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 +
 +
 +
 +
<div id="pageContent">
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
<!---- Content ---->
 +
<!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<style>
 +
.hpCard{
 +
width:70%;
 +
 +
}
 +
</style>
 +
 +
<div class="container">
 +
<div class="row">
 +
<div class="row title1">Overview</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
During our human practices, we reached out to the possible users of our system and professors in various fields. By listening to their knowledge, we came to understand the needs of our users and make sure we stay in the ethical and safety line when doing research. We took experimental training and check thoroughly of a part’s nature and possible influences before using it. We ensured that our mutagenesis system would be safe to use while helpful.
 +
</div>
 +
</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
Even though the end user of our system would be researchers, we also hope to connect to the public and listen to the voices from a broader scale. With this hope we conducted human practices aiming towards general public and collected their feedback. Their opinions toward synthetic biology and directed evolution helped us understand more of what the public wants to see.
 +
</div>
 +
</div>
 +
 +
<div class="row title2">Timeline</div>
 +
 +
<div class="row para1">
 +
<div class="col">
 +
Our R-Evolution project aims to construct an in vivo continuous mutagenesis system which enables mutation generation with higher efficiency and lower cost. Our project will mainly be applicated inside the laboratory so it is of great importance to engage with researchers of relevant fields. In this way, we can better understand and appeal to their needs. Through our interviews, they also pointed out existing problems in our initial design, and offered valuable consultants on our experiments.
 +
</div>
 +
</div>
 +
 +
 +
<style>
 +
#timeline{
 +
position:relative;
 +
 +
}
 +
.bubbleDate{
 +
padding:0;
 +
margin:0;
 +
width:200px;
 +
height:80px;
 +
white-space:nowrap;
 +
overflow:hidden;
 +
}
 +
.triangle{
 +
margin:0!important;
 +
width:0;
 +
height:0;
 +
top:10px;
 +
left:-7px;
 +
border-width:20px;
 +
border-style: solid;
 +
position:relative;
 +
display:inline-block;
 +
}
 +
.triangle2{
 +
margin:0!important;
 +
width:0;
 +
height:0;
 +
top:10px;
 +
left:-20px;
 +
border-width:20px;
 +
border-style: solid;
 +
position:relative;
 +
display:inline-block;
 +
}
 +
.square{
 +
position:relative;
 +
display:inline-block;
 +
width:180px;
 +
height:80px;
 +
border-radius:10px;
 +
margin:0!important;
 +
color:white;
 +
text-align:center;
 +
font-size:36px;
 +
padding-top:24px;
 +
}
 +
.square2{
 +
position:relative;
 +
left:15px;
 +
display:inline-block;
 +
border-radius:10px;
 +
margin:0!important;
 +
color:white;
 +
font-size:20px;
 +
line-height:22px;
 +
padding:40px 40px 0 30px;
 +
text-align:justify;
 +
top:-50px;
 +
}
 +
.occupation{
 +
font-size:15px;
 +
text-align:left;
 +
}
 +
.photos{
 +
width:80%;
 +
}
 +
.rightLine{
 +
width:180px;
 +
border-right-style:solid;
 +
border-right-width:5px!important;
 +
border-right-color:white!important;
 +
}
 +
 +
@media only screen and (max-width:1100px){
 +
.bubbleDate{
 +
width:160px;
 +
height:70px;
 +
white-space:nowrap;
 +
overflow:hidden;
 +
}
 +
.square{
 +
font-size:32px;
 +
padding-top:24px;
 +
width:140px;
 +
height:70px;
 +
}
 +
.square2{
 +
font-size:18px;
 +
}
 +
.occupation{
 +
font-size:15px;
 +
text-align:left;
 +
}
 +
.rightLine{
 +
width:160px;
 +
}
 +
.container{
 +
width:90%;
 +
}
 +
#timeline{
 +
width:100%;
 +
position:relative;
 +
left:-20px;
 +
}
 +
}
 +
@media only screen and (max-width:992px){
 +
.bubbleDate{
 +
width:150px;
 +
height:70px;
 +
white-space:nowrap;
 +
overflow:hidden;
 +
}
 +
.square{
 +
font-size:24px;
 +
padding-top:18px;
 +
width:120px;
 +
height:60px;
 +
}
 +
.square2{
 +
font-size:18px;
 +
line-height:19px;
 +
}
 +
.triangle{
 +
top:12px;
 +
}
 +
.occupation{
 +
font-size:15px;
 +
text-align:left;
 +
}
 +
.rightLine{
 +
width:120px;
 +
}
 +
.align-items-center{
 +
clear:both;
 +
display:block;
 +
}
 +
.photos{
 +
width:60%;
 +
}
 +
#timeline{
 +
width:100%;
 +
position:relative;
 +
left:-20px;
 +
}
 +
}
 +
@media only screen and (max-width:768px){
 +
.bubbleDate{
 +
width:110px;
 +
height:55px;
 +
white-space:nowrap;
 +
overflow:hidden;
 +
}
 +
.triangle{
 +
top:5px;
 +
left:-7px;
 +
border-width:12px;
 +
}
 +
.triangle2{
 +
top:5px;
 +
left:-15px;
 +
 +
}
 +
.square{
 +
font-size:18px;
 +
padding-top:10px;
 +
width:100px;
 +
height:40px;
 +
}
 +
.square2{
 +
font-size:15px;
 +
padding-left:10px;
 +
padding-right:10px;
 +
}
 +
.occupation{
 +
font-size:14px;
 +
text-align:left;
 +
}
 +
.rightLine{
 +
width:110px;
 +
}
 +
.container{
 +
width:95%;
 +
}
 +
#timeline{
 +
width:100%;
 +
position:relative;
 +
left:-20px;
 +
}
 +
@media only screen and (max-width:500px){
 +
.bubbleDate{
 +
width:54px;
 +
height:55px;
 +
white-space:nowrap;
 +
overflow:hidden;
 +
}
 +
.triangle{
 +
top:6px;
 +
left:-7px;
 +
border-width:8px;
 +
}
 +
.triangle2{
 +
top:5px;
 +
left:-15px;
 +
 +
}
 +
.square{
 +
font-size:12px;
 +
padding-top:10px;
 +
width:48px;
 +
height:40px;
 +
}
 +
.square2{
 +
font-size:14px;
 +
}
 +
.occupation{
 +
font-size:13px;
 +
text-align:left;
 +
}
 +
td{
 +
padding-left:0!important;
 +
padding-right:0!important;
 +
}
 +
.rightLine{
 +
width:54px;
 +
padding-left:10px!important;
 +
}
 +
#timeline{
 +
left:-20px;
 +
width:100%;
 +
}
 +
 +
 +
}
 +
</style>
 +
 +
<div class="row" style="overflow:hidden;">
 +
<div class="col col-lg-12">
 +
<table id="timeline" frame="void" rules="none">
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#12816a;">January</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #12816a;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #12816a transparent transparent;"></div>
 +
<div class="square2" style="background-color:#12816a;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-lg-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/7/79/T--Fudan-TSI--IHP01.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Prof. Hal Alper</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of Chemical Engineering and engineering biology<br />University of Texas at Austin</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-lg-7 eventIntro">Prof. Hal Alper developed novel synthetic biology and directed evolution approaches to increase the capacity of engineered cells. He has developed a similar in vivo continuous evolution (ICE) system in yeast using Ty1 transposon and an encoded reverse transcriptase. After we decided on our project, we contacted him through mail regarding problems on our experimental design. He affirmed to us the necessity of adding capsid protein to the system as it serves to increase reverse transcription efficiency. He also told us that poly-purine tract is needed for reverse transcription to take place, so we added the relevant sequences to our design.</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#12817b;">March</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #12817b;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #12817b transparent transparent;"></div>
 +
<div class="square2" style="background-color:#12817b;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/a/a5/T--Fudan-TSI--IHP02.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Dr. Jiang Zhong</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of microbiology and microbial engineering<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">Dr. Zhong provided us with advice on improving our design by refining the details. In our project we designed a series of experiments to verify our system and insure its feasibility and efficiency. He pointed out to us that apart from the system’s overall function, we also need to set up experiments for the testification of each process in our system. It’s the accuracy and accomplishment of each step that ensured our system’s function.<br />
 +
Dr. Zhong also reminded us that the expression of reverse transcriptase (RT) might be affected in a heterologous host, and that the high expression of RT may cause misfolding and the formation of inclusion body. This led us to test which promoter is best suited for the expression of RT.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #127781 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#127781;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/c/c4/T--Fudan-TSI--IHP03.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Dorothy Zhang</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>iGEM Asia Ambassador. Member of iGEM Human Practice Committee</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">
 +
Our meeting with Ms. Zhang corrected one of our biggest misunderstandings with iGEM competition and the presentation of our project. Our initial belief was that the project could be separated into three different parts—experiment, modelling and human practice. We thought of carrying them out separately and then mix the results together at the end. She pointed out that this is totally incorrect, and emphasized to us that the ‘three’ parts are actually embedded with each other. They both offer each other guidance and refine themselves in this process. With this in mind, we chose to interact with our project’s end users, and refine it upon the receival of various suggestions.<br />
 +
In addition, she also reminded us that we’re doing human practice for a reason,every activity needs to have its meaning, that we’re not acting in order to fulfill the medal criteria, but to make our project better. We have designed our human practice work based on this principle.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#126781;">April</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #126781;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #126781 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#126781;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/3/3e/T--Fudan-TSI--IHP04.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Dr. Hong Lv</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of genetics with a focus on molecular genetics and genetic engineering of yeast<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">At the beginning of our project design, we were debating over which means should be used for system verification. One was to measure the expression of fluorescent protein, which should be recovered by the correct point mutation; the other was by utilizing antibiotic genes, successful recovery could be demonstrated by the growth of colonies. Both constructs have its advantages and disadvantages. During the interview with Dr. Lv, she pointed out that fluorescent detection would be less accurate and more laborious than colony growth, which is also easier to detect. She also mentioned that we could simulate the evolution of resistance genes or construct E. coli strains with attenuated or disabled endotoxin as future application.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #126081 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#126081;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/5/58/T--Fudan-TSI--IHP05.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Dr. Yongming Wang</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Researcher of genetics with a focus on genome editing technique<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">
 +
We encountered problems when co-transforming the plasmids carrying Cre and loxP-flanked mCherry respectively. We found that the fluorescent plasmid was undetectable even after PCR amplification. After our talk with our PI, we supposed it is the leakage of Cre that leads to the problem. Dr. Wang offered us various suggestions on how to enable a more stringent control of Cre expression, including using less strong promoter and overexpression of regulatory protein. <br />
 +
Initially, we were using same loxP sites not only in Cre activity tests, but also in our system design. Dr. Wang warned us that the splicing rate of Cre is much higher than its recombination rate. If we continue to use the same loxP sites on both ends, the DNA fragments are likely to self-splice instead of initiating recombination as we hoped. This is affirmed by Dr. Alper, who also mentioned that the multiple plasmids containing the loxP sites in the system could interact with each other. Two ideas were offered by Dr. Wang to solve this problem. One is using the mutated loxP site on one end of the DNA fragments and another is to use different recombinases such as Cre and Flp together. Adopting his suggestions, we changed one of the loxP sites into its mutated incompatible versions and tested their feasibility.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#124e81;">May</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #124e81;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #124e81 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#124e81;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/5/58/T--Fudan-TSI--IHP06.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Prof. Jinzhong Lin</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of genetics<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">Prof. Lin mentioned to us that even if we controlled the expression of Cre, we could not be certain of the length of time it will stay in the cell. So, after we removed the inducer from the culture, Cre would likely continue to function, thus resulting in a mismatch between survived cell phenotype and unrelated genotype. Cre could recombine our desired sequence to the plasmid for one time and allow the cell to survive our selection, but recombine again afterwards and replace it with other versions when we’re scanning the plasmid. He suggested that we make efforts to address this problem, and this is how we came up with the addition of degradation tags to Cre.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#123e81;">July</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #123e81;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #123e81 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#123e81;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/f/f4/T--Fudan-TSI--IHP07.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Prof. Qiang Huang</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of genetic engineering focusing on structural biochemistry of gene editing systems and frontier technologies<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">When we were unable to model the whole reaction process of the reactions of R-Evolution, we contacted Prof. Qiang Huang for suggestions. He suggested us modularize the reactions and model the reaction process one by one, using the output of the previous model as the input of the next one. He thought it a reasonable way to approximate the real reaction, where different reactions mingle together. He also suggested that we could do some Monte Carlo simulation to acquire more information, such as the noise of the reactions. We readily adopted his advice and came up with the present models, from which we surprisedly found that the expression of Cre and reverse transcriptase should be differentiated which helped us a lot with our experiments.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="rightLine">
 +
<div class="bubbleDate">
 +
<div class="square" style="background-color:#123581;">August</div>
 +
<div class="triangle" style="border-color:transparent transparent transparent #123581;"></div>
 +
</div>
 +
</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #123581 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#123581;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/0/0d/T--Fudan-TSI--IHP08.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Chen Ling</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Researcher of genetics, expert in Adeno-associated virus (AAV)<br />Fudan University</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">As an expert in Adeno-associated virus (AAV), Ling showed great interest in our project and thought it promising. However, he also expressed his queries and suggestions. His main concern was the proportion of the native plasmids within the system after mutagenesis. In his opinion, it is an important indicator to evaluate the efficiency of our system. We tested this problem through modeling and found the optimal environment for the highest recombination rate to occur.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="rightLine"></td>
 +
<td>
 +
<div class="bubbleContent">
 +
<div class="triangle2" style="border-color:transparent #122b81 transparent transparent;"></div>
 +
<div class="square2" style="background-color:#122b81;">
 +
<div class="container" style="width:100%; margin:0;padding:0;">
 +
<div class="row align-items-center">
 +
<div class="col col-md-5">
 +
<div class="row">
 +
<div class="col" style="text-align:center;"><img class="photos" style="margin:0 auto" src="https://static.igem.org/mediawiki/2019/5/5f/T--Fudan-TSI--IHP09.png"></div>
 +
</div>
 +
<div class="row title3">
 +
<div class="col">Prof. Hal Alper</div>
 +
</div>
 +
<div class="row occupation">
 +
<div class="col"><i>Professor of Chemical Engineering and engineering biology<br />University of Texas at Austin</i></div>
 +
</div>
 +
</div>
 +
<div class="col col-md-7">Upon our invitation, he visited our university in August and held a workshop with us. In the workshop, He gave us a lot of valuable advice as both a researcher and user of directed evolution. To start with, he pointed out that besides cheaper and less labor intensive, another big advantage of our system is that it can be adapted across various hosts. He also affirmed other problems that were mentioned before, including the leakage of Cre and the self-splicing of our mutated DNA fragments when using the same loxP. Besides, he held a lecture on synthetic biology in our school which was attended by many students including both undergraduates and graduates.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
</div>
 +
 +
 +
<div class="row title2">
 +
<div class="col">Guidebook</div>
 +
</div>
 +
<div class="row para1">
 +
<div class="row">
 +
<div class="col col-lg-12">
 +
At the beginning of our project, we found that we had no clue about how to start our Human Practice due to the lack of experience. That’s how we realized that is important to integrate the experience of the previous teams. Although different teams focus on different problems of various fields like therapeutics, diagnostics, environment and so on, the goal of Human Practice has always been to reach out to more people and make a difference with your project, thus we compiled a guidebook both of Education and Integrated Human Practice to provide some guidance for the further team on how to carry out Human Practice. As for Integrated Human Practice, we exerted ourselves to communicate with as more people as possible, from potential users of our project to professors and researchers who might help us enhance our project design, trying to fully interact with the outside world to extend the influence of our project and improved it. <br /><br />
 +
Here we present you our Guidebook for Integrated Human Practice focusing on following four questions:
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col col-lg-12">
 +
<ul class="paraUl" style="list-style:none;text-align:center;margin:0px">
 +
<li>What is your aim?</li>
 +
<li>Who are you working for?</li>
 +
<li>How can you make your project better?</li>
 +
<li>How to demonstrate your project?</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
 +
                        <div class="row" style="width:100%;">
 +
<div class="col">
 +
<embed src="https://static.igem.org/mediawiki/2019/5/59/T--Fudan-TSI--HP--Guidebook.pdf" width="100%" height="600px" type="application/pdf" />
 +
</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;
 +
});
 +
 +
 +
$(window).scroll(function(){
 +
 +
var currentScroll=$(this).scrollTop();
 +
var firstHeight=$("#pageCover").height();
 +
var footerFromTop=$("#FudanFooter").offset().top;
 +
var $currentSection=null;
 +
$(".leftNavA").each(function(){
 +
$('.leftNavA').removeClass('menu-active');
 +
var hePoint=$($(this).attr("href"));
 +
var divPosition=hePoint.offset().top-$("#navUl").height()-50;
 +
if (divPosition-1<currentScroll){
 +
$currentSection=$(this);
 +
}
 +
if (currentScroll>firstHeight){
 +
$(".leftNavA").removeClass("menu-active");
 +
$currentSection.addClass("menu-active");
 +
}
 +
});
 +
 +
var $currentSection2;
 +
$('.leftNavA2').each(function(){
 +
$('.leftNavA2').removeClass('menu-active2');
 +
var hePoint2=$($(this).attr("href"));
 +
var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
 +
if (divPosition2-1<currentScroll){
 +
$currentSection2=$(this);
 +
}
 +
if (currentScroll>firstHeight){
 +
$('.leftNavA2').removeClass('menu-active2');
 +
$currentSection2.addClass('menu-active2');
 +
}
 +
});
 +
});
 +
 +
</script>
 +
 +
 +
<script src="https://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>
 +
<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>
 +
  
  

Revision as of 23:55, 21 October 2019

Overview
During our human practices, we reached out to the possible users of our system and professors in various fields. By listening to their knowledge, we came to understand the needs of our users and make sure we stay in the ethical and safety line when doing research. We took experimental training and check thoroughly of a part’s nature and possible influences before using it. We ensured that our mutagenesis system would be safe to use while helpful.
Even though the end user of our system would be researchers, we also hope to connect to the public and listen to the voices from a broader scale. With this hope we conducted human practices aiming towards general public and collected their feedback. Their opinions toward synthetic biology and directed evolution helped us understand more of what the public wants to see.
Timeline
Our R-Evolution project aims to construct an in vivo continuous mutagenesis system which enables mutation generation with higher efficiency and lower cost. Our project will mainly be applicated inside the laboratory so it is of great importance to engage with researchers of relevant fields. In this way, we can better understand and appeal to their needs. Through our interviews, they also pointed out existing problems in our initial design, and offered valuable consultants on our experiments.
January
Prof. Hal Alper
Professor of Chemical Engineering and engineering biology
University of Texas at Austin
Prof. Hal Alper developed novel synthetic biology and directed evolution approaches to increase the capacity of engineered cells. He has developed a similar in vivo continuous evolution (ICE) system in yeast using Ty1 transposon and an encoded reverse transcriptase. After we decided on our project, we contacted him through mail regarding problems on our experimental design. He affirmed to us the necessity of adding capsid protein to the system as it serves to increase reverse transcription efficiency. He also told us that poly-purine tract is needed for reverse transcription to take place, so we added the relevant sequences to our design.
March
Dr. Jiang Zhong
Professor of microbiology and microbial engineering
Fudan University
Dr. Zhong provided us with advice on improving our design by refining the details. In our project we designed a series of experiments to verify our system and insure its feasibility and efficiency. He pointed out to us that apart from the system’s overall function, we also need to set up experiments for the testification of each process in our system. It’s the accuracy and accomplishment of each step that ensured our system’s function.
Dr. Zhong also reminded us that the expression of reverse transcriptase (RT) might be affected in a heterologous host, and that the high expression of RT may cause misfolding and the formation of inclusion body. This led us to test which promoter is best suited for the expression of RT.
Dorothy Zhang
iGEM Asia Ambassador. Member of iGEM Human Practice Committee
Our meeting with Ms. Zhang corrected one of our biggest misunderstandings with iGEM competition and the presentation of our project. Our initial belief was that the project could be separated into three different parts—experiment, modelling and human practice. We thought of carrying them out separately and then mix the results together at the end. She pointed out that this is totally incorrect, and emphasized to us that the ‘three’ parts are actually embedded with each other. They both offer each other guidance and refine themselves in this process. With this in mind, we chose to interact with our project’s end users, and refine it upon the receival of various suggestions.
In addition, she also reminded us that we’re doing human practice for a reason,every activity needs to have its meaning, that we’re not acting in order to fulfill the medal criteria, but to make our project better. We have designed our human practice work based on this principle.
April
Dr. Hong Lv
Professor of genetics with a focus on molecular genetics and genetic engineering of yeast
Fudan University
At the beginning of our project design, we were debating over which means should be used for system verification. One was to measure the expression of fluorescent protein, which should be recovered by the correct point mutation; the other was by utilizing antibiotic genes, successful recovery could be demonstrated by the growth of colonies. Both constructs have its advantages and disadvantages. During the interview with Dr. Lv, she pointed out that fluorescent detection would be less accurate and more laborious than colony growth, which is also easier to detect. She also mentioned that we could simulate the evolution of resistance genes or construct E. coli strains with attenuated or disabled endotoxin as future application.
Dr. Yongming Wang
Researcher of genetics with a focus on genome editing technique
Fudan University
We encountered problems when co-transforming the plasmids carrying Cre and loxP-flanked mCherry respectively. We found that the fluorescent plasmid was undetectable even after PCR amplification. After our talk with our PI, we supposed it is the leakage of Cre that leads to the problem. Dr. Wang offered us various suggestions on how to enable a more stringent control of Cre expression, including using less strong promoter and overexpression of regulatory protein.
Initially, we were using same loxP sites not only in Cre activity tests, but also in our system design. Dr. Wang warned us that the splicing rate of Cre is much higher than its recombination rate. If we continue to use the same loxP sites on both ends, the DNA fragments are likely to self-splice instead of initiating recombination as we hoped. This is affirmed by Dr. Alper, who also mentioned that the multiple plasmids containing the loxP sites in the system could interact with each other. Two ideas were offered by Dr. Wang to solve this problem. One is using the mutated loxP site on one end of the DNA fragments and another is to use different recombinases such as Cre and Flp together. Adopting his suggestions, we changed one of the loxP sites into its mutated incompatible versions and tested their feasibility.
May
Prof. Jinzhong Lin
Professor of genetics
Fudan University
Prof. Lin mentioned to us that even if we controlled the expression of Cre, we could not be certain of the length of time it will stay in the cell. So, after we removed the inducer from the culture, Cre would likely continue to function, thus resulting in a mismatch between survived cell phenotype and unrelated genotype. Cre could recombine our desired sequence to the plasmid for one time and allow the cell to survive our selection, but recombine again afterwards and replace it with other versions when we’re scanning the plasmid. He suggested that we make efforts to address this problem, and this is how we came up with the addition of degradation tags to Cre.
July
Prof. Qiang Huang
Professor of genetic engineering focusing on structural biochemistry of gene editing systems and frontier technologies
Fudan University
When we were unable to model the whole reaction process of the reactions of R-Evolution, we contacted Prof. Qiang Huang for suggestions. He suggested us modularize the reactions and model the reaction process one by one, using the output of the previous model as the input of the next one. He thought it a reasonable way to approximate the real reaction, where different reactions mingle together. He also suggested that we could do some Monte Carlo simulation to acquire more information, such as the noise of the reactions. We readily adopted his advice and came up with the present models, from which we surprisedly found that the expression of Cre and reverse transcriptase should be differentiated which helped us a lot with our experiments.
August
Chen Ling
Researcher of genetics, expert in Adeno-associated virus (AAV)
Fudan University
As an expert in Adeno-associated virus (AAV), Ling showed great interest in our project and thought it promising. However, he also expressed his queries and suggestions. His main concern was the proportion of the native plasmids within the system after mutagenesis. In his opinion, it is an important indicator to evaluate the efficiency of our system. We tested this problem through modeling and found the optimal environment for the highest recombination rate to occur.
Prof. Hal Alper
Professor of Chemical Engineering and engineering biology
University of Texas at Austin
Upon our invitation, he visited our university in August and held a workshop with us. In the workshop, He gave us a lot of valuable advice as both a researcher and user of directed evolution. To start with, he pointed out that besides cheaper and less labor intensive, another big advantage of our system is that it can be adapted across various hosts. He also affirmed other problems that were mentioned before, including the leakage of Cre and the self-splicing of our mutated DNA fragments when using the same loxP. Besides, he held a lecture on synthetic biology in our school which was attended by many students including both undergraduates and graduates.
Guidebook
At the beginning of our project, we found that we had no clue about how to start our Human Practice due to the lack of experience. That’s how we realized that is important to integrate the experience of the previous teams. Although different teams focus on different problems of various fields like therapeutics, diagnostics, environment and so on, the goal of Human Practice has always been to reach out to more people and make a difference with your project, thus we compiled a guidebook both of Education and Integrated Human Practice to provide some guidance for the further team on how to carry out Human Practice. As for Integrated Human Practice, we exerted ourselves to communicate with as more people as possible, from potential users of our project to professors and researchers who might help us enhance our project design, trying to fully interact with the outside world to extend the influence of our project and improved it.

Here we present you our Guidebook for Integrated Human Practice focusing on following four questions:
  • What is your aim?
  • Who are you working for?
  • How can you make your project better?
  • How to demonstrate your project?