Difference between revisions of "Team:Fudan/Bio-Art"

m
 
(24 intermediate revisions by 4 users not shown)
Line 5: Line 5:
 
We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2.
 
We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2.
 
-->
 
-->
 +
<!-- LC check on 2018-10-18 -->
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
Line 12: Line 13:
  
 
     <!-- Font-awesome icons 4.7.0 -->
 
     <!-- Font-awesome icons 4.7.0 -->
     <link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan/font-awesome.css&action=raw&ctype=text/css" rel="stylesheet">
+
     <link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan/font-awesome.css&action=raw&ctype=text/css" rel="stylesheet" />
  
 
     <!-- Materialize 1.0.0-rc.2 (Material Design like) -->
 
     <!-- Materialize 1.0.0-rc.2 (Material Design like) -->
Line 18: Line 19:
  
 
     <!-- Clear default CSS settings; CSS reset -->
 
     <!-- Clear default CSS settings; CSS reset -->
     <style type="text/css">
+
     <style>
 
         *{margin: 0;padding: 0;list-style: none;}
 
         *{margin: 0;padding: 0;list-style: none;}
 
         /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
 
         /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
Line 55: Line 56:
 
         /** 重置表格元素 **/
 
         /** 重置表格元素 **/
 
         table { border-collapse: collapse; border-spacing: 0; }
 
         table { border-collapse: collapse; border-spacing: 0; }
       
+
 
 
         #artwork{
 
         #artwork{
           
 
        }
 
  
 +
        }
 +
        #FudanBody .section .figureHolder p{
 +
color:rgba(0,0,0,0.6);
 +
font-size:15px;
 +
}
 
     </style>
 
     </style>
 +
    <title>2018 iGEM Team:Fudan - Bio-Art</title>
 
</head>
 
</head>
  
Line 66: Line 71:
 
<!-- Fudan div at igem.org -->
 
<!-- Fudan div at igem.org -->
 
<div id="FudanWrapper" class="white">
 
<div id="FudanWrapper" class="white">
     <div id="FudanBody" class="white">
+
     <div id="FudanBody" class="white orangeBg">
 
         <header>
 
         <header>
 
             <!-- empty bar -->
 
             <!-- empty bar -->
Line 75: Line 80:
 
                 <div class="nav-wrapper">
 
                 <div class="nav-wrapper">
 
                     <div id="teamLogo" class="brand-logo">
 
                     <div id="teamLogo" class="brand-logo">
                         <a href="https://2018.igem.org/Team:Fudan" target="_self"><img src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--teamLogo.svg"></a>
+
                         <a href="https://2018.igem.org/Team:Fudan" target="_self"><img alt="2018 team Fudan logo" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--teamLogo.svg"></a>
 
                     </div>
 
                     </div>
 
                     <ul id="nav-mobile" class="right orangeBorder">
 
                     <ul id="nav-mobile" class="right orangeBorder">
Line 95: Line 100:
 
             <!-- Dropdown and List elements in navigation bar -->
 
             <!-- Dropdown and List elements in navigation bar -->
 
             <ul id="dropdown1" class="dropdown-content">
 
             <ul id="dropdown1" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/Demonstrate">Demonstration</a></li>
+
                 <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Background">Research background</a></li>
+
                 <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Results">Transmembrane logic</a></li>
+
                 <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li>
 
             </ul>
 
             </ul>
 
             <ul id="dropdown2" class="dropdown-content">
 
             <ul id="dropdown2" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_ribo">Addon: <sub>ENABLE</sub><sup>ribo</sup></a></li>
+
                 <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_TALE">Addon: <sub>ENABLE</sub><sup>TALE</sup></a></li>
+
                 <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_T2">Addon: <sub>ENABLE</sub><sup>T2</sup></a></li>
+
                 <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
+
                 <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Model#War_Predictor">Model: war&nbsp;predictor</a></li>
+
                 <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand&nbsp;kinetics</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Software">Software</a></li>
+
                 <li><a href="/Team:Fudan/Software">Software</a></li>
 
             </ul>
 
             </ul>
 
             <ul id="dropdown3" class="dropdown-content">
 
             <ul id="dropdown3" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/InterLab">iGEM interLab</a></li>
+
                 <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Notebook">Our notebook</a></li>
+
                 <li><a href="/Team:Fudan/Notebook">Our notebook</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Primers">Primers used</a></li>
+
                 <li><a href="/Team:Fudan/Primers">Primers used</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Protocols">Protocols</a></li>
+
                 <li><a href="/Team:Fudan/Protocols">Protocols</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Safety">Safety</a></li>
+
                 <li><a href="/Team:Fudan/Safety">Safety</a></li>
 
             </ul>
 
             </ul>
 
             <ul id="dropdown4" class="dropdown-content">
 
             <ul id="dropdown4" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/Basic_Parts">Basic parts</a></li>
+
                 <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Composite_Parts">Composite parts</a></li>
+
                 <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Optimization">Optimization</a></li>
+
                 <li><a href="/Team:Fudan/Optimization">Optimization</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Parts_Collection">Parts collection</a></li>
+
                 <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Improve">Parts improvement</a></li>
+
                 <li><a href="/Team:Fudan/Improve">Parts improvement</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Measurement">Quantification</a></li>
+
                 <li><a href="/Team:Fudan/Measurement">Quantification</a></li>
 
             </ul>
 
             </ul>
 
             <ul id="dropdown5" class="dropdown-content">
 
             <ul id="dropdown5" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/Bio-Art">Bio-Art display</a></li>
