Team:Heidelberg/Toolbox Guide

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/MainTemplate}}
+
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
{{: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 37: Line 34:
/* Enlarge Icons on hover */
/* Enlarge Icons on hover */
-
.toolbox-icons-bar a:hover img {
+
.toolbox-icon-scale:hover {
transform: scale(1.15);
transform: scale(1.15);
-webkit-transform: scale(1.15);
-webkit-transform: scale(1.15);
Line 45: Line 42:
}
}
-
.toolbox-icons-bar a img {
+
.toolbox-icon-scale {
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 52: Line 49:
}
}
-
.panel.panel-default {
+
.ringbox{
-
border: solid 2px #de4230;
+
/*
-
font-size: 1.2em;
+
width: 750px;
-
background-color: rgb(81,81,81);
+
height: 600px;
-
background-color: rgba(81,81,81,0.7);
+
background-image:url('/wiki/images/d/dc/Ring_Project.png');
-
margin-bottom: 40px;
+
background-size: 550px;
 +
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 75: Line 325:
<html>
<html>
<div class="container main" style="color: white;">
<div class="container main" style="color: white;">
-
<div class="row">
+
<div id="abstract-dropdown" class="row abstract-special dark-grey">
-
<div class="col-lg-12">
+
<div class="col-lg-offset-1 col-lg-2">
-
<span class="middle">use the <span class="red-text">intein</span></span>
+
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
-
</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-2 col-md-2 col-sm-4 col-xs-6">
+
<div class="col-lg-9">
-
<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>
+
<span>Click to read full abstract</span>
</div>
</div>
-
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
+
<div id="abstract-content" class="col-lg-12" >
-
<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>
+
Placeholder
-
</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="col-lg-12" style="color:white;">
+
<div class="graphicalAbstract">
-
<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 id="redOverlay"></div>
-
<div class="panel panel-default">
+
    <div style="z-index:3;position:relative; height:100%;">
-
<div class="panel-body">
+
    <div id="linker-links">
-
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.
+
    <a href="#" class="block box" id="calibrated">
-
 
+
<img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png">
-
<div class="radio">
+
<span style="position: relative;top: 10px;display: inline-block;">
-
<label>
+
calibrated<br>
-
<input type="radio" data-bind="checked: data.hasBsaI, checkedValue: false, click: data.q0A.bind(null, true)" />
+
<span class="red-text">in silico</span></span>
-
There is no BsaI site.
+
</a>
-
</label>
+
<a href="#" class="block box" id="screened">
-
</div>
+
<span style="position: relative;top:10px;display: inline-block;">
-
<div class="radio">
+
screened <span class="red-text">in vitro</span><br>
-
<label>
+
with lysozyme</span>
-
<input type="radio" data-bind="checked: data.hasBsaI, checkedValue: true, click: data.q0A.bind(null, true)" />
+
<img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" />
-
There is a BsaI site.
+
</a>
-
</label>
+
<a href="#" class="block" style="bottom:0; left:0; position:absolute;">
-
</div>
+
<span class="red-text" >circularize</span> it<br>
-
</div>
+
with calculated linkers
-
</div>
+
</a>
-
<div data-bind="fadeVisible: data.q0A">
+
    </div>
-
<h3>2. Do you want to use split inteins or sortase to circularize your protein?</h3>
+
<div class="ringbox">
-
<div class="panel panel-default">
+
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
-
<div class="panel-body">
+
<div id="circ-box" class="descr-box">
-
<div class="radio">
+
<a href="/Team:Heidelberg/Toolbox/Circularization">
-
<label>
+
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon toolbox-icon-scale"/>
-
<input type="radio" data-bind="checked: data.useSortase, checkedValue: false, click: data.q1A.bind(null, true)" />
+
</a>
-
NpuDnaE intein RFC <span data-bind="value: RFCnumber"></span> circularization construct
+
<h3>CIRCULARIZATION</h3>
-
</label>
+
<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>
-
<ul>
+
</div>
-
<li>Successfully used in our project</li>
+
<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>High efficiency</li>
+
</div>
-
<li>In vivo circularization</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>
-
</ul>
+
</div>
-
</div>
+
<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 class="radio">
+
<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>
-
<label>
+
<div id="toolbox-text">
-
<input type="radio" data-bind="checked: data.useSortase, checkedValue: true, click: data.q1A.bind(null, true)" />
+
the intein<br>
-
Sortase A circularization construct
+
<span>toolbox<span>
-
</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;" 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");});
 +
}
 +
});
-
<div data-bind="fadeVisible: data.q4A() &amp;&amp; !data.endsAreClose()">
+
$('#linker-links').mouseenter(function(){
-
Please use <span data-bind="text: softwareName"></span> to generate a linker for your circular protein. [LINK]
+
$('#redOverlay').stop(true);
-
 
+
$('#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 />
+
-
 
+
-
NILS – hier immernoch<br />
+
$('#linker-links').mouseleave(function(){
 +
$('#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();
-
NILS – hier ebnfalls und auch gerne noch umfangreicher<br />
+
$element.find('span').stop(true).animate({opacity: 1}, 800);
 +
})
 +
.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);
 +
});
-
Please save this link:<br />
+
$('#toolbox')
-
<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>
+
.mouseover(function() {
 +
$('#toolbox-img-hover').fadeIn();
 +
})
 +
.mouseleave(function() {
 +
$('#toolbox-img-hover').fadeOut();
 +
});
 +
});
-
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>.
+
</script>
-
</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:43, 15 October 2014