View source for Team:Heidelberg/Toolbox

{{Heidelberg/header}} {{Heidelberg/navbar}} {{#tag: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;
        text-align:left;
    }
</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 when choosing your target protein and preparing your experiments. 
                                                Maybe you also want to have a look at our <a href="https://2017.igem.org/Team:Heidelberg/Description">different projects</a>
                                                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 application will your evolved protein be used for?</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">Agriculture</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 discuss your idea with a chemist? This expertise could be helpful to figure out how to set up the evolution efficiently, as parameters such as passive diffusion of the chemical through the E. coli cell wall, toxicity and many others needs to be carefully considered.</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">Please, check your protein sequence for any “sleeping” hazardous potential in 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 <a href="https://2017.igem.org/Team:Heidelberg/Software/SafetyNet">SafetyNet</a></div>
                                            <div style="display: none" class="answer" id="a_42">Check our<a href="https://2017.igem.org/Team:Heidelberg/Safety">safety page</a> for general advice and get in touch with your safety representative for detailed discussion of the particular work you plan.</a>
                                            </div>
                                            <div style="display: none" class="answer" id="a_43">Before starting any phage work, please consult our <a href="https://2017.igem.org/Team:Heidelberg/Safety">safety page</a>. Also, we advise you to talk to your colleagues next door with experience in phage work as well as your local safety representative.
                                                </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 starting conditions for your experiment.</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 by enabling in silico optimization of experimental conditions.</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
                                                <a href="https://2017.igem.org/Team:Heidelberg/Interviews#Kaufmann">expert interview with Dr. Kaufmann</a>
                                            </div>
                                            <div style="display: none" class="answer" id="a_62">You should reach out and listen to the feedback, hopes and concerns of your local community. Thereby, you can facilitate a positive, beneficial impact of your research project.</div>
                                            <div style="display: none" class="answer" id="a_63">Are you sure? We encourage you to do so and be surprised, how enriching it is to discuss your research plans with people inside and outside the research community. Also consider, that your research may very well impact the people around you and hence, they should have a word and vote in what our technologies are used for. Finally, showing that you are a responsible scientists caring about the consequences of your research will surely have a positive impact on your reputation.</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 iGEM spirit of responsible science to your friends and colleagues.</div>
                                            <div style="display: none" class="answer" id="a_72">Take your time to reflect on possible consequences to prevent unintended dangers. This is an essential step to be taken before starting directed evolution experiments.</div>
                                            <div style="display: none" class="answer" id="a_73">Are you sure? We encourage you to talk to experts and your local community. You will be surprised how much they will appreciate your offer to discuss the consequences of your research BEFORE implementing it in the lab. Also, consider the positive impact for yourself: Showing that you are a responsible scientists caring about the consequences of your research will surely have a positive impact on your reputation.</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 this technology responsibly for addressing urgent human needs.</div>
                                        </div>



                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="t-container" style="position: relative; top: 20px; background-color: #222 !important">

            <div style="padding: 20px;">
                <img src="https://static.igem.org/mediawiki/2017/4/49/T--Heidelberg--2017_Graphical_Abstract_Toolbox_Guide.jpg" style="width: 100%; height: auto;">
            </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 class="content col-md-12 col-lg-12" style="padding-top: 10px">With the
                <a href="https://2017.igem.org/wiki/index.php?title=Team:Heidelberg/Software">AiGEM</a> (Artificial Intelligence for Genetic Evolution Mimicking) software suite we provide powerful software
                tools for
                <i>in silico</i> evolution. Applying our genetic algorithm,
                <a href="https://2017.igem.org/wiki/index.php?title=Team:Heidelberg/Software/GAIA">GAIA</a>, we
                <a href="https://2017.igem.org/wiki/index.php?title=Team:Heidelberg/Validation#gusgal">fully in silico evolved a \(\beta\)-glucuronidase towards \(\beta\)-galactosidase function</a> and
                <a href="https://2017.igem.org/wiki/index.php?title=Team:Heidelberg/Validation#lac">derived \(\beta\)-lactamase variants exceeding wildtype activity</a>.
                <br> We thus strongly recommend the application of GAIA prior to
                <i>in vivo</i> evolution. Through optimization of the starting sequence and the acompanying reduction of the
                required library size the time until phage pool convergence can be tremendously reduced.
                <br> GAIA is written in python and readily available on our
                <a href="https://github.com/igemsoftware2017/AiGEM_TeamHeidelberg2017/blob/master/GAIA/GAIA_README.md">github repo</a>.</div>


        </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 class="col-md-12 col-lg12 col-xs-12">
                Phage-assisted continous evolution is based on the generation of selection phages, which have geneIII replaced by the gene
                of interest. For the generation of your own selection phage, we are offering a golden-gate cloning standard
                being based on the extraordinary potential of the type IIs restriction enzyme BsaI. For insertion of your
                gene of interest into the phage backbone, amplification with primers containing the following overhangs is
                required: {{Heidelberg/formblank|Overhangs|#ffd700| {{#tag:html|
                <table class="table">
                    <thead>
                        <tr class="table-row">
                            <th>Fwd:</th>
                            <th>GAGGTCTCGAAAA</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Rev:</td>
                            <td>CAGGTCTCGGTGC</td>
                        </tr>
                    </tbody>
                </table>
                }} |}} Following the successfully performed amplification with these primers, a golden gate reaction (refering to the golden
                gate assembly protocol) with the BioBricks BBa_K2398021 and BBa_K2398022 should be performed. GoldenGate
                cloning usually delivers good results. In the following of this reaction, the assembled plasmid should be
                transformed into electrocompetent S1059 or S2208 cells. These strains, established by the liu lab, carry
                a plasmid (pJC175e) that provides geneIII under a psp-promoter. This promoter gets activated by phage infection,
                and ensures that geneIII is not present in the uninfected cell. For further information about the principle
                of phage propagation, have a look at our RFC (hier Link einfügen) As an alternative to the assembly with
                two phage backbone fragments, the golden gate assembly reaction can be also performed using only the BBa_K2398023
                BioBrick. In this case, amplification of the gene of interest has to be implemented with other overhangs:
                {{Heidelberg/formblank|Overhangs|#ffd700| {{#tag:html|
                <table class="table">
                    <thead>
                        <tr class="table-row">
                            <th>Fwd:</th>
                            <th>GTGGTCTCAATGG</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Rev:</td>
                            <td>TTGGTCTCAGTTG</td>
                        </tr>
                    </tbody>
                </table>
                }} |}} If you want to produce your selection phage on your own by using another cloning method, please keep in mind that
                the terminator of geneVIII may be immediately followed by the RBS of the evolving gene. Futhermore, the last
                180 bp of geneIII should not be removed, because they contain the promoter for the following operon of phage
                genes. In that case, we provide the surrunding sequences of the gene of interest below: {{Heidelberg/formblank|Additional
                Sequences|#ffd700| {{#tag:html|
                <table class="table">
                    <thead>
                        <tr class="table-row">
                            <th>Upstream sequence</th>
                            <th>AAAGGCTCCTTTTGGAGCCTTTTTTTT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Downstream sequence</td>
                            <td>CTCCCTCAATCGGTTGAATGTCGCCCTTTTGTCTTT</td>
                        </tr>
                    </tbody>
                </table>
                }} |}}
            </div>
        </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>

            {{#tag:html| {{Heidelberg/overviewpanel|#ffd700| {{#tag:html|
            <div class="col-md-12">
                For any method of directed evolution to culminate in an improved protein, a means of applying selective pressure is needed.
                Thus, adding components capable of enforcing selection in PACE and PREDCEL is one of the most crucial steps
                in construct design. For directed evolution experiments selective pressure may need to be fine-tuned by using
                different ORIs, promoters, ribosome binding sites and backbones. In this section of the toolbox guide, all
                those components will be set up for you to suit your particular project. To get an idea of how selection
                could be enforced in your projects, take a look at our examples:
            </div>}} {{Heidelberg/panelelementnoimg|MAWS 2.0 -
            <i>in silico</i> riboswitch design for selective pressure.|https://2017.igem.org/Team:Heidelberg/Software/MAWS| A
            simple and sure-fire way to couple gene expression to a product of enzyme catalysis is to introduce a riboswitch
            for that particular product. This is a short RNA sequence either trapping or releasing the ribosome binding site
            in the presence of a small molecule. Back in 2015 the Heidelberg iGEM Team developed a software suite (MAWS -
            making aptamers without SELEX) to predict such riboswitches for arbitrary small molecule targets. This year we
            use and provide new-and-improved distribution of MAWS. We predict and validate synthetic riboswitches generated
            using MAWS 2.0 to couple gene expression to enzyme activity. This establishes riboswitches predicted {{Heidelberg/templateus/Italic|in
            silico}} as a valuable component of any directed evolution project seeking to evolve novel biocatalytic properties.
            |MAWS 2.0|width=6}} {{Heidelberg/panelelementnoimg|OptoSELECT - Light-dependent selective pressure|https://2017.igem.org/Team:Heidelberg/Optogenetics|
            The generation of proteins with radically altered or highly specific new activities is a major goal in the field
            of directed evolution. Modulation of selection stringency is indispensable for the optimization of proteins,
            which in their native form exhibit a lack of activity for the required action. To further extend the possibilities
            of PACE/PREDCEL based protein optimization and to evolve novel activities without the use of intermediate evolutionary
            steps, we provide an optogenetic modulator of selection stringency. The variation of stringency is based on the
            blue light-dependent transcription factor EL222 and a bidirectional promoter system that can induce or repress
            the expression of geneIII upon blue light irradiation in a non-toxic, rapidly delivered, and reversible manner.
            |OptoSELECT|width=6}} }} }} {{Heidelberg/formblank|Accessory Plasmid Generator|#ffd700|{{#tag:html|
            <h3 style="text-align: center !important; color:#6698BE !important; font-weight: 400 !important;padding: 0px !important; margin: 0px !important ">Plasmid</h3>
            <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>
            <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>
                    <input name="input_origin" value="origin" type="hidden">
                    <select required id="input_origin_select" style="width: 100%;" class="styled-select">
                        <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%;" class="styled-select">
                        <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%;" class="styled-select">
                        <option value="" disabled selected>Select</option>

                    </select>
                </div>
            </div>
            }} |}} {{Heidelberg/formblank|Activator &amp; Promoter|#ffd700| {{#tag:html|
            <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>
            <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;"
                        class="styled-select">
                        <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>
            }} |}} {{Heidelberg/formblank|Additional sequence|#ffd700| {{#tag:html|
            <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;"
                        class="styled-select">
                        <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>
            }} |}} {{Heidelberg/formfullcolor|Deploy the Plasmid|#F8991D| {{#tag:html|
            <div class="row">
                <div class="col-lg-12 col-md-12 col-xs-12">
                    Deploy your designed Plasmid and remember to PACE or PREDCEL responsibly...
                    <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 class="content col-md-12 col-lg-12 col-xs-12">After the generation of your AP and your SP, we will focus on the third plasmid, playing a highly important role
                in both PACE and PREDCEL. The mutagenesis plasmid is responsible for the library preparation of the different
                selection phage variants. If you have transformed your AP into a bacterial strain, suitable to be used in
                PACE or PREDCEL, one of three possible mutagenesis plasmids
                <a href="https://www.addgene.org/69627/">MP1</a>,
                <a href="https://www.addgene.org/69652/">MP4</a> and
                <a href="https://www.addgene.org/69669/">MP6</a> should be transformed into the strain as well. Those MPs are differing in their mutation rate. For
                further information on the MP´s funcitonality please have a look at the literature
                <x-ref>badran2015development</x-ref>. For the induction of the mutagenesis, arabinose should be added into the culture,
                activating the pBAD promotor and thereby the mutagenesis. For all PREDCEL experiments a concentration of
                \(100\,mM\) arabinose is used, while \(2\,mL/h\) of \(10\%\;w/v\) arabinose solution are added in a \(100\,mL\)
                lagoon in PACE.
            </div>
        </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>,
                    <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>
    // register handlers:
    $("#linktomaws").on("click", function () {
        top.location.href = "https://2017.igem.org/Team:Heidelberg/Software/MAWS";
    });
    $("#linktoopto").on("click", function () {
        top.location.href = "https://2017.igem.org/Team:Heidelberg/Optogenetics";
    });
</script>
<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>
}} {{Heidelberg/footer}}