Difference between revisions of "Team:Kent/Engagement"

 
(16 intermediate revisions by the same user not shown)
Line 38: Line 38:
 
font-family: 'KentExo2';
 
font-family: 'KentExo2';
 
         }
 
         }
 +
 +
        #navbox{
 +
width:100%;
 +
text-align:center;
 +
margin-left:-580px;
 +
}
 +
 +
       
  
 
         #navdiv{
 
         #navdiv{
 
         color: #FFFFFF;
 
         color: #FFFFFF;
−
         left:0px;
+
         display:inline-block;
−
        padding: 30px;
+
−
        text-align: center;
+
 
         font-family:KentExo2;
 
         font-family:KentExo2;
 
         position:fixed;
 
         position:fixed;
−
        top:10px;
 
 
         z-index:100;
 
         z-index:100;
 +
 
         }
 
         }
  
Line 60: Line 66:
  
 
         #navdiv ul{
 
         #navdiv ul{
 +
display:inline-block;
 
background: transparent;
 
background: transparent;
−
        text-align: center;
 
 
         list-style: none;
 
         list-style: none;
−
        padding: 0;
+
margin:0;
−
        margin: 0;
+
padding:0;   }
−
        display: block;
+
−
                }
+
  
 
         #navdiv ul a{
 
         #navdiv ul a{
Line 74: Line 78:
 
         }
 
         }
 
         #navdiv ul li{
 
         #navdiv ul li{
−
margin-top: 30px;
+
padding:0;
 
         float: left;
 
         float: left;
 
         width: 169px;
 
         width: 169px;
Line 84: Line 88:
 
         color:#D0FEDC;
 
         color:#D0FEDC;
 
         cursor: pointer;
 
         cursor: pointer;
−
         opacity:0.8;
+
background: #455057;
−
border-radius: 10px;
+
         opacity:0.6;
 +
border-radius: 20px;
 
         }
 
         }
  
 
  #navdiv ul #teamLogo{
 
  #navdiv ul #teamLogo{
−
margin-top:-10px;
+
float: left;
−
margin-left: 20px;
+
−
margin-right: 20px;
+
−
        float: left;
+
 
         width: 150px;
 
         width: 150px;
 
         height: 120px;
 
         height: 120px;
 
         position: relative;
 
         position: relative;
−
         opacity:0.8;
+
         opacity:0.6;
 +
margin-top:-30px;
 +
border-radius:30px;
 
         }
 
         }
  
Line 109: Line 113:
 
#navdiv ul #teamLogo:hover{
 
#navdiv ul #teamLogo:hover{
 
border-radius:10px;
 
border-radius:10px;
−
         background: #455057;
+
         background: #d37293;
 
         transition:all 0.3s;
 
         transition:all 0.3s;
 
         opacity:0.8;
 
         opacity:0.8;
Line 139: Line 143:
 
         }
 
         }
 
#navdiv ul.drop-menu li ul{
 
#navdiv ul.drop-menu li ul{
−
         border-radius: 10px;
+
         border-radius: 20px;
 
         }
 
         }
 
        
 
        
Line 155: Line 159:
 
         text-align: center;
 
         text-align: center;
 
         }
 
         }
 +
  
 
#title{
 
#title{
 
margin-top:170px;
 
margin-top:170px;
 +
text-align:center;
 +
margin-bottom:150px;
 
}
 
}
  
−
         #title #header1{
+
       
 +
         #title img{
 
display:inline-block;
 
display:inline-block;
−
        margin-left:8%;
+
         width:300px;
−
margin-right:10%;
+
−
margin-bottom:100px;
+
−
        width:280px;
+
−
        }
+
−
#title #header2{
+
−
display:inline-block;
+
−
        margin-left:10%;
+
−
margin-right:3%;
+
−
margin-bottom:100px;
+
−
         width:250px;
+
 
         }
 
         }
  
Line 178: Line 176:
 
position:absolute:
 
position:absolute:
 
margin-top:500px;
 
margin-top:500px;
 +
margin-left: 100px;
 +
margin-right:100px;
 
display: inline-block;
 
display: inline-block;
 
color:#E61B5F;
 
color:#E61B5F;
 
font-size:50px;
 
font-size:50px;
 
}
 
}
−
 
+
.droptext {
−
        .droptext {
+
 
box-shadow: 0px 0px 0px 5px #E61B5F;
 
box-shadow: 0px 0px 0px 5px #E61B5F;
 
border-radius:10px;
 
border-radius:10px;
Line 297: Line 296:
  
 
}
 
}
 +
