Team:Heidelberg/Toolbox Guide

From 2014.igem.org

(Difference between revisions)
 
(55 intermediate revisions not shown)
Line 6: Line 6:
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}}
-
 
-
 
<html>
<html>
-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
 
<style type="text/css">
<style type="text/css">
#myContainer {
#myContainer {
Line 38: Line 35:
/* Enlarge Icons on hover */
/* Enlarge Icons on hover */
.toolbox-icons-bar a:hover img {
.toolbox-icons-bar a:hover img {
-
  transform: scale(1.15);
+
transform: scale(1.15);
-
  -webkit-transform: scale(1.15);
+
-webkit-transform: scale(1.15);
-
  -moz-transform: scale(1.15);
+
-moz-transform: scale(1.15);
-
  -o-transform: scale(1.15);
+
-o-transform: scale(1.15);
-
  -ms-transform: scale(1.15);
+
-ms-transform: scale(1.15);
}
}
Line 54: Line 51:
</style>
</style>
-
  <div id="myContainer" class="container">
+
<div id="myContainer" class="container">
</html>
</html>
-
    {{:Team:Heidelberg/Templates/BootstrapNav|
+
{{:Team:Heidelberg/Templates/BootstrapNav|
-
      red=|
+
red=|
-
      white=true|
+
white=true|
-
      red-logo=true|
+
red-logo=true|
-
      white-logo=|
+
white-logo=|
-
      header-bg=|
+
header-bg=|
-
      header-img=|
+
header-img=|
-
      title=
+
title=
-
    }}
+
}}
-
    <html>
+
<html>
-
    <div class="container main" style="color: white;">
+
<div class="container main" style="color: white;">
-
      <div class="row">
+
<div class="row">
-
        <div class="col-lg-12">
+
<div class="col-lg-12">
-
          <span class="middle">use the <span class="red-text">intein</span></span>
+
<span class="middle">use the <span class="red-text">intein</span></span>
-
        </div>
+
</div>
-
      </div>
+
</div>
-
      <div class="row">
+
<div class="row">
-
        <div class="col-lg-12" style="position: relative; top: -20px;">
+
<div class="col-lg-12" style="position: relative; top: -20px;">
-
          <span class="large">TOOLBOX&nbsp;</span><span class="middle" >to</span>
+
<span class="large">TOOLBOX&nbsp;</span><span class="middle" >to</span>
-
        </div>
+
</div>
-
      </div>
+
</div>
-
      <div class="row toolbox-icons-bar">
+
<div class="row toolbox-icons-bar">
-
        <div class="col-lg-2 col-lg-offset-1 col-md-offset-1 col-md-2 col-sm-4 col-xs-6">
+
<div class="col-lg-2 col-lg-offset-1 col-md-offset-1 col-md-2 col-sm-4 col-xs-6">
-
          <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Circularization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" class="img-responsive" /></span>CIRCULARIZE</a>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Circularization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" class="img-responsive" /></span>CIRCULARIZE</a>
-
        </div>
+
</div>
-
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
          <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Oligomerization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/4/40/Oligomerization.png" class="img-responsive" /></span>OLIGOMERIZE</a>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Localization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/3/3a/Heidelberg_Localize_button.png" class="img-responsive" /></span>LOCALIZE</a>
-
        </div>
+
</div>
-
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
          <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Fusion"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" class="img-responsive" /></span>FUSE & TAG</a>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Fusion"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" class="img-responsive" /></span>ATTACH</a>
-
        </div>
+
</div>
-
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
          <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Purification"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" class="img-responsive" /></span>PURIFY</a>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Purification"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" class="img-responsive" /></span>PURIFY</a>
-
        </div>
+
</div>
-
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
+
<!--<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
          <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/OnOff"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" class="img-responsive" /></span>ACTIVATE &<br />DEACTIVATE</a>
+
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/OnOff"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" class="img-responsive" /></span>ACTIVATE &<br />DEACTIVATE</a>
-
        </div>
+
</div>-->
-
      </div>
