Team:HokkaidoU Japan/Shuffling Kit/Primer Designer

From 2013.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
Line 3: Line 3:
   <div id="common-header-bottom-background">
   <div id="common-header-bottom-background">
     <div class="wrapper">
     <div class="wrapper">
-
       <h1 id="common-header-title">Maestro E.coli</h1>
+
       <h1 id="common-header-title">Maestro <span class="italic">E. coli</span></h1>
-
       <h2 id="common-header-subtitle">Optimization Kit</h2>
+
       <h2 id="common-header-subtitle">Shuffling Kit</h2>
-
       <img id="common-header-img" src="https://static.igem.org/mediawiki/2013/2/21/HokkaidoU2013_Maestro.png">
+
       <img id="common-header-img" src="https://static.igem.org/mediawiki/2013/e/ea/HokkaidoU2013_Maestro_Header.png">
     </div>
     </div>
   </div>
   </div>
Line 11: Line 11:
   <div class="wrapper">
   <div class="wrapper">
     <div id="hokkaidou-contents">
     <div id="hokkaidou-contents">
 +
<style type="text/css">
 +
ul{list-style:none;margin-left:0}#plasmid-map{width:100%;height:160px}#plasmid-map div{position:relative;float:left;height:100%;background:url("https://static.igem.org/mediawiki/2013/4/4d/HokkaidoU2013_Plasmid_Parts.png") no-repeat}#plasmid-map #plasmid-0{width:80px}#plasmid-map #plasmid-1{width:101px}#plasmid-map #plasmid-2{width:83px}#plasmid-map #plasmid-3{width:99px}#plasmid-map #plasmid-4{width:83px}#plasmid-map #plasmid-5{width:99px}#plasmid-map #plasmid-6{width:83px}#plasmid-map #plasmid-7{width:99px}#plasmid-map #plasmid-8{width:73px}#plasmid-map #plasmid-9{width:80px}#plasmid-map #plasmid-0{background-position:0 -160px}#plasmid-map #plasmid-1{background-position:-81px -160px}#plasmid-map #plasmid-2{background-position:-184px -160px}#plasmid-map #plasmid-3{background-position:-269px -160px}#plasmid-map #plasmid-4{background-position:-184px -160px}#plasmid-map #plasmid-5{background-position:-269px -160px}#plasmid-map #plasmid-6{background-position:-184px -160px}#plasmid-map #plasmid-7{background-position:-269px -160px}#plasmid-map #plasmid-8{background-position:-369px -160px}#plasmid-map #plasmid-9{background-position:-442px -160px}#plasmid-map #plasmid-0.plasmid-gray{background-position:0 0}#plasmid-map #plasmid-1.plasmid-gray{background-position:-81px 0}#plasmid-map #plasmid-2.plasmid-gray{background-position:-184px 0}#plasmid-map #plasmid-3.plasmid-gray{background-position:-269px 0}#plasmid-map #plasmid-4.plasmid-gray{background-position:-184px 0}#plasmid-map #plasmid-5.plasmid-gray{background-position:-269px 0}#plasmid-map #plasmid-6.plasmid-gray{background-position:-184px 0}#plasmid-map #plasmid-7.plasmid-gray{background-position:-269px 0}#plasmid-map #plasmid-8.plasmid-gray{background-position:-369px 0}#plasmid-map #plasmid-9.plasmid-gray{background-position:-442px 0}#plasmid-map span{position:absolute;top:40px;left:-5px}.my-form{width:100%}.my-form label{width:300px;text-align:right}textarea{width:500px}.monospace{font-family:'Inconsolata'!important;font-size:18px!important}option[disabled]{color:#c6c6c6}input[type="radio"]{padding:0}textarea{overflow:auto;vertical-align:top}label{display:inline-block;margin-bottom:5px}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.form-control{font-family:'Open Sans';padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee}textarea.form-control{height:auto}.form-group{margin-bottom:15px}.radio,.checkbox{display:block;min-height:20px;margin-top:10px;margin-bottom:10px;padding-left:20px;vertical-align:middle}.radio label,.checkbox label{display:inline;margin-bottom:0;font-weight:normal;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{float:left;margin-left:-20px}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}
 +
</style>
<!-- end header / begin contents -->
<!-- end header / begin contents -->
-
    <form id="primer-designer">
+
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
-
      Overhang_F <input type="text" name="overhang-f"><br>
+
            <h1>Primer Designer for Maestro</h1>
-
      Overhang_R <input type="text" name="overhang-r"><br>
+
-
      Sequence <input type="text" name="sequence"><br>
+
-
      <button>Calculate</button>
