Difference between revisions of "Team:Heidelberg/Toolbox"

Line 237: Line 237:
 
         <div class="panel-body">
 
         <div class="panel-body">
 
             <div class="col-lg-12 col-md-12 col-xs-12 content" style="padding-top: 20px; padding-bottom: 20px">
 
             <div class="col-lg-12 col-md-12 col-xs-12 content" style="padding-top: 20px; padding-bottom: 20px">
−
                   
+
                <div class="col-lg-12 col-md-12 col-xs-12 content" style="padding-top: 20px; padding-bottom: 20px">
−
               
+
   
−
<div class="col-lg-12 col-md-12 col-xs-12 content" style="padding-top: 20px; padding-bottom: 20px">
+
    <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
−
  <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
+
−
                                                 
+
 
                                                      
 
                                                      
−
                                                 <h2>First question</h2>
+
                                                   
−
                                                 <div class="col-lg-4 col-md-4 col-xs-12">
+
                                                 <h2>Have you already chosen a protein to be evolved?</h2>
 +
                                                 <div class="col-lg-6 col-md-6 col-xs-12 content">
 
                                                     <input type="radio" id="q_11" name="selector">
 
                                                     <input type="radio" id="q_11" name="selector">
−
                                                     <label for="q_11" class="check"></label><div class="content" style="color: #222 !important">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
+
                                                     <label for="q_11" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
 
                                                 </div>
 
                                                 </div>
−
                                                   <div class="col-lg-4 col-md-4 col-xs-12">
+
                                                   <div class="col-lg-6 col-md-6 col-xs-12">
 
                                                     <input type="radio" id="q_12" name="selector">
 
                                                     <input type="radio" id="q_12" name="selector">
−
                                                     <label for="q_12" class="check"></label><div class="content" style="color: #222 !important">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
+
                                                     <label for="q_12" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">No</div></label>
  
 
                                                     </div>
 
                                                     </div>
−
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
+
                                               
−
                                                    <input type="radio" id="q_13" name="selector">
+
                                                   
−
                                                    <label for="q_13" class="check"></label><div class="content" style="color: #222 !important">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
+
                                                    <div style="display: none" class="answer" id="a_11">You already accomplished the first and most important step. Let’s see whether you
 +
are ready to evolve it!</div>
 +
                                                <div style="display: none" class="answer" id="a_12">No problem, there are lots of proteins waiting to be evolved.Go on to find
 +
out what you should take care of choosing your protein and preparing your
 +
experiments. Maybe have a look at our toolbox to get an idea of the wide range
 +
of proteins you can evolve with <a href="https://2017.igem.org/Team:Heidelberg/Predcel">PREDCEL</a></div>
 +
                                                 
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 
                                                 </div>
 
                                                 </div>
−
                                                <div class="col-lg-12 col-md-12 col-xs-12 content answers" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;border-radius: 5px;border: 2px solid #222;min-height: 300px; content: '\200B'"></div>
+
   
  
  
−
                                                </div>
 
 
                                                 <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 
                                                 <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 
                                                      
 
                                                      
 
                                                      
 
                                                      
−
                                                 <h2>Second question</h2>
+
                                                 <h2>Which approach do you pursue by using our evolutionary toolbox?</h2>
−
                                                 <div class="col-lg-4 col-md-4 col-xs-12">
+
                                                 <div class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-xs-12">
 
                                                     <input type="radio" id="q_21" name="selector">
 
                                                     <input type="radio" id="q_21" name="selector">
−
                                                     <label for="q_21" class="check"> <div class="labelname content" style="color:#222 !important">1</div></label>
+
                                                     <label for="q_21" class="check"> <div class="labelname content" style="color:#222 !important;">Medical application</div></label>
 
                                                 </div>
 
                                                 </div>
−
                                                   <div class="col-lg-4 col-md-4 col-xs-12">
+
                                                   <div class="col-lg-2 col-md-2 col-xs-12">
 
                                                     <input type="radio" id="q_22" name="selector">
 
                                                     <input type="radio" id="q_22" name="selector">
−
                                                     <label for="q_22" class="check"><div class="labelname content" style="color:#222 !important">2</div></label>
+
                                                     <label for="q_22" class="check"><div class="labelname content" style="color:#222 !important">Chemical synthesis</div></label>
  
 
                                                     </div>
 
                                                     </div>
−
                                                   <div class="col-lg-4 col-md-4 col-xs-12">
+
                                                   <div class="col-lg-2 col-md-2 col-xs-12">
 
                                                     <input type="radio" id="q_23" name="selector">
 
                                                     <input type="radio" id="q_23" name="selector">
−
                                                     <label for="q_23" class="check"><div class="labelname content" style="color:#222 !important">3</div></label>
+
                                                     <label for="q_23" class="check"><div class="labelname content" style="color:#222 !important">Agricultural approach</div></label>
 
                                                 </div>
 
                                                 </div>
 +
                                                    <div class="col-lg-2 col-md-2 col-xs-12">
 +
                                                    <input type="radio" id="q_24" name="selector">
 +
                                                    <label for="q_24" class="check"><div class="labelname content" style="color:#222 !important">Could be helpful somehow</div></label>
  
