Difference between revisions of "Team:SCAU-China/Interlab"

 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
#top_title{
+
#top_title {
display:none;
+
    display: none;
 
}
 
}
* {
 
            box-sizing: border-box;
 
        }
 
  
        a {
+
* {
            text-decoration: none;
+
    box-sizing: border-box;
        }
+
}
  
        ul,
+
a {
        ol {
+
    text-decoration: none;
            list-style: none;
+
}
        }
+
  
        body {
+
ul,
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
ol {
            font-size: 14px;
+
    list-style: none;
            line-height: 1.42857143;
+
}
            color: #333;
+
            min-width: 768px;
+
        }
+
  
        .navbar-default {
+
body {
            background-color: #EEE;
+
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border-color: #e7e7e7;
+
    font-size: 14px;
            top: 16px;
+
    line-height: 1.42857143;
            border-width: 0 0 1px;
+
    color: #333;
            position: fixed;
+
    min-width: 768px;
            right: 0;
+
}
            left: 0;
+
            z-index: 1030;
+
            min-height: 50px;
+
            margin-bottom: 20px;
+
            border: 1px solid transparent;
+
            min-width: 768px;
+
        }
+
  
        .container {
+
img {
            padding-right: 15px;
+
    width: 90%;
            padding-left: 15px;
+
    height: auto;
            margin-right: auto;
+
    max-width: 90%;
            margin-left: auto;
+
    display: block;
        }
+
    margin-left: 5%
 +
}
  
        @media screen and (min-width: 768px) {
+
.navbar-default {
            .container {
+
    background-color: #EEE;
                width: 750px;
+
    border-color: #e7e7e7;
            }
+
    top: 16px;
        }
+
    border-width: 0 0 1px;
 +
    position: fixed;
 +
    right: 0;
 +
    left: 0;
 +
    z-index: 1030;
 +
    min-height: 50px;
 +
    margin-bottom: 20px;
 +
    border: 1px solid transparent;
 +
    min-width: 768px;
 +
}
  
        @media screen and (min-width: 992px) {
+
.container {
            .container {
+
    padding-right: 15px;
                width: 970px;
+
    padding-left: 15px;
            }
+
    margin-right: auto;
        }
+
    margin-left: auto;
 +
}
  
        @media screen and (min-width: 1200px) {
+
@media screen and (min-width: 768px) {
            .container {
+
    .container {
                width: 1170px;
+
        width: 750px;
            }
+
    }
        }
+
}
  
        .navbar-header {
+
@media screen and (min-width: 992px) {
            float: left;
+
    .container {
        }
+
        width: 970px;
 +
    }
 +
}
  
        .navbar-brand {
+
@media screen and (min-width: 1200px) {
            color: #777;
+
    .container {
            float: left;
+
        width: 1170px;
            height: 50px;
+
    }
            padding: 15px 15px;
+
}
            font-size: 18px;
+
            line-height: 20px;
+
        }
+
  
        .navbar>ul>li {
+
.navbar-header {
            float: left;
+
    float: left;
        }
+
}
  
        .nav>li {
+
.navbar-brand {
            position: relative;
+
    color: #777;
            display: block;
+
    float: left;
            margin-right: 10px;
+
    height: 50px;
        }
+
    padding: 15px 15px;
 +
    font-size: 18px;
 +
    line-height: 20px;
 +
}
  
        .nav>li>a {
+
.navbar>ul>li {
            color: #777;
+
    float: left;
            position: relative;
+
}
            display: block;
+
            padding: 8px 15px;
+
            cursor: pointer;
+
        }
+
  
        .nav>li>a:hover {
+
.nav>li {
            color: #333;
+
    position: relative;
        }
+
    display: block;
 +
    margin-right: 10px;
 +
}
  
        .caret {
+
.nav>li>a {
            display: inline-block;
+
    color: #777;
            width: 0;
+
    position: relative;
            height: 0;
+
    display: block;
            margin-left: 2px;
+
    padding: 8px 15px;
            vertical-align: middle;
+
    cursor: pointer;
            border-top: 4px solid #777;
+
}
            border-right: 4px solid transparent;
+
            border-left: 4px solid transparent;
+
            position: absolute;
+
            top: 18px;
+
            right: 1px;
+
        }
+
  
        .nav>li>a:hover+span {
+
.nav>li>a:hover {
            border-top: 4px solid #333;
+
    color: #333;
        }
+
}
  
        .nav>li .dropdown-menu {
+
.caret {
            margin-top: 0;
+
    display: inline-block;
            border-top-left-radius: 0;
+
    width: 0;
            border-top-right-radius: 0;
+
    height: 0;
            position: absolute;
+
    margin-left: 2px;
            top: 35px;
+
    vertical-align: middle;
            left: 0;
+
    border-top: 4px solid #777;
            z-index: 1000;
+
    border-right: 4px solid transparent;
            float: left;
+
    border-left: 4px solid transparent;
            min-width: 160px;
+
    position: absolute;
            padding: 5px 0;
+
    top: 18px;
            margin: 2px 0 0;
+
    right: 1px;
            font-size: 14px;
+
}
            text-align: left;
+
            list-style: none;
+
            background-color: #fff;
+
            -webkit-background-clip: padding-box;
+
            background-clip: padding-box;
+
            border: 1px solid #ccc;
+
            border: 1px solid rgba(0, 0, 0, .15);
+
            border-radius: 4px;
+
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
            display: none;
+
        }