+
                 <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Collaborations">Collaborations</a></li>
+
                 <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Design_Intention">Design intention</a></li>
+
                 <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Human_Practices">Human practices</a></li>
+
                 <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Public_Engagement">Public engagement</a></li>
+
                 <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li>
 
             </ul>
 
             </ul>
 
             <ul id="dropdown6" class="dropdown-content">
 
             <ul id="dropdown6" class="dropdown-content">
                 <li><a href="https://2018.igem.org/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
+
                 <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Attributions">Attributions</a></li>
+
                 <li><a href="/Team:Fudan/Attributions">Attributions</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Heritage">Heritage</a></li>
+
                 <li><a href="/Team:Fudan/Heritage">Heritage</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Team">Members</a></li>
+
                 <li><a href="/Team:Fudan/Team">Members</a></li>
                 <li><a href="https://2018.igem.org/Team:Fudan/Sponsors">Sponsors</a></li>
+
                 <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li>
 
             </ul>
 
             </ul>
  
Line 140: Line 145:
 
             <ul id="slide-out" class="sidenav">
 
             <ul id="slide-out" class="sidenav">
 
                 <li style="padding: 0"><div class="sidenavBanner">
 
                 <li style="padding: 0"><div class="sidenavBanner">
                     <div class="background OrangeBg">
+
                     <div class="background orangeBg">
 
                     </div>
 
                     </div>
 
                     <p style="width: 100%;text-align: center;font-size: 24px"><span class="white-text">Bio-Art display</span></p>
 
                     <p style="width: 100%;text-align: center;font-size: 24px"><span class="white-text">Bio-Art display</span></p>
Line 156: Line 161:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Demonstrate">Demonstration</a></li>
+
                                     <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li>
                                    <li><a href="https://2018.igem.org/Team:Fudan/Background">Research background</a></li>
+
                <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Results">Transmembrane logic</a></li>
+
                                     <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 166: Line 171:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                    <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_ribo">Addon: <sub>ENABLE</sub><sup>ribo</sup></a></li>
+
                                  <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li>
                                    <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_TALE">Addon: <sub>ENABLE</sub><sup>TALE</sup></a></li>
+
                <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li>
                                    <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_T2">Addon: <sub>ENABLE</sub><sup>T2</sup></a></li>
+
                <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
+
                                     <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Model#War_Predictor">Model: war&nbsp;predictor</a></li>
+
                                     <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand&nbsp;kinetics</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Software">Software</a></li>
+
                                     <li><a href="/Team:Fudan/Software">Software</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 179: Line 184:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                     <li><a href="https://2018.igem.org/Team:Fudan/InterLab">iGEM interLab</a></li>
+
                                     <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Notebook">Our notebook</a></li>
+
                                     <li><a href="/Team:Fudan/Notebook">Our notebook</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Primers">Primers used</a></li>
+
                                     <li><a href="/Team:Fudan/Primers">Primers used</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Protocols">Protocols</a></li>
+
                                     <li><a href="/Team:Fudan/Protocols">Protocols</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Safety">Safety</a></li>
+
                                     <li><a href="/Team:Fudan/Safety">Safety</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 191: Line 196:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Basic_Parts">Basic parts</a></li>
+
                                     <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Composite_Parts">Composite parts</a></li>
+
                                     <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Optimization">Optimization</a></li>
+
                                     <li><a href="/Team:Fudan/Optimization">Optimization</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Parts_Collection">Parts collection</a></li>
+
                                     <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Improve">Parts improvement</a></li>
+
                                     <li><a href="/Team:Fudan/Improve">Parts improvement</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Measurement">Quantification</a></li>
+
                                     <li><a href="/Team:Fudan/Measurement">Quantification</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 204: Line 209:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Bio-Art">Bio-Art display</a></li>
+
                                     <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Collaborations">Collaborations</a></li>
+
                                     <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Design_Intention">Design intention</a></li>
+
                                     <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Human_Practices">Human practices</a></li>
+
                                     <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Public_Engagement">Public engagement</a></li>
+
                                     <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 216: Line 221:
 
                             <div class="collapsible-body">
 
                             <div class="collapsible-body">
 
                                 <ul>
 
                                 <ul>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
+
                                     <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Attributions">Attributions</a></li>
+
                                     <li><a href="/Team:Fudan/Attributions">Attributions</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Heritage">Heritage</a></li>
+
                                     <li><a href="/Team:Fudan/Heritage">Heritage</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Team">Members</a></li>
+
                                     <li><a href="/Team:Fudan/Team">Members</a></li>
                                     <li><a href="https://2018.igem.org/Team:Fudan/Sponsors">Sponsors</a></li>
+
                                     <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </div>
 
                             </div>
Line 248: Line 253:
 
                 </div>
 
                 </div>
 
                 <div class="hide-on-small-only">
 
                 <div class="hide-on-small-only">
                     <img src="https://static.igem.org/mediawiki/2018/d/d6/T--Fudan--public-section1-1.png">
+
                     <img style="position:relative;top:-15%;" src="https://static.igem.org/mediawiki/2018/e/ed/T--Fudan--A_title.jpg">
 
                     <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
 
                     <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
 
                         <defs>
 
                         <defs>