+
</div>
-
<div class="col-lg-12" style="color:#333;">
+
</div>
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title">1. Please go to <a href="http://www.rcsb.org/">www.rcsb.org</a> and get a pdb file of your protein. If you cannot find one, we will not be able to assist you circularizing it.</h3>
+
-
  </div>
+
-
  <div class="panel-body">
+
-
    Additionally, check the DNA sequence of your proteins for EcoRI, XbaI, SpeI, PstI and BsaI recognition sites. If there are E/X/S/P sites, you might have problems to change your backbone or add a promotor. If there is a BsaI recognition site, the cloning will be more difficult.
+
-
 
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.hasBsaI, checkedValue: false, click: data.q0A.bind(null, true)" />
+
-
        There is no BsaI site.
+
-
      </label>
+
-
    </div>
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.hasBsaI, checkedValue: true, click: data.q0A.bind(null, true)" />
+
-
        There is a BsaI site.
+
-
      </label>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
<!-- ko if: data.q0A -->
+
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title">2. Do you want to use split inteins or sortase to circularize your protein?</h3>
+
-
  </div>
+
-
  <div class="panel-body">
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.useSortase, checkedValue: false, click: data.q1A.bind(null, true)" />
+
-
        NpuDnaE intein RFC <span data-bind="value: RFCnumber"></span> circularization construct
+
-
      </label>
+
-
      <ul>
+
-
        <li>Successfully used in our project</li>
+
-
        <li>High efficiency</li>
+
-
        <li>In vivo circularization</li>
+
-
      </ul>
+
-
    </div>
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.useSortase, checkedValue: true, click: data.q1A.bind(null, true)" />
+
-
        Sortase A circularization construct
+
-
      </label>
+
-
      <ul>
+
-
        <li>In vitro only</li>
+
-
        <li>Well-purified protein required</li>
+
-
        <li>Not successfully tested yet</li>
+
-
      </ul>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
<!-- /ko -->
+
-
 
+
-
<!-- ko if: data.q1A -->
+
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title">3. Can your protein be easily expressed in <i>E. coli</i>?</h3>
+
-
  </div>
+
-
  <div class="panel-body">
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.needsSmt3, checkedValue: false, click: data.q2A.bind(null, true)" />
+
-
        Yes, no problem.
+
-
      </label>
+
-
    </div>
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.needsSmt3, checkedValue: true, click: data.q2A.bind(null, true)" />
+
-
        No, I will have to add <a href="http://parts.igem.org/Part:BBa_K1362429">Smt3</a>.
+
-
      </label>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
 
+
-
<!-- /ko -->
+
-
<div data-bind="if: data.q2A() &amp;&amp; !data.useSortase()">
+
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title">4. Which exteins do you want to use? They will remain as scars in your circular protein.</h3>
+
-
  </div>
+
-
  <div class="panel-body">
+
-
    <!-- ko foreach: availableExteins -->
+
-
      <div class="radio">
+
-
        <label>
+
-
          <input type="radio" data-bind="checked: $parent.data.exteins, checkedValue: $data, click: $parent.data.q3A.bind(null, true)" />
+
-
          <span data-bind="text: N"></span>/<span data-bind="text: C"></span>
+
-
          <!-- ko if: comment -->
+
-
            (<span data-bind="text: comment"></span>)
+
-
          <!-- /ko -->
+
-
          <ul data-bind="foreach: notes">
+
-
            <li data-bind="text: $data"></li>
+
-
          </ul>
+
-
        </label>
+
-
      </div>
+
-
    <!-- /ko -->
+
-
  </div>
+
-
</div>
+
-
</div>
+
-
<div data-bind="if: data.q3A() || (data.q2A() &amp;&amp; data.useSortase())">
+
-
<div class="panel panel-default" >
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title"><span data-bind="text: data.useSortase() ? 4 : 5"></span>. If you want to save time, check manually whether the ends are close together (approx. <span data-bind="text: !data.useSortase() &amp;&amp; data.exteins().N == 'XXX' ? 5 : 15"></span>&thinsp;&Aring; or closer). For example, you can use the <a href="http://spdbv.vital-it.ch/">Swiss-PdbViewer</a> or <a href="http://www.pymol.org/">PyMOL</a>.</h3>
+
-
  </div>
