|
|
| Line 1: |
Line 1: |
| − | {{Heidelberg/header}}
| |
| − | {{Heidelberg/navbar}}
| |
| − | <html>
| |
| − | <style>
| |
| − |
| |
| − | .getPlasmidButton{
| |
| − | max-width: 400px;
| |
| − | text-align: center;
| |
| − | border-radius:15px;
| |
| − | padding: 25px 20px 25px 20px;
| |
| − | background-color: #9d1c20;
| |
| − | opacity: 1;
| |
| − | margin: 20px auto !important;
| |
| − | font-size: 50px !important;
| |
| − | line-height: 50px !important;
| |
| − | border: 3px solid #9d1c20;
| |
| − | color: #ffffff !important;
| |
| − | font-weight: 400 !important;
| |
| − |
| |
| − | -webkit-transition: background-color 0.25s, color 0.25s; /* Safari */
| |
| − | transition: background-color 0.25s, color 0.25s;
| |
| − | }
| |
| − | .getPlasmidButton:hover{
| |
| − | background-color: #ffffff;
| |
| − |
| |
| − | color: #9d1c20 !important;
| |
| − | cursor:pointer;
| |
| − | }
| |
| | | | |
| − | .plasmid_svg{
| |
| − | width: 100%;
| |
| − | }
| |
| − | .input_form {
| |
| − | background-color: #939393;
| |
| − | border: none;
| |
| − | color: white;
| |
| − | padding: 5px 32px;
| |
| − | margin-top: 25px;
| |
| − | text-align: center;
| |
| − | text-decoration: none;
| |
| − | display: inline-block;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | input[type="text"] {
| |
| − | display: block;
| |
| − | margin: 0;
| |
| − | width: 100%;
| |
| − | height: 30px;
| |
| − | font-size: 18px;
| |
| − | -webkit-appearance: none;
| |
| − | -moz-appearance: none;
| |
| − | appearance: none;
| |
| − | -webkit-box-shadow: none;
| |
| − | -moz-box-shadow: none;
| |
| − | box-shadow: none;
| |
| − | -webkit-border-radius: none;
| |
| − | -moz-border-radius: none;
| |
| − | -ms-border-radius: none;
| |
| − | -o-border-radius: none;
| |
| − | border-radius: none;
| |
| − | }
| |
| − |
| |
| − | .input-form {
| |
| − | background-color: white;
| |
| − | border-radius: 10px;
| |
| − | padding: 20px 0px 50px 0px;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | #toolbox_form div div div {
| |
| − | font-family: 'Josefin Sans', sans-serif;
| |
| − | }
| |
| − |
| |
| − | #toolbox_form>div>div>div>h3 {
| |
| − | text-align: center;
| |
| − | line-height: 25px;
| |
| − | font-size: 35px;
| |
| − | font-weight: 300 !important;
| |
| − | padding: 20px 0px 20px 0px;
| |
| − | }
| |
| − |
| |
| − | .input_textarea {
| |
| − | width: 100%;
| |
| − | height: 120px;
| |
| − | resize: none;
| |
| − | float: left;
| |
| − | visibility: visible;
| |
| − | margin-bottom: 20px;
| |
| − | line-height: 16px;
| |
| − | font-size: 16px;
| |
| − | font-family: monospace;
| |
| − | }
| |
| − | </style>
| |
| − | <style>
| |
| − |
| |
| − | .radio-container{
| |
| − |
| |
| − | background-color: white;
| |
| − | padding: 20px;
| |
| − | margin-top: 30px;
| |
| − | border-radius: 5px;
| |
| − | }
| |
| − |
| |
| − | .radio-container > h2 {
| |
| − | color: #222 !important;
| |
| − | }
| |
| − |
| |
| − | .radio-container input[type=radio]{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .radio-container label{
| |
| − |
| |
| − | position: relative;
| |
| − | font-weight: 300;
| |
| − | font-size: 1.1em;
| |
| − | height: 30px;
| |
| − | z-index: 9;
| |
| − | cursor: pointer;
| |
| − | -webkit-transition: all 0.25s linear;
| |
| − | }
| |
| − |
| |
| − | .radio-container label{
| |
| − | color: #222;
| |
| − | }
| |
| − |
| |
| − | .radio-container .check{
| |
| − |
| |
| − | border: 5px solid #393939;
| |
| − | border-radius: 100%;
| |
| − | height: 25px;
| |
| − | width: 25px;
| |
| − | left: 50%;
| |
| − | z-index: 5;
| |
| − | transition: border .25s linear;
| |
| − | -webkit-transition: border .25s linear;
| |
| − | }
| |
| − |
| |
| − | .radio-container .check {
| |
| − | border: 5px solid #393939;
| |
| − | }
| |
| − |
| |
| − | .radio-container .check::before {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | content: '';
| |
| − | border-radius: 100%;
| |
| − | height: 25px;
| |
| − | width: 25px;
| |
| − | top: -5px;
| |
| − | left: -5px;
| |
| − | margin: auto;
| |
| − | transition: background 0.25s linear;
| |
| − | -webkit-transition: background 0.25s linear;
| |
| − | }
| |
| − |
| |
| − | .radio-container input[type=radio]:checked ~ .check {
| |
| − | border: 5px solid #ffd700;
| |
| − | }
| |
| − |
| |
| − | .radio-container input[type=radio]:checked ~ .check::before{
| |
| − | background: #ffd700;
| |
| − | }
| |
| − |
| |
| − | .labelname {
| |
| − | position: relative;
| |
| − | padding-top: 10px;
| |
| − | font-size: 18px !important;
| |
| − | }
| |
| − | </style>
| |
| − | <style>
| |
| − | .accordion .panel-default {
| |
| − | border-radius: 0px !important;
| |
| − | -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.16);
| |
| − | -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.16);
| |
| − |
| |
| − | }
| |
| − | .accordion .panel {
| |
| − | background-color: white;
| |
| − | border: none;
| |
| − | border-left: 10px solid #ffd700;
| |
| − | border-radius: none !important;
| |
| − | }
| |
| − | .accordion .panel-heading {
| |
| − | background-color: transparent;
| |
| − | border: none;
| |
| − | border-radius: none !important;
| |
| − | }
| |
| − | .accordion .panel-title {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .accordion .panel-heading a {
| |
| − | color: #ffd700 !important;
| |
| − | font-size: 35px !important;
| |
| − | }
| |
| − | .accordion .panel-body {
| |
| − | border: 0px solid #ffd700 !important;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <div style="padding-top: 100px; background-color: #222;">
| |
| − | <form name="Toolbox_form" action="" method="get" id="toolbox_form">
| |
| − |
| |
| − | <div class="t-container">
| |
| − | <div class="t-col t-col_6" style="margin: 0px !important">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/6/68/T--Heidelberg--2017_Big_Black_Phage.svg" width="100%" height="auto">
| |
| − | </div>
| |
| − | <div class="t-col t-col_6" style="margin: 0px !important">
| |
| − | <h2 style="text-align: center; color: white !important;">Welcome to our
| |
| − | <br>
| |
| − | <span style="color: #ffd200; font-weight: 400 !important">Toolbox</span> Guide!</h2>
| |
| − | <p style="color: white !important; font-family: 'Josefin Sans' !important; font-size: 25px !important; font-weight: 200 !important;line-height: 30px !important">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.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="t-container input-form">
| |
| − | <div class="t-col t-col_12 questionnaire">
| |
| − | <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="panel panel-default">
| |
| − | <div class="panel-heading" role="tab" id="tab1">
| |
| − | <h4 class="panel-title">
| |
| − | <a role="button" data-toggle="collapse" data-parent="#accordion" href="#tab1-collapse" aria-expanded="false" aria-controls="tab1-collapse">
| |
| − | <div>
| |
| − | <div class="col-md-11">
| |
| − | See our Questionnaire here
| |
| − | </div>
| |
| − | <div class="col-md-1"><i class="fa fa-plus-circle" aria-hidden="true"></i> </div>
| |
| − | </div>
| |
| − | </a>
| |
| − | </h4>
| |
| − | </div>
| |
| − | <div id="tab1-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="tab1">
| |
| − |
| |
| − | <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-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
| |
| − |
| |
| − |
| |
| − | <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">
| |
| − | <label for="q_11" class="check"> <div class="labelname content" style="color:#222 !important; width: 100px;">Yes</div></label>
| |
| − | </div>
| |
| − | <div class="col-lg-6 col-md-6 col-xs-12">
| |
| − | <input type="radio" id="q_12" name="selector">
| |
| − | <label for="q_12" class="check"><div class="labelname content" style="color:#222 !important;width: 100px;">No</div></label>
| |
| − |
| |
| − | </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 class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-xs-12 radio-container">
| |
| − |
| |
| − |
| |
| − | <h2>Which approach do you pursue by using our evolutionary toolbox?</h2>
| |
| − | <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">
| |
| − | <label for="q_21" class="check"> <div class="labelname content" style="color:#222 !important;">Medical application</div></label>
| |
| − | </div>
| |
| − | <div class="col-lg-2 col-md-2 col-xs-12">
| |
| − | <input type="radio" id="q_22" name="selector">
| |
| − | <label for="q_22" class="check"><div class="labelname content" style="color:#222 !important">Chemical synthesis</div></label>
| |
| − |
| |
| − | </div>
| |
| − | <div class="col-lg-2 col-md-2 col-xs-12">
| |
| − | <input type="radio" id="q_23" name="selector">
| |
| − | <label for="q_23" class="check"><div class="labelname content" style="color:#222 !important">Agricultural approach</div></label>
| |
| − | </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>
| |
| − | <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 style="display: none" class="answer" id="a_21">Did you discuss your idea with a medical professional? We are sure this expertise
| |
| − | would be valuable to choose the right experimental settings.</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 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>
| |
| − | <div class="content" style="padding: 0px 20px 0px 20px">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>
| |
| − | <div class="t-container input-form content" style="position: relative; top: 20px;">
| |
| − | <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>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>
| |
| − | <h2 style="text-align: center !important; color:#6698BE !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important ">Plasmid</h2>
| |
| − | <div class="row" style="padding: 0px 20px 0px 20px;">
| |
| − | <div class="col-lg-4 col-md-4 col-xs-12">
| |
| − | <h3>Resistance & Ori </h3>
| |
| − | <input name="input_origin" value="origin" type="hidden">
| |
| − | <select required id="input_origin_select" style="width: 100%;">
| |
| − | <option value="" disabled selected>Select</option>
| |
| − | </select>
| |
| − | </div>
| |
| − | <div class="col-lg-4 col-md-4 col-xs-12">
| |
| − | <h3>RBS + geneIII</h3>
| |
| − | <input name="input_rbs" value="rbs" type="hidden">
| |
| − | <select required id="input_rbs_select" style="width: 100%;">
| |
| − | <option value="" disabled selected>Select</option>
| |
| − |
| |
| − | </select>
| |
| − |
| |
| − | </div>
| |
| − | <div class="col-lg-4 col-md-4 col-xs-12">
| |
| − | <h3>RBS + Reporter</h3>
| |
| − | <input name="input_marker" value="marker" type="hidden">
| |
| − | <select required id="input_marker_select" style="width: 100%;">
| |
| − | <option value="" disabled selected>Select</option>
| |
| − |
| |
| − | </select>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <h2 style="text-align: center !important; color: #ffd200!important;font-weight: 400 !important ">Activator & Promoter</h2>
| |
| − | <div class="content" style="position: relative;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>
| |
| − | <div class="row" style="padding: 0px 20px 0px 20px;margin: 0px !important;">
| |
| − | <div class="col-lg-12 col-md-12 col-xs-12">
| |
| − | <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;">
| |
| − | <option value="" disabled selected>Select</option>
| |
| − | </select>
| |
| − |
| |
| − | <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[]"
| |
| − | multiple/>
| |
| − |
| |
| − | <br/>
| |
| − | <input name="" id="input_overlaps_promotor_upload" value="true" type="checkbox" border="0">
| |
| − | <span>Overlaps are included</span>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div id="input_promotor_paste" style="visibility:visible;display:none">
| |
| − | <textarea name="" id="input_promotor_paste_text" class="input_textarea"></textarea>
| |
| − | <br/>
| |
| − | <br/>
| |
| − | <input name="" id="input_overlaps_promotor_paste" value="true" type="checkbox" border="0" style="margin-left: 5px;">
| |
| − | <span> Overlaps are included</span>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <h2 style="text-align: center !important; 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="row" style="padding: 0px 20px 0px 20px">
| |
| − | <div class="col-lg-12 col-md-12 col-xs-12">
| |
| − | <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;">
| |
| − | <option value="" disabled selected>Select</option>
| |
| − | </select>
| |
| − | </div>
| |
| − | <div class="col-lg-12 col-md-12 col-xs-12">
| |
| − | <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[]"
| |
| − | multiple/>
| |
| − | <br/>
| |
| − | <input name="" id="input_overlaps_additional_upload" value="true" type="checkbox" border="0">
| |
| − | <span>Overlaps are included</span>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-lg-12 col-md-12 col-xs-12">
| |
| − | <div id="input_additional_paste" style="visibility:visible;display:none;padding-bottom:20px;">
| |
| − | <textarea name="" id="input_additional_paste_text" class="input_textarea"></textarea>
| |
| − | <br/>
| |
| − | <br/>
| |
| − | <input name="" id="input_overlaps_additional_paste" value="true" type="checkbox" border="0" style="margin-left: 5px;">
| |
| − | <span> Overlaps are included</span>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-lg-12 col-md-12 col-xs-12">
| |
| − | <div class="getPlasmidButton" onclick="submit_p1()">Create Plasmid</div>
| |
| − | <div class="row" style="display:none" id="results_area" style="min-height:600px !important">
| |
| − | <div class="col-lg-6 col-md-6 col-xs-12" style="padding: 20px;">
| |
| − | <h4>Instructions</h4>
| |
| − | <div id="instructions" style="text-align:justify">
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-lg-6 col-md-6 col-xs-12" id="plasmid_container">
| |
| − | </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 class="content" style="padding: 10px 20px 10px 20px !important">
| |
| − | PACE and PREDCEL require well chosen conditions to yield the best results. Use our <a href="https://2017.igem.org/Team:Heidelberg/Model/Tools">Interactive Webtools</a> to calculate parameters like <a href="https://2017.igem.org/Team:Heidelberg/Model/Glucose">Glucose Concentration, <a href="https://2017.igem.org/Team:Heidelberg/Model/Arabinose">Arabinose Concentration</a> and <a href="https://2017.igem.org/Team:Heidelberg/Model/Medium">Medium Concumption</a> online, or obtain <a href="https://2017.igem.org/Team:Heidelberg/Model/Phage_Titer">our phage titer Model</a> and use it to reduce the risk of washout.
| |
| − | <br>
| |
| − | When trying new conditions for a PACE experiment <a href="https://2017.igem.org/Team:Heidelberg/Model/Contamination">check if the setup is vulnerable to contaminations</a> To make monitoring the experiment by sequencing less expensive and to save you time, we provide a <a href="https://2017.igem.org/Team:Heidelberg/Model/Mutation">tool that calculates the number of sequences</a> that needs to be sequenced to find mutations with a certain probability.
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </form>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | //init
| |
| − | $(function () {
| |
| − | var promotorChoice = $("#input_promotor_select")
| |
| − | .change(function () {
| |
| − | if ($(this).val() == 'upload') {
| |
| − | //show upload interface
| |
| − | $('#input_promotor_upload').slideDown();
| |
| − | $('#input_promotor_paste').slideUp();
| |
| − | } else if ($(this).val() == 'paste') {
| |
| − | //show text field to paste sequence
| |
| − | $('#input_promotor_upload').slideUp();
| |
| − | $('#input_promotor_paste').slideDown();
| |
| − | } else {
| |
| − | //hide again
| |
| − | $('#input_promotor_paste').slideUp();
| |
| − | $('#input_promotor_upload').slideUp();
| |
| − | }
| |
| − | })
| |
| − |
| |
| − | var additionalChoice = $("#input_additional_select")
| |
| − | .change(function () {
| |
| − | if ($(this).val() == 'upload') {
| |
| − | //show upload interface
| |
| − | $('#input_additional_upload').slideDown();
| |
| − | $('#input_additional_paste').slideUp();
| |
| − | } else if ($(this).val() == 'paste') {
| |
| − | //show text field to paste sequence
| |
| − | $('#input_additional_upload').slideUp();
| |
| − | $('#input_additional_paste').slideDown();
| |
| − | } else {
| |
| − | //hide again
| |
| − | $('#input_additional_paste').slideUp();
| |
| − | $('#input_additional_upload').slideUp();
| |
| − | }
| |
| − | })
| |
| − | });
| |
| − | </script>
| |
| − | <script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | $('.questionnaire input').length;
| |
| − |
| |
| − |
| |
| − | for(var i=0;i<$('.questionnaire input').length; i++) {
| |
| − | $('.questionnaire input')[i].addEventListener('click', function() {
| |
| − | console.log($(this));
| |
| − | console.log(i);
| |
| − | var clicked = $(this).attr('id');
| |
| − | console.log(clicked);
| |
| − | var correspond_answer = 'a'+clicked.substring(1, clicked.length);
| |
| − | var output = $('.questionnaire_ouput')[clicked.charAt(2)-1];
| |
| − |
| |
| − | $(output).html(document.getElementById(correspond_answer).innerHTML);
| |
| − |
| |
| − |
| |
| − |
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script src="https://2017.igem.org/Template:Heidelberg/toolbox_generator/JS?action=raw&ctype=text/javascript"></script>
| |
| − | </html>
| |
| − |
| |
| − |
| |
| − | {{Heidelberg/footer}}
| |
