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

 
(12 intermediate revisions by 3 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 {
+
.navbar-default {
            padding-right: 15px;
+
    background-color: #EEE;
            padding-left: 15px;
+
    border-color: #e7e7e7;
            margin-right: auto;
+
    top: 16px;
            margin-left: auto;
+
    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: 768px) {
+
.container {
            .container {
+
    padding-right: 15px;
                width: 750px;
+
    padding-left: 15px;
            }
+
    margin-right: auto;
        }
+
    margin-left: auto;
 +
}
  
        @media screen and (min-width: 992px) {
+
@media screen and (min-width: 768px) {
            .container {
+
    .container {
                width: 970px;
+
        width: 750px;
            }
+
    }
        }
+
}
  
        @media screen and (min-width: 1200px) {
+
@media screen and (min-width: 992px) {
            .container {
+
    .container {
                width: 1170px;
+
        width: 970px;
            }
+
    }
        }
+
}
  
        .navbar-header {
+
@media screen and (min-width: 1200px) {
            float: left;
+
    .container {
        }
+
        width: 1170px;
 +
    }
 +
}
  
        .navbar-brand {
+
.navbar-header {
            color: #777;
+
    float: left;
            float: left;
+
}
            height: 50px;
+
            padding: 15px 15px;
+
            font-size: 18px;
+
            line-height: 20px;
+
        }
+
  
        .navbar>ul>li {
+
.navbar-brand {
            float: left;
+
    color: #777;
        }
+
    float: left;
 +
    height: 50px;
 +
    padding: 15px 15px;
 +
    font-size: 18px;
 +
    line-height: 20px;
 +
}
  
        .nav>li {
+
.navbar>ul>li {
            position: relative;
+
    float: left;
            display: block;
+
}
            margin-right: 10px;
+
        }
+
  
        .nav>li>a {
+
.nav>li {
            color: #777;
+
    position: relative;
            position: relative;
+
    display: block;
            display: block;
+
    margin-right: 10px;
            padding: 8px 15px;
+
}
            cursor: pointer;
+
        }
+
  
        .nav>li>a:hover {
+
.nav>li>a {
            color: #333;
+
    color: #777;
        }
+
    position: relative;
 +
    display: block;
 +
    padding: 8px 15px;
 +
    cursor: pointer;
 +
}
  
        .caret {
+
.nav>li>a:hover {
            display: inline-block;
+
    color: #333;
            width: 0;
+
}
            height: 0;
+
            margin-left: 2px;
+
            vertical-align: middle;
+
            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 {
+
.caret {
            border-top: 4px solid #333;
+
    display: inline-block;
        }
+
    width: 0;
 +
    height: 0;
 +
    margin-left: 2px;
 +
    vertical-align: middle;
 +
    border-top: 4px solid #777;
 +
    border-right: 4px solid transparent;
 +
    border-left: 4px solid transparent;
 +
    position: absolute;
 +
    top: 18px;
 +
    right: 1px;
 +
}
  
        .nav>li .dropdown-menu {
+
.nav>li>a:hover+span {
            margin-top: 0;
+
    border-top: 4px solid #333;
            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 {
+
.nav>li .dropdown-menu {
            display: list-item;
+
    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;
+
 
  height: 350px;
+
    margin: 0;
  padding-top: 70px;
+
    height: 100%;
  min-width: 1140px;
+
    padding-top: 70px;
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') center center;
+
    min-width: 1140px;
 +
    background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') center center;
 
}
 
}
 +
 
.heart {
 
.heart {
  width: 1140px;
+
    width: 1140px;
  margin: 0 auto;/* 通用的版心 */
+
    margin: 0 auto;
 +
    /* 通用的版心 */
 
}
 
}
 +
 
#mask {
 
#mask {
 
     width: 100%;
 
     width: 100%;
     height: 300px;
+
     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;
Line 194: Line 202:
 
     position: relative;
 
     position: relative;
 
}
 
}
.DBoard0 {/*文字样式*/
+
 
 +
.DBoard0 {
 +
    /*文字样式*/
 
     margin: 0px auto 40px auto;
 
     margin: 0px auto 40px auto;
 
     width: 1000px;
 
     width: 1000px;
Line 203: Line 213:
 
     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 234: Line 252:
 
     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 248: Line 271:
 
     left: 50%;
 
     left: 50%;
 
}
 
}
 +
 
#buttons span {
 
#buttons span {
 
     width: 12px;
 
     width: 12px;
Line 256: Line 280:
 
     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 270: Line 296:
 
}
 
}
  
   
 
 
}
 
}
#img4{
+
 
 +