#box1{
 +
margin:auto;
 +
width:1200px;
 +
text-align:center;
 +
}
 +
 +
#box2{
 +
margin:auto;
 +
width:1200px;
 +
text-align:center;
 +
 +
 +
}
 +
#textbox1{
 +
display:inline-block;
 +
margin: 40px 0 40px 0;
 +
width:500px;
 +
border-radius:20px;
 +
opacity:0.8;
 +
background: #455057;
 +
border-style: solid;
 +
border-color: #E61B5F;
 +
text-align:center;
 +
}
 +
#textbox3{
 +
display:inline-block;
 +
margin: 40px 0 40px 0;
 +
width:900px;
 +
border-radius:20px;
 +
opacity:0.8;
 +
background: #455057;
 +
border-style: solid;
 +
border-color: #E61B5F;
 +
text-align:center;
 +
}
 +
#textbox4{
 +
display:inline-block;
 +
margin: 40px 0 40px 0;
 +
width:800px;
 +
border-radius:20px;
 +
opacity:0.8;
 +
background: #455057;
 +
border-style: solid;
 +
border-color: #E61B5F;
 +
text-align:center;
 +
}
 +
 +
#textbox2{
 +
display:inline-block;
 +
margin: 40px 0 40px 0;
 +
width:1000px;
 +
border-radius:20px;
 +
 +
opacity:0.8;
 +
background: #455057;
 +
border-style: solid;
 +
border-color: #E61B5F;
 +
text-align:center;
 +
}
 +
 +
 +
#box1 p{
 +
display:inline-block;
 +
width: calc(100% - 40px);
 +
font-size:20px;
 +
color:#E61B5F;
 +
}
 +
#box2 p{
 +
display:inline-block;
 +
width: calc(100% - 40px);
 +
font-size:20px;
 +
color:#E61B5F;
 +
}
 +
 +
 +
.centerizer{
 +
width:100%;
 +
text-align:center;
 +
margin: 50px 0 50px 0;
 +
}
 +
.centerizer span{
 +
color:#f4ccb2;
 +
font-size:50px;
 +
}
 +
 +
.lineSeparator{
 +
display:inline-block;
 +
width:850px;
 +
height:10px;
 +
background:#E61B5F;
 +
border-radius:10px;
 +
}
 +
.SlineSeparator{
 +
display:inline-block;
 +
width:550px;
 +
height:10px;
 +
background:#E61B5F;
 +
border-radius:10px;
 +
}
 +
 +
 +
       
 
         #foot ul{
 
         #foot ul{
 
         display: flex;
 
         display: flex;
Line 365: Line 466:
 
         #foot ul li:nth-child(6) span:before{
 
         #foot ul li:nth-child(6) span:before{
 
         background: #5BBBF7;
 
         background: #5BBBF7;
 +
        }
 +
 +
#ScrollUp img{
 +
width:30px;
 +
}
 +
#ScrollUp {
 +
  display:none;
 +
  position: fixed;
 +
  bottom: 55px;
 +
  right: 10px;
 +
  z-index: 299;
 +
border-style: solid;
 +
    border-color: #F37524;
 +
  outline: none;
 +
opacity:0.8;
 +
  background-color: #455057;
 +
  color: #E61B5F;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 30px;
 +
}
 +
 +
#ScrollUp:hover {
 +
  background-color: #F37524;
 +
}
 +
        #foot ul li span:hover .fa
 +
        {
 +
        color:#25343D;
 +
        transform: rotateY(360deg);
 +
        }
 +
        #foot ul li span:before
 +
        {
 +
        content:'';
 +
        position: absolute;
 +
        top:100%;
 +
        left:0;
 +
        width:100%;
 +
        height:100%;
 +
        background: #1AE195;
 +
        transition: 0.5s;
 
         }
 
         }
  
 
#sponsors{
 
#sponsors{
 +
padding-top:100px;
 +
text-align:center;
 
margin-left:50px;
 
margin-left:50px;
 
}
 
}
 
#sponsors img{
 
#sponsors img{
−
width:150px;
+
width:110px;
 +
 
 +
}
 +
#sponsorstop{
 +
display:inline-block;
 +
padding-right:410px;
 
}
 
}
  
−
#sponsorsdown #snapg img{
+
#sponsorsdown {
−
margin-left:750px;
+
display:inline-block;
 +
