Difference between revisions of "Team:Heidelberg/Toolbox"

Line 217: Line 217:
 
                                         <div class="t-container input-form">
 
                                         <div class="t-container input-form">
 
                                             <div class="t-col t-col_12 questionnaire">
 
                                             <div class="t-col t-col_12 questionnaire">
−
                                               <h2 style="text-align: center; color:#222 !important; font-weight: 400 !important">Are you ready to PREDCEL?</h2>  
+
                                               <h1 style="text-align: center !important; font-weight: 400 !important">Ready to PREDCEL?</h1>  
 
                                                  
 
                                                  
 
                                                 <div class="accordion" role="tablist" aria-multiselectable="true" style="padding-top: 30px">
 
                                                 <div class="accordion" role="tablist" aria-multiselectable="true" style="padding-top: 30px">
Line 295: Line 295:
 
                                         </div>
 
                                         </div>
 
                                         <div class="t-container input-form content"  style="position: relative; top: 20px;">
 
                                         <div class="t-container input-form content"  style="position: relative; top: 20px;">
−
                                             <h2 style="text-align: center; color:#6698BE !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important ">Plasmid</h2>
+
                                             <h1 style="text-align: center !important; color:##393939 !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important">
 +
                                            1. Optimize parental sequence / gene pool</h1>
 +
                                        </div>
 +
                                        <div class="t-container input-form content"  style="position: relative; top: 40px;">
 +
                                            <h1 style="text-align: center !important; color:##393939 !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important">
 +
                                            2. Get phage</h1>
 +
                                        </div>
 +
                                        <div class="t-container input-form content"  style="position: relative; top: 60px;">
 +
                                            <h1 style="text-align: center !important; color:##393939 !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important">
 +
                                            3. Add selection pressure</h1>
 +
                                           
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>1. First, choose your preferred backbone from the pull down menu. We provide three different origins of replication that differ in their copy number and therefore affect the selection stringency, your AP will have. Be aware that the origin of replication should be compatible to the origin of replication of all other plasmids you plan to use. In most of the cases it is best to combine your origin of replication with an ampicillin resistance, but we provide other antibiotic resistances for special applications as well.</i></div>
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>1. First, choose your preferred backbone from the pull down menu. We provide three different origins of replication that differ in their copy number and therefore affect the selection stringency, your AP will have. Be aware that the origin of replication should be compatible to the origin of replication of all other plasmids you plan to use. In most of the cases it is best to combine your origin of replication with an ampicillin resistance, but we provide other antibiotic resistances for special applications as well.</i></div>
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>2. Second, decide which RBS you need for control of geneIII translation. We offer six different RBS with different strengths. For further information look...</i></div>
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>2. Second, decide which RBS you need for control of geneIII translation. We offer six different RBS with different strengths. For further information look...</i></div>
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>3. Next, decide, which reporter you would like to choose. A set of different fluorescent and luminescent reporters is available</i></div>
 
<div class="content" style="padding: 10px 20px 10px 20px !important"><i>3. Next, decide, which reporter you would like to choose. A set of different fluorescent and luminescent reporters is available</i></div>
−
 
+
<h2 style="text-align: center !important; color:#6698BE !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important ">Plasmid</h2>
−
                                             <div class="t-col t-col_4">
+
                                             <div class="row" style="padding: 0px 20px 0px 20px;">
 +
                                            <div class="col-lg-4 col-md-4 col-xs-12">
 
                                                 <h3>Resistance &amp; Ori </h3>
 
                                                 <h3>Resistance &amp; Ori </h3>
 
                                                 <input name="input_origin" value="origin" type="hidden">
 
                                                 <input name="input_origin" value="origin" type="hidden">
 
                                                 <select required id="input_origin_select" style="width: 100%;">
 
                                                 <select required id="input_origin_select" style="width: 100%;">
 
                                                     <option value="" disabled selected>Select</option>
 
                                                     <option value="" disabled selected>Select</option>
−
                                                 </select>
+
                                                 </select>  
 
                                             </div>
 
                                             </div>