Line 283: Line 288:
 
                     <li class="onThisPageNav"><a href="#section3">Details & Feedbacks</a></li>
 
                     <li class="onThisPageNav"><a href="#section3">Details & Feedbacks</a></li>
 
                     <li class="onThisPageNav"><a href="#section4">Photo Gallery</a></li>
 
                     <li class="onThisPageNav"><a href="#section4">Photo Gallery</a></li>
                     <li><a href="https://2018.igem.org/Team:Fudan/Collaborations">Collaborations</a></li>
+
                     <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li>
                     <li><a href="https://2018.igem.org/Team:Fudan/Design_Intention">Design intention</a></li>
+
                     <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li>
                     <li><a href="https://2018.igem.org/Team:Fudan/Human_Practices">Human practices</a></li>
+
                     <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li>
                     <li><a href="https://2018.igem.org/Team:Fudan/Public_Engagement">Public engagement</a></li>
+
                     <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li>
 
                 </ul>
 
                 </ul>
 
                 <main>
 
                 <main>
                     <div id="section1" class="section container scrollspy">
+
                     <div id="section1" class="section container scrolSpy">
 
                         <h2>Introduction</h2>
 
                         <h2>Introduction</h2>
 
                         <p>
 
                         <p>
                             As art is a universal language, we decided to connect our logic gates and biology with art to convey our project to everyone regardless of their previous knowledge and background.
+
                             As <b>art</b> is a universal language, we decided to connect our logic gates and biology with art to convey our project to everyone regardless of their previous knowledge and background.
 
                         </p>
 
                         </p>
                         <p>However, how should we introduce concepts in synthetic biology clearly and attractively? Since most people consider experiments and logic gates as too complicated, we decided to include hands-on interactive art activities in our human practice (HP) to allow the audience to appreciate the creative merging of art and science. We hope to encourage them to understand what is synthetic biology by using art as a novel way of thinking and comprehending. This is undoubtedly something that few have tried before in iGEM!
+
                         <p>However, how should we introduce concepts in synthetic biology <b>clearly and attractively</b>? Since most people consider experiments and logic gates as too complicated, we decided to include <b>hands-on interactive art activities</b> in our human practice (HP) to allow the audience to appreciate the creative merging of art and science. We hope to encourage them to understand what is synthetic biology by using art as a novel way of thinking and comprehending. This is undoubtedly something that few have tried before in iGEM!
 
                         </p>
 
                         </p>
 
                         <div class="figureHolder">
 
                         <div class="figureHolder">
                             <p>
+
                             <p style="text-indent:0">
 
                                 <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Fudan--a1.jpg">
 
                                 <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Fudan--a1.jpg">
                                 Our event invites viewers to join us and experience some of the daily activities in the lab. That is why we use the word "display" to emphasize this event.
+
                                 Our event invites viewers to <b>join us and experience</b> some of the daily activities in the lab.<br/> That is why we use the word "display" to emphasize this event.
 
                             </p>
 
                             </p>
 
                         </div>
 
                         </div>
 
                         <p>
 
                         <p>
                             Our event name is "CELL•LEGO•LOGIC" Bio-Art Display. We tried to use LEGO to indicate the core concept of synthetic biology as "CELL" and "LOGIC" are the two main parts of our project. For the "Display", its prefix "dis-" means "negative", and "play(-plic-)" means "fold". Thus, when the two meanings are combined together, it highlights our purpose "to unfold".
+
                             Our event name is <b>"CELL•LEGO•LOGIC" Bio-Art Display</b>. We tried to use LEGO to indicate the core concept of synthetic biology as "CELL" and "LOGIC" are the two main parts of our project. For the word "Display", its prefix "dis-" means "negative", and "play(-plic-)" means "fold". Thus, when the two meanings are combined together, it highlights our purpose "to unfold".
 
                         </p>
 
                         </p>
 
                         <div class="figureHolder">
 
                         <div class="figureHolder">
                             <p>
+
                             <p style="text-indent:0">
 
                                 <img src="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan--a2.jpg">
 
                                 <img src="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan--a2.jpg">
 
                                 The Display name is "CELL•LEGO•LOGIC".
 
                                 The Display name is "CELL•LEGO•LOGIC".
Line 312: Line 317:
 
                         </div>
 
                         </div>
 
                         <p>
 
                         <p>
                             Different from previous HP projects, our Display is planned to be as transparent as possible, which means that we not only mention the advantages of synthetic biology but more importantly also the problems behind it. In the Display, we include topics still under debate, like "genetically modified food", "artificial tissue" and so on, hoping to make people realize all the effects of synthetic biology comprehensively upon society.
+
                             Different from previous HP projects, our Display is planned to be as <b>transparent</b> as possible, which means that we not only mention the advantages of synthetic biology but more importantly <b>also the problems</b> behind it. In the Display, we include topics still under debate, like <b>"genetically modified food"</b>, <b>"artificial tissue"</b> and so on, hoping to make people realize all the effects of synthetic biology upon society comprehensively.
 
                         </p>
 
                         </p>
 
                         <div class="figureHolder">
 
                         <div class="figureHolder">
                             <p>
+
                             <p style="text-indent:0">
 
                                 <img src="https://static.igem.org/mediawiki/2018/b/b3/T--Fudan--a3.jpg">
 
                                 <img src="https://static.igem.org/mediawiki/2018/b/b3/T--Fudan--a3.jpg">
 
                                 "A coin always has two sides."
 
                                 "A coin always has two sides."
Line 324: Line 329:
  
  
                     <div id="section2" class="section container scrollspy">