−
                                                     <div class="col-lg-12 col-md-12 col-xs-12 content answers" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;border-radius: 5px;border: 2px solid #222;min-height: 300px; content: '\200B'"></div>
+
                                                     </div>
 +
                                                  <div class="col-lg-2 col-md-2 col-xs-12">
 +
                                                    <input type="radio" id="q_25" name="selector">
 +
                                                    <label for="q_25" class="check"><div class="labelname content" style="color:#222 !important">Other scientific interests</div></label>
 
                                                 </div>
 
                                                 </div>
−
            </div>
+
                                                   
−
        </div>
+
                                                    <div style="display: none" class="answer" id="a_21">Did you discuss your idea with a medical professional? We are sure this expertise
−
     </div>
+
would be valuable to choose the right experimental settings.</div>
−
</div>
+
                                                <div style="display: none" class="answer" id="a_22">Did you consider that your products might be dangerous? To get to know this, you
−
         
+
could engage a chemical expert.</div>
 +
                                                    <div style="display: none" class="answer" id="a_23">Be aware that a number of countries have strict regulations regarding green
 +
biotechnology.</div>
 +
                                                <div style="display: none" class="answer" id="a_24">That sounds quite uncertain. Before you start or pursue evolving your protein, you
 +
should know the exact purpose and impact. How about engaging with your local
 +
community to figure out possible needs?</div>
 +
                                              <div style="display: none" class="answer" id="a_25">Engage with the community in the field of in vivo evolution – we´d be interested in
 +
discussing your project.</div>      
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                </div>
 +
   
 +
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                   
 +
                                                   
 +
                                                <h2>Are you sure your protein is safe to be evolved?</h2>
 +
                                                <div class="col-lg-6 col-md-6 col-xs-12 content">
 +
                                                    <input type="radio" id="q_31" name="selector">
 +
                                                    <label for="q_31" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes it is safe!</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-6 col-md-6 col-xs-12">
 +
                                                    <input type="radio" id="q_32" name="selector">
 +
                                                    <label for="q_32" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">How can I know?</div></label>
  
−
       
+
                                                    </div>
 +
                                               
 +
                                                   
 +
                                                    <div style="display: none" class="answer" id="a_31">Nevertheless we advise you to check it in our SafetyNet, there could be “sleeping”
 +
hazardous potential.</div>
 +
                                                <div style="display: none" class="answer" id="a_32">Check our <a href="https://2017.igem.org/Team:Heidelberg/Software/SafetyNet">SafetyNet</a></div>
 +
                                                 
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                </div>
 +
                                               
 +
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                   
 +
                                                   
 +
                                                <h2>Do you know which equipment is required to safely work with phages?</h2>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12 content">
 +
                                                    <input type="radio" id="q_41" name="selector">
 +
                                                    <label for="q_41" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_42" name="selector">
 +
                                                    <label for="q_42" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">Not sure</div></label>
 +
 
 +
                                                    </div>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_43" name="selector">
 +
                                                    <label for="q_43" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">No</div></label>
 +
 
 +
                                                    </div>
 +
                                                   
 +
                                                    <div style="display: none" class="answer" id="a_41">Did your considerations include that phages are very volatile? You should create a
 +
special “phage space” in your lab to reduce contamination. Furthermore, you should
 +
comply with the safety level of your evolving protein. Check the safety level of your
 +
protein on our SafetyNet</div>
 +
                                                <div style="display: none" class="answer" id="a_42">Check advices on our safety page and get in touch with your safety representative</a></div>
 +
                                                <div style="display: none" class="answer" id="a_43">Before performing your PREDCEL experiments you should reflect on the
 +
consequences</a></div> 
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                </div>
 +
                                               
 +
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                   
 +
                                                   
 +
                                                <h2>Did you calculate all required parameters on our Integrated Modeling page?</h2>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12 content">
 +
                                                    <input type="radio" id="q_51" name="selector">
 +
                                                    <label for="q_51" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_52" name="selector">
 +
                                                    <label for="q_52" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">Not yet</div></label>
 +
 
 +
                                                    </div>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_53" name="selector">
 +
                                                    <label for="q_53" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">I don´t intend to</div></label>
 +
 
 +
                                                    </div>
 +
                                                   
 +
                                                    <div style="display: none" class="answer" id="a_51">Well done! Now you have the optimal conditions to succeed</div>
 +
                                                <div style="display: none" class="answer" id="a_52">Visit our Integrated Modeling page to figure out all required parameters for a
 +
successful PREDCEL run</div>
 +
                                                <div style="display: none" class="answer" id="a_53">You should consider that our Integrated Modeling reduces effort, costs and
 +
environmental burden</div> 
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                </div>
 +
                                               
 +
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                   
 +
                                                   
 +
                                                <h2>Did you already engage with your local community to discuss your plans?</h2>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12 content">
 +
                                                    <input type="radio" id="q_61" name="selector">
 +
                                                    <label for="q_61" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_62" name="selector">
 +
                                                    <label for="q_62" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">Not yet</div></label>
 +
 
 +
                                                    </div>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_63" name="selector">
 +
                                                    <label for="q_63" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">I don´t intend to</div></label>
 +
 
 +
                                                    </div>
 +
                                                   
 +
                                                    <div style="display: none" class="answer" id="a_61">Fine. For more ideas, how to engage with the public you could watch the expert interview
 +
