Difference between revisions of "Team:Imperial College/Experiments"

(Prototype team page)
 
Line 1: Line 1:
−
{{Imperial_College}}
+
{{:Team:Imperial_College/Templates/NavBar}}
 +
 
 +
 
 
<html>
 
<html>
 +
<head>
 +
<style>
  
−
<div class="column full_size">
+
#expt1, #expt2, #expt3, #expt4, #expt5, #expt6 #expt7 {
 +
    width:100%;
 +
    height:5px;
  
−
<h1>Experiments</h1>
+
}
−
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
  
−
<p>
+
.contents ul{
−
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.  
+
    width:40%;
−
</p>
+
    margin-top:5%;
 +
    float:left;
 +
    box-sizing: border-box;
 +
    margin-left:6.666%;
 +
    list-style-type: none;
 +
    background:none;
 +
}
  
−
</div>
+
.contents ul li{
 +
    width: 100%;
 +
    margin-bottom:5%;
 +
    cursor: pointer;
 +
    border-radius:20px;
 +
    background:none;
 +
    transition: border 0.3s ease;
 +
    box-sizing:border-box;
 +
}
  
 +
.contents ul li a{
 +
    padding-top: 5px;
 +
    padding-bottom: 0px;
 +
    margin-top: 10px;
 +
    margin-left: 0px;
 +
    text-decoration: none;
 +
    font-size: 30px;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color: #374785;
 +
    border:none;
 +
    background:none;
 +
 
 +
}
  
 +
.contents ul li a:hover{
 +
    font-weight:bold;
 +
}
  
−
<div class="column two_thirds_size">
 
−
<h3>What should this page contain?</h3>
 
−
<ul>
 
−
<li> Protocols </li>
 
−
<li> Experiments </li>
 
−
<li> Documentation of the development of your project </li>
 
−
</ul>
 
  
−
</div>
 
  
−
<div class="column third_size">
+
.allButton {
−
<div class="highlight decoration_A_full">
+
    font-size: 30px;
−
<h3>Inspiration</h3>
+
    color: #374785;
−
<ul>
+
    font-family: "Varela Round", sans-serif;
−
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
    font-weight:normal;
−
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
    background-color:none;
−
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
   
−
</ul>
+
}
−
</div>
+
−
</div>
+
  
 +
.open{
 +
    float:right;
 +
    width:auto;
 +
    box-sizing: border-box;
 +
    margin-top:20px;
 +
    margin-right:10%;
 +
    font-size:30px;
 +
    font-family:"Varela Round", sans-serif;
 +
    color:#374785;
 +
}
  
−
<div class="clear"></div>
+
.expandButton:hover {
 +
    cursor:pointer;
 +
    background-color:red;
 +
    color:#F76C6C;
 +
}
  
  
 +
.accordion {
 +
    float: left;
 +
    padding-top: 5px;
 +
    margin-bottom:5px;
 +
    margin-left:10%;
 +
    cursor: pointer;
 +
    text-align:left;
 +
    margin-left:20%;
 +
    border:none;
 +
    transition: border-bottom 0.1s linear;
 +
    font-size: 25px;
 +
    font-weight:bold;
 +
    line-height: 50px;
 +
    font-family:"Varela Round", sans-serif;
 +
    color:#374785;
 +
}
  
  
 +
.accordion:hover {
 +
    border-bottom: solid #F8E9A1 3px;
 +
}
 +
 +
 +
.panel {
 +
    width: 70%;
 +
    margin-left:23%;
 +
    margin-bottom:5px;
 +
    float:left;
 +
    border:none;
 +
    max-height: 0px;
 +
    transition: max-height 0.3s linear;
 +
    overflow:hidden;
 +
}
 +
 +
 +
 +
.description {
 +
    margin-bottom:5px;
 +
    width: 70%;
 +
    margin-left:23%;
 +
    float:left;
 +
    border:none;
 +
    max-height: auto;
 +
}
 +
 +