+
  
        .dropdown-menu>li {
+
.nav>li>a:hover+span {
            display: list-item;
+
    border-top: 4px solid #333;
        }
+
}
 +
 
 +
.nav>li .dropdown-menu {
 +
    margin-top: 0;
 +
    border-top-left-radius: 0;
 +
    border-top-right-radius: 0;
 +
    position: absolute;
 +
    top: 35px;
 +
    left: 0;
 +
    z-index: 1000;
 +
    float: left;
 +
    min-width: 160px;
 +
    padding: 5px 0;
 +
    margin: 2px 0 0;
 +
    font-size: 14px;
 +
    text-align: left;
 +
    list-style: none;
 +
    background-color: #fff;
 +
    -webkit-background-clip: padding-box;
 +
    background-clip: padding-box;
 +
    border: 1px solid #ccc;
 +
    border: 1px solid rgba(0, 0, 0, .15);
 +
    border-radius: 4px;
 +
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
    display: none;
 +
}
 +
 
 +
.dropdown-menu>li {
 +
    display: list-item;
 +
}
 +
 
 +
.dropdown-menu>li>a {
 +
    display: block;
 +
    padding: 3px 20px;
 +
    clear: both;
 +
    font-weight: normal;
 +
    line-height: 1.42857143;
 +
    color: #333;
 +
    white-space: nowrap;
 +
}
 +
 
 +
.dropdown-menu>li>a:hover {
 +
    background-color: #eee;
 +
}
  
        .dropdown-menu>li>a {
 
            display: block;
 
            padding: 3px 20px;
 
            clear: both;
 
            font-weight: normal;
 
            line-height: 1.42857143;
 
            color: #333;
 
            white-space: nowrap;
 
        }
 
        .dropdown-menu>li>a:hover {
 
            background-color: #eee;
 
        }
 
 
html {
 
html {
  font-family: sans-serif;
+
    font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
+
    -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
+
    -ms-text-size-adjust: 100%;
 
}
 
}
#mainDiv{
+
 
+
#mainDiv {
  margin: 0;
+
 
  min-height: 1000px;
+
    margin: 0;
  padding-top: 70px;
+
    min-height: 1400px;
  min-width: 1140px;
+
    padding-top: 70px;
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;
+
    min-width: 1140px;
 +
    background-image: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg');
 +
    background-attachment: fixed;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 
}
 
}
 +
 
.heart {
 
.heart {
  width: 1140px;
+
    width: 1140px;
  margin: 0 auto;/* 通用的版心 */
+
    margin: 0 auto;
 +
    /* 通用的版心 */
 
}
 
}
 +
 
#mask {
 
#mask {
 
     width: 100%;
 
     width: 100%;
     height: 1000px;
+
     height: 100%;
 
     background: rgba(0, 0, 0, 0.3);
 
     background: rgba(0, 0, 0, 0.3);
 
     margin-top: -15px;
 
     margin-top: -15px;
 
     padding-top: 15px;
 
     padding-top: 15px;
 
}
 
}
.DBoard {/* 展板样式 */
+
 
 +
.DBoard {
 +
    /* 展板样式 */
 
     margin: 0px auto 40px auto;
 
     margin: 0px auto 40px auto;
 
     width: 1000px;
 
     width: 1000px;
     height: 500px;
+
     height: 100%px;
 
     border-radius: 3px;
 
     border-radius: 3px;
 
     background-color: #fff;
 
     background-color: #fff;
Line 193: Line 213:
 
     position: relative;
 
     position: relative;
 
}
 
}
.DBoard0 {/*文字样式*/
+
 
 +
.DBoard0 {
 +
    /*文字样式*/
 
     margin: 0px auto 40px auto;
 
     margin: 0px auto 40px auto;
 
     width: 1000px;
 
     width: 1000px;
Line 202: Line 224:
 
     position: relative;
 
     position: relative;
 
}
 
}
 +
 
#mask p {
 
#mask p {
 
     color: #fff;
 
     color: #fff;
 
     text-align: center;
 
     text-align: center;
 
}
 
}
 +
 
#lists-DB {
 
#lists-DB {
 
     cursor: pointer;
 
     cursor: pointer;
 
}
 
}
#lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
+
 
 +
#lists-DB:hover #arr-l,
 +
#lists-DB:hover #arr-r {
 
     display: block;
 
     display: block;
 
}
 
}
 +
 
#lists {
 
#lists {
 
     position: relative;
 
     position: relative;
 
     width: 4000px;
 
     width: 4000px;
 
}
 
}
 +
 
#lists img {
 
#lists img {
 
     float: left;
 
     float: left;
 
}
 
}
#arr-l,#arr-r {
+
 
 +
#arr-l,
 +
#arr-r {
 
     display: block;
 
     display: block;
 
     position: absolute;
 
     position: absolute;
Line 233: Line 263:
 
     display: none;
 
     display: none;
 
}
 
}
#arr-l:hover,#arr-r:hover {
+
 
 +
#arr-l:hover,
 +
#arr-r:hover {
 
     background: rgba(0, 0, 0, .7);
 
     background: rgba(0, 0, 0, .7);
 
}
 
}
 +
 