with Dr. Kaufmann</div>
 +
                                                <div style="display: none" class="answer" id="a_62">You should integrate public needs to ensure the beneficial impact for humanity of your
 +
research aim</div>
 +
                                                <div style="display: none" class="answer" id="a_63">You should first engage with your local community to discuss concerns before using our
 +
PREDCEL toolbox</div> 
 +
                                               
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                </div>
 
      
 
      
−
</div>
+
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                   
 +
                                                   
 +
                                                <h2>Did you consider possible consequences of your planned PREDCEL experiment?</h2>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12 content">
 +
                                                    <input type="radio" id="q_71" name="selector">
 +
                                                    <label for="q_71" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_72" name="selector">
 +
                                                    <label for="q_72" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">Not yet</div></label>
 +
 
 +
                                                    </div>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_73" name="selector">
 +
                                                    <label for="q_73" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">I don´t intend to</div></label>
 +
 
 +
                                                    </div>
 +
                                                   
 +
                                                    <div style="display: none" class="answer" id="a_71">You are a responsible scientist. We encourage you to use our PREDCEL toolbox and convey
 +
the spirit of responsible science to your friends and colleagues</div>
 +
                                                <div style="display: none" class="answer" id="a_72">Take your time to reflect and research on possible consequences to prevent endangering the
 +
environment and yourself. You should engage with experts in this field</div>
 +
                                                <div style="display: none" class="answer" id="a_73">Before starting your experiment, you should consult experts and their recommendations</div>
 
                                                  
 
                                                  
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content questionnaire_ouput" style="color: #222 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;min-height: 50px; content: '\200B'"></div>
 +
                                                   
 +
                                                </div>
 +
                                                <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
 +
                                                <h1 style="padding-top: 0px;color: #393939 !important">Now it´s on you!</h1>
 +
                                                    When you talk about PREDCEL with your colleagues, friends and local
 +
communities, you can spread the idea of making directed evolution experiments safe and to
 +
use it responsibly for addressing urgent human needs
 +
                                                </div>
 +
                                                   
 +
   
 +
   
 +
            </div> 
 +
                </div></div></div>
 +
 +
 +
                                          </div>   
 
                                                 </div>  
 
                                                 </div>  
 
                                             </div>
 
                                             </div>
Line 467: Line 637:
 
                                     });
 
                                     });
 
                                 </script>
 
                                 </script>
−
                                <script>
+
                                <script>
−
                        var text_dict = {
+
                     
−
                            q_1: {1:'A', 2: 'B', 3: 'C'},
+
−
                            q_2: {1:'A', 2: 'B', 3: 'C'},
+
−
                            q_3: {1:'A', 2: 'B', 3: 'C'},
+
−
                        };
+
 
                          
 
                          
 
                          
 
                          
 
                         $('.questionnaire input').length;
 
                         $('.questionnaire input').length;
 +
                       
 +
                             
 
                         for(var i=0;i<$('.questionnaire input').length; i++) {
 
                         for(var i=0;i<$('.questionnaire input').length; i++) {
 
                             $('.questionnaire input')[i].addEventListener('click', function() {
 
                             $('.questionnaire input')[i].addEventListener('click', function() {
Line 481: Line 649:
 
                                 console.log(i);
 
                                 console.log(i);
 
                                 var clicked = $(this).attr('id');
 
                                 var clicked = $(this).attr('id');
−
                                 var dict_key = clicked.substring(0,clicked.length-1);
+
                                console.log(clicked);
−
                                 var dict_number = clicked.charAt(clicked.length-1);
+
                                 var correspond_answer = 'a'+clicked.substring(1, clicked.length);
 +
                                 var output = $('.questionnaire_ouput')[clicked.charAt(2)-1];
 +
                               
 +
                                $(output).html(document.getElementById(correspond_answer).innerHTML);
 +
                               
 +
                               
 
                                  
 
                                  
−
                                console.log(clicked.charAt(clicked.length-2)-1);
 
−
                                var push = $('.answers')[clicked.charAt(clicked.length-2)-1]
 
−
                                    $(push).html(text_dict[dict_key][dict_number]);
 
 
                             });
 
                             });
 
                         }
 
                         }

Revision as of 00:38, 1 November 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?

Have you already chosen a protein to be evolved?

Which approach do you pursue by using our evolutionary toolbox?

Are you sure your protein is safe to be evolved?

Do you know which equipment is required to safely work with phages?

Did you calculate all required parameters on our Integrated Modeling page?

Did you already engage with your local community to discuss your plans?

Did you consider possible consequences of your planned PREDCEL experiment?

Now it´s on you!

When you talk about PREDCEL with your colleagues, friends and local communities, you can spread the idea of making directed evolution experiments safe and to use it responsibly for addressing urgent human needs

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