+
-
    </form>
+
-
    <hr>
+
            <h3>1. First, you have to decide whether or not you conform to our default overhang set.</h3>
 +
            <div class="radio">
 +
              <label>
 +
                <input type="radio" name="default" value="1">Yes, I conform to the default.</input>
 +
              </label>
 +
            </div>
 +
            <div class="radio">
 +
              <label>
 +
                <input type="radio" name="default" value="2">No, I design original overhangs.</input>
 +
              </label>
 +
            </div>
-
    <h4>Forward</h4>
+
            <div id="conform">
-
    <dl>
+
              <h3>2. Secondly, you hove to determine how many CDS are included in your target plasmid.</h3>
-
      <dt>sequence</dt>
+
              I have
-
      <dd><pre id="primer-f"></pre></dd>
+
              <select class="form-control" name="cds-number">
-
      <dt>tm</dt>
+
                <option value="1">1</option>
-
      <dd><pre id="tm-f"></pre></dd>
+
                <option value="2">2</option>
-
    </dl>
+
                <option value="3">3</option>
-
    <h4>Reverse</h4>
+
              </select>
-
    <dl>
+
              CDS(s) included.
-
      <dt>sequence</dt>
+
-
      <dd><pre id="primer-r"></pre></dd>
+
-
      <dt>tm</dt>
+
-
      <dd><pre id="tm-r"></pre></dd>
+
-
    </dl>
+
-
    <script type="text/javascript">
+
              <h3>3. Then, please select the region to where your fragment correspond in target plasmid.</h3>
-
(function(){var l,e,g,h,d,a,i,f,b,k,j,c;a=function(m){switch(m){case"AA":case"TT":return -9.1;case"AT":return -8.6;case"TA":return -6;case"CA":case"TG":return -5.8;case"GT":case"AC":return -6.5;case"CT":case"AG":return -7.8;case"GA":case"TC":return -5.6;case"CG":return -11.9;case"GC":return -11.1;case"GG":case"CC":return -11}};j=function(m){var n,o,q,p;o=0;for(n=q=0,p=m.length-2;0<=p?q<=p:q>=p;n=0<=p?++q:--q){o+=a(m.slice(n,+(n+1)+1||9000000000))}return o};i=function(m){switch(m){case"AA":case"TT":return -24;case"AT":return -23.9;case"TA":return -16.9;case"CA":case"TG":return -12.9;case"GT":case"AC":return -17.3;case"CT":case"AG":return -20.8;case"GA":case"TC":return -13.5;case"CG":return -27.8;case"GC":return -26.7;case"GG":case"CC":return -26.6}};c=function(m){var n,o,q,p;o=0;for(n=q=0,p=m.length-2;0<=p?q<=p:q>=p;n=0<=p?++q:--q){o+=i(m.slice(n,+(n+1)+1||9000000000))}return o};l=function(m){var o,n;o=j(m);n=c(m);return(1000*o/(-10.8+n+1.987*-15.89495209964411))-273.15+16.6*-1.3010299956639813};d=function(o){var q,m,p;if(l(o.slice(0,35))<60){alert("Sequence is too short.");return false}for(q=p=17;p<=35;q=++p){m=l(o.slice(0,+(q-1)+1||9000000000));if(m>60){if(o[q-1]==="G"||o[q-1]==="C"){break}}}return[o.slice(0,+(q-1)+1||9000000000),m]};h=function(m){switch(m){case"A":return"T";case"T":return"A";case"G":return"C";case"C":return"G"}};k=function(n){var m;return((function(){var r,p,q,o;q=n.split("");o=[];for(r=0,p=q.length;r<p;r++){m=q[r];o.push(h(m))}return o})()).reverse().join("")};f=function(q,m,u){var r,n,p,s,t,o;r=d(u);n=d(k(u));p="TTTGGTCTCT"+q+"T"+r[0];t=r[1];s="TTTGGTCTCA"+m+"A"+n[0];o=n[1];return[p,t,s,o]};g=function(m){if(/GGTCTC/.test(m)||/GGTCTC/.test(k(m))){return false}else{return true}};e=function(n){var m;m=/[ATCG]+/.exec(n);console.log(m);if(m[0]===n){return true}else{return false}};b=function(n){var m;m=n.val().toUpperCase();if(!e(m)){alert("You can NOT use non-AGCT characters.");n.focus();return false}if(!g(m)){alert("This sequence contains BsaI cutting site.");n.focus();return false}};$(function(){$('[name="overhang-f"]').focusout(function(){return b($(this))});$('[name="overhang-r"]').focusout(function(){return b($(this))});$('[name="sequence"]').focusout(function(){return b($(this))});return $("#primer-designer").submit(function(p){var o,n,s,q,m,r;p.preventDefault();n=$(this);o=n.find("button");o.attr("disabled",true);s=n.find('[name="overhang-f"]').val().toUpperCase();q=n.find('[name="overhang-r"]').val().toUpperCase();r=n.find('[name="sequence"]').val().toUpperCase();console.log(g(s));console.log(g(q));console.log(g(r));console.log(e(s));console.log(e(q));console.log(e(r));m=f(s,k(q),r);$("#primer-f").text(m[0]);$("#tm-f").text(m[1]);$("#primer-r").text(m[2]);$("#tm-r").text(m[3]);return o.attr("disabled",false)})})}).call(this);
+
              <div id="plasmid-map">