#arr-l {
 
#arr-l {
 
     left: 0;
 
     left: 0;
 
}
 
}
 +
 
#arr-r {
 
#arr-r {
 
     right: 0;
 
     right: 0;
 
}
 
}
 +
 
#buttons {
 
#buttons {
 
     position: absolute;
 
     position: absolute;
Line 247: Line 282:
 
     left: 50%;
 
     left: 50%;
 
}
 
}
 +
 
#buttons span {
 
#buttons span {
 
     width: 12px;
 
     width: 12px;
Line 255: Line 291:
 
     margin: 0 5px 0 5px;
 
     margin: 0 5px 0 5px;
 
}
 
}
 +
 
.on {
 
.on {
 
     background-color: #333 !important;
 
     background-color: #333 !important;
 
}
 
}
 +
 
#toTop {
 
#toTop {
 
     width: 50px;
 
     width: 50px;
Line 269: Line 307:
 
}
 
}
  
   
+
 
 +
 
 +
 
 
}
 
}
#img4{
+
#img4 {
 
     width: 10%;
 
     width: 10%;
 
}
 
}
Line 296: Line 336:
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
#title{
+
#title {
 
     height: 100px;
 
     height: 100px;
 
     background: rgba(0, 0, 0, 0.3);
 
     background: rgba(0, 0, 0, 0.3);
Line 304: Line 344:
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     line-height: 100px;
 
     line-height: 100px;
 
 
}
 
}
#article1{
+
#article1 {
    background: rgba(0, 0, 0, 0);
+
    background: rgba(0, 0, 0, 0);
 
+
    height: 100%;
 
}
 
}
#article1 p{
+
#article1 p {
 
+
 
     text-align: left;
 
     text-align: left;
 
     position: relative;
 
     position: relative;
 
     color: white;
 
     color: white;
 
     margin-top: 20px;
 
     margin-top: 20px;
   
 
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size:20px;
+
     font-size: 20px;
 +
}
 +
.yellow td {
 +
    background-color: #ffcc00;
 +
    text-align: left;
 +
}
 +
.blue td {
 +
    background-color: #00ccff;
 +
    text-align: left;
 
}
 
}
  
 +
.no-border {
 +
    border: 0;
 +
    text-align: left;
 +
}
 +
 +
.hard th {
 +
    font-size: 24px;
 +
    font-weight: bold;
 +
}
 +
.fill {
 +
    width: 100%
 +
}
 +
th {
 +
    background-color: #000000;
 +
}
  
 
</style>
 
</style>
 
<div class="navbar-default">
 
<div class="navbar-default">
        <div class="container">
+
    <div class="container">
            <div class="navbar-header">
+
        <div class="navbar-header">
                <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
+
            <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
 +
        </div>
 +
        <div class="navbar">
 +
            <ul style="float: left;" class="nav">
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">TEAM</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li>
 +
                            <a href="#">Time shaft</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Members</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Advisors</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Teachers</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Attributions</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Collaborations</a>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">PROJECT</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Description">Description</a></li>
 +
                        <li><a href="#">Design</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">PART</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="#">Basic parts</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/interlab">interlab</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">RESULT</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="#">Experiments</a></li>
 +
                        <li><a href="#">Proof</a></li>
 +
                        <li><a href="#">Demonstrate</a></li>
 +
                        <li><a href="#">Model</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">NOTE</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/NoteBook">NoteBook</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Gallery">Gallery</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Protocol">Protocol</a></li>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
            <ul style="float: right;" class="nav">
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">SAFETY</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Safety">Safety</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="javascript:void(0)">HUMAN PRACTICES</a>
 +
                    <span class="caret"></span>
 +
                    <ul class='dropdown-menu'>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Integrated">Integrated</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:SCAU-China/Engagement">Engagement</a></li>
 +
                        <li><a href="#">Entrepreneurship</a></li>
 +
                        <li><a href="#"></a></li>
 +
                        <li><a href="#"></a></li>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
</div>
 +
<div id="mainDiv">
 +
    <div class="heart">
 +
        <!-- 版心 -->
 +
        <div id="mask">
 +
            <!-- 半透明底板 -->
 +
            <div class="DBoard" id="title">
 +
                interlab
 
             </div>
 
             </div>
             <div class="navbar">
+
             <div class="DBoard" id="article1">
                 <ul style="float: left;" class="nav">
+
                 <!-- 展板 -->
                     <li class="dropdown">
+
                <p>The goal of the iGEM InterLab Study is reliable and repeatable measurement which is a key component to synthetic biology. We took part in the 5th International InterLab Measurement Study and the big question is</p>
                        <a href="javascript:void(0)">TEAM</a>
+
                <p> “Can we reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD? ”</p>
                        <span class="caret"></span>
+
                <h1>Parts</h1>
                         <ul class='dropdown-menu'>
+
                <p>Interlab test devices used, as set by the iGEM measurement committee</p>
                            <li>
+
                <table class="fill">
                                <a href="#">Time shaft</a>
+
                     <thead>
                             </li>
+
                        <tr>
                             <li>
+
                            <th class="hard" style="font-size: 24px;font-weight: bold;">Device</th>
                                <a href="#">Members</a>
+
                            <th class="hard" style="font-size: 24px;font-weight: bold;">Part Number</th>
                            </li>
