|
|
| (8 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | {{Fudan-TSI}} | + | {{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 --> |
| − | <html> | + | <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> |
| − | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> |
| − | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" /> |
| − | <script> | + | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" /> |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | + | |
| − | | + | |
| − | $(document).ready(function() {
| + | |
| − | | + | |
| − | //remove the HQ_page id
| + | |
| − | $("#HQ_page").attr('id','');
| + | |
| − |
| + | |
| − | | + | |
| − | //highlight current page on the menu
| + | |
| − | highlight_current_page_menu();
| + | |
| − |
| + | |
| − | //accessing submenus
| + | |
| − | $(".menu_item").click(function(){
| + | |
| − | $(".submenu_control_icon", this).toggleClass("open");
| + | |
| − | $(this).next(".submenu").fadeToggle(400);
| + | |
| − | });
| + | |
| − |
| + | |
| − | //mobile menu access
| + | |
| − | $(".igem_2019_team_mobile_bar").click(function(){
| + | |
| − | $(this).next().toggleClass("displaying_menu");
| + | |
| − | });
| + | |
| − |
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | function highlight_current_page_menu() {
| + | |
| − |
| + | |
| − | var page_url="https://2019.igem.org/";
| + | |
| − | page_url = page_url + wgPageName;
| + | |
| − | $("a[href$='"+ page_url +"']").children().addClass("current_page");
| + | |
| − |
| + | |
| − | //if the page is in a submenu, open the submenu and make the appropiate changes
| + | |
| − | if( $( ".current_page" ).hasClass( "submenu_item" )){
| + | |
| − |
| + | |
| − | $(".current_page").parent().parent().fadeToggle(400);
| + | |
| − | $(".current_page").parent().parent().prev().addClass("current_page");
| + | |
| − | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
| + | |
| − |
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| | <style> | | <style> |
| − | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| | /* DEFAULT WIKI SETTINGS */ | | /* DEFAULT WIKI SETTINGS */ |
| − | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
| − | | + | #home_logo, #sideMenu { display:none; } |
| − | | + | #sideMenu, #top_title, .patrollink { display:none; } |
| − | #home_logo, #sideMenu { display:none; }
| + | #content { margin-left: 0; padding:0px; width:100%;} |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| + | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; } |
| − | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
| + | /* css clean * */ |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | #FudanTSIBody li { list-style: none; } |
| − | #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
| + | </style> |
| − |
| + | <title>Education & Public Engagement | 2019 iGEM Team:Fudan-TSI</title> |
| − |
| + | </head> |
| − | | + | <body> |
| − | | + | <div id="FudanTSIdivWrapper"><div id="FudanTSIBody"> |
| − | /**************************************************************************************************************************************************************************************************/
| + | <header> |
| − | /* MENU */
| + | <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right"> |
| − | /**************************************************************************************************************************************************************************************************/
| + | <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li> |
| − | | + | <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li> |
| − | /*wrapping for the menu*/
| + | <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav> |
| − | .igem_2019_team_menu {
| + | <!-- Dropdown and List elements in navigation bar --> |
| − | background-color:#cecece;
| + | <ul id="dropdown1" class="dropdown-content"> |
| − | border-left: 1px solid #635d5d;
| + | <li><a href="/Team:Fudan-TSI/Description">Background</a></li> |
| − | float:right;
| + | <li><a href="/Team:Fudan-TSI/Design">Design</a></li> |
| − | height:100vh;
| + | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li> |
| − | max-width: 270px;
| + | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li> |
| − | overflow-y: auto;
| + | </ul> |
| − | overflow-x: hidden;
| + | <ul id="dropdown2" class="dropdown-content"> |
| − | padding:0px;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li> |
| − | position:fixed;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li> |
| − | right:0%;
| + | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li> |
| − | text-align:left;
| + | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li> |
| − | width: 15%;
| + | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li> |
| − | }
| + | </ul> |
| − | | + | <ul id="dropdown3" class="dropdown-content"> |
| − | /*controlling menu visibility*/
| + | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li> |
| − | .igem_2019_team_menu.displaying_menu{
| + | <li><a href="/Team:Fudan-TSI/Software">Software</a></li> |
| − | display:block;
| + | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li> |
| − | }
| + | </ul> |
| − | | + | <ul id="dropdown4" class="dropdown-content"> |
| − | /*links in the menu*/
| + | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li> |
| − | .igem_2019_team_menu a {
| + | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li> |
| − | color: #484848;
| + | <li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li> |
| − | text-decoration:none;
| + | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li> |
| − | }
| + | </ul> |
| − | | + | <ul id="dropdown5" class="dropdown-content"> |
| − | /*images in the menu*/
| + | <li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li> |
| − | .igem_2019_team_menu img {
| + | <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li> |
| − | width:100%;
| + | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li> |
| − | }
| + | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li> |
| − | | + | </ul> |
| − | /*level 1 menu items*/
| + | <ul id="dropdown6" class="dropdown-content"> |
| − | .igem_2019_team_menu .menu_item {
| + | <li><a href="/Team:Fudan-TSI/Team">Members</a></li> |
| − | background-color: #cecece;
| + | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li> |
| − | border-bottom: 1px solid #635d5d;
| + | <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li> |
| − | clear: both;
| + | <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li> |
| − | color: #484848;
| + | </ul> |
| − | cursor: pointer;
| + | |
| − | float: left;
| + | |
| − | font-size: 120%;
| + | |
| − | font-weight: bold;
| + | |
| − | padding: 15px 0px 15px 5%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*level 1 menu items without submenus*/
| + | |
| − | .igem_2019_team_menu .menu_item.direct_link {
| + | |
| − | color: #484848;
| + | |
| − | padding-left: 15%;
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | /*level 1 menu items on hover*/
| + | |
| − | .igem_2019_team_menu .menu_item:hover {
| + | |
| − | background-color: #ecb656 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*icon for expanding and collapsing level 1 menut items*/
| + | |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon {
| + | |
| − | color: #484848;
| + | |
| − | float: left;
| + | |
| − | width: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* submenu icon "-"*/
| + | |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon::before {
| + | |
| − | content: "+";
| + | |
| − | }
| + | |
| − | | + | |
| − | /* submenu icon "-"*/
| + | |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
| + | |
| − | content: "-";
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | /*level 2 menu (submenu) wrapper*/
| + | |
| − | .igem_2019_team_menu .submenu{
| + | |
| − | background-color: #ececec;
| + | |
| − | clear:both;
| + | |
| − | display:none;
| + | |
| − | float: left;
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*level 2 menu (submenu) item*/
| + | |
| − | .igem_2019_team_menu .submenu .submenu_item {
| + | |
| − | border-bottom: 1px solid #cecece;
| + | |
| − | color: #635d5d;
| + | |
| − | height: 30px;
| + | |
| − | float: left;
| + | |
| − | font-size: 110%;
| + | |
| − | font-weight: bold;
| + | |
| − | padding: 12px 0px 0px 15%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*level 2 menu (submenu) items on hover*/
| + | |
| − | .igem_2019_team_menu .submenu .submenu_item:hover {
| + | |
| − | background-color: #ecb656 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*color for highlighting current page on the wiki*/
| + | |
| − | .igem_2019_team_menu .submenu .submenu_item.current_page,
| + | |
| − | .igem_2019_team_menu .menu_item.current_page,
| + | |
| − | .igem_2019_team_menu .menu_item.direct_link.current_page {
| + | |
| − | background-color:#a2d3d0;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*mobile menu bar styling*/ | + | |
| − | /**************************************************************************************************************************************************************************************************/ | + | |
| − | | + | |
| − | /*mobile bar that controls the menu*/
| + | |
| − | .igem_2019_team_mobile_bar {
| + | |
| − | background-color:#ececec;
| + | |
| − | border-bottom: 1px solid #cecece;
| + | |
| − | cursor:pointer;
| + | |
| − | display:none;
| + | |
| − | float:left;
| + | |
| − | margin-top: 0;
| + | |
| − | padding: 5px 0;
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*mobile logo*/
| + | |
| − | .igem_logo_mobile {
| + | |
| − | float:left;
| + | |
| − | padding-left: 5%;
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*image within the mobile logo*/
| + | |
| − | .igem_logo_mobile img {
| + | |
| − | width:70px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*mobile expand collapse button*/
| + | |
| − | .igem_menu_control_mobile {
| + | |
| − | float:right;
| + | |
| − | padding-right:5%;
| + | |
| − | padding-top:5px;
| + | |
| − | text-align:right;
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*image for mobile expand collapse button*/
| + | |
| − | .igem_menu_control_mobile img {
| + | |
| − | width:25px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*add extra padding to the menu to improve mobile scrolling*/
| + | |
| − | .menu_padding{
| + | |
| − | float:left;
| + | |
| − | height:100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | /* CONTENT OF THE PAGE */
| + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | | + | |
| − | /* general wrapper for the content */
| + | |
| − | .igem_2019_team_content {
| + | |
| − | background-color:white;
| + | |
| − | display:block;
| + | |
| − | width: 87%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* subwrapper to center content */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper {
| + | |
| − | margin:auto;
| + | |
| − | max-width: 1400px;
| + | |
| − | width:90%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*general styling*/ | + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | | + | |
| − | /*size for title h tags*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
| + | |
| − | | + | |
| − | | + | |
| − | /*titles h1, h2*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
| + | |
| − | border-bottom:0px;
| + | |
| − | color: white;
| + | |
| − | font-family: "Arial Black", Gadget, sans-serif;
| + | |
| − | padding: 10px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*titles h3, h3, h5, h6 */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h3,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h4,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h5,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h6 {
| + | |
| − | border-bottom:0px;
| + | |
| − | color: white;
| + | |
| − | font-family: "Arial Black", Gadget, sans-serif;
| + | |
| − | padding: 5px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* text p tag*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper p {
| + | |
| − | font-size: 130%;
| + | |
| − | font-family: Arial, Helvetica, sans-serif;
| + | |
| − | padding: 5px 0px;
| + | |
| − | text-align: left;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links a tag*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper a {
| + | |
| − | color: #00a19b;
| + | |
| − | font-weight: bold;
| + | |
| − | text-decoration: underline;
| + | |
| − | text-decoration-color:#00a19b;
| + | |
| − | transition: all 0.4s ease;
| + | |
| − | -webkit-transition: all 0.4s ease;
| + | |
| − | -moz-transition: all 0.4s ease;
| + | |
| − | -ms-transition: all 0.4s ease;
| + | |
| − | -o-transition: all 0.4s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* hover for the links */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
| + | |
| − | color: #085156;
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Table tag*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper table {
| + | |
| − | border: 1px solid #635d5d;
| + | |
| − | border-collapse: collapse;
| + | |
| − | font-size: 130%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table cells */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper td {
| + | |
| − | border: 1px solid #cecece;
| + | |
| − | border-collapse: collapse;
| + | |
| − | font-size: 105%;
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table headers */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper th {
| + | |
| − | background-color:#cecece;
| + | |
| − | border: 1px solid #635d5d;
| + | |
| − | border-collapse: collapse;
| + | |
| − | font-size: 110%;
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* non numbered lists */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
| + | |
| − | font-size: 130%;
| + | |
| − | font-family: Arial, Helvetica, sans-serif;
| + | |
| − | padding:0px 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*font sizing within list nesting*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*layout classes*/ | + | |
| − | /**************************************************************************************************************************************************************************************************/ | + | |
| − | | + | |
| − | /*main layout class */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column {
| + | |
| − | float:left;
| + | |
| − | margin: 1% 2%;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* 100% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
| + | |
| − | | + | |
| − | /* 66% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
| + | |
| − | | + | |
| − | /* 33% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*all images*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
| + | |
| − | margin-bottom: 15px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* page break */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .clear {
| + | |
| − | clear:both;
| + | |
| − | }
| + | |
| − | /*add extra space to page break with clear class*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
| + | |
| − | height: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* horizontal line to divide the page*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
| + | |
| − | border-top: 1px solid #cecece;
| + | |
| − | margin: auto;
| + | |
| − | width: 98%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | /*support classes*/ | + | |
| − | /**************************************************************************************************************************************************************************************************/ | + | |
| − | | + | |
| − | | + | |
| − | /*Button */
| + | |
| − | /************************************************/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
| + | |
| − | font-size: 130%;
| + | |
| − | margin: 30px auto;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a {
| + | |
| − | background-color: #00a19bad !important;
| + | |
| − | color: #000 !important;
| + | |
| − | font-weight: bold;
| + | |
| − | margin: auto;
| + | |
| − | text-decoration: none !important;
| + | |
| − | padding: 10px 15px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
| + | |
| − | background-color: #ffb819 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | /*highlight */
| + | |
| − | /************************************************/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
| + | |
| − | padding: 15px 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
| + | |
| − | padding: 5px 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
| + | |
| − | background-color: #ececec;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
| + | |
| − | border-top: 4px solid #00a19bad;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
| + | |
| − | border: 4px solid #00a19bad;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
| + | |
| − | border-top: 4px solid #ffb819
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
| + | |
| − | border: 4px solid #ffb819;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*mobile*/ | + | |
| − | /**************************************************************************************************************************************************************************************************/ | + | |
| − | | + | |
| − | | + | |
| − | /* 1800px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 1800px) {
| + | |
| − | .igem_2019_team_content { width: 85%;}
| + | |
| − | .igem_2019_team_menu {display:block;}
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | /* 1400px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 1400px) {
| + | |
| − | .igem_2019_team_menu .menu_item { font-size:100%;}
| + | |
| − | .igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
| + | |
| − | .igem_2019_team_menu {display:block;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* 1100px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 1100px) {
| + | |
| − | .igem_2019_team_content {width:100%; margin-left:0px;}
| + | |
| − |
| + | |
| − | .igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
| + | |
| − |
| + | |
| − | .igem_2019_team_mobile_bar {display:block;}
| + | |
| − |
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | /* 850px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 850px) {
| + | |
| − | .igem_2019_team_menu {width:40%;}
| + | |
| − | }
| + | |
| − | | + | |
| − | /*500px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 500px) {
| + | |
| − | .igem_2019_team_menu {min-width:100%;width:100%;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /**************************************************************************************************************************************************************************************************/ | + | |
| − | | + | |
| | | | |
| | | | |
| | + | <ul id="slide-out" class="sidenav"> |
| | + | <li style="padding: 0"><div class="sidenavBanner"> |
| | + | <div class="background"></div> |
| | + | <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">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">Kids</a></li> |
| | + | <li class="onThisPageNav"><a href="#section2">Lectures workshop</a></li> |
| | + | <li class="onThisPageNav"><a href="#section3">Board game</a></li> |
| | + | <li class="onThisPageNav"><a href="#section4">General public</a></li> |
| | + | <li class="onThisPageNav"><a href="#section5">Guidebooks</a></li> |
| | | | |
| | + | <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li> |
| | + | </ul><!-- .expandable --> |
| | + | </li> |
| | + | <li><div class="placeHolder"></div></li> |
| | + | </ul> |
| | + | </header> |
| | | | |
| | + | <div id="pageContent"> |
| | + | <div id="contentBanner" class="figureBanner"> |
| | + | <div class="row"> |
| | + | <div class="col s12 hide-on-med-and-up"> |
| | + | <h1><br/>Education & Public Engagement</h1> |
| | + | </div> |
| | + | </div> |
| | + | <div class="hide-on-small-only"> |
| | + | <style> |
| | + | #demo {width:100%;height:100%;position:relative;z-index:-100;} |
| | + | #demo svg {width:100%;height:100%;position:fixed;} |
| | + | #demo svg g {mix-blend-mode:lighten;} |
| | + | #demo svg polygon {stroke:none;fill:white;} |
| | </style> | | </style> |
| | + | <div id="pageCover"> |
| | + | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice"> |
| | + | <defs> |
| | + | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop> |
| | + | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop> |
| | + | </linearGradient> |
| | + | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop> |
| | + | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop> |
| | + | </linearGradient> |
| | + | </defs> |
| | + | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect> |
| | + | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect> |
| | + | </svg> |
| | + | </div><!-- #pageCover --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> |
| | + | <script> |
| | + | ////////////////////////////// |
| | + | // Demo Functions |
| | + | ////////////////////////////// |
| | + | function bkgFunction(showStats) { |
| | + | // stats |
| | + | if (showStats) { |
| | + | var stats = new Stats(); |
| | + | stats.domElement.style.position = 'absolute'; |
| | + | stats.domElement.style.left = '0'; |
| | + | stats.domElement.style.top = '0'; |
| | + | document.body.appendChild(stats.domElement); |
| | + | requestAnimationFrame(function updateStats(){ |
| | + | stats.update(); |
| | + | requestAnimationFrame(updateStats); |
| | + | }); |
| | + | } |
| | + | // init |
| | + | var svg = document.getElementById('demo'); |
| | + | tesselation.setup(svg); |
| | + | gradients.setup(); |
| | + | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000; |
| | + | function playNextTransition() { |
| | + | tesselation.next(transitionDuration); |
| | + | gradients.next(transitionDuration); |
| | + | }; |
| | + | function tick(time) { |
| | + | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) { |
| | + | lastTransitionAt = time; |
| | + | playNextTransition(); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | ////////////////////////////// |
| | + | // Delaunay Triangulation |
| | + | ////////////////////////////// |
| | + | var calcDelaunayTriangulation = (function() { |
| | + | var EPSILON = 1.0 / 1048576.0; |
| | + | function getSuperT(vertices) { |
| | + | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY, |
| | + | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY, |
| | + | i, xDiff, yDiff, maxDiff, xCenter, yCenter; |
| | + | for(i = vertices.length; i--; ) { |
| | + | if(vertices[i][0] < xMin) xMin = vertices[i][0]; |
| | + | if(vertices[i][0] > xMax) xMax = vertices[i][0]; |
| | + | if(vertices[i][1] < yMin) yMin = vertices[i][1]; |
| | + | if(vertices[i][1] > yMax) yMax = vertices[i][1]; |
| | + | } |
| | + | xDiff = xMax - xMin; |
| | + | yDiff = yMax - yMin; |
| | + | maxDiff = Math.max(xDiff, yDiff); |
| | + | xCenter = xMin + xDiff * 0.5; |
| | + | yCenter = yMin + yDiff * 0.5; |
| | + | return [ |
| | + | [xCenter - 20 * maxDiff, yCenter - maxDiff], |
| | + | [xCenter, yCenter + 20 * maxDiff], |
| | + | [xCenter + 20 * maxDiff, yCenter - maxDiff] |
| | + | ]; |
| | + | } |
| | + | function circumcircle(vertices, i, j, k) { |
| | + | var xI = vertices[i][0], yI = vertices[i][1], |
| | + | xJ = vertices[j][0], yJ = vertices[j][1], |
| | + | xK = vertices[k][0], yK = vertices[k][1], |
| | + | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK), |
| | + | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff; |
| | + | // bail condition |
| | + | if(yDiffIJ < EPSILON){ |
| | + | if (yDiffJK < EPSILON){ |
| | + | throw new Error("Can't get circumcircle since all 3 points are y-aligned"); |
| | + | } |
| | + | } |
| | | | |
| | | | |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | // calc circumcircle center x/y, radius |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| + | m1 = -((xJ - xI) / (yJ - yI)); |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | m2 = -((xK - xJ) / (yK - yJ)); |
| − | | + | xMidIJ = (xI + xJ) / 2.0; |
| − | <head>
| + | xMidJK = (xJ + xK) / 2.0; |
| − | | + | yMidIJ = (yI + yJ) / 2.0; |
| − | <!-- This tells the browser that your page is responsive -->
| + | yMidJK = (yJ + yK) / 2.0; |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | xCenter = (yDiffIJ < EPSILON) ? xMidIJ : |
| − |
| + | (yDiffJK < EPSILON) ? xMidJK : |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&action=raw&ctype=text/javascript"></script>
| + | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2); |
| − |
| + | yCenter = (yDiffIJ > yDiffJK) ? |
| − |
| + | m1 * (xCenter - xMidIJ) + yMidIJ : |
| − |
| + | m2 * (xCenter - xMidJK) + yMidJK; |
| − | </head>
| + | xDiff = xJ - xCenter; |
| − | | + | yDiff = yJ - yCenter; |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
| + | // return |
| − | | + | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff}; |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | } |
| − | <!--- Menu --->
| + | function dedupeEdges(edges) { |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | var i, j, a, b, m, n; |
| − |
| + | for(j = edges.length; j; ) { |
| − | | + | b = edges[--j]; a = edges[--j]; |
| − | <style>
| + | for(i = j; i; ) { |
| − |
| + | n = edges[--i]; m = edges[--i]; |
| − | *{margin: 0;padding: 0;list-style: none;}
| + | if(a === m){ |
| − | /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
| + | if (b===n){ |
| − | | + | edges.splice(j, 2); edges.splice(i, 2); |
| − | /** 清除内外边距 **/
| + | break; |
| − | body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
| + | } |
| − | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
| + | } |
| − | pre, /* text formatting elements 文本格式元素 */
| + | if(a === n){ |
| − | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
| + | if (b===m){ |
| − | th, td /* table elements 表格元素 */ {
| + | edges.splice(j, 2); edges.splice(i, 2); |
| − | margin: 0;
| + | break; |
| − | padding: 0;
| + | } |
| − | }
| + | } |
| − | | + | } |
| − | /** 设置默认字体 **/
| + | } |
| − | | + | } |
| − | /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
| + | return function(vertices) { |
| − | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
| + | var n = vertices.length, |
| − | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
| + | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c; |
| − | /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
| + | // bail if too few / too many verts |
| − | | + | if(n < 3 || n > 2000) |
| − | /** 重置列表元素 **/
| + | return []; |
| − | ul, ol { list-style: none; }
| + | // copy verts and sort indices by x-position |
| − | | + | vertices = vertices.slice(0); |
| − | /** 重置文本格式元素 **/
| + | indices = new Array(n); |
| − | a { text-decoration: none; }
| + | for(i = n; i--; ) |
| − | a:hover { text-decoration: underline; }
| + | indices[i] = i; |
| − | | + | indices.sort(function(i, j) { |
| − | | + | return vertices[j][0] - vertices[i][0]; |
| − | /** 重置表单元素 **/
| + | }); |
| − | legend { color: #000; } /* for ie6 */
| + | // supertriangle |
| − | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
| + | st = getSuperT(vertices); |
| − | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
| + | vertices.push(st[0], st[1], st[2]); |
| − | /* 注：optgroup 无法扶正 */
| + | // init candidates/locked tris list |
| − | | + | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)]; |
| − | /** 重置表格元素 **/
| + | locked = []; |
| − | table { border-collapse: collapse; border-spacing: 0; }
| + | edges = []; |
| − |
| + | // scan left to right |
| − | </style>
| + | for(i = indices.length; i--; edges.length = 0) { |
| − | | + | c = indices[i]; |
| − | | + | // check candidates tris against point |
| − | | + | for(j = candidates.length; j--; ) { |
| − | | + | // lock tri if point to right of circumcirc |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content begins --------------------------------------------------------------------------------------------------------------------------------->
| + | dx = vertices[c][0] - candidates[j].x; |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | if (dx > 0.0){ |
| − |
| + | if(dx * dx > candidates[j].r){ |
| − |
| + | locked.push(candidates[j]); |
| − |
| + | candidates.splice(j, 1); |
| − |
| + | continue; |
| − |
| + | } |
| − | <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
| + | } |
| − | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
| + | |
| − |
| + | |
| − |
| + | |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
| + | |
| − |
| + | |
| − | <style>
| + | |
| − |
| + | |
| − | body{
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | background-color:#08273a;
| + | |
| − | overflow-x:hidden;
| + | |
| − | }
| + | |
| − | a{
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | #global_wrapper{
| + | |
| − | width:100%;
| + | |
| − | height:auto;
| + | |
| − | margin:0;
| + | |
| − | position:absolute;
| + | |
| − | }
| + | |
| − | #navUl{
| + | |
| − | width:100%;
| + | |
| − | height:110px;
| + | |
| − | padding:40px 0 0 0;
| + | |
| − | overflow:visible;
| + | |
| − | position:fixed;
| + | |
| − | list-style:none;
| + | |
| − | z-index:999;
| + | |
| − | background-color:#08273a;
| + | |
| − | margin:0;
| + | |
| − | top:0;
| + | |
| − | }
| + | |
| − | #mobileNav{
| + | |
| − | width:100%;
| + | |
| − | height:80px;
| + | |
| − | padding:20px 0 0 0;
| + | |
| − | top:0;
| + | |
| − | background-color:#001d2a;
| + | |
| − | position:fixed;
| + | |
| − | display:none;
| + | |
| − | text-align:center;
| + | |
| − | z-index:999;
| + | |
| − | }
| + | |
| − | #mobileNav img{
| + | |
| − | display:none;
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | }
| + | |
| − | #mobileLogo{
| + | |
| − | display:inline-block;
| + | |
| − | }
| + | |
| − | #mobileControl{
| + | |
| − | float:right;
| + | |
| − | display:inline-block;
| + | |
| − | margin-right:15px;
| + | |
| − | margin-top:3px;
| + | |
| − | }
| + | |
| − | #mobileCtrl{
| + | |
| − | height:25px;
| + | |
| − | }
| + | |
| − | #mobileTeamName{
| + | |
| − | display:inline-block;
| + | |
| − | }
| + | |
| − | #navImg{
| + | |
| − | display:inline-block;
| + | |
| − | float:left;
| + | |
| − | height:70px;
| + | |
| − | width:auto;
| + | |
| − | position:relative;
| + | |
| − | margin-left:4%;
| + | |
| − | margin-top:0;
| + | |
| − | }
| + | |
| − | .logo{
| + | |
| − | height:55px;
| + | |
| − | width:auto;
| + | |
| − | margin-top:1.3%;
| + | |
| − | }
| + | |
| − | .teamname{
| + | |
| − | height:28px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #navBar{
| + | |
| − | float:right;
| + | |
| − | position:relative;
| + | |
| − | width:auto;
| + | |
| − | display:inline-block;
| + | |
| − | margin-right:4%;
| + | |
| − | }
| + | |
| − | .navLi{
| + | |
| − | float:left;
| + | |
| − | display:inline-block;
| + | |
| − | margin-top:3%;
| + | |
| − | color:white;
| + | |
| − | font-size:20px;
| + | |
| − | position:relative;
| + | |
| − | margin-left:18px;
| + | |
| − | text-align:center;
| + | |
| − | font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | .navA{
| + | |
| − | display:block;
| + | |
| − | text-align:center;
| + | |
| − | color:white;
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | .navA2{
| + | |
| − | display:block;
| + | |
| − | overflow:visible;
| + | |
| − | color:white;
| + | |
| − | height:auto;
| + | |
| − | }
| + | |
| − | .ul2{
| + | |
| − | list-style:none;
| + | |
| − | position:absolute;
| + | |
| − | display:none;
| + | |
| − | overflow:hidden;
| + | |
| − | padding:10px 0 0 0 !important;
| + | |
| − | margin:0 !important;
| + | |
| − | font-size:17px;
| + | |
| − | left:50%;
| + | |
| − | transform:translateX(-50%);
| + | |
| − | border-bottom-left-radius: 10px;
| + | |
| − | border-bottom-right-radius: 10px;
| + | |
| − | background:linear-gradient(#08273a,rgba(0,138,201,1));
| + | |
| − | }
| + | |
| − | .li2{
| + | |
| − | padding:0;
| + | |
| − | margin:10px 20px;
| + | |
| − | text-align:center;
| + | |
| − | display:block;
| + | |
| − | }
| + | |
| − | .navA:link,.navA2:link{
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | .navA:visited{
| + | |
| − | color:white;
| + | |
| − | }
| + | |
| − | .navA2:visited,.navA2:active{
| + | |
| − | color:white;
| + | |
| − | }
| + | |
| − | .navA:hover{
| + | |
| − | color:#7dded4;
| + | |
| − | }
| + | |
| − | .navA2:hover{
| + | |
| − | color:#7dded4;
| + | |
| − | }
| + | |
| − | .jqhover{
| + | |
| − | color:#7dded4;
| + | |
| − | }
| + | |
| − | .navA:hover{
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | .navA:active{
| + | |
| − | text-decoration:none;
| + | |
| − | color:white;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | <style>
| + | |
| − |
| + | |
| − | #pageContent{
| + | |
| − | margin:100px 0 0 0;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .row{
| + | |
| − | clear:both!important;
| + | |
| − | width:100%!important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .title1{
| + | |
| − | font-size:2.3rem;
| + | |
| − | text-align:center;
| + | |
| − | color:white;
| + | |
| − | display:block;
| + | |
| − | margin-top:10%;
| + | |
| − | margin-bottom:7%;
| + | |
| − | line-height:110%;
| + | |
| − | }
| + | |
| − | .title2{
| + | |
| − | color:white;
| + | |
| − | text-align:left;
| + | |
| − | font-size:2rem;
| + | |
| − | line-height:130%;
| + | |
| − | display:block;
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | .title3{
| + | |
| − | font-size:1.5rem;
| + | |
| − | color:white;
| + | |
| − | text-align:left !important;
| + | |
| − | display:block;
| + | |
| − | width:100%;
| + | |
| − | line-height:110%;
| + | |
| − | padding-left:2%;
| + | |
| − | }
| + | |
| − | .para1{
| + | |
| − | color:white;
| + | |
| − | text-align:justify !important;
| + | |
| − | align-items:flex-start;
| + | |
| − | line-height:140%;
| + | |
| − | font-size:1.3rem;
| + | |
| − | margin-bottom:50px !important;
| + | |
| − | width:100%;
| + | |
| − | margin:auto 0;
| + | |
| − | }
| + | |
| − | .para1 a{
| + | |
| − | color:white;
| + | |
| − | }
| + | |
| − | .para1 a:visited, .para1 a:active{
| + | |
| − | color:white;
| + | |
| − | }
| + | |
| − | .para1 a:hover{
| + | |
| − | color:rgba(96,255,249,1.00)!important;
| + | |
| − | }
| + | |
| − | .content1{
| + | |
| − | margin:7% auto;
| + | |
| − | }
| + | |
| − | .pic2{
| + | |
| − | width:150%;
| + | |
| − | }
| + | |
| − | .reverseDiv{
| + | |
| − | position:relative !important;
| + | |
| − | float:right !important;
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | .paraUl{
| + | |
| − | list-style-type:decimal !important;
| + | |
| − | list-style-position:outside;
| + | |
| − | padding-left:auto;
| + | |
| − | font-size:1.2rem;
| + | |
| − | }
| + | |
| − | .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;
| + | |
| − | }
| + | |
| − | .paraUl{
| + | |
| − | font-size:1.1rem;
| + | |
| − | }
| + | |
| − | .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:1.1rem;
| + | |
| − | }
| + | |
| − | .paraUl{
| + | |
| − | font-size:1rem;
| + | |
| − | }
| + | |
| − | .pic2{
| + | |
| − | width:80%;
| + | |
| − | }
| + | |
| − | #sponser img {
| + | |
| − | width:60%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #containerWithLeftNav{
| + | |
| − | margin-left:auto;
| + | |
| − | }
| + | |
| − |
| + | |
| − | }
| + | |
| − |
| + | |
| − | </style>
| + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − | | + | |
| − | | + | |
| − | <style>
| + | |
| − | #footContainer{
| + | |
| − | width:90%;
| + | |
| − | }
| + | |
| − | #FudanFooter{
| + | |
| − | margin:auto 0;
| + | |
| − | width:100%;
| + | |
| − | padding:3% 0;
| + | |
| − | }
| + | |
| − | #FudanFooter #usefulLinks {
| + | |
| − | color: #cacaca;
| + | |
| − | padding-left: 1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks ul {
| + | |
| − | font-size: 13px;
| + | |
| − | line-height: 14px;
| + | |
| − | border-top: solid 2px;
| + | |
| − | color: inherit;
| + | |
| − | text-decoration: none;
| + | |
| − | padding-top: 5px;
| + | |
| − | margin:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks div {
| + | |
| − | color: #cacaca;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks div:hover {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks a {
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks a:hover {
| + | |
| − | text-decoration: underline;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks div.active,
| + | |
| − | #FudanFooter #usefulLinks div.active a {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks div.active ul {
| + | |
| − | border-top: solid white 2px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #FudanFooter #usefulLinks li {
| + | |
| − | padding: 3px 0 6px 3px;
| + | |
| − | list-style:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #usefulLinks span {
| + | |
| − | font-size: 20px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | | + | |
| − | #FudanFooter div.footer-copyright {
| + | |
| − | font-size: 13px;
| + | |
| − | line-height: 15px;
| + | |
| − | }
| + | |
| − | .footerUl{
| + | |
| − | margin:2% 4%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <script>
| + | |
| − |
| + | |
| − | $(document).ready(function(){
| + | |
| − |
| + | |
| − |
| + | |
| − | var winWidth=$(window).width();
| + | |
| − |
| + | |
| − | if (winWidth>1100){
| + | |
| − | $(".navA").mouseenter(function(){
| + | |
| − | $(this).parent().find(".ul2").stop().fadeIn(400);
| + | |
| − | });
| + | |
| − | $(".navLi").mouseleave(function(){
| + | |
| − | $(this).find(".ul2").stop().fadeOut(400);
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − | }
| + | |
| − | else{
| + | |
| − | $(".navA:not(.noSubmenu)").removeAttr("href");
| + | |
| − | $("#mobileNav").click(function(){
| + | |
| − | $("#navBar").toggle();
| + | |
| − | });
| + | |
| − | $(document).click(function(event){
| + | |
| − | var m = $("#mobileNav,#navBar");
| + | |
| − | if (!m.is(event.target)){
| + | |
| − | if (m.has(event.target).length===0){
| + | |
| − | $("#navBar").hide();
| + | |
| − | $(".open").parent().find(".navA").css("color","white");
| + | |
| − | $(".open").removeClass("open");
| + | |
| − | }
| + | |
| | | | |
| − | }
| |
| − | });
| |
| − | $(".navLi").click(function(){
| |
| − | if ($(this).find(".n2").hasClass("open")){
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(this).find(".n2").removeClass("open");
| |
| − | }
| |
| − | else{
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(".open").removeClass("open");
| |
| − | $(this).find(".n2").addClass("open");
| |
| − | $(this).find(".navA").css("color","#7dded4");
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="global_wrapper">
| |
| − | <div id="mobileNav">
| |
| − |
| |
| − | <div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
| |
| − | <div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <ul id="navUl">
| |
| − |
| |
| − | <li id="navImg">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
| |
| − |
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | <ul id="navBar">
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Applied_Design" style="white-space:nowrap">Applied Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiments">Experiment</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model">Model</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Hardware">Hardware</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education & <br />Public Engagement</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">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/Attributions">Attribution</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Acknowledgment">Acknowledgement</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Judging">Judging</a></li>
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| | | | |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | // point outside circumcirc = leave candidates |
| − | <!---- Cover ---->
| + | dy = vertices[c][1] - candidates[j].y; |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | if(dx * dx + dy * dy - candidates[j].r > EPSILON) |
| − |
| + | continue; |
| − | <div id="pageCover">
| + | // point inside circumcirc = break apart, save edges |
| − |
| + | edges.push( |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
| + | candidates[j].i, candidates[j].j, |
| − | <script>
| + | candidates[j].j, candidates[j].k, |
| − | $(document).ready(function($){
| + | candidates[j].k, candidates[j].i |
| − | var $root = $('html, body');
| + | ); |
| − | $('a[href^="#"]').click(function() {
| + | candidates.splice(j, 1); |
| − | var href = $.attr(this, 'href');
| + | } |
| − | $root.animate({
| + | // new candidates from broken edges |
| − | scrollTop: $(href).offset().top
| + | dedupeEdges(edges); |
| − | }, 1000, function () {
| + | for(j = edges.length; j; ) { |
| − | window.location.hash = href;
| + | b = edges[--j]; |
| − | });
| + | a = edges[--j]; |
| − | return false;
| + | candidates.push(circumcircle(vertices, a, b, c)); |
| − | });
| + | } |
| − | })
| + | } |
| − | </script>
| + | // close candidates tris, remove tris touching supertri verts |
| − |
| + | for(i = candidates.length; i--; ) |
| − | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
| + | locked.push(candidates[i]); |
| − | <defs>
| + | candidates.length = 0; |
| − | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| + | for(i = locked.length; i--; ) |
| − | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
| + | if(locked[i].i < n){ |
| − | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
| + | if(locked[i].j < n){ |
| − | </linearGradient>
| + | if(locked[i].k < n){ |
| − | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| + | candidates.push(locked[i].i, locked[i].j, locked[i].k); |
| − | <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/9/9c/T--Fudan-TSI--coverDescription.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>
| + | |
| − |
| + | |
| | | | |
| | | | |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | // done |
| − | <!---- Left Navigator ---->
| + | 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); |
| | + | } |
| | + | } |
| | + | } |
| | | | |
| − | <ul class="leftNav" style="margin:0;padding:0;">
| + | var g = createRandomTesselation(); |
| − |
| + | n = g.children.length; |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Kids</a>
| + | for (i = n; i--; ) { |
| − | </li>
| + | 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}); |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Student</a>
| + | } |
| − | <ul class="leftNavUl2">
| + | svg.appendChild(g); |
| − | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_1">Lectures and Workshop</a></li>
| + | prevGroup = g; |
| − | <li class="leftNavLi2"><a class="leftNavA2" href="#mainTitle2_2">Board game</a></li>
| + | } |
| − | </ul>
| + | } |
| − | </li>
| + | })(); |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">General public</a>
| + | ////////////////////////////// |
| − |
| + | // Gradients |
| − | </li>
| + | ////////////////////////////// |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">Guidebook</a></li>
| + | 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> |
| | + | <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover public engagement" src="https://static.igem.org/mediawiki/2019/9/97/T--Fudan-TSI--coverPublicEngagement.gif" /></center></div> |
| | + | </div> |
| | + | </div> |
| | | | |
| | + | <!--//////////////////////////////////////////////////// |
| | + | do not edit above, if must BE CAREFUL |
| | + | //////////////////////////////////////////////////////--> |
| | + | <div class="container"> |
| | + | <!-- side navigator of page content --> |
| | + | <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0"> |
| | + | <li class="onThisPageNav"><a href="#section1">Kids</a></li> |
| | + | <li class="onThisPageNav"><a href="#section2">Lectures workshop</a></li> |
| | + | <li class="onThisPageNav"><a href="#section3">Board game</a></li> |
| | + | <li class="onThisPageNav"><a href="#section4">General public</a></li> |
| | + | <li class="onThisPageNav"><a href="#section5">Guidebooks</a></li> |
| | + | </ul> |
| | + | <!-- main content of the page --> |
| | + | <main><article> |
| | | | |
| | | | |
| − | </ul>
| + | <div id="section1" class="section container scrolSpy"> |
| − |
| + | <p class="flow-text">For Education and public engagement, we mainly focused on how to inspire public interest in synthetic biology targeting different groups of people.</p> |
| − | <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{
| + | <h2>Overview</h2> |
| − | display: block;
| + | <p class="flow-text">As an interdisciplinary branch of biology and engineering, synthetic biology has been widely used in many different areas and is relative to everyone. However, because of the enlarging gap between the public and synthetic biology, which is mainly caused by the public’s misconception and lack of knowledge on the subject, we find it hard to popularize, let alone getting more people involved in it. In this context, we think that iGEM presents to us a great opportunity to try our best to fill the gap and set up a bridge between the public and synthetic biology. To make our human practice work better targeted, we divided the audience into three groups: children, students, and general public. For children, we want to help them to realize the captivation of science and stimulate their interest in biology. For students, we focused on encouraging them to explore and participate in some real work in the field of synthetic biology. For the general public, we considered more about eliminating their misconceptions as well as inspiring them what can be achieved through synthetic biology to make the world a better place. So, to them, we mainly talked about the basic knowledge and concepts of synthetic biology research, and showed them some of the achievements across the years.</p> |
| − | 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>
| + | |
| | | | |
| | + | <h2>Kids – Biology is a fun thing to learn.</h2> |
| | + | <p class="flow-text">What can we do to get children involved in biology? To answer this question, we chose to work with Shanghai Jiuqian volunteer club, a voluntary association in our university devoting to providing long-term education support for migrant children. They showed a great interest in promoting biology. We cooperated with them in purpose of guiding children to excavate the fun of biology through motivating their creation and imagination.</p> |
| | + | <div class="figureHolder"> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/65/T--Fudan-TSI--Education_kids1.gif" /> |
| | + | <p>Communication with volunteers from Shanghai Jiuqian volunteer club.</p> |
| | + | </div> |
| | | | |
| − |
| + | <p class="flow-text">On October 6<sup>th</sup>, members from our team and their association held a public class for children aged nine to fifteen together. To start with, we asked how they think of biology. We found that most of them understand biology as macro-level creatures like animal and plants. Then we introduced to them the basic knowledge of DNA structure and function, and showed them a DNA model which can be taken apart and reassembled. Afterwards, we invited them to build their own DNA model. One of the kids expressed to us that how amazing it is that such a small and simple molecule can play such an important role in maintaining and shaping our lives. We then gave a brief introduction of synthetic biology and held a discussion about what can be achieved by it. To our surprise, the perspectives they have about synthetic biology are so different and innovative that we were also inspired by them. One of them compared synthetic biology to a 3D printer which can create whatever you want by precise design and programming. They also proposed that synthetic biology can be very useful in medical field.</p> |
| − | <div id="pageContent">
| + | <div class="figureHolder"> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Education_kids2.gif" /> |
| − | <!---- Content ---->
| + | <p>Public class for kids.</p> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | </div> |
| − |
| + | |
| − | <div class="container" id="containerWithLeftNav">
| + | |
| − | <div class="row">
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | As an interdisciplinary branch of biology and engineering, synthetic biology has been widely used in many different areas and is relative to everyone. However, because of the enlarging gap between the public and synthetic biology, which is mainly caused by the public’s misconception and lack of knowledge on the subject, we find it hard to popularize, let alone getting more people involved in it. In this context, we think that iGEM presents to us a great opportunity to try our best to fill the gap and set up a bridge between the public and synthetic biology. To make our human practice work better targeted, we divided the audience into three groups: children, students, and general public. For children, we want to help them to realize the captivation of science and stimulate their interest in biology. For students, we focused on encouraging them to explore and participate in some real work in the field of synthetic biology. For the general public, we considered more about eliminating their misconceptions as well as inspiring them what can be achieved through synthetic biology to make the world a better place. So, to them, we mainly talked about the basic knowledge and concepts of synthetic biology research, and showed them some of the achievements across the years.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row title1" id="mainTitle4">
| + | |
| − | <div class="col">Guidebook</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <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 work. That’s how we realized that the conduct of previous teams is a valuable source of inspiration. Although the track they chose may be different, the goal of Human Practice has always been to reach out to more people and make a difference with your project. Thus, we compiled two guidebooks, one on Education and Public engagement, and one on Integrated Human Practice. We shared our guidebook with other teams and asked for their suggestions. In doing so, we hope to offer guidance to future teams on how to carry out Human Practice.
| + | |
| | | | |
| − | </div>
| + | <p class="flow-text">Our team and Jiuqian association both felt that the workshop is a mutually beneficial activity, and decided to establish a long-term collaboration between us.</p> |
| − | </div>
| + | </div> |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | Here we present you our two Guidebooks. For Education and Public Engagement, we mainly focused on how to inspire public interest in synthetic biology targeting different groups of people.
| + | |
| | | | |
| − | </div>
| + | <div id="section2" class="section container scrolSpy"> |
| − | </div>
| + | <h2>Students - Act now to create and innovate</h2> |
| | + | <h4>Lectures and workshop</h4> |
| | + | <p class="flow-text">On June 1<sup>st</sup>, we delivered a lecture to high school students from Jiading No. 2 Middle School. As they are students of high school who already have some basic knowledge in different subjects such as mathematics, chemistry and biology, we believed that we should center our lecture around that synthetic biology is a new interdisciplinary area, and that it involves applying engineering principles to biology. Thus, not only students majoring in biology, but also others who are interested in relevant subjects such as engineering, are welcomed to participate in iGEM. Even if you’re from a less academic background, you could take part in it by conducting the work of human practices. By introducing iGEM to them, we hope to get them involved in next year’s competition.</p> |
| | + | <p class="flow-text">In the lecture, we introduced synthetic biology from the basic concepts to its forefront applications, hoping to present an overview of synthetic biology to our audience. We also shared with them some basic experimental skills and our experience in laboratory. We believed that this could both be of great help in bringing them closer to synthetic biology and revealing how it is actually like to work in a laboratory.</p> |
| | + | <div class="figureHolder"> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/f/f5/T--Fudan-TSI--Education_lecture1.gif" /> |
| | + | <p>Lecture to high school students from Jiading No. 2 Middle School.</p> |
| | + | </div> |
| | | | |
| − | <div class="row" style="width:100%;">
| + | <p class="flow-text">As for students from high schools who showed great enthusiasm in biology, we joined them in a Biology Summer Camp and held a seminar of synthetic biology on July 19<sup>th</sup>. Hosting over 300 students from 30 different high schools around China, the summer camp was a perfect approach for us to get access to students from wider areas. During the camp, we shared our experience of working on synthetic biology and iGEM with them. In order to give them a concrete idea of synthetic biology and our project, our team members shared their first-hand experiences in lab research and iGEM participation. After that, we gave a short presentation of our project, hoping to inspire them to come up with their own innovative ideas. Moreover, we had a more thorough conversation with students who showed specific interest in synthetic biology after the presentation. To our surprise, they brought up some creative ideas and new interpretations of our project.</p> |
| − | | + | <div class=" figureHolder"> |
| − | <embed src="https://static.igem.org/mediawiki/2019/5/59/T--Fudan-TSI--HP--Guidebook.pdf" width="100%" height="600px" type="application/pdf" />
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/2/2e/T--Fudan-TSI--Education_lecture2.gif" /> |
| − | </div>
| + | <p>Seminar in Biology Summer Camp.</p> |
| − | </div>
| + | </div> |
| − |
| + | |
| − | <div class="row title1" id="mainTitle1">
| + | |
| − | <div class="col">Kids– Biology is a fun thing to learn.</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | What can we do to get children involved in biology? To answer this question, we chose to work with Shanghai Jiuqian volunteer club, a voluntary association in our university devoting to providing long-term education support for migrant children. They showed a great interest in promoting biology. We cooperated with them in purpose of guiding children to excavate the fun of biology through motivating their creation and imagination.
| + | |
| | | | |
| − | </div>
| + | <p class="flow-text">We also held a workshop with students from BIOS (Biology Intensive Orientation Summer) summer course. BIOS is a course for students with high interest in biological research and aims to cultivate their lab skills.We believed that the students have already possessed the capability of starting their own work in synthetic biology. What they need is just an idea and some inspiration. On July 30<sup>th</sup>, our team hosted a workshop with students from BIOS to introduce iGEM and our project to them. We also invited them to join in next year's iGEM competition. In the workshop, we delivered a presentation to introduce of the summary and experimental details of our project, through which we hope to excite the formation of new ideas.</p> |
| − | </div>
| + | <div class=" figureHolder"> |
| − | </div>
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/b/ba/T--Fudan-TSI--Education_lecture4.gif" /> |
| − |
| + | <p>Workshop in BIOS.</p> |
| − | <div class="row legend">
| + | </div> |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/6/65/T--Fudan-TSI--Education_kids1.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Communication with volunteers from Shanghai Jiuqian volunteer club</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | On October 6th, members from our team and their association held a public class for children aged nine to fifteen together. To start with, we asked how they think of biology. We found that most of them understand biology as macro-level creatures like animal and plants. Then we introduced to them the basic knowledge of DNA structure and function, and showed them a DNA model which can be taken apart and reassembled. Afterwards, we invited them to build their own DNA model. One of the kids expressed to us that how amazing it is that such a small and simple molecule can play such an important role in maintaining and shaping our lives. We then gave a brief introduction of synthetic biology and held a discussion about what can be achieved by it. To our surprise, the perspectives they have about synthetic biology are so different and innovative that we were also inspired by them. One of them compared synthetic biology to a 3D printer which can create whatever you want by precise design and programming. They also proposed that synthetic biology can be very useful in medical field.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Education_kids2.gif" style="width:85%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Public class for kids</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | Our team and Jiuqian association both felt that the workshop is a mutually beneficial activity, and decided to establish a long-term collaboration between us.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col">
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − |
| + | |
| − | <div class="row title1" id="mainTitle2">
| + | |
| − | <div class="col">Students - Act now to create and innovate.</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row title2" id="mainTitle2_2">
| + | |
| − | <div class="col">Board game</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | It is always easier for people to get involved and learn new things when are playing and enjoying themselves. When considering what can be done to stimulate students’ interest in synthetic biology and make it a fun thing to learn, we thought of board game. When we first set our sights on board games, we were impressed by its slogan: Everything is a board game. Numerous areas can be combined with board games including but not limited to education, careers and life. We regard it a perfect medium to introduce our system design and popularize synthetic biology among students.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | To design a board game which can both be fun and educational, we held a brainstorm and came up with three prototypes. The first one is called Gene Expression War. Every player in this board game is an “E. coli”. Each E. coli will try its best to fully accomplish the travel of genome, and during this process it will utilize the function cards to express various proteins and gain the product cards to help itself to accelerate its journey or block other E. coli. The rules may seem easy to understand, but the overall design lack of scientific rigor and entertainment. We abandoned it after many unsuccessful revisions.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/7/7e/T--Fudan-TSI--Education_brainstorm.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Brainstorm</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | Our second prototype is based on co-culture and expression competition. By randomly drawing cards, players will be able to put different parts on a basic plasmid vector, including improved promoters, origin and various functional genes. Under the limitation of culture medium and the bacteria burden, players will compete with each other. The one who can produce most proteins and energy is the winner. However, this version is so complicated that we are still working on it and we truly hope to finish it in the future.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | And here is our final prototype called Bio Mahjong Cards. It is succinct and quite easy to understand, based on a traditional board game in China: Mahjong. The goal of Mahjong is to collect special melds with different tiles, which is much like using different parts to construct a biological system. For detailed introduction, please visit our Boardgame Page.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/f/ff/T--Fudan-TSI--Education_Boardgame.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Board game card</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/7/76/T--Fudan-TSI--Education_cards.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Board game card</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row" style="width:100%;">
| + | |
| − | <div class="col">
| + | |
| − | <embed src="https://static.igem.org/mediawiki/2019/7/78/T--Fudan-TSI--HP--Bio_Mahjong_Card_Rules.pdf" width="100%" height="600px" type="application/pdf" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row title2" id="mainTitle2_1">
| + | |
| − | <div class="col">Lectures and Workshop</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | On June 1st, we delivered a lecture to high school students from Jiading No. 2 Middle School. As they are students of high school who already have some basic knowledge in different subjects such as mathematics, chemistry and biology, we believed that we should center our lecture around that synthetic biology is a new interdisciplinary area, and that it involves applying engineering principles to biology. Thus, not only students majoring in biology, but also others who are interested in relevant subjects such as engineering, are welcomed to participate in iGEM. Even if you’re from a less academic background, you could take part in it by conducting the work of human practices. By introducing iGEM to them, we hope to get them involved in next year’s competition.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | In the lecture, we introduced synthetic biology from the basic concepts to its forefront applications, hoping to present an overview of synthetic biology to our audience. We also shared with them some basic experimental skills and our experience in laboratory. We believed that this could both be of great help in bringing them closer to synthetic biology and revealing how it is actually like to work in a laboratory.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/f/f5/T--Fudan-TSI--Education_lecture1.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Lecture to high school students from Jiading No. 2 Middle School</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | As for students from high schools who showed great enthusiasm in biology, we joined them in a Biology Summer Camp and held a seminar of synthetic biology on July 19th. Hosting over 300 students from 30 different high schools around China, the summer camp was a perfect approach for us to get access to students from wider areas. During the camp, we shared our experience of working on synthetic biology and iGEM with them. In order to give them a concrete idea of synthetic biology and our project, our team members shared their first-hand experiences in lab research and iGEM participation. After that, we gave a short presentation of our project, hoping to inspire them to come up with their own innovative ideas. Moreover, we had a more thorough conversation with students who showed specific interest in synthetic biology after the presentation. To our surprise, they brought up some creative ideas and new interpretations of our project.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/2/2e/T--Fudan-TSI--Education_lecture2.gif" style="width:85%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Seminar in Biology Summer Camp</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | We also held a workshop with students from BIOS (Biology Intensive Orientation Summer) summer course. BIOS is a course for students with high interest in biological research and aims to cultivate their lab skills.We believed that the students have already possessed the capability of starting their own work in synthetic biology. What they need is just an idea and some inspiration. On July 30th, our team hosted a workshop with students from BIOS to introduce iGEM and our project to them. We also invited them to join in next year's iGEM competition. In the workshop, we delivered a presentation to introduce of the summary and experimental details of our project, through which we hope to excite the formation of new ideas.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/b/ba/T--Fudan-TSI--Education_lecture4.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Workshop in BIOS</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | On August 16th, we invited Prof. Hal Alper to deliver a lecture about his recent research. (We also had a brainstorm session with Prof. Alper, details can be found in our <a href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">Integrated HP</a>.) Dozens of undergraduates from our university attended this lecture, hoping to learn more about synthetic biology as well as system biology. During the session, Prof. Alper talked about his work on bioengineering and directed evolution, which is very inspiring to us.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/a/a5/T--Fudan-TSI--Education_lecture.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Lecture of Prof. Hal Alper</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | Prof. Alper also held a Fireside with other biology-majored students. Fireside session is a tradition of Fudan University, during which the invited professor would share his research experience and answer students’ questions regarding life choice and research.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/b/be/T--Fudan-TSI--Education_fireside.gif" style="width:50%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Fireside with Prof. Alper</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | We found through careful examination that this failure is due to problems with our plasmid construct, so we moved the RT to another tested plasmid, and through SDS-PAGE, verified its successful expression (Fig. 4).
| + | |
| | | | |
| − | </div>
| + | <p class="flow-text">On August 16<sup>th</sup>, we invited Prof. Hal Alper to deliver a lecture about his recent research. (We also had a brainstorm session with Prof. Alper, details can be found in our <a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a>.) Dozens of undergraduates from our university attended this lecture, hoping to learn more about synthetic biology as well as system biology. During the session, Prof. Alper talked about his work on bioengineering and directed evolution, which is very inspiring to us.</p> |
| − | </div>
| + | <p class="flow-text">Prof. Alper also held a fireside discussion with other biology-majored students. Fireside session is a tradition of Fudan University, during which the invited professor would share his research experience and answer students’ questions regarding life choice and research.</p> |
| − |
| + | </div> |
| − |
| + | |
| − |
| + | |
| − | <div class="row title1" id="mainTitle3">
| + | |
| − | <div class="col">General public –Synthetic biology is easier and closer than you think.</div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | Before trying to popularize biology to general public, we carried out a questionnaire survey in order to have a preliminary understanding of the average level of biological knowledge among the general public. In the questionnaire, we first designed questions to collect some basic information of our respondents for further analysis. Then a few questions like ‘Have you ever heard of gene?’ were asked to evaluate the respondents’ level of basic biological knowledge. In the end, we asked some questions about synthetic biology and iGEM. Even though we know that the misconception between public and biological research has existed for a long time, the result showed that their current understanding of biology is even below our expectation. Over 97.85% respondents have heard of gene but most of them learned it from hot topics like GMF (genetically modified food). Only 50.77% are aware of synthetic biology. This indicates that there is still a long way to go for the promotion of synthetic biology and elimination of misunderstandings. The development of biology requires the understanding and acceptance of the public as the fertile soil for its growth, we hope that through our effort, we could contribute to this process.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Fudan-TSI--result_of_the_questionaries.gif" style="width:100%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Result of the questionaries.</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | To start with, we designed a pamphlet of synthetic biology. Our first edition was distributed to student of different majors in our school. We collected their feedback to improve our pamphlet before we distributed to the general public to make it more attractive and easier to understand. Considering that our target audiences lack specialized knowledge, we tried to avoid using professional terms, and made our statement as concise and clear as possible. In order to promote understanding, we also added some examples about how synthetic biology enhanced our daily life in various aspects including food, medicine and fuel. We believed that by reading this pamphlet, people could learn some basic knowledge about synthetic biology in a short time. And we hope this could encourage the public to think further about biology and to get more involved in it.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row legend">
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/9/9d/T--Fudan-TSI--Education_%2B1.jpeg" style="width:70%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--Education_%2B2.jpeg" style="width:70%; margin:auto;">
| + | |
| − | </div>
| + | |
| − | <div class="row legends">
| + | |
| − | <b>Pamphlet of Synthetic Biology</b><br />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row para1">
| + | |
| − | <div class="col col-lg-12">
| + | |
| − | In parallel with popularizing synthetic biology, we also dedicated our effort to shortening the distance between the public and the scientific researchers. The most direct way is to reveal the daily work of the researchers to the public. PCR (Polymerase Chain Reaction) is a basic molecular biology technique and is widely used in biology laboratories. Thus, we chose the demonstration of PCR as a window to show the public how the daily work in laboratory is like. Collaborating with students majoring in journalism, we took two vlogs, one records the main steps of PCR while another is about BioArt and uploaded them to the internet platforms such as Bilibili. By 21st October, our video had been viewed more than 370 times. We hope that through the propagation of simple experiment procedures, the public would be amazed to see that such elaborate demonstrations and such important theories all originate from adding up such ‘simple’ experiments.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| | | | |
| − |
| + | <div id="section3" class="section container scrolSpy"> |
| − | </div>
| + | <h4>Board game</h4> |
| − |
| + | <p class="flow-text">It is always easier for people to get involved and learn new things when are playing and enjoying themselves. When considering what can be done to stimulate students’ interest in synthetic biology and make it a fun thing to learn, we thought of board game. When we first set our sights on board games, we were impressed by its slogan: Everything is a board game. Numerous areas can be combined with board games including but not limited to education, careers and life. We regard it a perfect medium to introduce our system design and popularize synthetic biology among students.</p> |
| − |
| + | <p class="flow-text">To design a board game which can both be fun and educational, we held a brainstorm and came up with three prototypes. The first one is called Gene Expression War. Every player in this board game is an “E. coli”. Each <i>E. coli</i> will try its best to fully accomplish the travel of genome, and during this process it will utilize the function cards to express various proteins and gain the product cards to help itself to accelerate its journey or block other <i>E. coli</i>. The rules may seem easy to understand, but the overall design lack of scientific rigor and entertainment. We abandoned it after many unsuccessful revisions.</p> |
| − |
| + | <div class=" figureHolder"> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | <img class=" responsive-img" src="https://static.igem.org/mediawiki/ 2019/ 7/ 7e/T--Fudan-TSI-- Education_brainstorm. gif" /> |
| − | <!---- Foot ---->
| + | <p>Brainstorm of the board game.</p> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| + | </div> |
| − |
| + | |
| − | <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>
| + | |
| − | | + | |
| − | <img class="img -fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/ 2018/ e/ e2/T-- Fudan--yunfengLogo.png" /> | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="row">
| + | |
| − | <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="col-md-8" id="usefulLinks">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col-lg-6" style="padding:0;">
| + | |
| − | <div class="row">
| + | |
| − |
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="footerUl align-items-center active">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="footerUl align-items-center">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="footerUl align-items-center">
| + | |
| − | <span style="text-decoration:none;">Model</span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col-lg-6" style="padding:0;">
| + | |
| − | <div class="row">
| + | |
| − |
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="footerUl align-items-center">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="footerUl align-items-center">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Public_Engagement">Education & 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">© 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>
| + | <p class="flow-text">Our second prototype is based on co-culture and expression competition. By randomly drawing cards, players will be able to put different parts on a basic plasmid vector, including improved promoters, origin and various functional genes. Under the limitation of culture medium and the bacteria burden, players will compete with each other. The one who can produce most proteins and energy is the winner. However, this version is so complicated that we are still working on it and we truly hope to finish it in the future.</p> |
| | + | <div class="figureHolder"> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/f/ff/T--Fudan-TSI--Education_Boardgame.gif" /> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/7/76/T--Fudan-TSI--Education_cards.gif" /> |
| | + | <p>Board game: Bio Mahjong Cards.</p> |
| | + | </div> |
| | | | |
| − |
| + | <p class="flow-text">Below is the manual to our final prototype called <a href="#">Bio Mahjong Cards</a>. It is succinct and quite easy to understand, based on a traditional board game in China: Mahjong. The goal of Mahjong is to collect special melds with different tiles, which is much like using different parts to construct a biological system.</p> |
| − |
| + | <embed src="https://static.igem.org/mediawiki/2019/7/78/T--Fudan-TSI--HP--Bio_Mahjong_Card_Rules.pdf" width="100%" height="600px" type="application/pdf" /> |
| − | <script>
| + | <p>Here is <a target="_blank" href="https://static.igem.org/mediawiki/2019/7/78/T--Fudan-TSI--HP--Bio_Mahjong_Card_Rules.pdf">the link</a> to download the file above.</p> |
| − |
| + | </div> |
| − | 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(){
| + | <div id="section4" class="section container scrolSpy"> |
| − | var winHeight=$(window).height();
| + | <h2>General public – Synthetic biology is easier and closer than you think.</h2> |
| − | var winWidth=$(window).width();
| + | <p class="flow-text">Before trying to popularize biology to general public, we carried out a questionnaire survey in order to have a preliminary understanding of the average level of biological knowledge among the general public. In the questionnaire, we first designed questions to collect some basic information of our respondents for further analysis. Then a few questions like ‘Have you ever heard of gene?’ were asked to evaluate the respondents’ level of basic biological knowledge. In the end, we asked some questions about synthetic biology and iGEM.</p> |
| − | var leftNavFromTop=pagePosition-$(window).scrollTop();
| + | <div class="figureHolder"> |
| − | var topDistance=$(window).scrollTop()+0.25*winHeight;
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/5/5d/T--Fudan-TSI--result_of_the_questionaries.gif" /> |
| − | if (leftNavFromTop<0.25*winHeight){
| + | <p>Result of the questionaries.</p> |
| − | if(topDistance<maxTopDistance){
| + | </div> |
| − | $(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
| + | <p class="flow-text">Even though we know that the misconception between public and biological research has existed for a long time, the result showed that their current understanding of biology is even below our expectation. Over 97.85% respondents have heard of gene but most of them learned it from hot topics like GMF (genetically modified food). Only 50.77% are aware of synthetic biology. This indicates that there is still a long way to go for the promotion of synthetic biology and elimination of misunderstandings. The development of biology requires the understanding and acceptance of the public as the fertile soil for its growth, we hope that through our effort, we could contribute to this process.</p> |
| − | }
| + | |
| − | 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;
| + | |
| − | });
| + | |
| | | | |
| | + | <h4>Pamphlet of synthetic biology</h4> |
| | + | <p class="flow-text">To start with, we designed a pamphlet of synthetic biology. Our first edition was distributed to student of different majors in our school. We collected their feedback to improve our pamphlet before we distributed to the general public to make it more attractive and easier to understand. Considering that our target audiences lack specialized knowledge, we tried to avoid using professional terms, and made our statement as concise and clear as possible. In order to promote understanding, we also added some examples about how synthetic biology enhanced our daily life in various aspects including food, medicine and fuel. We believed that by reading this pamphlet, people could learn some basic knowledge about synthetic biology in a short time. And we hope this could encourage the public to think further about biology and to get more involved in it.</p> |
| | + | <div class="figureHolder"> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/c/c1/T--Fudan-TSI--Education_pamphlet.gif" /> |
| | + | </div> |
| | | | |
| − | $(window).scroll(function(){
| + | <p class="flow-text">In parallel with popularizing synthetic biology, we also dedicated our effort to shortening the distance between the public and the scientific researchers. The most direct way is to reveal the daily work of the researchers to the public. PCR (Polymerase Chain Reaction) is a basic molecular biology technique and is widely used in biology laboratories. Thus, we chose the demonstration of PCR as a window to show the public how the daily work in laboratory is like. Collaborating with students majoring in journalism, we took two vlogs, one <a href="https://static.igem.org/mediawiki/2019/9/9b/T--Fudan-TSI--Video--PCR.mp4" target="_blank">records the main steps of PCR</a> while another is <a href="https://static.igem.org/mediawiki/2019/d/db/T--Fudan-TSI--Video--E._coli.mp4" target="_blank">about BioArt</a> and uploaded them to <a href="https://www.bilibili.com/video/av70138778/" target="_blank">an internet platform - Bilibili</a>. <!--By /date/, our video had been viewed more than /number/ times. -->We hope that through the propagation of simple experimental procedures, the public would be amazed to see that such elaborate demonstrations and such important theories all originate from adding up such ‘simple’ experiments.</p> |
| − |
| + | </div> |
| − | 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="section5" class="section container scrolSpy"> |
| | + | <h2>Guidebooks</h2> |
| | + | <p class="flow-text">At the beginning of our project, we found that we had no clue about how to start our Human Practice work. That’s how we realized that the conduct of previous teams is a valuable source of inspiration. Although the track they chose may be different, the goal of Human Practice has always been to reach out to more people and make a difference with your project.</p> |
| | + | <p class="flow-text">Thus, we compiled a guidebook, including <a href="#">Education and Public Engagement</a>, and <a href="#">Integrated Human Practice</a>. We shared our guidebook with other teams and asked for their suggestions. In doing so, we hope to offer guidance to future teams on how to carry out Human Practice.</p> |
| | + | </div> |
| | | | |
| − |
| + | <div class="section container"> |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&action=raw&ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
| + | <embed src="https://static.igem.org/mediawiki/2019/5/59/T--Fudan-TSI--HP--Guidebook.pdf" width="100%" height="600px" type="application/pdf" /> |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&action=raw&ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
| + | <p>Here is <a target="_blank" href="https://static.igem.org/mediawiki/2019/5/59/T--Fudan-TSI--HP--Guidebook.pdf">the link</a> to download the file above.</p> |
| − |
| + | </div> |
| | | | |
| | | | |
| − |
| + | <!--//////////////////////////////////////////////////// |
| − |
| + | do not edit below, if must BE CAREFUL |
| − |
| + | //////////////////////////////////////////////////////--> |
| − |
| + | </article></main></div><!-- end of side navigator and main of the page --> |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| | | | |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content ends ---------------------------------------------------------------------------------------------------------------------------------> | + | <!-- Floating Btns, Footer with sponsors --> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">Project</a></span><ul><li><a href="/Team:Fudan-TSI/Description">Background</a></li><li><a href="/Team:Fudan-TSI/Design">Design</a></li><li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Model">Model</a></span><ul><li><a href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a href="/Team:Fudan-TSI/Software">Software</a></li><li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></div><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span><ul><li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">Team</a></span><ul><li><a href="/Team:Fudan-TSI/Team">Members</a></li><li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4"> </div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai</div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727</div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn</div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer> |
| | + | </div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper --> |
| | | | |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script> |
| | + | </body> |
| | </html> | | </html> |