#img4 {
 
     width: 10%;
 
     width: 10%;
 
}
 
}
 +
 
#content {
 
#content {
 
     width: 101%;
 
     width: 101%;
Line 285: Line 312:
 
     position: relative;
 
     position: relative;
 
}
 
}
 +
 
#content {
 
#content {
 
     position: relative;
 
     position: relative;
Line 297: Line 325:
 
     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 305: Line 334:
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     line-height: 100px;
 
     line-height: 100px;
 
 
}
 
}
#article1{
 
    background: rgba(0, 0, 0, 0);
 
height: 1710px;
 
  
 +
#article1 {
 +
    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;
 
}
 
}
  
#article2{
+
#article2 {
 
     background: url('https://static.igem.org/mediawiki/2018/9/9e/T--SCAU-CHINA--Description.png') no-repeat center center;
 
     background: url('https://static.igem.org/mediawiki/2018/9/9e/T--SCAU-CHINA--Description.png') no-repeat center center;
     height:400px;
+
     height: 400px;
}#title1{
+
}
 +
 
 +
#title1 {
 
     height: 50px;
 
     height: 50px;
 
     background: rgba(0, 0, 0, 0.3);
 
     background: rgba(0, 0, 0, 0.3);
 
     text-align: left;
 
     text-align: left;
     font-size:30px;
+
     font-size: 30px;
 
     color: white;
 
     color: white;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Line 336: Line 366:
 
}
 
}
  
#title2{
+
#title2 {
 
     height: 50px;
 
     height: 50px;
 
     background: rgba(0, 0, 0, 0.3);
 
     background: rgba(0, 0, 0, 0.3);
 
     text-align: left;
 
     text-align: left;
     font-size:30px;
+
     font-size: 30px;
 
     color: white;
 
     color: white;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     line-height: 50px;
 
     line-height: 50px;
 
}
 
}
#art1{
+
 
background: rgba(0, 0, 0, 0);
+
#art1 {
    height: 300px;
+
    background: rgba(0, 0, 0, 0);
 +
    height: 300px;
 
}
 
}
#art2{
+
 
background: rgba(0, 0, 0, 0);
+
#art2 {
    height: 200px;
+
    background: rgba(0, 0, 0, 0);
 +
    height: 200px;
 
}
 
}
#art1 p{
+
 
text-align: left;
+
#art1 p {
 +
    text-align: left;
 
     position: relative;
 
     position: relative;
 
     color: white;
 
     color: white;
 
     margin-top: 0px;
 
     margin-top: 0px;
   
+
 
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size:20px;
+
     font-size: 20px;
 
}
 
}
#art2 p{
+
 
    text-align: left;
+
#art2 p {
 +
    text-align: left;
 
     position: relative;
 
     position: relative;
 
     color: white;
 
     color: white;
     margin-top:0px;
+
     margin-top: 0px;
   
+
 
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size:20px;
+
     font-size: 20px;
 
}
 
}
 +
 
body {
 
body {
 
     background-color: white;
 
     background-color: white;
 
}
 
}
 
</style>
 
</style>
 +
 +
<div class="Tan MingYang"></div>
 +
<div class="Li JiaDong"></div>
 +
<div class="Huang XinLing"></div>
 +
<div class="Fan ZhongZhao"></div>
 +
 
<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>
            <div class="navbar">
+
<div class="navbar">
                <ul style="float: left;" class="nav">
+
<ul style="float: left;" class="nav">
                    <li class="dropdown">
+
<li class="dropdown">
                        <a href="javascript:void(0)">TEAM</a>
+
<a href="javascript:void(0)">TEAM</a>
                        <span class="caret"></span>
+
<span class="caret"></span>
                        <ul class='dropdown-menu'>
+
<ul class='dropdown-menu'>
                            <li>
+
<li>
                                <a href="#">Time shaft</a>
+
<a href="https://2018.igem.org/Team:SCAU-China/Members">Members</a>
                            </li>
+
</li>
                            <li>
+
<li>
                                <a href="#">Members</a>