+
                            <th class="hard" style="font-size: 24px;font-weight: bold;">Location</th>
                            <li>
+
                         </tr>
                                <a href="#">Advisors</a>
+
                    </thead>  
                             </li>
+
                    <tbody>
                            <li>
+
                        <tr>
                                <a href="#">Teachers</a>
+
                            <td style="text-align: center;">Negative control</td>
                            </li>
+
                             <td style="text-align: center;">BBa_R0040</td>
                            <li>
+
                             <td style="text-align: center;">Well 2D</td>
                                <a href="#">Attributions</a>
+
                        </tr>
                             </li>
+
                        <tr>
                            <li>
+
                            <td style="text-align: center;">Positive control</td>
                                <a href="#">Collaborations</a>
+
                             <td style="text-align: center;">BBa_I20270</td>
                            </li>
+
                            <td style="text-align: center;">Well 2B</td>
                         </ul>
+
                        </tr>
                    </li>
+
                        <tr>
                    <li class="dropdown">
+
                            <td style="text-align: center;">Test Device 1</td>
                        <a href="javascript:void(0)">PROJECT</a>
+
                             <td style="text-align: center;">BBa_J364000</td>
                         <span class="caret"></span>
+
                            <td style="text-align: center;">Well 2F</td>
                        <ul class='dropdown-menu'>
+
                        </tr>
                             <li><a href="https://2018.igem.org/Team:SCAU-China/Description">Description</a></li>
+
                         <tr>
                             <li><a href="#">Design</a></li>
+
                            <td style="text-align: center;">Test Device 2</td>
                         </ul>
+
                            <td style="text-align: center;">BBa_J364001</td>
                    </li>
+
                            <td style="text-align: center;">Well 2H</td>
                    <li class="dropdown">
+
                         </tr>
                        <a href="javascript:void(0)">PART</a>
+
                        <tr>
                        <span class="caret"></span>
+
                            <td style="text-align: center;">Test Device 3</td>
                         <ul class='dropdown-menu'>
+
                            <td style="text-align: center;">BBa_J364002</td>
                             <li><a href="#">Basic parts</a></li>
+
                             <td style="text-align: center;">Well 2J</td>
                            <li><a href="https://2018.igem.org/Team:SCAU-China/interlab">interlab</a></li>
+
                        </tr>
                        </ul>
+
                        <tr>
                    </li>
+
                             <td style="text-align: center;">Test Device 4</td>
                     <li class="dropdown">
+
                            <td style="text-align: center;">BBa_J364007</td>
                         <a href="javascript:void(0)">RESULT</a>
+
                            <td style="text-align: center;">Well 2L</td>
                         <span class="caret"></span>
+
                         </tr>
                         <ul class='dropdown-menu'>
+
                        <tr>
                            <li><a href="#">Experiments</a></li>
+
                            <td style="text-align: center;">Test Device 5</td>
                            <li><a href="#">Proof</a></li>
+
                            <td style="text-align: center;">BBa_J364008</td>
                            <li><a href="#">Demonstrate</a></li>
+
                            <td style="text-align: center;">Well 2N</td>
                            <li><a href="#">Model</a></li>
+
                         </tr>
                         </ul>
+
                        <tr>
                     </li>
+
                            <td style="text-align: center;">Test Device 6</td>
                     <li class="dropdown">
+
                             <td style="text-align: center;">BBa_J364009</td>
                         <a href="javascript:void(0)">NOTE</a>
+
                            <td style="text-align: center;">Well 2P</td>
                         <span class="caret"></span>
+
                        </tr>
                         <ul class='dropdown-menu'>
+
                    </tbody>
                          <li><a href="#">NoteBook</a></li>
+
                </table>
                          <li><a href="#">Gallery</a></li>
+
                <p>the preparation of competent cells(Escherichia coli strain DH5α) and their transformation according to the cell measurement protocol. Meanwile, we followed the Calibration Protocols supplied by the iGEM HQ to generate OD600 Reference point, Particle Standard Curve and Fluorescence standard curve to calibrate the plate reader(96 well plate) and then measured both the fluorescence and absorbance of our samples in 0-hour and 6-hour. </p>
                          <li><a href="#">Protocol</a></li>
+
                <p>We used the set protocol that we were given so as to ensure everyone was doing the same thing. These can be found at <a href="https://2018.igem.org/Team:SCAU-China/Protocol">this page.</a></p>
                         </ul>
+
                <h1>Results and discussion</h1>
                     </li>
+
                <p>We submitted the iGEM’s completed spreadsheet to the measurement committee before the deadline, and received confirmation that the results were accepted on the 2018/7/30</p>
                </ul>
+
                <p>OD600 calibration</p>
                <ul style="float: right;" class="nav">
+
                <table style="">
                    <li class="dropdown">
+
                     <tr>
                         <a href="javascript:void(0)">SAFETY</a>
+
                        <th class="no-border" style="border: 0;text-align: left; background-color: #ffffff;"></th>
                         <span class="caret"></span>
+
                         <th colspan="2" class="no-border" style="border: 0;text-align: left; background-color: #ffffff;">LUDOX CL-X  H2O</th>
                         <ul class='dropdown-menu'>
+
                    </tr>
                            <li><a href="https://2018.igem.org/Team:SCAU-China/Safety">Safety</a></li>