padding-left:140px;
 
}
 
}
  
Line 383: Line 532:
  
 
     <body>
 
     <body>
 +
<div id="navbox">
 
         <nav id="navdiv">
 
         <nav id="navdiv">
 
             <ul>
 
             <ul>
Line 389: Line 539:
 
                     <ul class="drop-menu menu-1">
 
                     <ul class="drop-menu menu-1">
 
                         <a href="https://2017.igem.org/Team:Kent/Description"><li>Description</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Description"><li>Description</li></a>
−
<a href="https://2017.igem.org/Team:Kent/Design"><li> Design </li></a>
+
 
 
                       <a href="https://2017.igem.org/Team:Kent/Results"><li>Results</li></a>
 
                       <a href="https://2017.igem.org/Team:Kent/Results"><li>Results</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Model"><li>Modelling</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Model"><li>Modelling</li></a>
−
<a href="https://2017.igem.org/Team:Kent/Demonstrate"><li>Demonstrate</li></a>
 
 
                     </ul>
 
                     </ul>
 
                 <li>
 
                 <li>
Line 399: Line 548:
 
<a href="https://2017.igem.org/Team:Kent/Parts"> <li> Parts </li></a>
 
<a href="https://2017.igem.org/Team:Kent/Parts"> <li> Parts </li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Basic_Part"><li>Basic Parts</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Basic_Part"><li>Basic Parts</li></a>
−
                        <a href="https://2017.igem.org/Team:Kent/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href = "https://2017.igem.org/Team:Kent/Part_Collection"><li> Part Collection </li></a>
 
  
 
                     </ul>
 
                     </ul>
Line 422: Line 569:
 
                     <ul class="drop-menu menu-2">
 
                     <ul class="drop-menu menu-2">
 
                         <a href="https://2017.igem.org/Team:Kent/Safety"><li>Project Safety</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Safety"><li>Project Safety</li></a>
−
                        <a href="https://2017.igem.org/Team:Kent/Signs"><li>Hazard Signs</li></a>
 
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 436: Line 582:
 
                     <a href="#">Human Practices</a>
 
                     <a href="#">Human Practices</a>
 
                     <ul class="drop-menu menu-2">
 
                     <ul class="drop-menu menu-2">
−
                         <a href="https://2017.igem.org/Team:Kent/HP/Silver"><li>Silver</li></a>
+
                         <a href="https://2017.igem.org/Team:Kent/HP/Silver"><li>Integrated HP</li></a>
−
<a href="https://2017.igem.org/Team:Kent/HP/Gold_Integrated"><li>Gold</li></a>
+
 
                         <a href="https://2017.igem.org/Team:Kent/Engagement"><li>Public Engagement</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Engagement"><li>Public Engagement</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/InterLab"><li>Interlab</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/InterLab"><li>Interlab</li></a>
Line 445: Line 590:
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>
 +
</div>
 
         <div id ="title">
 
         <div id ="title">
 
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/4/4c/T--Kent--EngagementHeader.png/799px-T--Kent--EngagementHeader.png" id="header1">  
 
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/4/4c/T--Kent--EngagementHeader.png/799px-T--Kent--EngagementHeader.png" id="header1">  
Line 450: Line 596:
 
<img src = "https://static.igem.org/mediawiki/2017/thumb/1/12/T--Kent--SilverHeader2.png/766px-T--Kent--SilverHeader2.png" id="header2">
 
<img src = "https://static.igem.org/mediawiki/2017/thumb/1/12/T--Kent--SilverHeader2.png/766px-T--Kent--SilverHeader2.png" id="header2">
 
         </div>
 
         </div>
−
        <nav class="droptext arrows">
+
 
 +
 
 +
<div id="box1">
 +
<div class="centerizer">
 +
 
 +
</div>
 +
<nav class="droptext arrows">
 
<header class="hull">
 
<header class="hull">
−
<label for="acc-close" class="hull-title">Basic Protocols</label>
+
<label for="acc-close" class="hull-title">Initiatives and Events</label>
 
</header>
 
</header>
 
<input type="radio" name="droptext" id="cb1" />
 
<input type="radio" name="droptext" id="cb1" />
 
<section class="hull">
 
<section class="hull">
−
<label class="hull-title" for="cb1">Production of Lysogeny broth (LB)</label>
+
<label class="hull-title" for="cb1">bOing! Festival</label>
 
<label class="hull-close" for="acc-close"></label>
 
