Team:Heidelberg/Toolbox Guide

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
+
{{:Team:Heidelberg/Templates/MainTemplate}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
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}}
 +
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/scrollTo}}
 +
<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 34: Line 37:
/* Enlarge Icons on hover */
/* Enlarge Icons on hover */
-
.toolbox-icon-scale:hover {
+
.toolbox-icons-bar a:hover img {
transform: scale(1.15);
transform: scale(1.15);
-webkit-transform: scale(1.15);
-webkit-transform: scale(1.15);
Line 42: Line 45:
}
}
-
.toolbox-icon-scale {
+
.toolbox-icons-bar a img {
transition:transform 0.15s ease;
transition:transform 0.15s ease;
-webkit-transition:-webkit-transform 0.15s ease;
-webkit-transition:-webkit-transform 0.15s ease;
Line 49: Line 52:
}
}
-
.ringbox{
+
.panel.panel-default {
-
/*
+
border: solid 2px #de4230;
-
width: 750px;
+
font-size: 1.2em;
-
height: 600px;
+
background-color: rgb(81,81,81);
-
background-image:url('/wiki/images/d/dc/Ring_Project.png');
+
background-color: rgba(81,81,81,0.7);
-
background-size: 550px;
+
margin-bottom: 40px;
-
background-repeat: no-repeat;
+
-
*/
+
-
position: absolute;
+
-
top:260px;
+
-
left:140px;
+
-
height:1000px;
+
-
z-index:3;
+
}
}
-
.abstract-special {
 
-
color: white;
 
-
}
 
-
 
-
.abstract-special span {
 
-
margin-top: 10px;
 
-
margin-bottom: 10px;
 
-
display: block;
 
-
}
 
-
 
-
.abstract-special img {
 
-
height: 15px;
 
-
}
 
-
 
-
.toolbox-icon {
 
-
height: 90px;
 
-
position: absolute;
 
-
right:-43px;
 
-
bottom:-45px;
 
-
}
 
-
 
-
#ring-background {
 
-
width: 450px;
 
-
height: auto;
 
-
opacity:0.8;
 
-
}
 
-
 
-
.block{
 
-
display:block;
 
-
text-decoration:none;
 
-
color: white;
 
-
}
 
-
 
-
.block:hover{
 
-
text-decoration: none;
 
-
}
 
-
 
-
.box {
 
-
background-color: rgba(81,81,81,0.7);
 
-
padding: 15px;
 
-
position:relative;
 
-
}
 
-
 
-
.box:hover {
 
-
border:solid 2px #DE4230;
 
-
padding: 13px;
 
-
}
 
-
 
-
 
-
.descr-box {
 
-
width: 250px;
 
-
height: 100px;
 
-
position: absolute;
 
-
}
 
-
 
-
.descr-box h3 {
 
-
margin-top: 10px;
 
-
margin-bottom: 0;
 
-
text-align: left;
 
-
}
 
-
 
-
.descr-box h3 span {
 
-
font-size: 0.8em;
 
-
}
 
-
 
-
.descr-box div {
 
-
border-right: solid white 2px;
 
-
border-top: solid white 2px;
 
-
padding-right:43px;
 
-
}
 
-
 
-
.descr-box span {
 
-
display: block;
 
-
}
 
-
 
-
#circ-box {
 
-
right: 160px;
 
-
top: -120px;
 
-
}
 
-
 
-
#circ-box img {
 
-
bottom: -130px;
 
-
height: 120px;
 
-
right: -57px;
 
-
}
 
-
 
-
#circ-box div {
 
-
height: 114px;
 
-
}
 
-
 
-
#oligo-box {
 
-
left: -100px;
 
-
top: -10px;
 
-
width: 200px;
 
-
}
 
-
 
-
#onoff-box {
 
-
left: -105px;
 
-
top: 120px;
 
-
width: 150px;
 
-
}
 
-
 