+
                    <tr>
                        </ul>
+
                         <td class="no-border" style="border: 0;text-align: left;">Replicate 1</td>
                     </li>
+
                         <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.059</td>
                    <li class="dropdown">
+
                        <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.039</td>
                        <a href="javascript:void(0)">HUMAN PRACTICES</a>
+
                    </tr>
                         <span class="caret"></span>
+
                    <tr>
                         <ul class='dropdown-menu'>
+
                        <td class="no-border" style="border: 0;text-align: left;">Replicate 2</td>
                            <li><a href="#">Integrated</a></li>
+
                        <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.060</td>
                            <li><a href="#">Engagement</a></li>
+
                        <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.035</td>
                            <li><a href="#">Entrepreneurship</a></li>
+
                    </tr>
                            <li><a href="#"></a></li>
+
                    <tr>
                            <li><a href="#"></a></li>
+
                        <td class="no-border" style="border: 0;text-align: left;">Replicate 3</td>
                        </ul>
+
                        <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.060</td>
                    </li>
+
                         <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.035</td>
                 </ul>
+
                     </tr>
 +
                     <tr>
 +
                         <td class="no-border" style="border: 0;text-align: left;">Replicate 4</td>
 +
                         <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.061</td>
 +
                         <td class="blue" style=" background-color: #00ccff;text-align: left; border: 1px solid #000000;">0.040</td>
 +
                    </tr>
 +
                    <tr>
 +
                        <td class="no-border" style="border: 0;text-align: left;">Arith. Mean</td>
 +
                        <td class="yellow" style="background-color: #ffcc00;text-align: left; border: 1px solid #000000;">0.059</td>
 +
                         <td class="yellow" style="background-color: #ffcc00;text-align: left; border: 1px solid #000000;">0.039</td>
 +
                     </tr>
 +
                    <tr>
 +
                        <td class="no-border" style="border: 0;text-align: left;">Corrected Abs600</td>
 +
                        <td class="yellow" style="background-color: #ffcc00;text-align: left; border: 1px solid #000000;">0.023</td>
 +
                         <td style="border: 0; background-color: transparent;"></td>
 +
                    </tr>
 +
                    <tr>
 +
                         <td class="no-border" style="border: 0;text-align: left;">Reference OD600</td>
 +
                         <td class="yellow" style="background-color: #ffcc00;text-align: left; border: 1px solid #000000;">0.063</td>
 +
                        <td style="border: 0; background-color: transparent;"></td>
 +
                    </tr>
 +
                     <tr>
 +
                        <td class="no-border" style="border: 0;text-align: left;">OD600/Abs600</td>
 +
                         <td class="yellow" style="background-color: #ffcc00;text-align: left; border: 1px solid #000000;">2.769</td>
 +
                         <td style="border: 0; background-color: transparent;"></td>
 +
                    </tr>
 +
                </table>
 +
                <p>Fluorescein standard curves</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/4/40/T--SCAU-China--Fluoresceinstandardcurves.jpg">
 +
                <p>Particle standard curve</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/8/8d/T--SCAU-China--Particlestandardcurve.jpg">
 +
                <p>Our goal is to reduce lab-to-lab variability in fluorescence measurements, in order to test the variability of variantion in our sample, we caculate coefficient of variantion for both colony, and compare the CV value under different normalization method(Fluorescence per OD or Fluorescence per particle)</p>
 +
                <p>0th</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/8/8a/T--SCAU-China--0th1.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/3/37/T--SCAU-China--0th2.jpg">
 +
                <p>6th</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/9/94/T--SCAU-China--6th1.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/af/T--SCAU-China--6th2.jpg">
 +
                <p>After 6h growth, we found that the variation of each type of cells(devices) is decreased, but the CV value of devices 4 and device5 are much more large than others. The variation of fluorescence per OD is much more smaller than fluorescence per particle. what’s more, we also found that colony2’s data is more steady compare with colony1 in most cases. for conveniently compare the normalized value with original value, we removed the data of devices4 and device5, and only compare the colony2 6-hour’s data.
 +
                </p>
 +
                <img src="https://static.igem.org/mediawiki/2018/6/65/T--SCAU-China--interlabLast.jpg">
 +
                <p>According to the graph, we found that fluorescence per particle can decrease the variation but it depends on the devices. It seems that use OD value to normalize still better than particle. But one thing need to point out that too steady normalized value will loose sensitivity when test the influence of some factors. You can see this <a href="https://static.igem.org/mediawiki/2017/e/ef/T--oxford--interlab-data.xlsx">Excel File</a> to check our raw and manipulated data.
 +
                 </p>
 
             </div>
 
             </div>
 +
                <p>School's name:SCAU</p>
 +
                <p>Member's name:SCAU</p>
 +
                <p>Designed by:SCAU</p>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 
 
<div id="mainDiv">
 