<label class="hull-close" for="acc-close"></label>
−
<div class="hull-content">For 1 litre of LB a mixture of 10g of sodium chloride, 10g peptone, 5g of yeast extract as well as 1
+
<div class="hull-content">This event was spaced out over the campus of the University of Kent. We were able to set up our own booth of which we named “Science Island”. Our booth included five different
−
litre of distilled water in a glass bottle. We then used a magnetic spinner to help mix the powders
+
stations (Mother Nature, Chemistry Lab, DNA Kitchen, The Human Body and Light Source)
−
with the water, we avoided shaking the glass bottle as it would cause froth and waste some of the
+
that the children could explore. These booths were created to either help introduce or
−
LB.
+
expand the knowledge of science to the children and their parents.</div>
−
<br>
+
−
When making the LB we also made another litre batch and added 15g of agar extract to be able to
+
−
grow bacteria on plates.</div>
+
 
</section>
 
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="cb2" />
 
<input type="radio" name="droptext" id="cb2" />
 
<section class="hull">
 
<section class="hull">
−
<label class="hull-title" for="cb2">Production of SOB medium and magnesium stock</label>
+
<label class="hull-title" for="cb2">Mother Nature</label>
 
<label class="hull-close" for="acc-close"></label>
 
<label class="hull-close" for="acc-close"></label>
−
<div class="hull-content">Bringing together 20g of tryptone, 5g of yeast extract, 0.584g of NaCl, 0.186g of KCl and mixing it
+
<div class="hull-content">Here, we introduced the definitions of pH range, acidic, neutral and alkaline. To do this, we allowed the children to use sterilised pipettes to ‘suck’ up household products such as cola
−
with 990ml of millipure water (using the magnetic mixer again) which was then put in to autoclave
+
and baking powder. During this, we were able to teach them how to prevent cross
−
to sterilise it, after it was taken out and let for it to cool down to below 60 o C.
+
contamination by giving them new pipettes for different products and explaining how it
−
<br>
+
would have an effect on the final product if the same pipette was used. The products were
−
10ml of 2M Mg 2+ stock was then added and then brought to 100ml with millipure water, 0.2mm
+
then placed in to individual sterilised test tubes where the children then used pH test strips
−
filter sterilize was then used</div>
+
to determine whether the product was acidic, neutral or alkaline. After the conduction of
 +
these pH tests we discussed the importance of pH in nature and in relation to balanced
 +
ecosystems and the environment, examples included: The maintenance of water pH for the
 +
survival of fish and how changes in the pH can cause disease.</div>
 
</section>
 
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="cb3" />
 
<input type="radio" name="droptext" id="cb3" />
 
<section class="hull">
 
<section class="hull">
−
<label class="hull-title" for="cb3">Production of SOC medium and glucose stock</label>
+
<label class="hull-title" for="cb3">The Chemistry Lab</label>
 
<label class="hull-close" for="acc-close"></label>
 
<label class="hull-close" for="acc-close"></label>
−
<div class="hull-content">Once again bring 20g of tryptone, 5g of yeast of extract, 0.584g of NaCl, 0.186g of KCL, and then
+
<div class="hull-content">On this station, our team members demonstrated experiments with dry ice, soap and other household materials, while talking to the children about sublimation, the different states of
−
bring 970 ml with millipure water and use the magnetic mixer once again, this was also then put in
+
water and the behaviour of gases.</div>
−
to autoclave.
+
−
<br>
+
−
10ml of 2M Mg 2+ stock and then bring it to 100ml with milllipure water, filter sterilize it with 0.2m
+
−
and then final add 20ml of 1M glucose stock.</div>
+
 
</section>
 
</section>
 
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="cb4" />
 
<input type="radio" name="droptext" id="cb4" />
 
<section class="hull">
 
<section class="hull">
−
<label class="hull-title" for="cb4">Production of Glycerol stock</label>
+
<label class="hull-title" for="cb4">The DNA Kitchen</label>
 
<label class="hull-close" for="acc-close"></label>
 
