Difference between revisions of "Team:Heidelberg/internal tools"

Line 114: Line 114:
 
}
 
}
 
</style>
 
</style>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
  
 +
<!-- Assets -->
 +
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-zoom-1.0.min.css" type="text/css" media="all" />
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
 +
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
 +
<script src="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/js/bootstrap.min.js"></script>
 +
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet">
 +
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Heidelberg/navbar/CSS?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Heidelberg/table_layout/CSS?action=raw&ctype=text/css" />
 +
                        <!-- Favicon and touch icons -->
 +
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 +
<script src="http://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
 +
<script src="http://static.tildacdn.com/js/tilda-scripts-2.8.min.js"></script>
  
 +
<script src="http://static.tildacdn.com/js/tilda-zoom-1.0.min.js"></script>
 +
<script src="http://static.tildacdn.com/js/bootstrap.min.js"></script>
 +
<script src="http://static.tildacdn.com/js/jquery.touchswipe.min.js"></script>
 +
<script src="http://static.tildacdn.com/js/tilda-map-1.0.min.js"></script>
 +
<script src="http://static.tildacdn.com/js/lazyload-1.3.min.js"></script>
 +
       
 +
                    <style>
 +
                        #input_form {
 +
                        background-color: #939393;
 +
                        border: none;
 +
                        color: white;
 +
                        padding: 5px 32px;
 +
                        text-align: center;
 +
                        text-decoration: none;
 +
                        display: inline-block;
 +
                        font-size: 16px; 
 +
                        }
 +
       
 +
                    </style>
 +
</head>
 +
<body class="t-body">
 +
                        <!-- CSS -->       
 +
                   
  
−
<style>@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
 
  
−
body {
 
−
    margin: 0;
 
−
    padding:0;
 
−
    background-color: #393939;
 
−
    font-size: 14px;
 
−
}
 
−
.wrapper {
 
−
    width:100%;
 
−
    margin: 0 auto;
 
 
      
 
      
−
}
+
    <!-- Top menu -->
−
::-webkit-scrollbar-track {
+
<nav class="navbar navbar-inverse navbar-fixed-top navbar-no-bg" role="navigation">
−
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+
<div class="container">
−
border-radius: 10px;
+
<div class="navbar-header">
−
background-color: #F5F5F5;
+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
−
}
+
<span class="sr-only">Toggle navigation</span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
</button>
 +
<a class="navbar-brand" href="#"><div id="circle">
 +
                    </div></a>
 +
</div>
 +
<!-- Collect the nav links, forms, and other content for toggling -->
 +
<div class="collapse navbar-collapse" id="top-navbar-1">
 +
<ul class="nav navbar-nav navbar-right">
 +
<li><a href="#">Achievements</a></li>
 +
<li class="dropdown"><a href="#">Project <span class="caret"></span></a>
  
−
::-webkit-scrollbar
+
                        </li>
−
{
+
<li><a href="#">Modeling</a></li>
−
width: 12px;
+
<li><a href="#">Software & Hardware <span class="caret"></span></a></li>
−
background-color: #F5F5F5;
+
<li class="dropdown"><a href="#">Human Practice <span class="caret"></span></a>
−
}
+
                        <ul class="dropdown-menu">
 +
                            <li><a href="">Safety & Security</a></li>
 +
                            <li class="divider"></li>
 +
                            <li><a href="">Integrated Human Practice</a></li>
 +
                            <li><a href="">Education</a></li>
 +
                            <li class="divider"></li>
 +
                            <li><a href="">Public Engagement</a></li>
 +
                            <li><a href="">Collaborations</a></li>
 +
                        </ul>
 +
                       
 +
                        </li>
 +
<li><a href="#">People</a></li>
 +
                        <li><a href="#">Toolbox</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
                 
  
−
::-webkit-scrollbar-thumb
+
<div style="background-color:white;">
−
{
+
<div class="t-container">
−
border-radius: 10px;
+
<div class="t-col t-col_12">
−
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+
                                                        <div class="container-fluid tex" style="margin-top: 100px; padding-bottom: 30px;">
−
background-color: #555;
+
                                                                <h1>Internal Tools</h1>
−
}
+
                                                                    <h2>Number of mutations and mutated sequences</h2>