+
                     <div id="section2" class="section container scrolSpy">
 
                         <h2>Content</h2>
 
                         <h2>Content</h2>
 
                         <ul>
 
                         <ul>
Line 338: Line 343:
 
                         <p>
 
                         <p>
 
                             <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/f/f1/T--Fudan--a4.jpg">
 
                             <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/f/f1/T--Fudan--a4.jpg">
                             The first part of our Display includes an introduction to synthetic biology. However, as the factual details of science may be too complicated to understand fully for non-specialists, we tried to provide them with an approach more familiar for them. Easy to say, nothing could be more familiar than LEGO pieces. LEGO and synthetic biology are both unique in the way that both can use standardized fundamental building blocks to build something amazing and entirely new; the only thing you need is your determination, imagination, and a pair of skillful hands! Thus, aside from helping people better understand what is synthetic biology, more importantly, we wanted to impart them with this spirit of the invention and the thrill of building something up from scratch and basic parts. As can be seen in the photos below, the visitors greatly enjoyed this activity and didn’t fail to amaze us with many beautiful creations!
+
                             What is the link between LEGO and synthetic biology? LEGO and synthetic biology are both special in that both are able to use standardized fundamental building blocks to build something amazing and completely new; the only thing you need is your determination, imagination, and a pair of skillful hands! As a result, the first section of our display focuses on using LEGOs to explain synthetic biology. But aside from helping people better understand what is synthetic biology, more importantly we want to <b>impart them with this spirit of invention and the thrill of building something up from scratch and basic parts</b>. As can be seen in the photos below, the visitors greatly enjoyed this activity and didn't fail to amaze us with many wonderful creations!
 
                         </p>
 
                         </p>
                         <p>
+
                         <p style="text-indent:0">
 
                             <img src="https://static.igem.org/mediawiki/2018/1/19/T--Fudan--a5.jpg">
 
                             <img src="https://static.igem.org/mediawiki/2018/1/19/T--Fudan--a5.jpg">
 
                         </p>
 
                         </p>
Line 346: Line 351:
 
                         <p>
 
                         <p>
 
                             <img class="width30 left-on-med-and-up" src="https://static.igem.org/mediawiki/2018/f/f4/T--Fudan--a6.jpg">
 
                             <img class="width30 left-on-med-and-up" src="https://static.igem.org/mediawiki/2018/f/f4/T--Fudan--a6.jpg">
                             Logic gates are an integral part of our project. Previously in our HP events and in our attempts at trying to explain our project to other people, logic gates have constantly been a difficult part of our project as the audience has constantly struggled to grasp the logic or mechanism behind it. Reflecting upon this problem, we found out a fundamental flaw: we never provided the chance for the audience to personally construct and learn hands-on what a logic gate is. Teaching people the theory of logic gates is important, but letting them personally physically analyze and construct a sample logic gate is even more critical and effective. Thus, what could be better than to return to the root of logic functions to describe it using actual constructible electrical wire circuits and light bulbs. This visual experiment can finally grant the audience a long needed physical representation of the originally very theoretically complex logic gates. We provided common electrical circuits, electrical boards and light bulbs for the visitors to learn the signal input and output. The visitors could also to assemble gates such as AND-gates, OR-gates, etc. Therefore, with this setup, the visitors efficiently learned the basic principles of logic gates and were even able to form several fundamental logic gates themselves, greatly enhancing their interest and level of understanding. This is also a strong representation of our constant desire to improve every part of our project and our focus on promoting human interaction and involvement in at each step in our project using innovative and interesting methods.
+
                             During our previous HP events and in our attempts at trying to convey our project to other people, logic gates have always been a <b>difficult part</b> for the audience to understand as they always struggled to grasp the logic or mechanism behind it. Reflecting upon this problem, we found out a <b>fundamental flaw</b>: we never provided the chance for the audience to personally construct and learn hands-on what a logic gate is. Teaching people the abstract theory of logic gates is important, but letting them physically analyze and construct a sample logic gate in person is even more critical and effective. Thus, what could be better than to return to the root of logic functions, and describe it using actual constructible electrical wire circuits, electrical boards, and lightbulbs! This visual experiment would finally grant the audience a long needed physical representation of the originally quite theoretically complex logic gates. Therefore, with this set up, the visitors efficiently learned the basic principles of logic gates, including how the input signals are relayed, how the outputs are produced, and different combinations that are possible for this process to happen. Some were even able to form several other fundamental logic gates themselves. This activity not only greatly enhanced their interest and level of understanding but also served as a strong representation of our constant desire to improve every part of our project and our focus on promoting human interaction and involvement at each step in our project using innovative and interesting methods.
 
                         </p>
 
                         </p>
                         <p>
+
                         <p style="text-indent:0">
 
                             <img src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan--a7.jpg">
 
                             <img src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan--a7.jpg">
 
                         </p>
 
                         </p>
Line 354: Line 359:
 
                         <p>
 
                         <p>
 
                             <img class="right-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--a8.jpg">
 
                             <img class="right-on-med-and-up width45" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--a8.jpg">
                             Up to now, the audience would have already learned what is synthetic biology and what is logic gates. We hope to make people realize biology through a novel and more creative approach, by connecting art and synthetic biology, we empower the audience to portray their thoughts and views about our project and synthetic biology artistically by presenting them vividly on paper cards. This drawing activity not only stimulates them to process the information they receive into corresponding logical images in their heads first, but they are also able to add in their own authenticity and imaginations into these corresponding images to produce a work of art that symbolizes their passion and fascination of what synthetic biology is and what it can be. For instance, after we explained to them the concept of logic gates, they had the opportunity to draw their own logic gates on paper. With this single theme alone, we have already collected a multitude of great works that although all link to the general topic, but portray it in concepts and styles that are so diverse and unique that it is just amazing. We hope that this art activity can also make people realize the uniqueness, independence, and creativity that is similarly reflected in synthetic biology research.