-
    </script>
+
                <div                            id="plasmid-0">                                  </div>
 +
                <div class="plasmid-gray"       id="plasmid-1">  <span id="indicator1">1</span> </div>
 +
                <div class="plasmid-gray"       id="plasmid-2">  <span id="indicator2">2</span> </div>
 +
                <div class="plasmid-gray"       id="plasmid-3">  <span id="indicator3">3</span> </div>
 +
                <div class="plasmid-gray hide-1" id="plasmid-4">  <span id="indicator4">4</span> </div>
 +
                <div class="plasmid-gray hide-1" id="plasmid-5">  <span id="indicator5">5</span> </div>
 +
                <div class="plasmid-gray hide-2" id="plasmid-6"<span id="indicator6">6</span> </div>
 +
                <div class="plasmid-gray hide-2" id="plasmid-7">  <span id="indicator7">7</span> </div>
 +
                <div class="plasmid-gray"       id="plasmid-8">  <span id="indicator8">8</span> </div>
 +
                <div                            id="plasmid-9">  <span id="indicator9">9</span> </div>
 +
              </div>
 +
              <div class="my-form">
 +
                <div class="form-group">
 +
                  <label for="part-beginning">
 +
                    Beginning of the fragment:
 +
                  </label>
 +
                  <select name="part-beginning" class="form-control monospace">
 +
                    <option value="1">1: CGTC</option>
 +
                    <option value="2">2: AAGG</option>
 +
                    <option value="3">3: CTGA</option>
 +
                    <option class="disable-1" value="4">4: TTAT</option>
 +
                    <option class="disable-1" value="5">5: TTCG</option>
 +
                    <option class="disable-2" value="6">6: TAGA</option>
 +
                    <option class="disable-2" value="7">7: TCCC</option>
 +
                    <option value="8">8: CGGT</option>
 +
                    <option value="9">9: AGTA</option>
 +
                  </select>
 +
                </div>
 +
                <div class="form-group">
 +
                  <label for="part-end">
 +
                    End of the fragment:
 +
                  </label>
 +
                  <select name="part-end" class="form-control monospace">
 +
                    <option value="1">1: CGTC</option>
 +
                    <option value="2">2: AAGG</option>
 +
                    <option value="3">3: CTGA</option>
 +
                    <option class="disable-1" value="4">4: TTAT</option>
 +
                    <option class="disable-1" value="5">5: TTCG</option>
 +
                    <option class="disable-2" value="6">6: TAGA</option>
 +
                    <option class="disable-2" value="7">7: TCCC</option>
 +
                    <option value="8">8: CGGT</option>
 +
                    <option value="9">9: AGTA</option>
 +
                  </select>
 +
                </div>
 +
              </div>
 +
              <h3>4. Okey, now we are ready to go. Enter your fragment's sequence, and press "Calculate"!</h3>
 +
            </div>
 +
 +
            <div id="not-conform">
 +
              <h3>2. Please enter overhangs and fragment's sequence, and press "Calculate"</h3>
 +
            </div>
 +
 +
            <form id="primer-designer" class="my-form">
 +
              <div class="form-group">
 +
                <label for="overhang-f">
 +
                  Forward primer overhang:
 +
                </label>
 +
              <input class="form-control monospace" type="text" name="overhang-f"><br>
 +
              </div>
 +
              <div class="form-group">
 +
                <label for="overhang-r">
 +
                  Reverse primer overhang:
 +
                </label>
 +
              <input class="form-control monospace" type="text" name="overhang-r"><br>
 +
              </div>
 +
              <div class="form-group">
 +
                <label for="sequence">
 +
                  Fragment sequence:
 +
                </label>
 +
              <textarea class="form-control monospace" type="text" name="sequence"></textarea><br>
 +
              </div>
 +
              <div class="form-group">
 +
                <label></label>
 +
                <button class="form-control">Calculate</button>
 +
              </div>
 +
            </form>
 +
 +
            <hr style="margin: 50px 0;">
 +
 +
            <h4>Forward</h4>
 +
            <dl>
 +
              <dt>sequence</dt>
 +
              <dd><pre id="primer-f" class="monospace"></pre></dd>
 +
              <dt>tm</dt>
 +
              <dd><pre id="tm-f"></pre></dd>
 +
            </dl>
 +
            <h4>Reverse</h4>
 +
            <dl>
 +
              <dt>sequence</dt>
 +
              <dd><pre id="primer-r" class="monospace"></pre></dd>
 +
              <dt>tm</dt>
 +
              <dd><pre id="tm-r"></pre></dd>
 +
            </dl>
 +
 +
            <h3>5. Now, repeat previous step for remaining fragments included in the target plasmid.</h3>
 +