<label class="hull-close" for="acc-close"></label>
−
<div class="hull-content">If you wish to store bacteria long term, you will need to create a Glycerol Stock after
+
<div class="hull-content">Our kitchen allowed us to explain to the children what DNA was and what it is involved in, such as genes. To do this, we helped them to construct a DNA double helix out of candy to
−
inoculating an overnight liquid culture
+
then explain how our DNA carries information, where the information comes from and how
−
<br>
+
it makes us unique. We also used this opportunity to explain the concept of genetic
−
<ul><li>Once bacterial growth has been achieved, 500μL of the overnight liquid
+
manipulation and mutations to the older children and their parents. This was carried out in
−
culture needs to be added to 500μL of 50% glycerol in a 2mL tube where it
+
relation to our project, which then led onto us asking the older children and parents to
−
should be gently mixed</li>
+
participate in our surveys so that we could get feedback on the advantages and
−
<li>The glycerol stock should then be frozen at -80 o C<ul>
+
disadvantages of Genetically Modified Organisms, how to improve our project and to gain a
−
<li> Successive freeze and thaw cycles will reduce the stocks shelf life</li></ul>
+
better understanding of the awareness, media impact and public opinion surround GMOs.
−
</li></ul></div>
+
The results of the surveys are mentioned below.</div>
 
</section>
 
</section>
 
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="cb5" />
 
<input type="radio" name="droptext" id="cb5" />
 
<section class="hull">
 
<section class="hull">
−
<label class="hull-title" for="cb5">Running Agarose Gel</label>
+
<label class="hull-title" for="cb5">The Human Body</label>
 
<label class="hull-close" for="acc-close"></label>
 
<label class="hull-close" for="acc-close"></label>
−
<div class="hull-content">After the cells have been miniprepped and the plasmid put through a restriction digest, the agarose gel can be run.
+
<div class="hull-content">Our next station, the human body was dedicated to anatomy and the various functions of our organs. Here we demonstrated a breathing machine. Our audience were able to get involved with the breathing machine where they were able to control the expansion and expulsion of the lungs and physically see how the diaphragm and the lungs work together in order for us to respire. We also created some puzzles of different organs in the human body,
−
<br>
+
allowing the children to identify what organs belong in the body. Once the puzzle was
−
<ul><li>Make up some agarose. This is done by taking 0.5g of agarose powder and putting it in a
+
completed we then explained how each organ functioned and why it is essential to the
−
250ml sterile conical flask, with 50ml of TAE buffer, then microwaving it in small pulses (20
+
human body for survival.</div>
−
seconds then swirling it around) until it is dissolved. Don’t overheat it or it will evaporate too
+
</section>
−
much. Make up the evaporated volume to 50ml with distilled water.</li>
+
<input type="radio" name="droptext" id="acc-close" />
−
<li>Add 1 vial of cybersafe (ask technical services for a tube of it and add all of it)</li>
+
<input type="radio" name="droptext" id="cb6" />
−
<li>Line the white sides of the tank with the agarose solution, to seal it and prevent leakage. Use
+
<section class="hull">
−
a p1000 pipette set to 1ml. Let it dry (about 5 mins max)</li>
+
<label class="hull-title" for="cb6">Light Source</label>
−
<li>Then pour all the agarose/sybrsafe solution into the tank and put in the comb. Let it set and
+
<label class="hull-close" for="acc-close"></label>
−
solidify (maximum 30 mins)</li>
+
<div class="hull-content">Our final station was supervised by our physicist. We allowed the children to look through a prism to split the light to get an idea of light reflection and absorption. The refraction of the
−
<li>When the gel has set, remove the comb from the tank (gently!) and then cover the whole
+
light allowed them to see the different colours of the light spectrum. In conjunction with our
−
tank with TAE buffer, so there’s at least half a centimetre of TAE covering the gel.</li>
+
project, we explained to the older audience the basics of a Green Fluorescent Protein
−
<li>Now, the samples need to be loaded. Load some DNA markers (ask technical services for a
+
component and how it is integrated in with our project.</div>
−
tube of this and load the whole tube) into well 1( left hand side) and then choose what you
+
</section>
−
load into wells 2, 3, and 4 etc. (make sure you note what’s in each lane!)</li>
+
<input type="radio" name="droptext" id="acc-close" />
−
<li>Load all of your digests into the wells 2,3, and 4.</li>
+
<input type="radio" name="droptext" id="cb7" />
−
<li>Plug into a power supply and put the cover on. Run for 40 mins to an hour at 80v. The amps
+
<section class="hull">
−
don’t matter.</li>
+
<label class="hull-title" for="cb7">Open Day</label>
−
<li>Once the visible markers have reached the half way point of the tank, turn off the power
+
<label class="hull-close" for="acc-close"></label>
−
supply and drain the TAE buffer form the tank. Remove the gel with a spatula and place in a
+
<div class="hull-content">During the two open days at the University of Kent that occurred on the 7 th and 21 st October, we engaged aspiring potential undergraduate students by explaining our experience with
−
UV imaging box. Take an image of the gel under UV light, save it onto a USB stick.</li></ul></div>
+
STEM and iGEM. We did this by presenting our project to them and then holding a Q&amp;A
 +