+
<a href="https://2018.igem.org/Team:SCAU-China/Attributions">Attributions</a>
                            </li>
+
</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="#">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="#">NoteBook</a></li>
+
                          <li><a href="#">Gallery</a></li>
+
                          <li><a href="#">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="#">Integrated</a></li>
+
                            <li><a href="#">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>
+
  
 +
</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/ProjectOverview">Overview</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Background">Background</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Design">Design</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/SRK">Synergistic Recombination Kit</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/MM">Mathematical Model of Biological Intrinsic Regulation System</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Type">Type II CRISPR/Cas 9 Kit</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/MOM">Method for Optimizing Microbial Cell Culture</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Outlook">Outlook</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Demonstrate">Demonstrate</a></li>
  
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">LAB WORK</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Experiments">Experiments</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Parts">Parts</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Improve">Improve</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/InterLab">Interlab</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Measurement">Measurement</a></li>
 +
</ul>
 +
</li>
  
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">MODEL</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Model">Overview</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/HAWNA">HAWNA</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/PPIBoost">PPIBoost</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/CultrueCondition">Cultrue Condition</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/Human_Practices">Overview</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/silver">Silver</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Integrated">Integrated</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Public_Engagement">Public Engagement & Education</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Collaborations">Collaborations</a></li>
 +
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 
<div id="mainDiv">
 
<div id="mainDiv">
<div class="heart"><!-- 版心 -->
+
    <div class="heart">
    <div id="mask"><!-- 半透明底板 -->
+
        <!-- 版心 -->
     
+
        <div id="mask">
      <div class="DBoard" id="title">  
+
            <!-- 半透明底板 -->
      coming soon      </div>
+
            <div class="DBoard" id="title1">Measurement</div>
     