<script type="text/javascript">
 +
(function(){var n,f,e,h,d,a,j,g,i,b,m,k,c,l;a=function(o){switch(o){case"AA":case"TT":return -9.1;case"AT":return -8.6;case"TA":return -6;case"CA":case"TG":return -5.8;case"GT":case"AC":return -6.5;case"CT":case"AG":return -7.8;case"GA":case"TC":return -5.6;case"CG":return -11.9;case"GC":return -11.1;case"GG":case"CC":return -11}};k=function(o){var p,q,s,r;q=0;for(p=s=0,r=o.length-2;0<=r?s<=r:s>=r;p=0<=r?++s:--s){q+=a(o.slice(p,+(p+1)+1||9000000000))}return q};j=function(o){switch(o){case"AA":case"TT":return -24;case"AT":return -23.9;case"TA":return -16.9;case"CA":case"TG":return -12.9;case"GT":case"AC":return -17.3;case"CT":case"AG":return -20.8;case"GA":case"TC":return -13.5;case"CG":return -27.8;case"GC":return -26.7;case"GG":case"CC":return -26.6}};c=function(o){var p,q,s,r;q=0;for(p=s=0,r=o.length-2;0<=r?s<=r:s>=r;p=0<=r?++s:--s){q+=j(o.slice(p,+(p+1)+1||9000000000))}return q};n=function(o){var q,p;q=k(o);p=c(o);return(1000*q/(-10.8+p+1.987*-15.89495209964411))-273.15+16.6*-1.3010299956639813};d=function(p){var r,o,q;if(n(p.slice(0,35))<60){alert("Sequence is too short.");return false}for(r=q=17;q<=35;r=++q){o=n(p.slice(0,+(r-1)+1||9000000000));if(o>60){if(p[r-1]==="G"||p[r-1]==="C"){break}}}return[p.slice(0,+(r-1)+1||9000000000),o]};h=function(o){switch(o){case"A":return"T";case"T":return"A";case"G":return"C";case"C":return"G"}};m=function(p){var o;return((function(){var t,r,s,q;s=p.split("");q=[];for(t=0,r=s.length;t<r;t++){o=s[t];q.push(h(o))}return q})()).reverse().join("")};g=function(s,o,w){var t,p,r,u,v,q;t=d(w);p=d(m(w));r="TTTGGTCTCT"+s+"T"+t[0];v=t[1];u="TTTGGTCTCA"+o+"A"+p[0];q=p[1];return[r,v,u,q]};e=function(p){var o;o=true;if(/GGTCTC/.test(p)||/GGTCTC/.test(m(p))){alert('This sequence contains BsaI cutting site "GGTCTC" or "GAGACC".\r\nYou can just ignore this alert, if unnecessary.');o=false}if(/GAATTC/.test(p)||/GAATTC/.test(m(p))){alert('This sequence contains EcoRI cutting site "GAATTC".\r\nYou can just ignore this alert, if unnecessary.');o=false}if(/CTGCAG/.test(p)||/CTGCAG/.test(m(p))){alert('This sequence contains PstI cutting site "CTGCAG".\r\nYou can just ignore this alert, if unnecessary.');o=false}if(/GCGGCCGC/.test(p)||/GCGGCCGC/.test(m(p))){alert('This sequence contains NotI cutting site "GCGGCCGC".\r\nYou can just ignore this alert, if unnecessary.');o=false}if(/ACTAGT/.test(p)||/ACTAGT/.test(m(p))){alert('This sequence contains SpeI cutting site "ACTAGT".\r\nYou can just ignore this alert, if unnecessary.');o=false}if(/TCTAGA/.test(p)||/TCTAGA/.test(m(p))){alert('This sequence contains XbaI cutting site "TCTAGA".\r\nYou can just ignore this alert, if unnecessary.');o=false}return o};f=function(p){var o;o=/[ATCG]+/.exec(p);if(o[0]===p){return true}else{return false}};b=function(p){var o;o=p.val().toUpperCase().split(/[\s\n\r]+/).join("");if(!f(o)){alert("You can NOT use non-AGCT characters.");return false}if(!e(o)){return false}};i=function(o){switch(o){case 1:return"CGTC";case 2:return"AAGG";case 3:return"CTGA";case 4:return"TTAT";case 5:return"TTCG";case 6:return"TAGA";case 7:return"TCCC";case 8:return"CGGT";case 9:return"AGTA"}};l=function(){var t,o,p,s,r,q;t=parseInt($('[name="part-beginning"]').val());o=parseInt($('[name="part-end"]').val());for(p=s=1;1<=t?s<t:s>t;p=1<=t?++s:--s){$("#plasmid-"+p).addClass("plasmid-gray")}for(p=r=t;t<=9?r<=9:r>=9;p=t<=9?++r:--r){$("#plasmid-"+p).removeClass("plasmid-gray")}for(p=q=o;o<=9?q<=9:q>=9;p=o<=9?++q:--q){$("#plasmid-"+p).addClass("plasmid-gray")}if(o>t){$('[name="overhang-f"]').val(i(t));return $('[name="overhang-r"]').val(i(o))}else{$('[name="overhang-f"]').val("");return $('[name="overhang-r"]').val("")}};$(function(){$('[name="overhang-f"]').focusout(function(){return b($(this))});$('[name="overhang-r"]').focusout(function(){return b($(this))});$('[name="sequence"]').focusout(function(){return b($(this))});$("#primer-designer").submit(function(r){var q,p,u,s,o,t;r.preventDefault();p=$(this);q=p.find("button");q.attr("disabled",true);u=p.find('[name="overhang-f"]').val().toUpperCase();s=p.find('[name="overhang-r"]').val().toUpperCase();t=p.find('[name="sequence"]').val().toUpperCase().split(/[\s\n\r]+/).join("");o=g(u,m(s),t);$("#primer-f").text(o[0]);$("#tm-f").html(""+(o[1].toFixed(2))+" &deg;C");$("#primer-r").text(o[2]);$("#tm-r").html(""+(o[3].toFixed(2))+" &deg;C");return q.attr("disabled",false)});$("#not-conform").hide();$('input[name="default"]:radio').change(function(){switch($(this).val()){case"1":$("#conform").show();return $("#not-conform").hide();case"2":$("#conform").hide();return $("#not-conform").show()}});$('[name="cds-number"]').val("3");$('[name="cds-number"]').change(function(){switch($(this).val()){case"1":$(".hide-1").hide();$(".hide-2").hide();$(".disable-1").attr("disabled","disabled");return $(".disable-2").attr("disabled","disabled");case"2":$(".hide-1").show();$(".hide-2").hide();$(".disable-1").removeAttr("disabled");return $(".disable-2").attr("disabled","disabled");case"3":$(".hide-1").show();$(".hide-2").show();$(".disable-1").removeAttr("disabled");return $(".disable-2").removeAttr("disabled")}});$('[name="part-beginning"]').change(function(){return l()});return $('[name="part-end"]').change(function(){return l()})})}).call(this);
 +
</script>
 +
 +
<div id="prev-page">
 +
<a href="https://2013.igem.org/Team:HokkaidoU_Japan/Shuffling_Kit/How_To_Use"><div class="arrow-div"></div><span>How To Use</span></a>
 +
</div>
 +
 +
<div id="next-page">
 +
<a href="https://2013.igem.org/Team:HokkaidoU_Japan/Shuffling_Kit/Examples"><div class="arrow-div"></div><span>Examples</span></a>
 +
</div>
<!-- end contents / begin footer -->
<!-- end contents / begin footer -->

Latest revision as of 02:50, 29 October 2013

Maestro E. coli

Shuffling Kit

Primer Designer for Maestro

1. First, you have to decide whether or not you conform to our default overhang set.

2. Secondly, you hove to determine how many CDS are included in your target plasmid.

I have CDS(s) included.

3. Then, please select the region to where your fragment correspond in target plasmid.

1
2
3
4
5
6
7
8
9

4. Okey, now we are ready to go. Enter your fragment's sequence, and press "Calculate"!

2. Please enter overhangs and fragment's sequence, and press "Calculate"





Forward

sequence
tm

Reverse

sequence
tm

5. Now, repeat previous step for remaining fragments included in the target plasmid.