+
-
  <div class="panel-body">
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.endsAreClose, checkedValue: true, click: data.q4A.bind(null, true)" />
+
-
        They are close together.
+
-
      </label>
+
-
    </div>
+
-
    <div class="radio">
+
-
      <label>
+
-
        <input type="radio" data-bind="checked: data.endsAreClose, checkedValue: false, click: data.q4A.bind(null, true)" />
+
-
        I want/have to use <span data-bind="text: softwareName"></span>.
+
-
      </label>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
</div>
+
-
 
+
-
<div data-bind="if: data.q4A() &amp;&amp; !data.endsAreClose()">
+
-
Please use <span data-bind="text: softwareName"></span> to generate a linker for your circular protein. [LINK]
+
-
 
+
-
This step might take up to 11 days.
+
-
 
+
-
NILS – hier könnte dein instruction-file-ersatz stehen
+
-
 
+
-
 
+
-
NILS – hier auch
+
-
 
+
-
 
+
-
NILS – hier immernoch
+
-
 
+
-
 
+
-
NILS – hier ebnfalls und auch gerne noch umfangreicher
+
-
 
+
-
 
+
-
Please save this link:<br />
+
-
<code>https://2014.igem.org/{{PAGENAME}}#<span data-bind="text: comeBackHash"></span></code>
+
-
 
+
-
In order to generate your linker, <span data-bind="text: softwareName"></span> needs to know the scar amino acid sequence that is caused by circularization. In your case, it is <span data-bind="text: data.useSortase() ? 'LPETG' : data.exteins().N == 'XXX' ? 'just C' : (data.exteins().N + data.exteins().C)"></span>.
+
-
</div>
+
-
 
+
-
<!-- ko if: data.comingBack -->
+
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title"><span data-bind="text: data.useSortase() ? 5 : 6"></span>. Hello again. What is the result of <span data-bind="text: softwareName"></span>?</h3>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.linkerLength, checkedValue: 0, click: data.q5A.bind(null, true)" />
+
-
      I do not need a linker.
+
-
    </label>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.linkerLength, checkedValue: 1, click: data.q5A.bind(null, true)" />
+
-
      The linker + scars are &lt; 15 amino acids in length.
+
-
    </label>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.linkerLength, checkedValue: 2, click: data.q5A.bind(null, true)" />
+
-
      The linker + scars are betweeen 16 and 30 amino acids in length.
+
-
    </label>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.linkerLength, checkedValue: 3, click: data.q5A.bind(null, true)" />
+
-
      The linker + scars are &gt; 30 amino acids in length.
+
-
    </label>
+
-
  </div>
+
-
</div>
+
-
<!-- /ko -->
+
-
<!-- ko if: data.q5A -->
+
-
<div class="panel panel-default">
+
-
  <div class="panel-heading">
+
-
    <h3 class="panel-title"><span data-bind="text: data.useSortase() ? 6 : 7"></span>. Have you decided to use one linker or try different linkers?</h3>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.testSeveral, checkedValue: false, click: data.q6A.bind(null, true)" />
+
-
      I trust <span data-bind="text: softwareName"></span>. One should be enough.
+
-
    </label>
+
-
  </div>
+
-
  <div class="radio">
+
-
    <label>
+
-
      <input type="radio" data-bind="checked: data.testSeveral, checkedValue: true, click: data.q6A.bind(null, true)" />
+
-
      I want to test several linkers.
+
-
    </label>
+
-
  </div>
+
-
</div>
+
-
<!-- /ko -->
+
-
</div>
+
-
    </div>
+
</div>
</div>
</html>
</html>
-
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/toolboxguide}}
 

Latest revision as of 03:43, 18 October 2014