−
/* Selfmade Icons */
+
                                                                    <p>Expected number of mutations in a single sequence:
 +
                                                                        $$p_{m} = \frac{N_{mutations}}{L_{Sequence}} = N_{generations} * r_{mutation} = t_{total} * \Phi * r_{mutation}$$
 +
                                                                    </p>
 +
                                                                    <p>The expected share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is the probability that \(L_{sequence}\) basepairs stay unchanged when \(\frac{N_{mutations}}{L_{Sequence}}\) mutations are expected:
 +
                                                                    $$p_{M} = \frac{N_{mutated}}{N_{Sequences}} = 1 - p(N_{mutations}=0) = 1 - (1-p_{m})^{L_{Sequence}} $$
 +
                                                                    </p>
 +
                                                                    <p>With this equation we can also calculate the number of sequences \(N_{Sequences}\) that have to be sequenced in order to find a mutated one with a probability of \(p(N_{mutated} > 0)\).
 +
                                                                    $$ N_{Sequences} = \frac{p(N_{mutated} > 0)}{p_{M}} $$
 +
                                                                    </p>
 +
                                                                    <p>The probability to find at least one mutated sequence under the given conditions is
 +
                                                                    $$p(N_{mutated}>0) = 1 - (1-p_{M})^{N_{sequences}}$$
 +
                                                                    which gives
 +
                                                                    $$N_{Sequences} = \frac{ln(1-p(N_{mutated}>0))}{ln(1-p_{M})}$$
 +
                                                                    </p>
 +
                                                                    <p>Set \(\Phi\) to zero to use the number of generations for the calculation. If \(\Phi\) and the number of generations are given, \(\Phi\) is used.</p>
 +
                                                                    <p>Consider \(L_{Sequence}\) as the number of basepairs that is expected to be mutated. If half of the sequence you are interested in, is highly conserved choose a lower \(L_{Sequence}\).</p>
  
 +
                                                                </div>
 +
                                                      <form action="" id="form1">
 +
                                                        <section>
 +
                                                        <h2>Get your mutations</h2>
 +
                                                        <ul class="input-list style-1 clearfix">
 +
                                                          <li>
 +
                                                            <label>
 +
                                                                  Mutation rate \(r_{mutation} [bp/generation]\) 
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="mr" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                          </li>
 +
                                                        <li>
 +
                                                                <label>
 +
                                                                Flow troughLagoon \(\Phi_{lagoon} [Volumes/h]\)
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="phi" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                        <li>
 +
                                                                <label>
 +
                                                                  Total time<br> in lagoon \(t_{total} [h]\)
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="tt" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                        <li>
 +
                                                                <label>
 +
                                                                  Number<br> of generations  \(N_{generations}\)
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ng" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                            <li>
 +
                                                                <label>
 +
                                                                  Length of sequence that can mutate \(L_{Sequence} [bp]\)<br>
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ls" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                            <li>
 +
                                                                <label>
 +
                                                                Number of sequences that are sequenced \(N_{Sequences}\)<br>
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ns" value="0" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                            <li>
 +
                                                              <label>
 +
                                                                Probability to get at least one mutated result  \(p(N_{mutated}>0) \)
 +
                                                                <br>
 +
                                                                <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="pm" value="0.9" lang='en-150' step="any">
 +
                                                                </label>
 +
                                                            </li>
 +
                                                            <li>
 +
                                                            <div style="padding-top: 30px;">
 +
                                                              <input type="button" value="Submit" id="input_form" onclick="return number_mutations();">   
 +
                                                                </div>
 +
                                                            </li>
 +
                                                        </ul>
 +
                                                      </section>
 +
                                                        </form>
 +
                                                     
 +
                                                                <br>
 +
                                                                    <p id="number_generations"></p>
 +
                                                                    <p>\(p_{m} =\) <span id="amount_mutations"></span> %(bp/bp).</p>
 +
                                                                    <p>\(N_{mutations} =\) <span id="number_mutations"></span> bp per sequence.</p>
 +
                                                                    <p>The share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is \(p_{M}=\) <span id="amount_mutated"></span> % of sequences</p>
 +
                                                                    <p id="number_to_seq"></p>
 +
                                                    </div>
 +
                                            </div>
 +
                        </div>
  
 +
                                            <section id="footer-sec">
 +
        <div class="container">
 +
            <div class="row" style="padding-top: 30px;">
 +
                <div class="col-md-3">
 +
                    <h4>ABOUT US </h4>
 +
                    <p>"We are an extremely motivated team of young students competing in the worlds biggest synthetic biology competition"</p>
  