.colorChange{
 +
    transition: color 0.5s ease;
 +
}
 +
 +
.slowRotate{
 +
    transition: transform 0.3s linear;
 +
}
 +
 +
.highlight{
 +
    color:#374785;
 +
    font-weight:bold;
 +
    text-decoration:none;
 +
}
 +
 +
.figure{
 +
    width: 30%;
 +
    margin-top:5px;
 +
    margin-left:35%;
 +
    box-sizing: border-box;
 +
}
 +
 +
</style>
 +
 +
</head>
 +
 +
<body>
 +
<div class="container">         
 +
        <div class="content">
 +
 +
            <div class="titleimg">
 +
                    <h1>Experiments</h1>
 +
                    <br/>
 +
                    <br/>
 +
            <img src="https://static.igem.org/mediawiki/2018/7/71/T--Imperial_College--experiment.png" alt="" width="28%"; >
 +
            </div>
 +
 +
                <h3>Contents</h3>
 +
       
 +
            <div class="contents">
 +
                <ul>
 +
                    <li><a href="#expt1">1-State Construct Assembly</a></li>
 +
                    <li><a href="#expt2">In-solution Electrode Testing</a></li>
 +
                    <li><a href="#expt3">On-agar Electrode Testing</a></li>
 +
                    <li><a href="#expt4">1-State Expression In-solution</a></li>
 +
                </ul>
 +
                <ul style="margin-bottom:300px;">
 +
                    <li><a href="#expt5">1-State Expression On-agar</a></li>
 +
                    <li><a href="#expt6">2-State Construct Assembly</a></li>
 +
                    <li><a href="#expt7">2-State Expression In-solution</a></li>
 +
                    <li><a href="#expt7">2-State Expression On-agar</a></li>
 +
                </ul>
 +
            </div>
 +
 +
               
 +
 +
                <h3>Experiments</h3>
 +
 +
         
 +
                <!--Start Experiment 1-->
 +
                <div id="expt1"></div>
 +
                <h4 > 1-State Construct Assembly</h4>
 +
                <div onclick="openAll('expt1p');" class="expandButton">
 +
                        <p class="open expt1p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt1p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
     
 +
                <div class="clr"></div>
 +
   
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt1p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt1p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt1p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
       
 +
                <!--Start Experiment 2-->
 +
                <div id="expt2">
 +
                <h4> In-solution Electrode Testing</h4>
 +
                <div onclick="openAll('expt2p');" class="expandButton">
 +
                    <p class="open expt2p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt2p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
                </div>
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt2p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt2p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                  <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt2p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
         
 +
   
 +
         
 +
                <!--Start Experiment 3-->
 +
                <div id="expt3"></div>
 +
                <h4 > On-agar Electrode Testing</h4>
 +
                <div onclick="openAll('expt3p');" class="expandButton">
 +
                    <p class="open expt3p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt3p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt3p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt3p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt3p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
 +
 +
                <!--Start Experiment 4-->
 +
                <div id="expt4"></div>
 +
                <h4 > 1-State Expression In-solution</h4>
 +
                <div onclick="openAll('expt4p');" class="expandButton">
 +
                    <p class="open expt4p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt4p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt4p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt4p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt4p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
 +
                <!--Start Experiment 5-->
 +
                <div id="expt5"></div>
 +
                <h4> 1-State Expression On-Agar</h4>
 +
                <div onclick="openAll('expt5p');" class="expandButton">
 +
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt5p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt5p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt5p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
           
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt5p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
           
 +
 +
                <!--Start Experiment 6-->
 +
                <div id="expt6"></div>
 +
                <h4 > 2-State Construct Assembly</h4>
 +
                <div onclick="openAll('expt6p');" class="expandButton">
 +
                    <p class="open expt5p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt6p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt6p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt6p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt6p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
               
 +
 +
                <!--Start Experiment 7-->
 +
                <div id="expt7"></div>
 +
                <h4 > 2-State Expression In-solution</h4>
 +
                <div onclick="openAll('expt7p');" class="expandButton">
 +
                    <p class="open expt7p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt7p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt7p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt7p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
               
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt7p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
 +
 +
 +
                <!--Start Experiment 8-->
 +
                <div id="expt8"></div>
 +
                <h4 > 2-State Expression On-agar</h4>
 +
                <div onclick="openAll('expt8p');" class="expandButton">
 +
                    <p class="open expt8p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
 +
                    <div class="open" style="margin-right:5px;">
 +
                        <i  class="fas fa-arrow-circle-down expt8p slowRotate"></i>
 +
                    </div>
 +
                </div>
 +
               
 +
                <div class="clr"></div>
 +
               
 +
                <div type="button" class="accordion"> Description </div>
 +
                <div class="description">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
           
 +
                <div type="button" class="accordion">Relevance</div>
 +
                <div class="panel expt8p">
 +
                    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
 +
                <div type="button" class="accordion">Brief Method</div>
 +
                <div class="panel expt8p">
 +
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
 +
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                        <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>               
 +
                </div>
 +
               
 +
             
 +
                   
 +
                <div type="button" class="accordion" >Summary</div>
 +
                <div class="panel expt8p">
 +
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
 +
                </div>
 +
                <div class="clr"></div>
 +
            <!--End Experiment-->
 +
   
 +
 +
                    <script>
 +
                        var acc = document.getElementsByClassName("accordion");
 +
                        var i;
 +
                        console.log(acc)
 +
                        for (i = 0; i < acc.length ; i++) {
 +
                            acc[i].addEventListener("click", function() {
 +
                                this.classList.toggle("active");
 +
                                var panell = this.nextElementSibling;
 +
                                if (panell.style.maxHeight) {
 +
                                    panell.style.maxHeight = null;
 +
                                } else {
 +
                                    panell.style.maxHeight = (panell.scrollHeight + "px"); 
 +
                                }
 +
                            });
 +
                        }
 +
               
 +
 +
               
 +
                        function openAll(expt) {
 +
                            console.log("click active")
 +
                            var i, panelList;
 +
                            panelList = document.getElementsByClassName(expt);
 +
                            console.log(panelList)
 +
                           
 +
                           
 +
                            for (i = 2; i < panelList.length; i++) {
 +
                                if (panelList[i].style.maxHeight == 0) {
 +
                                    console.log(panelList[i].style.maxHeight)
 +
                                    panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
 +
                                    console.log("open")
 +
                                    panelList[0].style.color = "#F76C6C";
 +
                                    panelList[1].style.color = "#F76C6C";
 +
                                    panelList[1].style.transform = "rotate(180deg)"
 +
               
 +
                                } else {
 +
                                    console.log(panelList[i].style.maxHeight)
 +
                                    panelList[i].style.maxHeight = null ;
 +
                                    console.log("close");
 +
                                    panelList[0].style.color = "#374785";
 +
                                    panelList[1].style.color = "#374785";
 +
                                    panelList[1].style.transform = "rotate(0deg)";
 +
                                }
 +
                            }
 +
                           
 +
                        } 
 +
                   
 +
                    </script>
 +
 +
 +
 
 +
        </div>
 +
    </div>
 +
   
 +
</body>
 
</html>
 
</html>
 +
 +
 +
{{:Team:Imperial_College/Templates/Footer}}

Revision as of 21:00, 1 October 2018


Experiments



Contents

Experiments

1-State Construct Assembly

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

In-solution Electrode Testing

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

On-agar Electrode Testing

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

1-State Expression In-solution

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

1-State Expression On-Agar

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

2-State Construct Assembly

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

2-State Expression In-solution

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

2-State Expression On-agar

Access All

Description

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Relevance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Brief Method

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Competant cell protocol Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Lorem ipsum dolor, sit amet Heatshock protocol consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.

Summary

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.