Team:HokkaidoU Japan/Shuffling Kit/Primer Designer

From 2013.igem.org

(Difference between revisions)
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}.monospace{font-family:'Inconsolata'!important}option[disabled]{color:#c6c6c6}input[type="radio"]{box-sizing:border-box;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>GGA Primer Designer</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 biobrick 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().split(/[\s\n\r]+/).join("");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().split(/[\s\n\r]+/).join("");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 Biobrick:
 +
                  </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 Biobrick:
 +
                  </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 biobrick's sequence, and press "Calculate"!</h3>
 +
            </div>
 +
            <div id="not-conform">
 +
              <h3>2. Please enter overhangs and biobrick'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">
 +
                  Biobrick 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 biobricks included in the target plasmid.</h3>
 +
<script type="text/javascript">
 +
(function(){var n,e,g,h,d,a,j,f,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("")};f=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]};g=function(o){if(/GGTCTC/.test(o)||/GGTCTC/.test(m(o))){return false}else{return true}};e=function(p){var o;o=/[ATCG]+/.exec(p);console.log(o);if(o[0]===p){return true}else{return false}};b=function(p){var o;o=p.val().toUpperCase().split(/[\s\n\r]+/).join("");if(!e(o)){alert("You can NOT use non-AGCT characters.");p.focus();return false}if(!g(o)){alert("This sequence contains BsaI cutting site.");p.focus();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("");console.log(g(u));console.log(g(s));console.log(g(t));console.log(e(u));console.log(e(s));console.log(e(t));o=f(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>
<!-- end contents / begin footer -->
<!-- end contents / begin footer -->
     </div>
     </div>

Revision as of 13:10, 27 September 2013

Maestro E.coli

Optimization Kit

GGA Primer Designer

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 biobrick correspond in target plasmid.

1
2
3
4
5
6
7
8
9

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

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




Forward

sequence

              
tm

              

            

            
Reverse

            

              
sequence

              

              
tm

              

            


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



    

  



  





Retrieved from "http://2013.igem.org/Team:HokkaidoU_Japan/Shuffling_Kit/Primer_Designer"