−
@media only screen and (min-width: 480px) {
+
                </div>
 +
                <div class="col-md-3">
 +
                    <h4> Useful <strong>Links</strong> </h4>
  
−
.navbar-brand {
+
<li>
−
+
<a href="#">
−
padding-left: 13px;
+
<i class="fa fa-angle-right">
−
padding-top: 1px;
+
</i>
−
background-color: transparent;
+
Special pages
−
pointer-events: none;
+
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<i class="fa fa-angle-right">
 +
</i>
 +
Main Page
 +
</a>
 +
</li>
 +
</div>
 +
                <div class="col-md-3">
 +
                    <h4> Follow us on </h4>
 +
                    <a href="#" target="_blank" id="facebook"><i class="fa fa-facebook-square fa-3x"></i></a> 
 +
                    <span style="color: grey">&</span>
 +
                    <a href="#" target="_blank" id="twitter"><i class="fa fa-twitter-square fa-3x"></i></a>
 +
                </div>
 +
                <div class="col-md-3">
 +
                    <h4> Contact us </h4>
 +
                    <li>
 +
<i class="fa fa-map-marker fa-lg">
 +
</i>
 +
Im Neuenheimer Feld 267
 +
<br>
 +
69120 Heidelberg
 +
</li>
 +
<li>
 +
<i class="fa fa-phone">
 +
</i>
 +
Tel: XXXXXX
 +
</li>
  
−
}
+
<li>
−
.rotator {
+
<a href="mailto:info@yourdomain.com">
−
    width: 80px;/* update this */
+
<i class="fa fa-envelope">
−
  height: 81px;/* update this */
+
</i>
−
    border-radius: 60%;
+
bioquant@uni-heidelberg.de
−
  border-bottom: 9px solid rgba(0,0,0,0.9);
+
</a>
−
  border-top: 9px solid transparent;
+
</li>
−
  border-left: 9px solid transparent;
+
                 </div>
−
  border-right: 8px solid rgba(0,0,0,0.9);
+
             </div>
−
    transform: rotate(45deg);
+
         </div>
−
    }
+
     </section>
−
.navbar-brand>.rotator>img {
+
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
−
  transform: rotate(-45deg);
+
−
  width: 101%;/* update this */
+
−
  height: auto;/* update this */
+
−
  border-radius: 60%;
+
−
}
+
−
 
+
−
.navbar {
+
−
    background-color: rgba(0,0,0,0.9);
+
−
    transition: background-color 300ms linear;
+
−
    height: 55px;
+
−
    min-height: 55px;
+
−
    z-index: 2;
+
−
 
+
−
}
+
−
.clearspace {
+
−
      height: 5px; 
+
−
    }
+
−
.clearspace::before{
+
−
  content: "\200B";
+
−
}
+
−
#cssmenu ul,
+
−
#cssmenu ul li,
+
−
#cssmenu ul li a {
+
−
 
+
−
  list-style: none;
+
−
  line-height: 1;
+
−
  display: block;
+
−
  position: relative;
+
−
 
+
−
 
+
−
 
+
−
}
+
−
 
+
−
#cssmenu > ul {
+
−
    padding-left: 160px;
+
−
}
+
−
#cssmenu > ul > li {
+
−
    float: left;
+
−
    background-color: transparent; 
+
−
    z-index: 5;
+
−
    padding-left: 3%;
+
−
    white-space: nowrap;
+
−
}
+
−
 
+
−
#cssmenu > ul > li:hover > a {
+
−
    color: gold;
+
−
}
+
−
#cssmenu > ul > li > a {
+
−
  height: 50px;
+
−
width: auto;
+
−
 
+
−
display: inline-block;
+
−
  cursor: pointer;
+
−
  z-index: 2;
+
−
  font-size: 15px;
+
−
  text-decoration: none;
+
−
  color: #ffffff;
+
−
  font-family: 'Quicksand', sans-serif;
+
−
  text-align: center;
+
−
  padding-top: 20px;
+
−
+
−
}
+
−
   
+
−
#cssmenu > ul > li:nth-child(2):hover > a:after {
+
−
    content: '';
+
−
    position: absolute;
+
−
    left: 10px;
+
−
    top: 48px;
+
−
    width: 0;
+
−
    height: 0;
+
−
    border-left: 10px solid transparent;
+
−
    border-right: 10px solid transparent;
+
−
    border-bottom: 10px solid white;
+
−
   
+
−
}
+
−
 
+
−
/* New */
+
−
#cssmenu > ul > li > ul {
+
−
    background-color: black;
+
−
    width: 100%;
+
−
    padding-left: 0px;
+
−
    height: auto;
+
−
    border-bottom-left-radius: 5px;
+
−
    border-bottom-right-radius: 5px;
+
−
    border-top: 2px solid white; 
+
−
    visibility: hidden;
+
−
   
+
−
}
+
−
 
+
−
#cssmenu > ul > li:hover > ul {
+
−
    visibility: visible;
+
−
}
+
−
 
+
−
 
+
−
#cssmenu > ul > li:hover > ul > li {
+
−
    text-align: center;