-
#fusion-box {
 
-
left: -100px;
 
-
top: 330px;
 
-
width: 190px;
 
-
}
 
-
 
-
#fusion-box img {
 
-
top: -16px;
 
-
}
 
-
 
-
#fusion-box div {
 
-
border-right: none;
 
-
}
 
-
 
-
#purification-box {
 
-
left: 20px;
 
-
top: 445px;
 
-
width: 200px;
 
-
}
 
-
 
-
#purification-box img {
 
-
top: -70px;
 
-
}
 
-
 
-
#purification-box div {
 
-
border-top: none;
 
-
border-bottom: solid white 2px;
 
-
}
 
-
 
-
#abstract-content {
 
-
display:none;
 
-
}
 
-
 
-
.graphicalAbstract {
 
-
  background-image:url('/wiki/images/f/fa/Heidelberg_Project_Background.png');
 
-
  background-size: 100% auto;
 
-
  background-repeat: no-repeat;
 
-
  position:relative;
 
-
  z-index: 1;
 
-
  height:900px;
 
-
}
 
-
 
-
#redOverlay {
 
-
  position:absolute;
 
-
  width:100%;
 
-
  height:100%;
 
-
  left:0;
 
-
  top:0;
 
-
  display:none;
 
-
  background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
 
-
  background-size: 100% auto;
 
-
  background-repeat: no-repeat;
 
-
  z-index:2;
 
-
}
 
-
 
-
#lightning {
 
-
z-index: 3;
 
-
position:absolute;
 
-
top: 610px;
 
-
left: 460px;
 
-
color:white;
 
-
}
 
-
 
-
 
-
#screened {
 
-
z-index: 3;
 
-
position:absolute;
 
-
left: 0;
 
-
top: 0;
 
-
color: white;
 
-
}
 
-
 
-
#calibrated {
 
-
z-index: 3;
 
-
position:absolute;
 
-
right: 0;
 
-
top: 0;
 
-
color: white;
 
-
}
 
-
 
-
#dnmt1-img {
 
-
position: absolute;
 
-
height: 155px;
 
-
right: 15px;
 
-
z-index:4;
 
-
}
 
-
 
-
a:hover #dnmt1-img {
 
-
right: 13px;
 
-
}
 
-
 
-
#dnmt1-box {
 
-
right: 40px;
 
-
top: 340px;
 
-
position: absolute;
 
-
}
 
-
 
-
#xylanase-box {
 
-
width:250px;
 
-
top: 556px;
 
-
right:40px;
 
-
position:absolute;
 
-
}
 
-
 
-
#xylanase-img {
 
-
height: 140px;
 
-
    position: absolute;
 
-
    right: 15px;
 
-
}
 
-
 
-
a:hover #xylanase-img {
 
-
right: 13px;
 
-
}
 
-
 
-
#toolbox-text{
 
-
position: absolute;
 
-
top: 145px;
 
-
right: -135px;
 
-
font-size: 5em;
 
-
line-height: 70px;
 
-
font-weight: bold;
 
-
}
 
-
 
-
#linker-links {
 
-
position: absolute;
 
-
width: 405px;
 
-
right: 60px;
 
-
top: 35px;
 
-
height: 240px;
 
-
}
 
-
 
-
#toolbox {
 
-
position:absolute;
 
-
right: 50px;
 
-
bottom: 190px;
 
-
}
 
-
 
-
#toolbox:hover > span {
 
-
color: white;
 
-
}
 
-
 
-
.container {
 
-
width: 1170px;
 
-
}
 
</style>
</style>
Line 325: Line 75:
<html>
<html>
<div class="container main" style="color: white;">
<div class="container main" style="color: white;">
-
<div id="abstract-dropdown" class="row abstract-special dark-grey">
+
<div class="row">
-
<div class="col-lg-offset-1 col-lg-2">
+
<div class="col-lg-12">
-
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
+
<span class="middle">use the <span class="red-text">intein</span></span>
 +