−
                                             <div class="t-col t-col_4">
+
                                             <div class="col-lg-4 col-md-4 col-xs-12">
 
                                                 <h3>RBS + geneIII</h3>
 
                                                 <h3>RBS + geneIII</h3>
 
                                                 <input name="input_rbs" value="rbs" type="hidden">
 
                                                 <input name="input_rbs" value="rbs" type="hidden">
Line 314: Line 325:
  
 
                                                 </select>
 
                                                 </select>
 +
                                               
 
                                             </div>
 
                                             </div>
−
                                             <div class="t-col t-col_4">
+
                                             <div class="col-lg-4 col-md-4 col-xs-12">
−
                                                <h3>RBS + Reporter</h3>
+
                                                <h3>RBS + Reporter</h3>
 
                                                 <input name="input_marker" value="marker" type="hidden">
 
                                                 <input name="input_marker" value="marker" type="hidden">
 
                                                 <select required id="input_marker_select" style="width: 100%;">
 
                                                 <select required id="input_marker_select" style="width: 100%;">
Line 323: Line 335:
 
                                                 </select>
 
                                                 </select>
 
                                             </div>
 
                                             </div>
−
                                        </div>
+
                                            </div>
−
 
+
                                         
−
 
+
                                             <h2 style="text-align: center !important; color: #ffd200!important;font-weight: 400 !important ">Activator &amp; Promoter</h2>
−
                                        <div class="t-container input-form content" style="position: relative;top: 40px;text-alin: center !important">
+
                                             <div class="content" style="position: relative;padding: 10px 20px 10px 20px !important">
−
                                             <h2 style="text-align: center; color: #ffd200!important;font-weight: 400 !important ">Activator &amp; Promoter</h2>
+
                                               
−
                                             <div class="content" style="padding: 10px 20px 10px 20px !important"><i>4. When all standard parts are defined, the promoter and associated regulatory sequences must be set. Decide between the given options. Enter either an own sequence (as text or upload the file) or use one of the provided standard promoters that were already used by our team. Notice that the length of this part should not be below 200 bp. Ensure, that your sequence does not include a RBS.</i></div>
+
                                                <i>4. When all standard parts are defined, the promoter and associated regulatory sequences must be set. Decide between the given options. Enter either an own sequence (as text or upload the file) or use one of the provided standard promoters that were already used by our team. Notice that the length of this part should not be below 200 bp. Ensure, that your sequence does not include a RBS.</i></div>
−
                                           
+
                                                <div class="row" style="padding: 0px 20px 0px 20px;margin: 0px !important;">
−
                                                 <div class="t-col t-col_12">
+
                                                 <div class="col-lg-12 col-md-12 col-xs-12">
 
                                                     <input name="promotor" id="input_promotor" value="Promoter" type="hidden">
 
                                                     <input name="promotor" id="input_promotor" value="Promoter" type="hidden">
 
                                                     <select required id="input_promotor_select" name="input_promotor_select" style="margin-top:20px;margin-bottom:20px;width: 100%;visibility: visible;">
 
                                                     <select required id="input_promotor_select" name="input_promotor_select" style="margin-top:20px;margin-bottom:20px;width: 100%;visibility: visible;">
 
                                                         <option value="" disabled selected>Select</option>
 
                                                         <option value="" disabled selected>Select</option>
 
                                                     </select>
 
                                                     </select>
−
                                                </div>
+
                                             
−
                                           
+
−
                                         
+
−
                                                <div class="t-col t-col_12">
+
 
                                                     <div id="input_promotor_upload" style="visibility:visible;display:none">
 
                                                     <div id="input_promotor_upload" style="visibility:visible;display:none">
 
                                                         <input type="file" id="input_promotor_file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_promotor_upload" name="files[]"
 
                                                         <input type="file" id="input_promotor_file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_promotor_upload" name="files[]"
Line 348: Line 357:
 
                                                     </div>
 
                                                     </div>
  
−
                                                </div>
+
                                           
−
                                                <div class="t-col t-col_12">