+
−
}
+
−
.Options {
+
−
    color: white;
+
−
    padding: 2px;
+
−
    font-size: 14px;
+
−
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+
−
    cursor: pointer;
+
−
}
+
−
.Options:hover {
+
−
    color: gold;
+
−
    text-decoration: none;
+
−
    -webkit-transition: color .3s ease;
+
−
  -o-transition: color .3s ease;
+
−
  transition: color .3s ease;
+
−
    font-weight: 500;
+
−
}
+
−
 
+
−
 
+
−
     
+
−
}
+
−
 
+
−
@media only screen and (max-width: 480px) {
+
−
.navbar-brand {
+
−
+
−
padding-left: 20px;
+
−
background-color: transparent;
+
−
pointer-events: none;
+
−
 
+
−
}
+
−
.rotator {
+
−
    width: 80px;/* update this */
+
−
  height: 81px;/* update this */
+
−
    border-radius: 60%;
+
−
  border-bottom: 9px solid rgba(0,0,0,0.9);
+
−
  border-top: 9px solid transparent;
+
−
  border-left: 9px solid transparent;
+
−
  border-right: 8px solid rgba(0,0,0,0.9);
+
−
    transform: rotate(45deg);
+
−
    }
+
−
.navbar-brand>.rotator>img {
+
−
  transform: rotate(-45deg);
+
−
  width: 101%;/* update this */
+
−
  height: auto;/* update this */
+
−
  border-radius: 60%;
+
−
}
+
−
 
+
−
.navbar {
+
−
    background-color: rgba(0,0,0,0.9);
+
−
    transition: background-color 300ms linear;
+
−
    height: 60px;
+
−
    min-height: 60px;
+
−
    z-index: 2;
+
−
 
+
−
}
+
−
 
+
−
#cssmenu {
+
−
        position: fixed;
+
−
        background-color: red;
+
−
    }
+
−
#cssmenu ul,
+
−
#cssmenu ul li,
+
−
#cssmenu ul li a {
+
−
 
+
−
  list-style: none;
+
−
  line-height: 1;
+
−
  display: block;
+
−
  position: relative;
+
−
  -webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
  box-sizing: border-box;
+
−
}
+
−
 
+
−
}
+
−
 
+
−
 
+
−
/* Menu Appearance */
+
−
 
+
−
.pushy{
+
−
    position: fixed;
+
−
    width: 200px;
+
−
    height: 100%;
+
−
    top: 0;
+
−
    z-index: 9999;
+
−
    background: #333332;
+
−
    font-size: 0.9em;
+
−
    font-weight: bold;
+
−
    -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
+
−
    -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
+
−
    box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
+
−
    overflow: auto;
+
−
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
+
−
}
+
−
 
+
−
.pushy > ul {
+
−
   
+
−
    list-style: none;
+
−
    padding: 0;
+
−
}
+
−
 
+
−
.pushy a, #side_sub{
+
−
    display: block;
+
−
    color: #b3b3b1;
+
−
    padding: 15px 30px;
+
−
    list-style: none;
+
−
    border-bottom: 1px solid rgba(0, 0, 0, .1);
+
−
    border-top: 1px solid rgba(255, 255, 255, .1);
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
 