+
            <div class="DBoard" id="article1">
 +
                <h2>Overview</h2>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;Biological systems are characterized as highly complicated interactome from systems biology point of view. The rational design of individual basic parts like selection of promoter is crucial for predictable modulation of gene expression especially in prokaryotic organisms, the prokaryotic promoter contains multiple elements  which mainly determined by the promoter core consisting of -10 box, -35 box, and transcription-start site +1[1]. And the interplay between the promoter core and operators or genetic circut is complex. Although we have had large amounts of promoter parts in iGEM database, we need to design  scientific predicting approaches to measure and characterize  the regulatory abilities of these prokaryotic promoter parts that are difficult to be tested experimentally. The aim of optimization of identified promoter core region is to eliminate any unwanted non-functional promoter sequence. Our team proposed a brand new computational tool to predict promoter intensity in E.coil, and allow us to quickly identify the most critical sequence sites or units which play a key role in determining promoter strength or activity. We hope our method will contribute to help the bottom-up design of genetic circut, and speed up the understandings of the controlling network for precisely regulating gene expression. We believe that our newly developed computational method can be used as an efficient and useful tool  for systems biology and synthetic biology.
 +
                </p>
 +
                <h2>Methodology</h2>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;Prediction of the promoter intensity is an old question. Intensive efforts have been put into interpreting and dissecting the modes of interplays in order to develop a rational basis for promoter engineering computationally. Klausdieter Weller et al used occurrence frequencies of consensus pattern with empircal regression model to predict the promoter intensity [2]. Ashok Palaniappan, Ramit B and Keshav Aditya RP(2017 iGEM team from Sri Venkateswara College of Engineering, Anna University) developed a computational website using sequence information of -35 hexamer and -10 hexamer to predict sigma 70 promoter activity [3]. Despite all these methods can predict promoter strength, the predict performance is still unsatisfied. In addition, these methods can not measure the contribution to the activities of promoters embeded in the sequences
 +
                </p>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;We use sequence information to predict promoter activity. Our training set gene sequences include both the orignal promoter of E.coil and the recomposed promoter which are derived from E.coil promoters infected by lambda bacteriophage. 68 bp DNA fragment from transcription start site position −49 to position +19 are selected including RNA polymerase site for Sextama (−35 region), double hilex liquated site for Pribnow (−10 region) and other linked and assistant sequence fragments [4]. We combined a new feature encode method and together with machine learning algorithm to predict promoter strength and consensus unit or specific site may have direct correlation to the promoter intensity.
 +
                </p>
 +
                <h2>Feature encoding and XGBoost training</h2>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;Like protein-proein interaction (PPI) prediction, one of main computational challenges is to find a suitable way to fully describe the information of sequence. Like feature encode method in PPI prediction, we used similar descriptor conjoint triad (three base as one unit) to describe the information of sequence, and calculate occurance frequencies of each unit to project promoter sequence into a homogeneous vector space by counting the frequencies of each unit type.
 +
                </p>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;In addition, we also used sequence based information to describe information on each site. We project sequence(“ATCG”) to numeric vector format(“1234”) as a new feature vector and concatenate above two feature vectors together as 132-dimensional feature vector to predict the activity of promoters. The process of encoding feature vectors is described as below:
 +
                </p>
 +
                <img style="width: 100%" src="https://static.igem.org/mediawiki/2018/d/d2/T--SCAU-China--Measurement010.jpg">
 +
                <h2>Fig.1. The flowchart of feature encoding. We calculated the unit frequency and encode each sequence site as numeric format, then concatenate above two vectors as 132-dimensional feature vector to predict promoter activity.</h2>
 +
                <p>
 +
                &nbsp;&nbsp;&nbsp;&nbsp;IWe used a machine learning framework named ‘XGBoost’ to training our promoter intensity prediction model. In the training step, we used a grid search approach within a limited range to minimize the overfitting of the prediction model, leave one out crossover validation was used to investigate the training set. Predicted accuracy defined by that is associated with mean-square-error and R^2 was used to select the parameters</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/e/ea/T--SCAU-China--Measurement011.png" />
 +
                <p>
 +
                  N means the round times of Leave one out crossover validation,<img src="https://static.igem.org/mediawiki/2018/d/de/T--SCAU-China--Measurement001.png"/>  is the predict value, <img src="https://static.igem.org/mediawiki/2018/4/42/T--SCAU-China--Measurement002.png" /> means the raw value of promoter strength.
 +
                </p>
 +
                <h2>Result</h2>
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;According to our predicted result, we found that our predicted promoter intensity is highly correlated with real promoter activity.</p>
 +
                <img src="https://static.igem.org/mediawiki/2018/2/2a/T--SCAU-China--Measurement012.png" />
 +
                <h2>Fig.2. The task of performance on test dataset</h2>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;One advantage of XGBoost and the other boosting method (For instance, GBDT[5]) is that it can measure the importance of each feature for prediction task. The benefit of using the gradient boost algorithm is that after the boosting tree is created, the importance score for each attribute can be obtained directly. In general, the importance score measures the value of the feature in the construction of the decision tree in the model. The more a feature is used to build a decision tree in a model, the more important it is.
 +
                </p>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;Finally, the results of an attribute in all the boosting trees are weighted and summed, and then are averaged to obtain the importance score. We showed the top15 most important
 +
features with their score.
  
   
+
                </p>
      <p>School's name:SCAU</p>
+
                <img src="https://static.igem.org/mediawiki/2018/4/4e/T--SCAU-China--Measurement013.png" />
      <p>Member's name:SCAU</p>
+
                <h2>Fig. 3. The importance of Top15 features.</h2>
      <p>Designed by:SCAU</p>