+
                             As part of our goal to make people understand biology through a novel and more creative approach, we decided to connect art and synthetic biology by letting the audience to portray their thoughts and views about our project and synthetic biology artistically by <b>presenting them vividly on sheets of paper</b>. This drawing activity not only stimulates them to process the information they receive into logical corresponding images, but also enables them to add in their own authenticity and imaginations into these images. In this way, we were able to collect works of art that symbolizes their passion and fascination of what synthetic biology is and what it can be. For instance, after we explained to them the concept of logic gates, they were given the choice of drawing their own logic gates on paper. With this single theme alone, we have already collected a multitude of great works. Although they all link to the general theme, but are portrayed in concepts and styles that are so diverse and unique. We hope that this art activity can also make people realize the uniqueness, independence, and creativity that is similarly reflected in synthetic biology research.
 
                         </p>
 
                         </p>
                         <div class="row">
+
                         <div style="margin-top:30px;" class="row">
                             <div class="col s12 m6">
+
                             <div style="padding-left:0;" class="col s12 m6">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--a10.jpg">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--a10.jpg">
 
                             </div>
 
                             </div>
                             <div class="col s12 m6">
+
                             <div style="padding-right:0;" class="col s12 m6">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/2/2e/T--Fudan--a9.jpg">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/2/2e/T--Fudan--a9.jpg">
 
                             </div>
 
                             </div>
Line 367: Line 372:
 
                             <i>See the artworks by the audiences here! (Please scroll down to see more)</i>
 
                             <i>See the artworks by the audiences here! (Please scroll down to see more)</i>
 
                         </p>
 
                         </p>
                         <div id="artwork" class="row" style="max-height: 400px;overflow-y: scroll;overflow-x: hidden">
+
                         <div id="artwork" class="row" style="max-height: 400px;overflow-y: scroll;overflow-x: hidden;margin-bottom:50px">
 
                             <div class="col s12 row">
 
                             <div class="col s12 row">
 
                                 <img class="col s12 m3" src="https://static.igem.org/mediawiki/2018/0/0e/T--Fudan--c1.jpg">
 
                                 <img class="col s12 m3" src="https://static.igem.org/mediawiki/2018/0/0e/T--Fudan--c1.jpg">
Line 424: Line 429:
 
                         <h3>Access to Interactive Lab</h3>
 
                         <h3>Access to Interactive Lab</h3>
 
                         <p>
 
                         <p>
                             <img class="width30 left-on-med-and-up" src="https://static.igem.org/mediawiki/2018/9/9e/T--Fudan--a13.jpg">
+
                             <img class="width40 left-on-med-and-up" src="https://static.igem.org/mediawiki/2018/9/9e/T--Fudan--a13.jpg">
                             Our interactive lab presented the audience with a "lab model" that we built, including many small laboratory equipments (prior sterilized for safety) that are commonly used. This provides a more direct way for visitors to understand discoveries made in the lab. At the same time, we also presented various photographs to aid the visitors in understanding the research lab. During the interactions with the visitors, we also conducted some training on laboratory safety and introduced necessary sterility procedures to the visitors.</p>
+
                             Having the privilege to work in a laboratory, we hope to allow the public to also <b>experience what it is like to perform some basic scientific experiments</b>. This may even <b>bring the inner scientist out of them</b>. Thus, our interactive lab presented the audience with a "lab model" that we built, including many laboratory equipment (already sterilized for safety) that are often used. This enhances the visitor’s experience since they are able to personally try out and learn each equipment and experimental techniques. At the same time, we also presented various interesting photographs to aid the visitors in understanding our lab even better.
 +
 
 +
Of course, while in the lab, safety would be the highest priority. Therefore, during the interaction with the visitors, we also <b>conducted some training on laboratory safety and delivered some basic sterility procedures</b> to them that applied not only in the cell culture room, but also to the maintenance of a healthy habit in their daily lives.
 +
</p>
 
                         <div class="row">
 
                         <div class="row">
                             <div class="col s12 m6">
+
                             <div style="padding-left:0;" class="col s12 m6">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/9/99/T--Fudan--a11.jpg">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/9/99/T--Fudan--a11.jpg">
 
                             </div>
 
                             </div>
                             <div class="col s12 m6">
+
                             <div style="padding-right:0;" class="col s12 m6">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/e/e6/T--Fudan--a12.jpg">
 
                                 <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/e/e6/T--Fudan--a12.jpg">
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
                     <div id="section3" class="section container scrollspy">
+
                     <div id="section3" class="section container scrolSpy">
 
                         <h2>
 
                         <h2>
 
                             Details and Feedbacks
 
                             Details and Feedbacks
Line 441: Line 449:
 
                         <p>
 
                         <p>
 
                             <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/e/e3/T--Fudan--a14.jpg">
 
                             <img class="right-on-med-and-up width40" src="https://static.igem.org/mediawiki/2018/e/e3/T--Fudan--a14.jpg">
                             In consideration that not everyone may have a deep understanding of synthetic biology and our project, we carefully designed a brochure to guide the audience to know what to do in our Display. Viewers were further encouraged to write down their suggestions about the Display and their views about the ethical problems in synthetic biology.