+
 
                                                     <div id="input_promotor_paste" style="visibility:visible;display:none">
 
                                                     <div id="input_promotor_paste" style="visibility:visible;display:none">
 
                                                         <textarea name="" id="input_promotor_paste_text" class="input_textarea"></textarea>
 
                                                         <textarea name="" id="input_promotor_paste_text" class="input_textarea"></textarea>
Line 358: Line 366:
 
                                                     </div>
 
                                                     </div>
 
                                                 </div>
 
                                                 </div>
−
                                         
+
                                            </div>
−
 
+
                                            <h2 style="text-align: center !important; color:#f8991d !important; font-weight: 400 !important ">Additional sequence</h2>
−
                                        </div>
+
−
 
+
−
                                        <div class="t-container input-form" style="position: relative;top: 60px;text-align: center !important">
+
−
                                            <h2 style="text-align: center; color:#f8991d !important; font-weight: 400 !important ">Additional sequence</h2>
+
 
                                           <div class="content" style="padding: 10px 20px 10px 20px !important"><i>5. Finally, decide which additional gene you would like to express on your AP. Most circuits that are used in PACE, need at least one additional protein, like split-proteins, chaperone or interacting factors. Again, it is possible to enter the desired sequence or choose one of the provided genes. Make sure, you enter a whole expression cassette, with promter, RBS, CDS and terminator.</i></div>
 
                                           <div class="content" style="padding: 10px 20px 10px 20px !important"><i>5. Finally, decide which additional gene you would like to express on your AP. Most circuits that are used in PACE, need at least one additional protein, like split-proteins, chaperone or interacting factors. Again, it is possible to enter the desired sequence or choose one of the provided genes. Make sure, you enter a whole expression cassette, with promter, RBS, CDS and terminator.</i></div>
−
                                             <div class="t-row">
+
                                             <div class="row" style="padding: 0px 20px 0px 20px">
−
                                                 <div class="t-col t-col_12">
+
                                                 <div class="col-lg-12 col-md-12 col-xs-12">
 
                                                     <input name="" value="Additional_options" type="hidden">
 
                                                     <input name="" value="Additional_options" type="hidden">
 
                                                     <select required id="input_additional_select" name="input_additional_select" style="visibility: visible;width: 100%;margin-top:20px;margin-bottom:20px;">
 
                                                     <select required id="input_additional_select" name="input_additional_select" style="visibility: visible;width: 100%;margin-top:20px;margin-bottom:20px;">
Line 372: Line 376:
 
                                                     </select>
 
                                                     </select>
 
                                                 </div>
 
                                                 </div>
−
                                            </div>
+
                                                 <div class="col-lg-12 col-md-12 col-xs-12">
−
                                            <div class="t-row">
+
−
                                                 <div class="t-col t-col_12">
+
 
                                                     <div id="input_additional_upload" style="visibility:visible;display:none;padding-bottom:20px;">
 
                                                     <div id="input_additional_upload" style="visibility:visible;display:none;padding-bottom:20px;">
 
                                                         <input type="file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_additional_file" name="files[]"
 
                                                         <input type="file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_additional_file" name="files[]"
Line 384: Line 386:
 
                                                     </div>
 
                                                     </div>
 
                                                 </div>
 
                                                 </div>
−
                                                 <div class="t-col t-col_12">
+
                                                 <div class="col-lg-12 col-md-12 col-xs-12">
 
                                                     <div id="input_additional_paste" style="visibility:visible;display:none;padding-bottom:20px;">
 
                                                     <div id="input_additional_paste" style="visibility:visible;display:none;padding-bottom:20px;">
 
                                                         <textarea name="" id="input_additional_paste_text" class="input_textarea"></textarea>
 
                                                         <textarea name="" id="input_additional_paste_text" class="input_textarea"></textarea>
Line 394: Line 396:
 
                                                 </div>
 
                                                 </div>
 
                                             </div>
 
                                             </div>
−
 
+
                                            <div class="row">
−
                                        </div>
+
                                            <div class="col-lg-12 col-md-12 col-xs-12">
−
 
+
−
                                    </form>