+
−
.pushy a:click{
+
−
    background: #00b4ff;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
/* Menu Movement */
+
−
 
+
−
 
+
−
.pushy-left{
+
−
    left:0px;
+
−
    -webkit-transform: translate3d(-200px,0,0);
+
−
    -moz-transform: translate3d(-200px,0,0);
+
−
    -ms-transform: translate3d(-200px,0,0);
+
−
    -o-transform: translate3d(-200px,0,0);
+
−
    transform: translate3d(-200px,0,0);
+
−
}
+
−
 
+
−
.pushy-left-open{
+
−
    left:0px;
+
−
    -webkit-transform: translate3d(0,0,0);
+
−
    -moz-transform: translate3d(0,0,0);
+
−
    -ms-transform: translate3d(0,0,0);
+
−
    -o-transform: translate3d(0,0,0);
+
−
    transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
 
+
−
.container-left-push{
+
−
    -webkit-transform: translate3d(200px,0,0);
+
−
    -moz-transform: translate3d(200px,0,0);
+
−
    -ms-transform: translate3d(200px,0,0);
+
−
    -o-transform: translate3d(200px,0,0);
+
−
    transform: translate3d(200px,0,0);
+
−
}
+
−
 
+
−
.pushy-right{
+
−
    right:0px;
+
−
    -webkit-transform: translate3d(200px,0,0);
+
−
    -moz-transform: translate3d(200px,0,0);
+
−
    -ms-transform: translate3d(200px,0,0);
+
−
    -o-transform: translate3d(200px,0,0);
+
−
    transform: translate3d(200px,0,0);
+
−
}
+
−
 
+
−
.pushy-right-open{
+
−
    right:0px;
+
−
    -webkit-transform: translate3d(0,0,0);
+
−
    -moz-transform: translate3d(0,0,0);
+
−
    -ms-transform: translate3d(0,0,0);
+
−
    -o-transform: translate3d(0,0,0);
+
−
    transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
 
+
−
.container-right-push{
+
−
    -webkit-transform: translate3d(-200px,0,0);
+
−
    -moz-transform: translate3d(-200px,0,0);
+
−
    -ms-transform: translate3d(-200px,0,0);
+
−
    -o-transform: translate3d(-200px,0,0);
+
−
    transform: translate3d(-200px,0,0);
+
−
}
+
−
 
+
−
.pushy-top{
+
−
    height: auto;
+
−
    width: 100%;
+
−
    -webkit-transform: translate3d(0,-100%,0);
+
−
    -moz-transform: translate3d(0,-100%,0);
+
−
    -ms-transform: translate3d(0,-100%,0);
+
−
    -o-transform: translate3d(0,-100%,0);
+
−
    transform: translate3d(0,-100%,0);
+
−
}
+
−
 
+
−
.pushy-top-open{
+
−
    top:0px;
+
−
    height: auto;
+
−
    width: 100%;
+
−
    -webkit-transform: translate3d(0,0,0);
+
−
    -moz-transform: translate3d(0,0,0);
+
−
    -ms-transform: translate3d(0,0,0);
+
−
    -o-transform: translate3d(0,0,0);
+
−
    transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
.container-top-push{
+
−
    -webkit-transform: translate3d(0,0,0);
+
−
    -moz-transform: translate3d(0,0,0);
+
−
    -ms-transform: translate3d(0,0,0);
+
−
    -o-transform: translate3d(0,0,0);
+
−
    transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
 
+
−
.push-push{
+
−
    -webkit-transform: translate3d(200px,0,0);
+
−
    -moz-transform: translate3d(200px,0,0);
+
−
    -ms-transform: translate3d(200px,0,0);
+
−
    -o-transform: translate3d(200px,0,0);
+
−
    transform: translate3d(200px,0,0);
+
−
}
+
−
 
+
−
/* Menu Transitions */
+
−
 
+
−
.pushy, #container, .push{
+
−
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
+
−
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
+
−
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
+
−
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
+
−
}
+
−
 
+
−
.pushy ul > li:active {
+
−
background-color: red;   
+
−
}
+
−
/* Site Overlay */
+
−
 
+
−
.overlay-pushy{
+
−
    display: none;
+
−
}
+
−
 
+
−
.overlay-pushy.overlay-active {
+
−
    display: block;
+
−
    position: fixed;
+
−
    top: 0;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    left: 0;
+
−
    z-index: 9998;
+
−
    background-color: rgba(0,0,0,0.5);
+
−
    -webkit-animation: fade 500ms;
+
−
    -moz-animation: fade 500ms;
+
−
    -o-animation: fade 500ms;
+
−
    animation: fade 500ms;
+
−
}
+
−
 
+
−
@keyframes fade{
+
−
    0%  { opacity: 0; }
+
−
    100% { opacity: 1; }
+
−
}
+
−
 
+
−
@-moz-keyframes fade{
+
−
    0%  { opacity: 0; }
+
−
    100% { opacity: 1; }
+
−
}
+
−
 
+
−
@-webkit-keyframes fade{
+
−
    0%  { opacity: 0; }
+
−
    100% { opacity: 1; }
+
−
}
+
−
 
+
−
@-o-keyframes fade{
+
−
    0%  { opacity: 0; }
+
−
    100% { opacity: 1; }
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
#sidesub > li.active > ul {
+
−
  display: block;
+
−
}
+
−
.align-right {
+
−
  float: right;
+
−
}
+
−
#sidesub > li > a {
+
−
  padding: 16px 22px;
+
−
  cursor: pointer;
+
−
  z-index: 2;
+
−
  font-size: 16px;
+
−
  text-decoration: none;
+
−
  color: #ffffff;
+
−
  background: #3ab4a6;
+
−
  -webkit-transition: color .2s ease;
+
−
  -o-transition: color .2s ease;
+
−
  transition: color .2s ease;
+
−
}
+
−
#sidesub > li > a:hover {
+
−
  color: #d8f3f0;
+
−
}
+
−
#sidesub > li.has-sub > a:after {
+
−
  position: absolute;
+
−
  right: 26px;
+
−
  top: 19px;
+
−
  z-index: 5;
+
−
  display: block;
+
−
  height: 10px;
+
−
  width: 2px;
+
−
  background: #ffffff;
+
−
  content: "";
+
−
  -webkit-transition: all 0.1s ease-out;
+
−
  -moz-transition: all 0.1s ease-out;
+
−
  -ms-transition: all 0.1s ease-out;
+
−
  -o-transition: all 0.1s ease-out;
+
−
  transition: all 0.1s ease-out;
+
−
}
+
−
#sidesub > li.has-sub > a:before {
+
−
  position: absolute;
+
−
  right: 22px;
+
−
  top: 23px;
+
−
  display: block;
+
−
  width: 10px;
+
−
  height: 2px;
+
−
  background: #ffffff;
+
−
  content: "";
+
−
  -webkit-transition: all 0.1s ease-out;
+
−
  -moz-transition: all 0.1s ease-out;
+
−
  -ms-transition: all 0.1s ease-out;
+
−
  -o-transition: all 0.1s ease-out;
+
−
  transition: all 0.1s ease-out;
+
−
}
+
−
#side_sub > li.has-sub.open > a:after,
+
−
#side_sub > li.has-sub.open > a:before {
+
−
  -webkit-transform: rotate(45deg);