+
                             In consideration that not everyone has a deep understanding of synthetic biology and our project, we carefully designed a brochure to guide the audience to know what to do in our Display. Viewers were further encouraged to write down their suggestions about the Display and their views about the ethical problems in synthetic biology.
 
                         </p>
 
                         </p>
 
                         <p>
 
                         <p>
                             Bio-Art Display was hugely successful as not only did we collect a lot of useful feedback, which provided us with new insights on public perspectives about synthetic biology and our project, but also successfully spread awareness about these issues in a novel but easily understood way!
+
                             Bio-Art Display was hugely successful as not only did we collect a lot of useful feedback, which provided us with new insights on <b>public perspectives about synthetic biology and our project</b>, as well as successfully <b>spread awareness</b> about these issues in a novel but easily understood way!
 
                         </p>
 
                         </p>
 
                         <ul>
 
                         <ul>
Line 462: Line 470:
 
                         </ul>
 
                         </ul>
 
                     </div>
 
                     </div>
                     <div id="section4" class="section container scrollspy">
+
                     <div id="section4" class="section container scrolSpy">
 
                         <h2>Photo Gallery</h2>
 
                         <h2>Photo Gallery</h2>
 
                         <div class="FudanGallery" style="width: 100%">
 
                         <div class="FudanGallery" style="width: 100%">
Line 513: Line 521:
 
             <!--Abstract on content page-->
 
             <!--Abstract on content page-->
 
             <div id="abstractContent" class="z-depth-2">
 
             <div id="abstractContent" class="z-depth-2">
                 <a href="#!"><img src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a>
+
                 <a href="#!"><img alt="2018 team Fudan abstract" src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a>
 
                 <div class="container">
 
                 <div class="container">
 
                     <h2 style="margin: 0;padding: 10px 0;">Abstract</h2>
 
                     <h2 style="margin: 0;padding: 10px 0;">Abstract</h2>
Line 540: Line 548:
 
                     <i class="fa fa-sticky-note" style="font-size: 30px;line-height: 50px"></i>
 
                     <i class="fa fa-sticky-note" style="font-size: 30px;line-height: 50px"></i>
 
                 </a>
 
                 </a>
                 <a href="#top_menu_14" class="btn">
+
                 <a href="#FudanWrapper" class="btn">
 
                     <i class="fa fa-angle-up" style="font-size: 48px;line-height: 45px"></i>
 
                     <i class="fa fa-angle-up" style="font-size: 48px;line-height: 45px"></i>
 
                 </a>
 
                 </a>
Line 550: Line 558:
 
                     <div class="row">
 
                     <div class="row">
 
                         <div id="sponsor" class="col m3 s12 row">
 
                         <div id="sponsor" class="col m3 s12 row">
                             <a href="https://2018.igem.org/Team:Fudan" target="_blank"><img class="col s3 m6 l3" style="position:relative; padding: 0 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2018/7/73/T--Fudan--teamLogoWhite.png">
+
                             <a href="https://2018.igem.org/Team:Fudan" target="_blank"><img alt="2018 Team:Fudan logo white" class="col s3 m6 l3" style="position:relative; padding: 0 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2018/7/73/T--Fudan--teamLogoWhite.png">
 
                             </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png">
 
                             </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png">
 
                         </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点,排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png">
 
                         </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点,排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png">
Line 562: Line 570:
 
                                     <span>Project</span>
 
                                     <span>Project</span>
 
                                     <ul>
 
                                     <ul>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Demonstrate">Demonstration</a></li>
+
                                         <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li>
                                        <li><a href="https://2018.igem.org/Team:Fudan/Background">Research background</a></li>
+
 
                                         <li><a href="https://2018.igem.org/Team:Fudan/Results">Transmembrane logic</a></li>
+
                <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li>
 +
                                         <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li>
 
                                         <li><a href="https://2017.igem.org/Team:Fudan">2017.iGEM</a></li>
 
                                         <li><a href="https://2017.igem.org/Team:Fudan">2017.iGEM</a></li>
 
                                     </ul>
 
                                     </ul>
Line 571: Line 580:
 
                                     <span>Dry lab</span>
 
                                     <span>Dry lab</span>
 
                                     <ul>
 
                                     <ul>
                                        <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_ribo">Addon: <sub>ENABLE</sub><sup>ribo</sup></a></li>
+
                                      <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li>
                                        <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_TALE">Addon: <sub>ENABLE</sub><sup>TALE</sup></a></li>
+
                <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li>
                                        <li><a href="https://2018.igem.org/Team:Fudan/ENABLE_T2">Addon: <sub>ENABLE</sub><sup>T2</sup></a></li>
+
                <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
+
                                         <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Model#War_Predictor">Model: war&nbsp;predictor</a></li>
+
                                         <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand&nbsp;kinetics</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Software">Software</a></li>
+
                                         <li><a href="/Team:Fudan/Software">Software</a></li>
 
                                     </ul>
 
                                     </ul>
 
                                 </div>
 
                                 </div>
                                 <div class="col s12 m4 active">
+
                                 <div class="col s12 m4">
 
                                     <span>Wet lab</span>
 
                                     <span>Wet lab</span>
 
                                     <ul>
 
                                     <ul>
                                         <li><a href="https://2018.igem.org/Team:Fudan/InterLab">iGEM interLab</a></li>