<div class="heart"><!-- 版心 -->
 
    <div id="mask"><!-- 半透明底板 -->
 
     
 
      <div class="DBoard" id="title">   
 
      interlab
 
      </div>
 
      <div class="DBoard" id="article1"><!-- 展板 -->
 
        <p>The goal of the iGEM InterLab Study is reliable and repeatable measurement which is a key component to synthetic biology. We took part in the 5th International InterLab Measurement Study and the big question is</p>
 
      <p> “Can we reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD? ”</p>
 
      <h1>Parts</h1>
 
      <p>Interlab test devices used, as set by the iGEM measurement committee</p>
 
      <table>
 
      <th>
 
      <td>Device</td>
 
      <td>Part Number</td>
 
      <td>Location</td>
 
      </th>
 
      <tr>
 
      <td>Negative control</td>
 
      <td>BBa_R0040</td>
 
      <td>Well 2D</td>
 
      </tr>
 
    <tr>
 
      <td>Positive control</td>
 
      <td>BBa_I20270</td>
 
      <td>Well 2B</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 1</td>
 
      <td>BBa_J364000</td>
 
      <td>Well 2F</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 2</td>
 
      <td>BBa_J364001</td>
 
      <td>Well 2H</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 3</td>
 
      <td>BBa_J364002</td>
 
      <td>Well 2J</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 4</td>
 
      <td>BBa_J364007</td>
 
      <td>Well 2L</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 5</td>
 
      <td>BBa_J364008</td>
 
      <td>Well 2N</td>
 
      </tr>
 
      <tr>
 
      <td>Test Device 6</td>
 
      <td>BBa_J364009</td>
 
      <td>Well 2P</td>
 
      </tr>
 
      </table>
 
      <p>the preparation of competent cells(Escherichia coli strain DH5α) and their transformation according to the cell measurement protocol. Meanwile, we followed the Calibration Protocols supplied by the iGEM HQ to generate OD600 Reference point, Particle Standard Curve and Fluorescence standard curve to calibrate the plate reader(96 well plate) and then measured both the fluorescence and absorbance of our samples in 0-hour and 6-hour.  </p>
 
      <p>We used the set protocol that we were given so as to ensure everyone was doing the same thing. These can be found at <a href="https://2018.igem.org/Team:SCAU-China/Protocol">this</a></p>
 
 
      </div>
 
 
   
 
 
 
   
 
      <p>School's name:SCAU</p>
 
      <p>Member's name:SCAU</p>
 
      <p>Designed by:SCAU</p>
 
    </div>
 
  </div>
 
 
</div>
 
</div>
  <!-- 回到顶部按钮 -->
+
<!-- 回到顶部按钮 -->
  <em id="toTop"></em>
+
<em id="toTop"></em>
 
+
<script>
<script>
+
var dropdownBoxs = document.getElementsByClassName('dropdown');
        var dropdownBoxs = document.getElementsByClassName('dropdown');
+
var dropdownMenus = document.getElementsByClassName('dropdown-menu');
        var dropdownMenus = document.getElementsByClassName('dropdown-menu');
+
for (let i = 0; i < dropdownBoxs.length; i++) {
        for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
+
    // console.log(dropdownBoxs[i]);
            // console.log(dropdownBoxs[i]);
+
    // console.log(dropdownMenus[i]);
            // console.log(dropdownMenus[i]);
+
    dropdownBoxs[i].index = i;
            dropdownBoxs[i].index = i;
+
    dropdownBoxs[i].onclick = function() {
            dropdownBoxs[i].onclick = function () {
+
        var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
                var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
+
        // console.log(styles.display);
                // console.log(styles.display);
+
        if (styles.display == 'none') {
                if (styles.display == 'none') {
+
            for (let j = 0; j < dropdownBoxs.length; j++) {
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
+
                dropdownMenus[j].style.display = 'none';
                        dropdownMenus[j].style.display = 'none';
+
                dropdownMenus[i].style.display = 'block';
                        dropdownMenus[i].style.display = 'block';
+
            }
                    }
+
        } else {
                } else {
+
            for (let j = 0; j < dropdownBoxs.length; j++) {
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
+
                dropdownMenus[j].style.display = 'none';
                        dropdownMenus[j].style.display = 'none';
+
                    }
+
                }
+
 
             }
 
             }
 
         }
 
         }
     </script>
+
     }
 
+
}
 
+
</script>
    <script type="text/javascript">
+
<script type="text/javascript">
 