+
                <p>&nbsp;&nbsp;&nbsp;&nbsp;As shown in Fig. 2, we can see that the frequence of CCG unit plays the most important role in predict promoter strength. Moroever, we also can see that AAA, ACT, and AAT also play important roles in regulating the promoter activity. It further agrees with the TATAA Pribnow box (-10 sequence region). We found that the position 51 on the sequence(+2) region plays the most important functions when compared with other promoter sequence site which is near to the transcript start site. Position 36 (-14) is near to the Pribnow box. Position 4 (-46), position7 (-43) is near to the Saxtama box (around -35 sequence region).</p>
 +
                <p>
 +
                  &nbsp;&nbsp;&nbsp;&nbsp;Using our model, we predicted and measured a wide range of E.coil promoter activities based on the Ecoil promoter database ‘PromEC’ which includes 471 promoter sequences [4](see predict_promEC.txt). According to our prediction, we randomly selected three promoters: rplj (predict value:1.723286152), dapA (predict value:1.235077024) and caiF (predict value:0.68780911) to fuse with green fluorescent protein (GFP) to test the promoter strength and verify our prediction.
 +
                </p>
 +
                <h2>Experiment validation</h2>
 +
               
 +
                <h2>Material and protocol</h2>
 +
                <p>Vector construction</p>
 +
                 
 +
                  <p>1. Clone the eGFP gene (720bp) and purify by D205 StarPrep Gel Extraction Kit StarPrep </p>
 +
                  <img src="https://static.igem.org/mediawiki/2018/3/36/T--SCAU-CHINA--measurement1.PNG" />
 +
                  <p>2. Digestion</p>
 +
                  <p>Digest the rplJ-pET28(a)/ dapA-pET28(a)/ caiF-pET28(a) (we create 3 new vectors with prplJ base on the pET28(a) vector by DNA endonuclease BamH I (Thermo).</p>
 +
                  <img src="https://static.igem.org/mediawiki/2018/5/5b/T--SCAU-CHINA--measurement2.PNG" />
 +
                  <p>Program:</p>
 +
       
 +
                  <p>37℃&nbsp;&nbsp; 50min</p>
 +
                  <p>80℃&nbsp;&nbsp; 5min</p>
 +
                  <p>3. Ligation </p>
 +
                  <p>Gibson ligation technology is used in this experiment.</p>
 +
                  <img src="https://static.igem.org/mediawiki/2018/2/2a/T--SCAU-CHINA--measurement3.PNG" />
 +
                  <p>Program:</p>
 +
       
 +
                  <p>50℃ &nbsp;&nbsp;50min</p>
 +
                  <h4>Culture </h4>
 +
                  <p>1) Culture the positive clone in the LB medium for 12 hours.</p>
 +
                  <p>2) Adjust each cultures’ OD600 until 2.1.</p>
 +
 
 +
                  <p>3) Add 1mL cultures to new 30mL LB medium.</p>
 +
                  <p>4) And then culture for 12 hours.</p>
 +
                  <h4>Fluorescence intensity measurement </h4>
 +
                  <p>1) First, pipette 15 microliters of bacteria into the slides.</p>
 +
                  <p>2) Second, check the slides under the Inverted fluorescence Microscope and obtain the Fluorescent images.</p>
 +
                  <p>3) Third, analyze the Fluorescent images by ImageJ and get the diagram which shows the fluorescence intensity.</p>
 +
                  <img src="https://static.igem.org/mediawiki/2018/8/80/T--SCAU-China--Measurement014.png" />
 +
                <img src="https://static.igem.org/mediawiki/2018/3/3f/T--SCAU-China--Measurement015.png" />
 +
                  <h2>Fig.4. The GFP test result, demonstrating the promoter activity order is as same as our prediction</h2>
 +
                  <h2>Discussion and future work</h2>
 +
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;Our method gives a promising way to realize the minimal functional promoter and identify the most important region in the promoter sequence. In the future, we want to perform truncation or point mutation of intertested sequence, and compare the influence of different mutation typesin the activity of promoter to further verify our prediction model.</p>
 +
                  <p>Attachted is our prediction results,<a href="https://static.igem.org/mediawiki/2018/3/3c/T--SCAU-China--PredictionResults.xls"> click and download it.</a></p>
 +
                  <p>[1] Zong Y, Zhang H M, Cheng L, et al. Insulated transcriptional elements enable precise design of genetic circuits[J]. Nature Communications, 2017, 8(1):52.</p>
 +
                  <p>[2] Weller K, Recknagel R D. Promoter strength prediction based on occurrence frequencies of consensus patterns[J]. Journal of Theoretical Biology, 1994, 171(4):355-359.</p>
 +
                  <p>[3] https://promoterpredict.com/</p>
 +
                  <p>[4] Liang G, Li Z. Scores of generalized base properties for quantitative sequence-activity modelings for E. coli promoters based on support vector machine.[J]. Journal of Molecular Graphics & Modelling, 2007, 26(1):269-281.</p>
 +
                  <p>[5] Friedman J H. Greedy function approximation: A gradient boosting machine.[J]. Annals of Statistics, 2001, 29(5):1189-1232.</p>
 +
 
 +
            </div>
 +
            <div class="">
 +
            </div>
 +
            <p>School's name:SCAU</p>
 +
            <p>Member's name:SCAU</p>
 +
            <p>Designed by:SCAU</p>
 +
        </div>
 
     </div>
 
     </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");
 
         btns.appendChild(span);
 
         btns.appendChild(span);
 
     }
 
     }
 
 
 
     //轮播图正式部分
 
     //轮播图正式部分
 
     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 584: Line 693:
  
 
     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函数
 