+
−
  -moz-transform: rotate(45deg);
+
−
  -ms-transform: rotate(45deg);
+
−
  -o-transform: rotate(45deg);
+
−
  transform: rotate(45deg);
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
}
+
−
 
+
−
@media screen and (max-width: 768px){
+
−
    .pushy{
+
−
        font-size: 1.0em;
+
−
    }
+
−
}
+
−
}
+
−
 
+
−
   
+
−
.bgimg-1, .bgimg-2, .bgimg-3 {
+
−
  position: relative;
+
−
  opacity: 0.7;
+
−
  background-attachment: fixed;
+
−
  background-position: center;
+
−
  background-repeat: no-repeat;
+
−
  background-size: cover;
+
−
 
+
−
}
+
−
 
+
−
.bgimg-1 {
+
−
  background-image: url("");
+
−
  min-height: 600px;
+
−
}
+
−
 
+
−
 
+
−
.caption {
+
−
  position: absolute;
+
−
  left: 0;
+
−
  top: 50%;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  color: #000;
+
−
}
+
−
 
+
−
.caption span.border {
+
−
  background-color: #111;
+
−
  color: #fff;
+
−
  padding: 18px;
+
−
  font-size: 25px;
+
−
  letter-spacing: 10px;
+
−
}
+
−
 
+
−
h3 {
+
−
  letter-spacing: 5px;
+
−
  text-transform: uppercase;
+
−
  font: 20px "Lato", sans-serif;
+
−
  color: #111;
+
−
}
+
−
 
+
−
.AI {
+
−
    padding: 4px;
+
−
    border: 2px solid whitesmoke;
+
−
    border-radius: 20px;
+
−
    margin-top: 80px;
+
−
}
+
−
 
+
−
table {
+
−
    font-family: arial, sans-serif;
+
−
    border-collapse: collapse;
+
−
    width: 100%;
+
−
}
+
−
 
+
−
td, th {
+
−
    border: 1px solid #dddddd;
+
−
    text-align: left;
+
−
    padding: 8px;
+
−
}
+
−
 
+
−
tr:nth-child(even) {
+
−
    background-color: #dddddd;
+
−
    color: #393939
+
−
}
+
−
 
+
−
.image_container {
+
−
    margin: 0px 10px 0px 0px;
+
−
}
+
−
 
+
−
#form1, #form2, #form3 {
+
−
    padding-top: 30px;
+
−
    height: 150px;
+
−
}
+
−
#form4 {
+
−
    padding-top:30px;
+
−
    height: 200px;
+
−
}
+
−
input {
+
−
    border-radius: 5px;
+
−
}
+
−
 
+
−
</style>
+
−
<div class="wrapper">
+
−
  <nav class="navbar navbar-fixed-top" id="vert_nav">
+
−
    <div class="container-fluid">
+
−
      <div class="navbar-header">
+
−
       
+
−
          <div class="side-left-pushy-button" style="float:left;"><a class="navbar-brand" href="#">
+
−
            </a></div>
+
−
      </div>
+
−
      <div class="navbar-collapse collapse" id="cssmenu">
+
−
        <ul>
+
−
            <li><a href="#">Achievements</a></li>
+
−
            <li style="text-align: center;"><a href='#'>Project</a>
+
−
            <ul>
+
−
              <li><a class="Options">Overview</a></li>
+
−
              <li><a class="Options">Description</a></li>
+
−
              <li><a class="Options">Results</a></li>
+
−
              <li><a class="Options">Parts</a></li>