</div> 
 +
</div>
 +
<div class="row">
 +
<div class="col-lg-12" style="position: relative; top: -20px;">
 +
<span class="large">TOOLBOX&nbsp;</span><span class="middle" >to</span>
 +
</div> 
 +
</div>
 +
<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">
 +
<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>
</div>
</div>
-
<div class="col-lg-9">
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
<span>Click to read full abstract</span>
+
<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>
</div>
</div>
-
<div id="abstract-content" class="col-lg-12" >
+
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
-
Placeholder
+
<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>
 +
</div>
 +
<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>
 +
</div>
 +
<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>
</div>
</div>
</div>
</div>
-
<div class="graphicalAbstract">
+
<div class="col-lg-12" style="color:white;">
-
    <div id="redOverlay"></div>
+
<h3>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 style="z-index:3;position:relative; height:100%;">
+
<div class="panel panel-default">
-
    <div id="linker-links">
+
<div class="panel-body">
-
    <a href="#" class="block box" id="calibrated">
+
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.
-
<img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png">
+
 
-
<span style="position: relative;top: 10px;display: inline-block;">
+
<div class="radio">
-
calibrated<br>
+
<label>
-
<span class="red-text">in silico</span></span>
+
<input type="radio" data-bind="checked: data.hasBsaI, checkedValue: false, click: data.q0A.bind(null, true)" />
-
</a>
+
There is no BsaI site.
-
<a href="#" class="block box" id="screened">
+
</label>
-
<span style="position: relative;top:10px;display: inline-block;">
+
</div>
-
screened <span class="red-text">in vitro</span><br>
+
<div class="radio">
-
with lysozyme</span>
+
<label>
-
<img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" />
+
<input type="radio" data-bind="checked: data.hasBsaI, checkedValue: true, click: data.q0A.bind(null, true)" />
-
</a>
+
There is a BsaI site.
-
<a href="#" class="block" style="bottom:0; left:0; position:absolute;">
+
</label>
-
<span class="red-text" >circularize</span> it<br>
+
</div>
-
with calculated linkers
+
</div>
-
</a>
+
</div>
-
    </div>
+
<div data-bind="fadeVisible: data.q0A">
-
<div class="ringbox">
+
<h3>2. Do you want to use split inteins or sortase to circularize your protein?</h3>
-
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
+
<div class="panel panel-default">
-
<div id="circ-box" class="descr-box">
+
<div class="panel-body">
-
<a href="/Team:Heidelberg/Toolbox/Circularization">
+
<div class="radio">
-
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon toolbox-icon-scale"/>
+
<label>
-
</a>
+
<input type="radio" data-bind="checked: data.useSortase, checkedValue: false, click: data.q1A.bind(null, true)" />
-
<h3>CIRCULARIZATION</h3>
+
NpuDnaE intein RFC <span data-bind="value: RFCnumber"></span> circularization construct
-
<div><span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span></div>
+
</label>
-
</div>
+
<ul>
-
<div id="oligo-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Oligomerization"><img src="/wiki/images/4/40/Oligomerization.png" id="oligo-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>OLIGOMERIZATION</h3><div><span>Fuse multiple Proteins or Domains using Inteins</span></div>
+
<li>Successfully used in our project</li>
-
</div>
+
<li>High efficiency</li>
-
<div id="fusion-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Fusion"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" id="fusion-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>FUSION</h3><div><span>Fuse two Proteins or Domains together using Inteins</span></div>
+
<li>In vivo circularization</li>
-
</div>
+
</ul>
-
<div id="onoff-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/OnOff"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" id="onoff-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>ON/OFF</h3><div><span>Activate or deactivate Proteins using Inteins</span></div></div>
+
</div>
-
<div id="purification-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Purification"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" id="purification-icon" class="toolbox-icon toolbox-icon-scale"/></a><div><h3>PURIFICATION</h3></div><span>Placeholder</span></div>
+
<div class="radio">
-
<div id="toolbox-text">
+
<label>
-
the intein<br>
+
<input type="radio" data-bind="checked: data.useSortase, checkedValue: true, click: data.q1A.bind(null, true)" />
-
<span>toolbox<span>
+
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>
 +