+
                                         <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Notebook">Our notebook</a></li>
+
                                         <li><a href="/Team:Fudan/Notebook">Our notebook</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Primers">Primers used</a></li>
+
                                         <li><a href="/Team:Fudan/Primers">Primers used</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Protocols">Protocols</a></li>
+
                                         <li><a href="/Team:Fudan/Protocols">Protocols</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Safety">Safety</a></li>
+
                                         <li><a href="/Team:Fudan/Safety">Safety</a></li>
 
                                     </ul>
 
                                     </ul>
 
                                 </div>
 
                                 </div>
Line 594: Line 603:
 
                                     <span>Toolbox</span>
 
                                     <span>Toolbox</span>
 
                                     <ul>
 
                                     <ul>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Basic_Parts">Basic parts</a></li>
+
                                         <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Composite_Parts">Composite parts</a></li>
+
                                         <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Optimization">Optimization</a></li>
+
                                         <li><a href="/Team:Fudan/Optimization">Optimization</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Parts_Collection">Parts collection</a></li>
+
                                         <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Improve">Parts improvement</a></li>
+
                                         <li><a href="/Team:Fudan/Improve">Parts improvement</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Measurement">Quantification</a></li>
+
                                         <li><a href="/Team:Fudan/Measurement">Quantification</a></li>
 
                                     </ul>
 
                                     </ul>
 
                                 </div>
 
                                 </div>
                                 <div class="col s12 m4">
+
                                 <div class="col s12 m4 active">
 
                                     <span>Outreach</span>
 
                                     <span>Outreach</span>
 
                                     <ul>
 
                                     <ul>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Bio-Art">Bio-Art display</a></li>
+
                                         <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Collaborations">Collaborations</a></li>
+
                                         <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Design_Intention">Design intention</a></li>
+
                                         <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Human_Practices">Human practices</a></li>
+
                                         <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Public_Engagement">Public engagement</a></li>
+
                                         <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li>
 
                                     </ul>
 
                                     </ul>
 
                                 </div>
 
                                 </div>
Line 615: Line 624:
 
                                     <span>Team</span>
 
                                     <span>Team</span>
 
                                     <ul>
 
                                     <ul>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
+
                                         <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Attributions">Attributions</a></li>
+
                                         <li><a href="/Team:Fudan/Attributions">Attributions</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Heritage">Heritage</a></li>
+
                                         <li><a href="/Team:Fudan/Heritage">Heritage</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Team">Members</a></li>
+
                                         <li><a href="/Team:Fudan/Team">Members</a></li>
                                         <li><a href="https://2018.igem.org/Team:Fudan/Sponsors">Sponsors</a></li>
+
                                         <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li>
 
                                     </ul>
 
                                     </ul>
 
                                 </div>
 
                                 </div>
Line 628: Line 637:
 
                 <div class="footer-copyright">
 
                 <div class="footer-copyright">
 
                     <div class="container">
 
                     <div class="container">
                        <div class="contactUS row">
+
                        <div class="contactUS row">
                            <div class="col s12 m6 l5"><i class="fa fa-location-arrow"></i> Life Sci Bldg E301, 2005 Songhu Rd, Shanghai
+
                          <div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg E301, 2005 Songhu Rd, Shanghai
                            </div><div class="col s12 m6 l3"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
+
                          </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-wechat"></i> Fudan_iGEM
+
                          </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-fax"></i> +86-21-51630727
+
                          </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>
                    </div>
+
                    </div>
 
                 </div>
 
                 </div>
 
             </footer>
 
             </footer>

Latest revision as of 15:10, 7 November 2018

2018 iGEM Team:Fudan - Bio-Art

Bio-Art display

The successful development of synthetic biology requires the understanding and acceptance of the public.

Bio-Art display

The successful development of synthetic biology requires the understanding and acceptance of the public.

Introduction

As art is a universal language, we decided to connect our logic gates and biology with art to convey our project to everyone regardless of their previous knowledge and background.

However, how should we introduce concepts in synthetic biology clearly and attractively? Since most people consider experiments and logic gates as too complicated, we decided to include hands-on interactive art activities in our human practice (HP) to allow the audience to appreciate the creative merging of art and science. We hope to encourage them to understand what is synthetic biology by using art as a novel way of thinking and comprehending. This is undoubtedly something that few have tried before in iGEM!

Our event invites viewers to join us and experience some of the daily activities in the lab.
That is why we use the word "display" to emphasize this event.

Our event name is "CELL•LEGO•LOGIC" Bio-Art Display. We tried to use LEGO to indicate the core concept of synthetic biology as "CELL" and "LOGIC" are the two main parts of our project. For the word "Display", its prefix "dis-" means "negative", and "play(-plic-)" means "fold". Thus, when the two meanings are combined together, it highlights our purpose "to unfold".

The Display name is "CELL•LEGO•LOGIC".

Different from previous HP projects, our Display is planned to be as transparent as possible, which means that we not only mention the advantages of synthetic biology but more importantly also the problems behind it. In the Display, we include topics still under debate, like "genetically modified food", "artificial tissue" and so on, hoping to make people realize all the effects of synthetic biology upon society comprehensively.

"A coin always has two sides."

Content

    Our Display consisted of four parts:
  • LEGO and synthetic biology
  • Electrical Logic Gates
  • Hands-on art activities
  • Access to Interactive Lab

LEGO and synthetic biology