+
−
            </ul>
+
−
            </li>
+
−
            <li><a href='#'>Modeling</a></li>
+
−
            <li><a href="#">Software</a></li>
+
−
            <li><a href="#">Hardware</a></li>
+
−
            <li><a href='#'>HP</a></li>
+
−
            <li><a href='#'>Notebook</a></li>
+
−
            <li><a href='#'>Credits </a></li>
+
−
            <li><a href="#">Toolbox</a></li>
+
−
        </ul>
+
−
      </div>
+
−
      <!--/.nav-collapse -->
+
−
    </div>
+
−
    <!--/.container-fluid -->
+
−
  </nav>
+
−
<nav id="sideLeftPushy" class="pushy pushy-left" >
+
−
            <ul>
+
−
                <li><a href="#">Item 1</a></li>
+
−
                <li class="has-sub" onclick="sidebar()"><a href="#">Item 2</a></li>
+
−
                 <ul id="side_sub">
+
−
                    <li><a href="#">Item 2a</a></li>
+
−
                    <li><a href="#">Item 2b</a></li>
+
−
                </ul>
+
−
                <li><a href="#">Item 3</a></li>
+
−
                <li><a href="#">Item 4</a></li>
+
−
                <li><a href="#">Item 5</a></li>
+
−
                <li><a href="#">Item 6</a></li>
+
−
            </ul>
+
−
</nav>
+
−
<div class="container-fluid" style="margin-top: 100px; padding-bottom: 30px;">
+
−
<div class="row">
+
−
<div class="col-md-1 col-xs-2"></div>
+
−
<div class="col-md-10 col-xs-14" style="background-color: whitesmoke; color:#393939;">
+
−
<div class="row">
+
−
 
+
−
    <div class="col-md-12" align="justify">
+
−
 
+
−
<h1>Internal Tools</h1>
+
−
        <h2>Number of mutations and mutated sequences</h2>
+
−
        <p>Expected number of mutations in a single sequence:
+
−
             $$p_{m} = \frac{N_{mutations}}{L_{Sequence}} = N_{generations} * r_{mutation} = t_{total} * \Phi * r_{mutation}$$
+
−
        </p>
+
−
        <p>The expected share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is the probability that \(L_{sequence}\) basepairs stay unchanged when \(\frac{N_{mutations}}{L_{Sequence}}\) mutations are expected:
+
−
        $$p_{M} = \frac{N_{mutated}}{N_{Sequences}} = 1 - p(N_{mutations}=0) = 1 - (1-p_{m})^{L_{Sequence}} $$
+
−
        </p>
+
−
        <p>With this equation we can also calculate the number of sequences \(N_{Sequences}\) that have to be sequenced in order to find a mutated one with a probability of \(p(N_{mutated} > 0)\).
+
−
        $$ N_{Sequences} = \frac{p(N_{mutated} > 0)}{p_{M}} $$
+
−
        </p>
+
−
        <p>The probability to find at least one mutated sequence under the given conditions is
+
−
        $$p(N_{mutated}>0) = 1 - (1-p_{M})^{N_{sequences}}$$
+
−
        which gives
+
−
        $$N_{Sequences} = \frac{ln(1-p(N_{mutated}>0))}{ln(1-p_{M})}$$
+
−
        </p>
+
−
        <p>Set \(\Phi\) to zero to use the number of generations for the calculation. If \(\Phi\) and the number of generations are given, \(\Phi\) is used.</p>
+
−
        <p>Consider \(L_{Sequence}\) as the number of basepairs that is expected to be mutated. If half of the sequence you are interested in, is highly conserved choose a lower \(L_{Sequence}\).</p>
+
−
       
+
−
    </div>
+
−
    </div>
+
−
    <div class="row">
+
−
<div class="col-md-3"></div>
+
−
<div class="col-md-9">
+
−
<form action="" id="form1">
+
−
  <div>
+
−
<p>
+
−
    <label>
+
−
      Mutation rate \(r_{mutation} [bp/generation]\)  <br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="mr" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
    Flow troughLagoon \(\Phi_{lagoon} [Volumes/h]\)<br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="phi" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
      Total time in lagoon \(t_{total} [h]\)<br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="tt" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
      Number of generations  \(N_{generations}\)<br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ng" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
      Length of sequence that can mutate \(L_{Sequence} [bp]\)<br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ls" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
    Number of sequences that are sequenced \(N_{Sequences}\)<br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="ns" value="0" lang='en-150' step="any">
+
−
    </label>
+
−
    <label>
+
−
    Probability to get at least one mutated result  \(p(N_{mutated}>0) \)
+
−
    <br>