+
         timer = setTimeout(function() {
     function play() {//自动点击next函数
+
             next.onclick(); //自动点击next
         timer = setTimeout(function(){
+
             play(); //递归调用
             next.onclick();//自动点击next
+
         }, interval);
             play();//递归调用
+
         },interval);
+
 
     }
 
     }
  
Line 605: Line 712:
 
         clearTimeout(timer);
 
         clearTimeout(timer);
 
     }
 
     }
 
 
 
     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;
    </script>
+
    timer = setInterval(function() {
 
+
        leader = leader + (target - leader) / 10;
 +
        window.scrollTo(0, leader);
 +
        if (leader == target) clearInterval(timer); //当到达顶端清除计时器
 +
        //必须写在里面,因为在计时器执行时判断
 +
    }, 20);
 +
}
 +
</script>
  
 
</html>
 
</html>

Latest revision as of 19:36, 17 October 2018

Measurement

Overview

    Biological systems are characterized as highly complicated interactome from systems biology point of view. The rational design of individual basic parts like selection of promoter is crucial for predictable modulation of gene expression especially in prokaryotic organisms, the prokaryotic promoter contains multiple elements which mainly determined by the promoter core consisting of -10 box, -35 box, and transcription-start site +1[1]. And the interplay between the promoter core and operators or genetic circut is complex. Although we have had large amounts of promoter parts in iGEM database, we need to design scientific predicting approaches to measure and characterize the regulatory abilities of these prokaryotic promoter parts that are difficult to be tested experimentally. The aim of optimization of identified promoter core region is to eliminate any unwanted non-functional promoter sequence. Our team proposed a brand new computational tool to predict promoter intensity in E.coil, and allow us to quickly identify the most critical sequence sites or units which play a key role in determining promoter strength or activity. We hope our method will contribute to help the bottom-up design of genetic circut, and speed up the understandings of the controlling network for precisely regulating gene expression. We believe that our newly developed computational method can be used as an efficient and useful tool for systems biology and synthetic biology.

Methodology

    Prediction of the promoter intensity is an old question. Intensive efforts have been put into interpreting and dissecting the modes of interplays in order to develop a rational basis for promoter engineering computationally. Klausdieter Weller et al used occurrence frequencies of consensus pattern with empircal regression model to predict the promoter intensity [2]. Ashok Palaniappan, Ramit B and Keshav Aditya RP(2017 iGEM team from Sri Venkateswara College of Engineering, Anna University) developed a computational website using sequence information of -35 hexamer and -10 hexamer to predict sigma 70 promoter activity [3]. Despite all these methods can predict promoter strength, the predict performance is still unsatisfied. In addition, these methods can not measure the contribution to the activities of promoters embeded in the sequences

    We use sequence information to predict promoter activity. Our training set gene sequences include both the orignal promoter of E.coil and the recomposed promoter which are derived from E.coil promoters infected by lambda bacteriophage. 68 bp DNA fragment from transcription start site position −49 to position +19 are selected including RNA polymerase site for Sextama (−35 region), double hilex liquated site for Pribnow (−10 region) and other linked and assistant sequence fragments [4]. We combined a new feature encode method and together with machine learning algorithm to predict promoter strength and consensus unit or specific site may have direct correlation to the promoter intensity.

Feature encoding and XGBoost training

    Like protein-proein interaction (PPI) prediction, one of main computational challenges is to find a suitable way to fully describe the information of sequence. Like feature encode method in PPI prediction, we used similar descriptor conjoint triad (three base as one unit) to describe the information of sequence, and calculate occurance frequencies of each unit to project promoter sequence into a homogeneous vector space by counting the frequencies of each unit type.

    In addition, we also used sequence based information to describe information on each site. We project sequence(“ATCG”) to numeric vector format(“1234”) as a new feature vector and concatenate above two feature vectors together as 132-dimensional feature vector to predict the activity of promoters. The process of encoding feature vectors is described as below:

Fig.1. The flowchart of feature encoding. We calculated the unit frequency and encode each sequence site as numeric format, then concatenate above two vectors as 132-dimensional feature vector to predict promoter activity.

    IWe used a machine learning framework named ‘XGBoost’ to training our promoter intensity prediction model. In the training step, we used a grid search approach within a limited range to minimize the overfitting of the prediction model, leave one out crossover validation was used to investigate the training set. Predicted accuracy defined by that is associated with mean-square-error and R^2 was used to select the parameters

N means the round times of Leave one out crossover validation, is the predict value, means the raw value of promoter strength.

Result

    According to our predicted result, we found that our predicted promoter intensity is highly correlated with real promoter activity.

Fig.2. The task of performance on test dataset

    One advantage of XGBoost and the other boosting method (For instance, GBDT[5]) is that it can measure the importance of each feature for prediction task. The benefit of using the gradient boost algorithm is that after the boosting tree is created, the importance score for each attribute can be obtained directly. In general, the importance score measures the value of the feature in the construction of the decision tree in the model. The more a feature is used to build a decision tree in a model, the more important it is.

    Finally, the results of an attribute in all the boosting trees are weighted and summed, and then are averaged to obtain the importance score. We showed the top15 most important features with their score.

Fig. 3. The importance of Top15 features.

    As shown in Fig. 2, we can see that the frequence of CCG unit plays the most important role in predict promoter strength. Moroever, we also can see that AAA, ACT, and AAT also play important roles in regulating the promoter activity. It further agrees with the TATAA Pribnow box (-10 sequence region). We found that the position 51 on the sequence(+2) region plays the most important functions when compared with other promoter sequence site which is near to the transcript start site. Position 36 (-14) is near to the Pribnow box. Position 4 (-46), position7 (-43) is near to the Saxtama box (around -35 sequence region).

    Using our model, we predicted and measured a wide range of E.coil promoter activities based on the Ecoil promoter database ‘PromEC’ which includes 471 promoter sequences [4](see predict_promEC.txt). According to our prediction, we randomly selected three promoters: rplj (predict value:1.723286152), dapA (predict value:1.235077024) and caiF (predict value:0.68780911) to fuse with green fluorescent protein (GFP) to test the promoter strength and verify our prediction.

Experiment validation

Material and protocol

Vector construction

1. Clone the eGFP gene (720bp) and purify by D205 StarPrep Gel Extraction Kit StarPrep

2. Digestion

Digest the rplJ-pET28(a)/ dapA-pET28(a)/ caiF-pET28(a) (we create 3 new vectors with prplJ base on the pET28(a) vector by DNA endonuclease BamH I (Thermo).

Program:

37℃   50min

80℃   5min

3. Ligation

Gibson ligation technology is used in this experiment.

Program:

50℃   50min

Culture

1) Culture the positive clone in the LB medium for 12 hours.

2) Adjust each cultures’ OD600 until 2.1.

3) Add 1mL cultures to new 30mL LB medium.

4) And then culture for 12 hours.

Fluorescence intensity measurement

1) First, pipette 15 microliters of bacteria into the slides.

2) Second, check the slides under the Inverted fluorescence Microscope and obtain the Fluorescent images.

3) Third, analyze the Fluorescent images by ImageJ and get the diagram which shows the fluorescence intensity.

Fig.4. The GFP test result, demonstrating the promoter activity order is as same as our prediction

Discussion and future work

    Our method gives a promising way to realize the minimal functional promoter and identify the most important region in the promoter sequence. In the future, we want to perform truncation or point mutation of intertested sequence, and compare the influence of different mutation typesin the activity of promoter to further verify our prediction model.

Attachted is our prediction results, click and download it.

[1] Zong Y, Zhang H M, Cheng L, et al. Insulated transcriptional elements enable precise design of genetic circuits[J]. Nature Communications, 2017, 8(1):52.

[2] Weller K, Recknagel R D. Promoter strength prediction based on occurrence frequencies of consensus patterns[J]. Journal of Theoretical Biology, 1994, 171(4):355-359.

[3] https://promoterpredict.com/

[4] Liang G, Li Z. Scores of generalized base properties for quantitative sequence-activity modelings for E. coli promoters based on support vector machine.[J]. Journal of Molecular Graphics & Modelling, 2007, 26(1):269-281.

[5] Friedman J H. Greedy function approximation: A gradient boosting machine.[J]. Annals of Statistics, 2001, 29(5):1189-1232.

School's name:SCAU

Member's name:SCAU

Designed by:SCAU