Difference between revisions of "Team:Heidelberg/Toolbox"

Line 92: Line 92:
 
                                                         font-family: monospace;
 
                                                         font-family: monospace;
 
                                                     }
 
                                                     }
 +
</style>
 +
<style>
 +
 +
.radio-container{
 +
 
 +
  background-color: #222;
 +
  padding: 20px;
 +
    margin-top: 30px;
 +
    border-radius: 5px;
 +
}
 +
 +
.radio-container > h2 {
 +
color: white !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: #FFFFFF;
 +
}
 +
 +
.radio-container .check{
 +
   
 +
  border: 5px solid #AAAAAA;
 +
  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 #FFFFFF;
 +
}
 +
 +
.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>
 
<div style="padding-top: 100px; background-color: #222;">
 
<div style="padding-top: 100px; background-color: #222;">
Line 108: Line 185:
 
                                         </div>
 
                                         </div>
 
                                         <div class="t-container input-form">
 
                                         <div class="t-container input-form">
−
                                             <div class="t-col t-col_12 content">
+
                                             <div class="t-col t-col_12 questionnaire">
−
                                               Put explaination here
+
                                               <h2 style="text-align: center; color:#222 !important; font-weight: 400 !important">Are you ready to PREDCEL?</h2>
 +
                                               
 +
                                                <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>First question</h2>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_11" name="selector">
 +
                                                    <label for="q_11" class="check"></label><div class="content" style="color: white !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>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_12" name="selector">
 +
                                                    <label for="q_12" class="check"></label><div class="content" style="color: white !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>
 +
                                                  <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: white !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>
 +
                                                <div class="col-lg-12 col-md-12 col-xs-12 content answers" style="color: #393939 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;border-radius: 5px;"></div>
 +
 
 +
 
 +
                                                </div>
 +
                                                <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>
 +
                                                <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_21" name="selector">
 +
                                                    <label for="q_21" class="check"> <div class="labelname content" style="color:white !important">1</div></label>
 +
                                                </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_22" name="selector">
 +
                                                    <label for="q_22" class="check"><div class="labelname content" style="color:white !important">2</div></label>
 +
 
 +
                                                    </div>
 +
                                                  <div class="col-lg-4 col-md-4 col-xs-12">
 +
                                                    <input type="radio" id="q_23" name="selector">
 +
                                                    <label for="q_23" class="check"><div class="labelname content" style="color:white !important">3</div></label>
 +
                                                </div>
 +
 
 +
                                                    <div class="col-lg-12 col-md-12 col-xs-12 content answers" style="color: #393939 !important;padding-top: 50px;padding-bottom: 50px; background-color: white !important;border-radius: 5px;"></div>
 +
                                                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div>
 +
         
 +
 
 +
       
 +
   
 +
</div>
 +
                                               
 +
                                                </div>
 
                                             </div>
 
                                             </div>
 
                                         </div>
 
                                         </div>
Line 269: Line 420:
 
                                     });
 
                                     });
 
                                 </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;
 +
                        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');
 +
                                var dict_key = clicked.substring(0,clicked.length-1);
 +
                                var dict_number = clicked.charAt(clicked.length-1);
 
                                  
 
                                  
 +
                                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]);
 +
                            });
 +
                        }
 +
                 
 +
                       
 +
                        </script>
  
 
                                  
 
                                  

Revision as of 08:34, 30 October 2017

Welcome to our
Toolbox Guide!

Text on our Toolbox

Are you ready to PREDCEL?

First question

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

Second question

Plasmid

Resistance & Ori

RBS + geneIII

RBS + Reporter

Activator & Promoter

Choose on of our sequences or upload your own

Additional sequence

Choose on of our sequences or upload your own
Create Plasmid