+
var a = function() {
      var a= function() {
+
 
     var box01 = document.getElementById("lists-DB");
 
     var box01 = document.getElementById("lists-DB");
     var lis = document.getElementById("lists");//获得轮播图图片盒子
+
     var lis = document.getElementById("lists"); //获得轮播图图片盒子
     var btns = document.getElementById("buttons");//获得按钮盒子
+
     var btns = document.getElementById("buttons"); //获得按钮盒子
     var imgs = lis.getElementsByTagName("img");//获得图片伪数组
+
     var imgs = lis.getElementsByTagName("img"); //获得图片伪数组
 
     btns.style.width = 24 * (imgs.length - 2) + "px";
 
     btns.style.width = 24 * (imgs.length - 2) + "px";
     btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
+
     btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px"; //动态赋值
     for(var i = 0;i < imgs.length - 2; i++){
+
     for (var i = 0; i < imgs.length - 2; i++) {
 
         //动态生成小圆点
 
         //动态生成小圆点
 
         var span = document.createElement("span");
 
         var span = document.createElement("span");
Line 537: Line 655:
 
     var prev = document.getElementById("arr-l");
 
     var prev = document.getElementById("arr-l");
 
     var next = document.getElementById("arr-r");
 
     var next = document.getElementById("arr-r");
     var animated = false;//防止计时器多次被触发变量
+
     var animated = false; //防止计时器多次被触发变量
  
 
     function animate(offset) {
 
     function animate(offset) {
         var time = 300;//滚动一张图片总用时
+
         var time = 300; //滚动一张图片总用时
         var inteval = 10;//滚动一次的间隔时间
+
         var inteval = 10; //滚动一次的间隔时间
         var speed = offset / (time / inteval);//每次滚动滑动的像素
+
         var speed = offset / (time / inteval); //每次滚动滑动的像素
         var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
+
         var left = parseInt(lis.style.left) + offset; //先计算出滚动后的left值
 
         function go() {
 
         function go() {
             animated = true;//为true代表正在运行
+
             animated = true; //为true代表正在运行
 
             //滑动函数
 
             //滑动函数
             if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
+
             if (((speed > 0) + (parseInt(lis.style.left) < left) === 2) || ((speed < 0) + (parseInt(lis.style.left)) > left === 2)) {
 
                 lis.style.left = parseInt(lis.style.left) + speed + "px";
 
                 lis.style.left = parseInt(lis.style.left) + speed + "px";
                 setTimeout(go,inteval);//设置计时器
+
                 setTimeout(go, inteval); //设置计时器
             }
+
             } else {
            else {
+
 
                 lis.style.left = left + "px";
 
                 lis.style.left = left + "px";
                 if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
+
                 if (parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
                 if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
+
                 if (parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
                 animated = false;//结束运行
+
                 animated = false; //结束运行
 
             }
 
             }
 
         }
 
         }
         go();//调用函数
+
         go(); //调用函数
       
+
 
 
     }
 
     }
 
     prev.onclick = function() {
 
     prev.onclick = function() {
         if(animated) return;//正在轮播停止
+
         if (animated) return; //正在轮播停止
         if(index == 0) index = spans.length - 1;
+
         if (index == 0) index = spans.length - 1;
         else index --;
+
         else index--;
 
         animate(1000);
 
         animate(1000);
 
         showButton();
 
         showButton();
 
     }
 
     }
 
     next.onclick = function() {
 
     next.onclick = function() {
         if(animated) return;
+
         if (animated) return;
         if(index == spans.length - 1) index = 0;
+
         if (index == spans.length - 1) index = 0;
         else index ++;
+
         else index++;
 
         animate(-1000);
 
         animate(-1000);
 
         showButton();
 
         showButton();
 
     }
 
     }
     var index = 0;//记录现在className为on的按钮
+
     var index = 0; //记录现在className为on的按钮
  
     var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
+
     var spans = btns.getElementsByTagName("span"); //得到btns下所有的span标签
 
     spans[0].className = "on";
 
     spans[0].className = "on";
     for(var i = 0;i < spans.length;i ++ ) {
+
     for (var i = 0; i < spans.length; i++) {
         spans[i].index = i;//自定义属性
+
         spans[i].index = i; //自定义属性
 
         spans[i].onclick = function() {
 
         spans[i].onclick = function() {
             if(animated) return;
+
             if (animated) return;
             if(this.className == "on") return;
+
             if (this.className == "on") return;
 
             animate((index - this.index) * 1000);
 
             animate((index - this.index) * 1000);
 
             index = this.index;
 
             index = this.index;
Line 591: Line 708:
  
 
     function showButton() { //显示按钮运动的函数
 
     function showButton() { //显示按钮运动的函数
         for(var j = 0;j < spans.length;j ++) {//排它思想
+
         for (var j = 0; j < spans.length; j++) { //排它思想
                //if(spans[j].className == "on") oldIndex = j;
+
            //if(spans[j].className == "on") oldIndex = j;
                spans[j].className = "";
+
            spans[j].className = "";
                spans[index].className = "on";
+
            spans[index].className = "on";
 
         }
 
         }
 
     }
 
     }
  
     var timer;//计时器变量 , 这里为什么不能为null
+
     var timer; //计时器变量 , 这里为什么不能为null
     var interval = 3000;//点击间隔时间
+
     var interval = 3000; //点击间隔时间
  
     function play() {//自动点击next函数
+
     function play() { //自动点击next函数
         timer = setTimeout(function(){
+
         timer = setTimeout(function() {
             next.onclick();//自动点击next
+
             next.onclick(); //自动点击next
             play();//递归调用
+
             play(); //递归调用
         },interval);
+
         }, interval);
 
     }
 
     }
  
Line 615: Line 732:
  
 
     box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
 
     box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
     box01.onmouseout = play;//鼠标离开轮播图继续
+
     box01.onmouseout = play; //鼠标离开轮播图继续
     play();//先自己调用一次
+
     play(); //先自己调用一次
 
}
 
}
 
a();
 
a();
  </script>
+
</script>
    <script type="text/javascript">
+
<script type="text/javascript">
            //封装函数js文件,方便调用
+
//封装函数js文件,方便调用
    function $(id) {return document.getElementById(id);}//封装获取id对象函数
+
function $(id) { return document.getElementById(id); } //封装获取id对象函数
    function show(obj) {obj.style.display = "block";}//封装显示函数
+
function show(obj) { obj.style.display = "block"; } //封装显示函数
    function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
+
function hidden(obj) { obj.style.display = "none"; } //封装隐藏函数
    function scroll(){
+
function scroll() {
        if(window.pageYOffset != null) {
+
    if (window.pageYOffset != null) {
            //ie9+ 和 其他浏览器
+
        //ie9+ 和 其他浏览器
            return {
+
        return {
                top: window.pageYOffset,
+
            top: window.pageYOffset,
                left: window.pageXOffset
+
            left: window.pageXOffset
            }
+
 
         }
 
         }
        else if(document.compatMode == "CSS1Compat") {
+
    } else if (document.compatMode == "CSS1Compat") {
            //非怪异浏览器:没有头部的
+
        //非怪异浏览器:没有头部的
            return {
+
         return {
                top: document.documentElement.scrollTop,
+
             top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
+
             left: document.documentElement.scrollLeft
            }
+
        }
+
         return {//剩下的全部都是怪异浏览器
+
             top: document.body.scrollTop,
+
             left: document.body.scrollLeft
+
 
         }
 
         }
 
     }
 
     }
 
+
     return { //剩下的全部都是怪异浏览器
     var leader = 0,target = 0,timer = null;//计时器变量
+
         top: document.body.scrollTop,
    window.onscroll = function() {
+
         left: document.body.scrollLeft
        //滚动时执行的函数
+
         scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
+
         leader = scroll().top; //实时记录滚动距离
+
 
     }
 
     }
 +
}
  
     $("toTop").onclick = function() {
+
var leader = 0,
        //toTop被点击时执行的函数
+
     target = 0,
        target = 0;
+
    timer = null; //计时器变量
        timer = setInterval(function() {
+
window.onscroll = function() {
            leader = leader + (target - leader) / 10;
+
    //滚动时执行的函数
            window.scrollTo(0,leader);
+
    scroll().top > 0 ? show($("toTop")) : hidden($("toTop")); //隐藏和显示totop
            if(leader == target) clearInterval(timer);//当到达顶端清除计时器
+
    leader = scroll().top; //实时记录滚动距离
            //必须写在里面,因为在计时器执行时判断
+
}
        },20);
+
 
    }
+
$("toTop").onclick = function() {
 +
    //toTop被点击时执行的函数
 +
    target = 0;
 +
    timer = setInterval(function() {
 +
        leader = leader + (target - leader) / 10;
 +
        window.scrollTo(0, leader);
 +
        if (leader == target) clearInterval(timer); //当到达顶端清除计时器
 +
        //必须写在里面,因为在计时器执行时判断
 +
    }, 20);
 +
}
 +
</script>
  
    </script>
 
 
</html>
 
</html>

Latest revision as of 08:45, 1 October 2018

interlab

The goal of the iGEM InterLab Study is reliable and repeatable measurement which is a key component to synthetic biology. We took part in the 5th International InterLab Measurement Study and the big question is

“Can we reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD? ”

Parts

Interlab test devices used, as set by the iGEM measurement committee

Device Part Number Location
Negative control BBa_R0040 Well 2D
Positive control BBa_I20270 Well 2B
Test Device 1 BBa_J364000 Well 2F
Test Device 2 BBa_J364001 Well 2H
Test Device 3 BBa_J364002 Well 2J
Test Device 4 BBa_J364007 Well 2L
Test Device 5 BBa_J364008 Well 2N
Test Device 6 BBa_J364009 Well 2P

the preparation of competent cells(Escherichia coli strain DH5α) and their transformation according to the cell measurement protocol. Meanwile, we followed the Calibration Protocols supplied by the iGEM HQ to generate OD600 Reference point, Particle Standard Curve and Fluorescence standard curve to calibrate the plate reader(96 well plate) and then measured both the fluorescence and absorbance of our samples in 0-hour and 6-hour.

We used the set protocol that we were given so as to ensure everyone was doing the same thing. These can be found at this page.

Results and discussion

We submitted the iGEM’s completed spreadsheet to the measurement committee before the deadline, and received confirmation that the results were accepted on the 2018/7/30

OD600 calibration

LUDOX CL-X H2O
Replicate 1 0.059 0.039
Replicate 2 0.060 0.035
Replicate 3 0.060 0.035
Replicate 4 0.061 0.040
Arith. Mean 0.059 0.039
Corrected Abs600 0.023
Reference OD600 0.063
OD600/Abs600 2.769

Fluorescein standard curves

Particle standard curve

Our goal is to reduce lab-to-lab variability in fluorescence measurements, in order to test the variability of variantion in our sample, we caculate coefficient of variantion for both colony, and compare the CV value under different normalization method(Fluorescence per OD or Fluorescence per particle)

0th

6th

After 6h growth, we found that the variation of each type of cells(devices) is decreased, but the CV value of devices 4 and device5 are much more large than others. The variation of fluorescence per OD is much more smaller than fluorescence per particle. what’s more, we also found that colony2’s data is more steady compare with colony1 in most cases. for conveniently compare the normalized value with original value, we removed the data of devices4 and device5, and only compare the colony2 6-hour’s data.

According to the graph, we found that fluorescence per particle can decrease the variation but it depends on the devices. It seems that use OD value to normalize still better than particle. But one thing need to point out that too steady normalized value will loose sensitivity when test the influence of some factors. You can see this Excel File to check our raw and manipulated data.

School's name:SCAU

Member's name:SCAU

Designed by:SCAU