What is the link between LEGO and synthetic biology? LEGO and synthetic biology are both special in that both are able to use standardized fundamental building blocks to build something amazing and completely new; the only thing you need is your determination, imagination, and a pair of skillful hands! As a result, the first section of our display focuses on using LEGOs to explain synthetic biology. But aside from helping people better understand what is synthetic biology, more importantly we want to impart them with this spirit of invention and the thrill of building something up from scratch and basic parts. As can be seen in the photos below, the visitors greatly enjoyed this activity and didn't fail to amaze us with many wonderful creations!

Electrical Logic Gates

During our previous HP events and in our attempts at trying to convey our project to other people, logic gates have always been a difficult part for the audience to understand as they always struggled to grasp the logic or mechanism behind it. Reflecting upon this problem, we found out a fundamental flaw: we never provided the chance for the audience to personally construct and learn hands-on what a logic gate is. Teaching people the abstract theory of logic gates is important, but letting them physically analyze and construct a sample logic gate in person is even more critical and effective. Thus, what could be better than to return to the root of logic functions, and describe it using actual constructible electrical wire circuits, electrical boards, and lightbulbs! This visual experiment would finally grant the audience a long needed physical representation of the originally quite theoretically complex logic gates. Therefore, with this set up, the visitors efficiently learned the basic principles of logic gates, including how the input signals are relayed, how the outputs are produced, and different combinations that are possible for this process to happen. Some were even able to form several other fundamental logic gates themselves. This activity not only greatly enhanced their interest and level of understanding but also served as a strong representation of our constant desire to improve every part of our project and our focus on promoting human interaction and involvement at each step in our project using innovative and interesting methods.

Hands-on drawing

As part of our goal to make people understand biology through a novel and more creative approach, we decided to connect art and synthetic biology by letting the audience to portray their thoughts and views about our project and synthetic biology artistically by presenting them vividly on sheets of paper. This drawing activity not only stimulates them to process the information they receive into logical corresponding images, but also enables them to add in their own authenticity and imaginations into these images. In this way, we were able to collect works of art that symbolizes their passion and fascination of what synthetic biology is and what it can be. For instance, after we explained to them the concept of logic gates, they were given the choice of drawing their own logic gates on paper. With this single theme alone, we have already collected a multitude of great works. Although they all link to the general theme, but are portrayed in concepts and styles that are so diverse and unique. We hope that this art activity can also make people realize the uniqueness, independence, and creativity that is similarly reflected in synthetic biology research.

See the artworks by the audiences here! (Please scroll down to see more)

Access to Interactive Lab

Having the privilege to work in a laboratory, we hope to allow the public to also experience what it is like to perform some basic scientific experiments. This may even bring the inner scientist out of them. Thus, our interactive lab presented the audience with a "lab model" that we built, including many laboratory equipment (already sterilized for safety) that are often used. This enhances the visitor’s experience since they are able to personally try out and learn each equipment and experimental techniques. At the same time, we also presented various interesting photographs to aid the visitors in understanding our lab even better. Of course, while in the lab, safety would be the highest priority. Therefore, during the interaction with the visitors, we also conducted some training on laboratory safety and delivered some basic sterility procedures to them that applied not only in the cell culture room, but also to the maintenance of a healthy habit in their daily lives.

Details and Feedbacks

In consideration that not everyone has a deep understanding of synthetic biology and our project, we carefully designed a brochure to guide the audience to know what to do in our Display. Viewers were further encouraged to write down their suggestions about the Display and their views about the ethical problems in synthetic biology.

Bio-Art Display was hugely successful as not only did we collect a lot of useful feedback, which provided us with new insights on public perspectives about synthetic biology and our project, as well as successfully spread awareness about these issues in a novel but easily understood way!

    Some of the feedbacks are summarized below:
  • Most people support the genetic manipulation of cells because the advancement of technology will always require some experimentation. Furthermore, if genetic manipulation can be used in medical treatments, it will definitely have a positive impact on the world.
  • Our projects use "Binary" as a language for cells to communicate, but this usage actually raised discussions between audiences and our team members. For computers, binary is, of course, the simplest way of thinking. However, is this also true for cells? Alternatively, what is the basic language for intelligence?
  • "Genetically modified organisms (GMO)" is a hot topic in China because people always care about things that are closely related to them. As a result, visitors are all very curious about whether GMO will harm their health.
  • A feedback about the display itself. It is thought that the coverage of the Display is too broad. Therefore, it would be better if we could choose a more specific topic to discuss in the future.

Photo Gallery

2018 team Fudan abstract

Abstract

Contact-dependent signaling is critical for multicellular biological events, yet customizing contact-dependent signal transduction between cells remains challenging. Here we have developed the ENABLE toolbox, a complete set of transmembrane binary logic gates. Each gate consists of 3 layers: Receptor, Amplifier, and Combiner. We first optimized synthetic Notch receptors to enable cells to respond to different signals across the membrane reliably. These signals, individually amplified intracellularly by transcription, are further combined for computing. Our engineered zinc finger-based transcription factors perform binary computation and output designed products. In summary, we have combined spatially different signals in mammalian cells, and revealed new potentials for biological oscillators, tissue engineering, cancer treatments, bio-computing, etc. ENABLE is a toolbox for constructing contact-dependent signaling networks in mammals. The 3-layer design principle underlying ENABLE empowers any future development of transmembrane logic circuits, thus contributes a foundational advance to Synthetic Biology.