session afterwards.</div>
 +
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 +
<input type="radio" name="droptext" id="cb8" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb8">Social Media</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<div class="hull-content">Our social media is based on platforms such as YouTube, Twitter, Instagram and Facebook. This allowed us to engage with a wider range of the community, not just locally but
 +
nationally as well. On these platforms we engaged with other participants in iGEM within
 +
the UK where a meetup was organised at the University of Westminster, UCL and Warwick.
 +
At this convention each team had the opportunity to present their current process, receive
 +
feedback from other teams and help each other with any difficulties, e.g. with modelling.
 +
Also, after the Jamboree we will be producing a vlog that overviews our summer with iGEM
 +
including our work at the Jamboree. Please feel free to visit our links to the social media
 +
which are available at the bottom of our page.</div>
 +
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 +
<input type="radio" name="droptext" id="cb9" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb9">Game</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<div class="hull-content">As of the 1 st November 2017, our game, LuCas’ Adventure has been played by 92 people and they have taken an interest in our project. The first part of the game involves controlling the
 +
Cas13a/C2C2 to collect RNA and avoid DNA. This represents the CRISPR-Cas13a system
 +
being used to localise RNA in the nucleus, where the nucleus is set as the background of the
 +
game. The second part of the game involves a maze where the Cas13a system is GFP bound
 +
and is guided by the player to find the Endoplasmic Reticulum ready to be translated. The
 +
game has enabled us to reach out to people that do not have much knowledge in the
 +
science sector and explain the concepts of the nature of our project.</div>
 
</section>
 
</section>
 
<input type="radio" name="droptext" id="acc-close" />
 
<input type="radio" name="droptext" id="acc-close" />
 
</nav>
 
</nav>
 +
  
 
         <div id="foot">
 
         <div id="foot">
Line 544: Line 723:
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
 +
 +
<button onclick="topFunction()" id="ScrollUp" title="Return to Top"><img src="https://static.igem.org/mediawiki/2017/thumb/c/c6/T--Kent--ScrollV2.png/101px-T--Kent--ScrollV2.png"></button>
 +
 
<div id="sponsors">
 
<div id="sponsors">
 
<div id="sponsorstop">
 
<div id="sponsorstop">
Line 552: Line 734:
 
<img src="https://static.igem.org/mediawiki/2017/thumb/a/a7/T--Kent--avokiddo.png/800px-T--Kent--avokiddo.png">
 
<img src="https://static.igem.org/mediawiki/2017/thumb/a/a7/T--Kent--avokiddo.png/800px-T--Kent--avokiddo.png">
 
</a>
 
</a>
−
</div>
 
−
 
−
<div id ="sponsorsdown">
 
 
<a href="http://www.clicktravel.com" id="clickt">
 
<a href="http://www.clicktravel.com" id="clickt">
 
<img src="https://static.igem.org/mediawiki/2017/thumb/1/1e/T--Kent--clicktravel.png/799px-T--Kent--clicktravel.png">
 
<img src="https://static.igem.org/mediawiki/2017/thumb/1/1e/T--Kent--clicktravel.png/799px-T--Kent--clicktravel.png">
 
</a>
 
</a>
 +
</div>
 +
 +
<div id ="sponsorsdown">
 +
 
<a href="http://www.bbsrc.ac.uk/" id="bbsrc">
 
<a href="http://www.bbsrc.ac.uk/" id="bbsrc">
 
<img src="https://static.igem.org/mediawiki/2017/thumb/4/4e/T--Kent--bbsrc.png/800px-T--Kent--bbsrc.png">
 
<img src="https://static.igem.org/mediawiki/2017/thumb/4/4e/T--Kent--bbsrc.png/800px-T--Kent--bbsrc.png">
Line 566: Line 749:
 
</div>
 
</div>
 
</div>
 
</div>
 +
<script>
 +
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
 +
        document.getElementById("ScrollUp").style.display = "block";
 +
    } else {
 +
        document.getElementById("ScrollUp").style.display = "none";
 +
    }
 +
}
 +
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
     </body>
 
     </body>
 
</html>
 
</html>

Latest revision as of 02:42, 16 December 2017


Public Engagement