|
|
(61 intermediate revisions not shown) |
Line 7: |
Line 7: |
| {{: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>
| |
- | <script type="text/javascript">
| |
- | "use strict";jQuery.base64=(function($){var _PADCHAR="=",_ALPHA="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",_VERSION="1.0";function _getbyte64(s,i){var idx=_ALPHA.indexOf(s.charAt(i));if(idx===-1){throw"Cannot decode base64"}return idx}function _decode(s){var pads=0,i,b10,imax=s.length,x=[];s=String(s);if(imax===0){return s}if(imax%4!==0){throw"Cannot decode base64"}if(s.charAt(imax-1)===_PADCHAR){pads=1;if(s.charAt(imax-2)===_PADCHAR){pads=2}imax-=4}for(i=0;i<imax;i+=4){b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12)|(_getbyte64(s,i+2)<<6)|_getbyte64(s,i+3);x.push(String.fromCharCode(b10>>16,(b10>>8)&255,b10&255))}switch(pads){case 1:b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12)|(_getbyte64(s,i+2)<<6);x.push(String.fromCharCode(b10>>16,(b10>>8)&255));break;case 2:b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12);x.push(String.fromCharCode(b10>>16));break}return x.join("")}function _getbyte(s,i){var x=s.charCodeAt(i);if(x>255){throw"INVALID_CHARACTER_ERR: DOM Exception 5"}return x}function _encode(s){if(arguments.length!==1){throw"SyntaxError: exactly one argument required"}s=String(s);var i,b10,x=[],imax=s.length-s.length%3;if(s.length===0){return s}for(i=0;i<imax;i+=3){b10=(_getbyte(s,i)<<16)|(_getbyte(s,i+1)<<8)|_getbyte(s,i+2);x.push(_ALPHA.charAt(b10>>18));x.push(_ALPHA.charAt((b10>>12)&63));x.push(_ALPHA.charAt((b10>>6)&63));x.push(_ALPHA.charAt(b10&63))}switch(s.length-imax){case 1:b10=_getbyte(s,i)<<16;x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_PADCHAR+_PADCHAR);break;case 2:b10=(_getbyte(s,i)<<16)|(_getbyte(s,i+1)<<8);x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_ALPHA.charAt((b10>>6)&63)+_PADCHAR);break}return x.join("")}return{decode:_decode,encode:_encode,VERSION:_VERSION}}(jQuery));
| |
- | </script>
| |
| <style type="text/css"> | | <style type="text/css"> |
| #myContainer { | | #myContainer { |
Line 80: |
Line 76: |
| <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 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 class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> |
| + | <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 class="col-lg-12" style="color:#333;">
| |
- | <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>
| |
- | 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 class="panel panel-default" data-bind="if: data.q0A">
| |
- | <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="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 class="panel panel-default" data-bind="if: data.q1A">
| |
- | <div class="panel-heading">
| |
- | <h3 class="panel-title">3. Can your protein be easily expressed in <i>E. coli</i>?</h3>
| |
- | </div>
| |
- | <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 class="panel panel-default" data-bind="if: data.q2A() && !data.useSortase()">
| |
- | <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>
| |
- | <!-- 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 class="panel panel-default" data-bind="if: data.q3A() || (data.q2A() && data.useSortase())">
| |
- | <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() && data.exteins().N == 'XXX' ? 5 : 15"></span> Å 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="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 data-bind="if: data.q4A() && !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>
| |
- |
| |
- | <div class="panel panel-default" data-bind="if: data.comingBack">
| |
- | <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 < 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 > 30 amino acids in length.
| |
- | </label>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div class="panel panel-default" data-bind="if: data.q5A">
| |
- | <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>
| |
- | </div>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <script type="text/javascript">
| |
- | function CircularizationViewModel(hash) {
| |
- | var self = this;
| |
- | self.RFCnumber = '[???]';
| |
- | self.softwareName = '[hoffentlich nicht LinkIT]';
| |
- | self.availableExteins = [
| |
- | { N: 'RGK', C: 'CWE', comment: '', notes: ['Efficient, tested by us', 'Large scar'] },
| |
- | { N: 'RGT', C: 'CWE', comment: '', notes: ['Efficient, tested by us', 'Large scar'] },
| |
- | { N: 'AEY', C: 'CFN' , comment: '', notes: ['Efficient, native extein', 'Large scar'] },
| |
- | { N: 'XXX', C: 'CXX', comment: 'X = native amino acids of the protein', notes: ['Probably less efficient (depends on the protein)', 'Small scar'] },
| |
- | ];
| |
- |
| |
- | var data = hash && $.parseJSON($.base64.decode(hash.substr(1)));
| |
- | self.data = {
| |
- | comingBack: data ? data.comingBack : false,
| |
- | q0A: ko.observable(data ? data.q0A : false),
| |
- | hasBsaI: ko.observable(data && data.hasBsaI),
| |
- | q1A: ko.observable(data ? data.q1A : false),
| |
- | useSortase: ko.observable(data && data.useSortase),
| |
- | q2A: ko.observable(data ? data.q2A : false),
| |
- | needsSmt3: ko.observable(data && data.needsSmt3),
| |
- | q3A: ko.observable(data ? data.q3A : false),
| |
- | exteins: ko.observable(data && data.exteins),
| |
- | q4A: ko.observable(data ? data.q4A : false),
| |
- | endsAreClose: ko.observable(data && data.endsAreClose),
| |
- | q5A: ko.observable(data ? data.q5A : false),
| |
- | linkerLength: ko.observable(data && data.linkerLength),
| |
- | q6A: ko.observable(data ? data.q6A : false),
| |
- | testSeveral: ko.observable(data && data.testSeveral),
| |
- | };
| |
- |
| |
- | self.hash = ko.computed(function () {
| |
- | self.data.q0A();
| |
- | self.data.q1A();
| |
- | self.data.q2A();
| |
- | self.data.q3A();
| |
- | self.data.q4A();
| |
- | self.data.q5A();
| |
- | self.data.q6A();
| |
- | self.data.hasBsaI();
| |
- | self.data.useSortase();
| |
- | self.data.needsSmt3();
| |
- | self.data.exteins();
| |
- | self.data.endsAreClose();
| |
- | self.data.linkerLength();
| |
- | self.data.testSeveral();
| |
- |
| |
- | window.location.hash = $.base64.encode(ko.toJSON(self.data));
| |
- | console.log(window.location.hash, ko.toJSON(self.data));
| |
- | return window.location.hash;
| |
- |
| |
- | if (self.q0A()) {
| |
- | window.location.hash = '#' + (self.hasBsaI() ? '1': '0');
| |
- |
| |
- | if (self.q1A()) {
| |
- | window.location.hash += self.useSortase() ? '1': '0';
| |
- |
| |
- | if (self.q2A()) {
| |
- | window.location.hash += self.needsSmt3() ? '1': '0';
| |
- |
| |
- | if (self.q3A() && !self.useSortase())
| |
- | window.location.hash += self.exteins().N;
| |
- |
| |
- | if (self.q4A()) {
| |
- | window.location.hash += self.endsAreClose() ? '1': '0';
| |
- |
| |
- | if (self.q5A()) {
| |
- | window.location.hash += self.linkerLength();
| |
- |
| |
- | if (self.q6A()) {
| |
- | window.location.hash += self.testSeveral() ? '1': '0';
| |
- | }
| |
- | }
| |
- | }
| |
- | }
| |
- | }
| |
- | } else {
| |
- | window.location.hash = '';
| |
- | }
| |
- |
| |
- | return window.location.hash;
| |
- | });
| |
- |
| |
- | self.comeBackHash = ko.computed(function () {
| |
- | var tmp = self.data.comingBack;
| |
- | self.data.comingBack = true;
| |
- | var hash = $.base64.encode(ko.toJSON(self.data));
| |
- | self.data.comingBack = tmp;
| |
- | return hash;
| |
- | });
| |
- | }
| |
- |
| |
- | vm = new CircularizationViewModel(window.location.hash);
| |
- | ko.applyBindings(vm);
| |
- |
| |
- | /*function parseHash(hash) {
| |
- | var data = hash.substring(1);
| |
- | for(i = 0; i< data.length; i++) {
| |
- | switch(i){
| |
- | case 1:
| |
- | vm.hasBsaI(data[i]);
| |
- | break;
| |
- | case 2:
| |
- | vm.
| |
- | }
| |
- | }
| |
- | }*/
| |
- | </script>
| |
| </html> | | </html> |