+
−
    <input type="number" pattern="[0-9]+([,\.][0-9]+)?" id="pm" value="0.9" lang='en-150' step="any">
+
−
    </label>
+
−
<input type="button" value="Submit" id="input_form" onclick="return number_mutations();">
+
−
  </p>
+
−
 
+
−
</div>
+
−
</form>
+
−
</div>
+
−
    </div>
+
−
    <br>
+
−
         <p id="number_generations"></p>
+
−
        <p>\(p_{m} =\) <span id="amount_mutations"></span> %(bp/bp).</p>
+
−
        <p>\(N_{mutations} =\) <span id="number_mutations"></span> bp per sequence.</p>
+
−
        <p>The share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is \(p_{M}=\) <span id="amount_mutated"></span> % of sequences</p>
+
−
        <p id="number_to_seq"></p>
+
−
    <br>
+
−
    </div>
+
−
     </div>
+
−
<div class="clear"></div>
+
−
</div>
+
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/numjs/0.13.1/numjs.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/numjs/0.13.1/numjs.js"></script>
Line 935: Line 462:
  
 
</script>
 
</script>
−
</div>
 
−
 
−
<footer style="background-color:whitesmoke; margin-top: 30px;">
 
−
<div class="container-fluid">
 
−
<div class="row">
 
−
<div class="col-md-1"></div>
 
−
<div class="col-md-2"><h3 style="color:#393939">Contact us:</h3></div>
 
−
<div class="col-md-3"></div>
 
−
<div class="col-md-5"><h3 style="color:#393939">Special Thanks to our Sponsors:</h3></div>
 
−
<div class="col-md-1"></div>
 
−
</div>
 
−
<div class="row">
 
−
<div class="col-md-1"></div>
 
−
<div class="col-md-5"><p style="color:#393939">You can reach us on <a href="https://www.facebook.com/"><img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Facebook.svg" style="padding-left: 5px; padding-right:5px" width="50px" height="auto"></a>and<a href="https://www.twitter.com/"><img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Twitter.svg" style="padding-left: 5px; padding-right:5px" width="50px" height="auto"></a></p></div>
 
−
<div class="col-md-5" >
 
−
<img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Hamilton.png" width="20%" height="auto" style="background-color: white; border-radius: 5px;">
 
−
<img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Qiagen.png" width="10%" height="auto" style="background-color: white; border-radius: 5px;">
 
−
<img src="../../iGEM/Wiki/Navbar_Vorschläge/Footer_Icons/Sartorius.png" width="23%" height="auto" style="background-color: white; border-radius: 5px;">
 
−
</div>
 
−
<div class="col-md-1"></div>
 
−
</div>
 
−
</div>
 
−
</footer>
 
−
 
−
</div>
 
−
    </div>
 
−
 
  
  

Revision as of 10:09, 18 September 2017

WikitemplateA home - 2014.igem.org

 

WikitemplateA home

From 2014.igem.org

Internal Tools

Number of mutations and mutated sequences

Expected number of mutations in a single sequence: $$p_{m} = \frac{N_{mutations}}{L_{Sequence}} = N_{generations} * r_{mutation} = t_{total} * \Phi * r_{mutation}$$

The expected share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is the probability that \(L_{sequence}\) basepairs stay unchanged when \(\frac{N_{mutations}}{L_{Sequence}}\) mutations are expected: $$p_{M} = \frac{N_{mutated}}{N_{Sequences}} = 1 - p(N_{mutations}=0) = 1 - (1-p_{m})^{L_{Sequence}} $$

With this equation we can also calculate the number of sequences \(N_{Sequences}\) that have to be sequenced in order to find a mutated one with a probability of \(p(N_{mutated} > 0)\). $$ N_{Sequences} = \frac{p(N_{mutated} > 0)}{p_{M}} $$

The probability to find at least one mutated sequence under the given conditions is $$p(N_{mutated}>0) = 1 - (1-p_{M})^{N_{sequences}}$$ which gives $$N_{Sequences} = \frac{ln(1-p(N_{mutated}>0))}{ln(1-p_{M})}$$

Set \(\Phi\) to zero to use the number of generations for the calculation. If \(\Phi\) and the number of generations are given, \(\Phi\) is used.

Consider \(L_{Sequence}\) as the number of basepairs that is expected to be mutated. If half of the sequence you are interested in, is highly conserved choose a lower \(L_{Sequence}\).

Get your mutations


\(p_{m} =\) %(bp/bp).

\(N_{mutations} =\) bp per sequence.

The share of sequences that shows at least one mutation in \(L_{Sequence}\) bp is \(p_{M}=\) % of sequences

Retrieved from "https://2014.igem.org/WikitemplateA_home"