+
−
 
+
−
                                </div>
+
−
 
+
−
                                <div style="padding-top: 80px;padding-bottom: 80px;  background-color: #222;">
+
−
                                    <div class="t-container" style="position: relative;background-color: white; border-radius: 10px;">
+
 
                                                     <div class="getPlasmidButton" onclick="submit_p1()">Create Plasmid</div>
 
                                                     <div class="getPlasmidButton" onclick="submit_p1()">Create Plasmid</div>
−
                                         <div class="t-row" style="display:none" id="results_area" style="min-height:600px !important">
+
                                         <div class="row" style="display:none" id="results_area" style="min-height:600px !important">
−
                                             <div class="t-col t-col_6">
+
                                             <div class="col-lg-6 col-md-6 col-xs-12">
 
                                                 <h4>Instructions</h4>
 
                                                 <h4>Instructions</h4>
 
                                                 <div id="instructions" style="text-align:justify">
 
                                                 <div id="instructions" style="text-align:justify">
 
                                                 </div>
 
                                                 </div>
 
                                             </div>
 
                                             </div>
−
                                             <div class="t-col t-col_6">
+
                                             <div class="col-lg-6 col-md-6 col-xs-12">
−
                                                 <div class="t-col t-col_6" id="plasmid_container">
+
                                                 <div class="col-lg-6 col-md-6 col-xs-12" id="plasmid_container">
 
                                                 </div>
 
                                                 </div>
 
                                             </div>   
 
                                             </div>   
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
 +
                                           
 +
                                           
 +
                                            </div>
 +
                                           
 +
                                        </div>
 +
                                        <div class="t-container input-form content"  style="position: relative; top: 80px;">
 +
                                            <h1 style="text-align: center !important; color:##393939 !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important">
 +
                                            4. Induce mutagenesis</h1>
 +
                                        </div>
 +
                                      <div class="t-container input-form content"  style="position: relative; top: 100px;">
 +
                                            <h1 style="text-align: center !important; color:##393939 !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important">
 +
                                            5. Optimize conditions</h1>
 +
                                        </div>
 +
                                    </form>
 +
 
                                 </div>
 
                                 </div>
 +
 +
                               
 
<script>
 
<script>
 
                                     //init
 
                                     //init

Revision as of 23:14, 31 October 2017

Welcome to our
Toolbox Guide!

To enable rapid design and simple cloning of APs, we created a software tool, so that cloning can easily be planned. All parts that can be chosen are available in pSB1C3 backbones from the registry. Just follow the instructions and create your own fully customized AP.

Ready to PREDCEL?

First question

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Second question

1. Optimize parental sequence / gene pool

2. Get phage

3. Add selection pressure

1. First, choose your preferred backbone from the pull down menu. We provide three different origins of replication that differ in their copy number and therefore affect the selection stringency, your AP will have. Be aware that the origin of replication should be compatible to the origin of replication of all other plasmids you plan to use. In most of the cases it is best to combine your origin of replication with an ampicillin resistance, but we provide other antibiotic resistances for special applications as well.
2. Second, decide which RBS you need for control of geneIII translation. We offer six different RBS with different strengths. For further information look...
3. Next, decide, which reporter you would like to choose. A set of different fluorescent and luminescent reporters is available

Plasmid

Resistance & Ori

RBS + geneIII

RBS + Reporter

Activator & Promoter

4. When all standard parts are defined, the promoter and associated regulatory sequences must be set. Decide between the given options. Enter either an own sequence (as text or upload the file) or use one of the provided standard promoters that were already used by our team. Notice that the length of this part should not be below 200 bp. Ensure, that your sequence does not include a RBS.

Additional sequence

5. Finally, decide which additional gene you would like to express on your AP. Most circuits that are used in PACE, need at least one additional protein, like split-proteins, chaperone or interacting factors. Again, it is possible to enter the desired sequence or choose one of the provided genes. Make sure, you enter a whole expression cassette, with promter, RBS, CDS and terminator.
Create Plasmid

4. Induce mutagenesis

5. Optimize conditions