</div>
 +
 
 +
<div data-bind="fadeVisible: data.q1A">
 +
<h3>3. Can your protein be easily expressed in <i>E. coli</i>?</h3>
 +
<div class="panel panel-default">
 +
<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>
 +
</div>
 +
<div data-bind="fadeVisible: data.q2A() &amp;&amp; !data.useSortase()">
 +
<h3>4. Which exteins do you want to use? They will remain as scars in your circular protein.</h3>
 +
<div class="panel panel-default">
 +
<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>
</div>
 +
<!-- /ko -->
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div data-bind="fadeVisible: data.q3A() || (data.q2A() &amp;&amp; data.useSortase())">
 +
<h3><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 class="panel panel-default" >
 +
<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>
-
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="lightning">
 
-
<img class="toolbox-icon-scale" style="height:110px;display: inline-block;" src="/wiki/images/8/83/Heidelberg_Project_Lightning.png"><span style="position: relative;top: 20px;display: inline-block;">&nbsp;inducible via<br>
 
-
<span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
 
-
</a>
 
-
<a href="https://2014.igem.org/Team:Heidelberg/Project/PCR_2.0" class="block box" style="width:250px;" id="dnmt1-box">
 
-
<img id="dnmt1-img" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png">
 
-
<span style="position:relative; z-index:5;" class="block">
 
-
<span style="font-size:1.5em;">
 
-
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">DNA-<br/>Methyltransferase</span>
 
-
</span><br>
 
-
<span style="font-weight:bold;font-size: 2.5em; text-align:right;line-height: 35px;">
 
-
<span class="red-text">PCR 2.0</span>
 
-
</span>
 
-
</span>
 
-
</a>
 
-
<a href="/Team:Heidelberg/Toolbox_Guide" class="block" id="toolbox">
 
-
<span style="position:relative; display: inline-block;height:110px; width:110px; vertical-align: middle;">
 
-
<img style="height:100%; position:absolute; top:0; left:0;" id="toolbox-img" src="/wiki/images/2/24/Heidelberg_Project_Toolbox_guide.png" />
 
-
<img style="height:100%; position:absolute; top:0; left:0; display:none;" id="toolbox-img-hover" src="/wiki/images/4/4c/Heidelberg_Toolbox_guide_highlighted.png" />
 
-
</span>
 
-
<span style="position: relative;top: 20px;display: inline-block; vertical-align:middle;">
 
-
<span style="font-weight:bold;" class="red-text">modify your protein</span><br/>
 
-
using the toolbox guide
 
-
</span>
 
-
</a>
 
-
<div class="clearfix"></div>
 
</div>
</div>
</div>
</div>
</div>
</div>
-
</div>
 
-
<script type="text/javascript">
 
-
$(document).ready(function(){
 
-
if(window.location.hash) {
 
-
  var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
 
-
  if(hash == "Abstract")
 
-
      $('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 
-
}
 
-
$('#abstract-dropdown').click(function() {
 
-
if($('#abstract-content').css("display") == 'none'){
 
-
$('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 
-
}
 
-
else{
 
-
$('#abstract-content').slideUp(400, function() {$('#dropdownImg').attr("src", "/wiki/images/7/70/Heidelberg_Abstract-dropdown.png");});
 
-
}
 
-
});
 
-
$('#linker-links').mouseenter(function(){
+
<div data-bind="fadeVisible: data.q4A() &amp;&amp; !data.endsAreClose()">
-
$('#redOverlay').stop(true);
+
Please use <span data-bind="text: softwareName"></span> to generate a linker for your circular protein. [LINK]
-
$('#redOverlay').fadeIn();
+
 
-
});
+
This step might take up to 11 days.<br />
 +
 
 +
NILS – hier könnte dein instruction-file-ersatz stehen <br />
 +
 
 +
 
 +
NILS – hier auch<br />
 +
 
-
$('#linker-links').mouseleave(function(){
+
NILS – hier immernoch<br />
-
$('#redOverlay').stop(true);
+
-
$('#redOverlay').fadeOut();
+
-
});
+
-
$('.descr-box span').css("opacity", 0);
 
-
$('.descr-box h3, .descr-box > a')
 
-
.mouseenter(function(){
 
-
var $element;
 
-
if($(this).siblings().length == 0)
 
-
// we're inside the warpping div, break out first
 
-
$element = $(this).parent().parent()
 
-
else
 
-
$element = $(this).parent();
 
-
$element.find('span').stop(true).animate({opacity: 1}, 800);
+
NILS – hier ebnfalls und auch gerne noch umfangreicher<br />
-
})
+
-
.mouseleave(function() {
+
-
var $element;
+
-
if($(this).siblings().length == 0)
+
-
// we're inside the warpping div, break out first
+
-
$element = $(this).parent().parent();
+
-
else
+
-
$element = $(this).parent();
+
-
$element.find('span').stop(true).animate({opacity: 0}, 800);
 
-
});
 
-
$('#toolbox')
+
Please save this link:<br />
-
.mouseover(function() {
+
<code id="comebackurl" style="display:inline-block; width:80%; overflow-y:hidden; vertical-align: middle;">https://2014.igem.org/<span id="pagename"></span>#<span data-bind="text: comeBackHash"></span></code><div style="display:inline-block; width: 20%; color:#de4230; vertical-align: middle;" id="copy-to-clip">&nbsp;<img src="/wiki/images/c/c6/Heidelberg_Clipboard.png" alt="Clipboard icon" />&nbsp;Copy to clipboard</div>
-
$('#toolbox-img-hover').fadeIn();
+
-
})
+
-
.mouseleave(function() {
+
-
$('#toolbox-img-hover').fadeOut();
+
-
});
+
-
});
 
-
</script>
+
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>
 +
 
 +
<div data-bind="fadeVisible: data.comingBack">
 +
<h3><span data-bind="text: data.useSortase() ? 5 : 6"></span>. Hello again. What is the result of <span data-bind="text: softwareName"></span>?</h3>
 +
<div class="panel panel-default">
 +
<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>
 +
</div>
 +
<div data-bind="fadeVisible: data.q5A">
 +
<h3><span data-bind="text: data.useSortase() ? 6 : 7"></span>. Have you decided to use one linker or try different linkers?</h3>
 +
<div class="panel panel-default">
 +
<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>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
</html>
</html>
 +
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/toolboxguide}}

Revision as of 11:49, 15 October 2014

use the intein
TOOLBOX to

1. Please go to www.rcsb.org and get a pdb file of your protein. If you cannot find one, we will not be able to assist you circularizing it.

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.

2. Do you want to use split inteins or sortase to circularize your protein?

  • Successfully used in our project
  • High efficiency
  • In vivo circularization
  • In vitro only
  • Well-purified protein required
  • Not successfully tested yet

3. Can your protein be easily expressed in E. coli?

4. Which exteins do you want to use? They will remain as scars in your circular protein.

. If you want to save time, check manually whether the ends are close together (approx.  Å or closer). For example, you can use the Swiss-PdbViewer or PyMOL.

Please use 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:
https://2014.igem.org/#
 Clipboard icon Copy to clipboard
In order to generate your linker, needs to know the scar amino acid sequence that is caused by circularization. In your case, it is .

. Hello again. What is the result of ?

. Have you decided to use one linker or try different linkers?