Team:Manchester/stars

From 2013.igem.org

(Difference between revisions)
 
(61 intermediate revisions not shown)
Line 4: Line 4:
<html>
<html>
<head>
<head>
-
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 
-
<script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<script type='text/javascript' >
<script type='text/javascript' >
Line 18: Line 16:
   setInterval(function() {
   setInterval(function() {
     $(".slider #"+count).fadeIn(300);
     $(".slider #"+count).fadeIn(300);
-
     $(".slider #"+count).delay(5000).fadeOut(300);
+
     $(".slider #"+count).delay(3000).fadeOut(300);
 
 
if(count == size){
if(count == size){
Line 24: Line 22:
     }else{
     }else{
  count = count + 1;}
  count = count + 1;}
-
   },5000);
+
   },3000);
  }
  }
-
function hoverLink1()
+
function hover1()
{
{
-
   $("#block #link1").hover(function() {
+
   $("#block").hover(function() {
       $("#block #image1").toggleClass("expand");
       $("#block #image1").toggleClass("expand");
  });
  });
-
   $("#block #link1").mouseenter(function() {
+
   $("#block").mouseenter(function() {
    $("#block #image1").css({marginLeft: "40px"});
    $("#block #image1").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link1").mouseleave(function() {
+
   $("#block").mouseleave(function() {
-
    $("#block #image1").css({marginLeft: "50px"});  
+
    $("#block #image1").css({marginLeft: "50px"});
   });
   });
}
}
-
function hoverImage1()
+
function hover2()
{
{
-
   $("#block #image1").mouseenter(function() {
+
   $("#block").mouseenter(function() {
    $("#block #image1").css({marginLeft: "40px"});
    $("#block #image1").css({marginLeft: "40px"});
  });
  });
-
     $("#block #image1").mouseleave(function() {
+
     $("#block").mouseleave(function() {
-
    $("#block #image1").css({marginLeft: "50px"});  
+
    $("#block #image1").css({marginLeft: "50px"});
   });
   });
}
}
-
function hoverLink2()
+
function hover3()
{
{
-
   $("#block #link2").hover(function() {
+
   $("#block1").hover(function() {
-
  $("#block #image2").toggleClass("expand");
+
      $("#block1 #image2").toggleClass("expand");
  });
  });
-
   $("#block #link2").mouseenter(function() {
+
   $("#block1").mouseenter(function() {
-
    $("#block #image2").css({marginLeft: "40px"});
+
    $("#block1 #image2").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link2").mouseleave(function() {
+
   $("#block1").mouseleave(function() {
-
    $("#block #image2").css({marginLeft: "50px"});  
+
    $("#block1 #image2").css({marginLeft: "50px"});
   });
   });
 +
  $("#block1").mouseenter(function() {
 +
      $("#block1 .submenu").show();
 +
  });
 +
  $("#block1").mouseleave(function() {
 +
      $("#block1 .submenu").hide();
 +
  });
}
}
-
function hoverImage2()
+
function hover4()
-
{
+
-
  $("#block #image2").mouseenter(function() {
+
-
    $("#block #image2").css({marginLeft: "40px"});
+
-
  });
+
-
  $("#block #image2").mouseleave(function() {
+
-
    $("#block #image2").css({marginLeft: "50px"});
+
-
          });
+
-
}
+
-
 
+
-
function hoverLink3()
+
{
{
-
   $("#block #link3").hover(function() {
+
   $("#block2").hover(function() {
-
  $("#block #image3").toggleClass("expand");
+
      $("#block2 #image3").toggleClass("expand");
  });
  });
-
   $("#block #link3").mouseenter(function() {
+
   $("#block2").mouseenter(function() {
-
    $("#block #image3").css({marginLeft: "40px"});
+
    $("#block2 #image3").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link3").mouseleave(function() {
+
   $("#block2").mouseleave(function() {
-
    $("#block #image3").css({marginLeft: "50px"});  
+
    $("#block2 #image3").css({marginLeft: "50px"});
   });
   });
-
}
+
   $("#block2").mouseenter(function() {
-
 
+
      $("#block2 .submenu").show();
-
function hoverImage3()
+
-
{
+
-
   $("#block #image3").mouseenter(function() {
+
-
    $("#block #image3").css({marginLeft: "40px"});
+
-
  });
+
-
    $("#block #image3").mouseleave(function() {
+
-
    $("#block #image3").css({marginLeft: "50px"});  
+
   });
   });
 +
  $("#block2").mouseleave(function() {
 +
      $("#block2 .submenu").hide();
 +
  });
}
}
-
function hoverLink4()
+
 
 +
function hover5()
{
{
-
   $("#block #link4").hover(function() {
+
   $("#block3").hover(function() {
-
  $("#block #image4").toggleClass("expand");
+
      $("#block3 #image6").toggleClass("expand");
  });
  });
-
   $("#block #link4").mouseenter(function() {
+
   $("#block3").mouseenter(function() {
-
    $("#block #image4").css({marginLeft: "40px"});
+
    $("#block3 #image6").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link4").mouseleave(function() {
+
   $("#block3").mouseleave(function() {
-
    $("#block #image4").css({marginLeft: "50px"});  
+
    $("#block3 #image6").css({marginLeft: "50px"});
   });
   });
-
}
+
   $("#block3").mouseenter(function() {
-
 
+
      $("#block3 .submenu").show();
-
function hoverImage4()
+
-
{
+
-
   $("#block #image4").mouseenter(function() {
+
-
    $("#block #image4").css({marginLeft: "40px"});
+
-
  });
+
-
    $("#block #image4").mouseleave(function() {
+
-
    $("#block #image4").css({marginLeft: "50px"});  
+
   });
   });
 +
  $("#block3").mouseleave(function() {
 +
      $("#block3 .submenu").hide();
 +
  });
}
}
-
function hoverLink5()
+
function hover6()
{
{
-
   $("#block #link5").hover(function() {
+
   $("#block4").hover(function() {
-
  $("#block #image5").toggleClass("expand");
+
      $("#block4 #image4").toggleClass("expand");
  });
  });
-
   $("#block #link5").mouseenter(function() {
+
   $("#block4").mouseenter(function() {
-
    $("#block #image5").css({marginLeft: "40px"});
+
    $("#block4 #image4").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link5").mouseleave(function() {
+
   $("#block4").mouseleave(function() {
-
    $("#block #image5").css({marginLeft: "50px"});  
+
    $("#block4 #image4").css({marginLeft: "50px"});
   });
   });
-
}
+
   $("#block4").mouseenter(function() {
-
 
+
      $("#block4 .submenu").show();
-
function hoverImage5()
+
-
{
+
-
   $("#block #image5").mouseenter(function() {
+
-
    $("#block #image5").css({marginLeft: "40px"});
+
-
  });
+
-
    $("#block #image5").mouseleave(function() {
+
-
    $("#block #image5").css({marginLeft: "50px"});  
+
   });
   });
 +
  $("#block4").mouseleave(function() {
 +
      $("#block4 .submenu").hide();
 +
  });
}
}
-
function hoverLink6()
+
 
 +
function hover7()
{
{
-
   $("#block #link6").hover(function() {
+
   $("#block5").hover(function() {
-
  $("#block #image6").toggleClass("expand");
+
      $("#block5 #image5").toggleClass("expand");
  });
  });
-
   $("#block #link6").mouseenter(function() {
+
   $("#block5").mouseenter(function() {
-
    $("#block #image6").css({marginLeft: "40px"});
+
    $("#block5 #image5").css({marginLeft: "40px"});
  });
  });
-
   $("#block #link6").mouseleave(function() {
+
   $("#block5").mouseleave(function() {
-
    $("#block #image6").css({marginLeft: "50px"});  
+
    $("#block5 #image5").css({marginLeft: "50px"});
   });
   });
 +
  $("#block5").mouseenter(function() {
 +
      $("#block5 .submenu").show();
 +
  });
 +
  $("#block5").mouseleave(function() {
 +
      $("#block5 .submenu").hide();
 +
  });
}
}
 +
 +
function preview(img)
 +
{
 +
        var lastImg = 11; //Set initial thumbnail and preview
 +
        document.getElementById(10).src = document.getElementById(lastImg).src;
 +
        document.getElementById(lastImg).className = "thumb select";
-
function hoverImage6()
+
        document.getElementById(lastImg).className = "thumb normal";     
-
{
+
        img.className = "thumb select";
-
  $("#block #image6").mouseenter(function() {
+
        document.getElementById(10).src = img.src;
-
    $("#block #image6").css({marginLeft: "40px"});
+
        lastImg = img.id
-
  });
+
-
    $("#block #image6").mouseleave(function() {
+
-
    $("#block #image6").css({marginLeft: "50px"});  
+
-
  });
+
}
}
 +
</script>
</script>
Line 232: Line 225:
position:relative;
position:relative;
width:950px;
width:950px;
-
height:1600px;
+
height:2000px;
}
}
Line 244: Line 237:
top:15px;
top:15px;
left:0;
left:0;
-
z-index:300;
+
z-index:100;
}
}
-
#block
+
#block, #block1, #block2, #block3, #block4, #block5
{
{
float:left;
float:left;
width:150px;
width:150px;
-
margin:0 6px;
+
height:80px;
-
 
+
margin:0 5px;
}
}
-
#block a
+
#block a, #block1 a, #block2 a, #block3 a, #block4 a, #block5 a
{
{
display:block;
display:block;
Line 272: Line 265:
border:1px solid #4C0082;
border:1px solid #4C0082;
 +
 +
-webkit-transition-duration:0.1s;
 +
-webkit-timing-function:linear;
transition-duration:0.1s;
transition-duration:0.1s;
transition-timing-function:linear;
transition-timing-function:linear;
}
}
-
#block img
+
#block img,#block1 img,#block2 img,#block3 img,#block4 img, #block5 img
{
{
 +
-webkit-transition-duration:0.1s;
 +
-webkit-timing-function:linear;
transition-duration:0.1s;
transition-duration:0.1s;
transition-timing-function:linear;
transition-timing-function:linear;
Line 284: Line 282:
}
}
-
#block img:hover
+
#block img:hover,#block1 img:hover,#block2 img:hover,#block3 img:hover,#block4 img:hover, #block5 img:hover
{
{
width:65px;
width:65px;
Line 290: Line 288:
}
}
-
#block .list
+
#block .list,#block1 .list,#block2 .list,#block3 .list,#block4 .list
{
{
margin:0;
margin:0;
}
}
-
#block .list li
+
#block .list li, #block1 .list li, #block2 .list li, #block3 .list li, #block4 .list li
{
{
display:block;
display:block;
list-style:none;
list-style:none;
 +
margin:0;
}
}
-
#block .list .submenu, .submenu1, .submenu2
+
.submenu
{
{
position:relative;
position:relative;
Line 318: Line 317:
}
}
-
#block .list .submenu li a
+
#block1 .list .submenu li a, #block2 .list .submenu li a, #block3 .list .submenu li a, #block4 .list .submenu li a
{
{
clear:both;
clear:both;
Line 331: Line 330:
}
}
-
#block .list li .submenu li:hover .submenu1 a
+
#block4 .list .submenu li .submenu1, #block4 .list .submenu li .submenu2
 +
{
 +
margin:0;
 +
}
 +
 +
#block4 .list .submenu li .submenu1 a, #block4 .list .submenu li .submenu2 a
{
{
-
clear:both;
 
-
display:block;
 
-
border:1px solid #4C0082;
 
margin:0 auto;
margin:0 auto;
-
width:100px;
+
width:110px;
-
font-size: 12px;
+
font-size: 13px;
font-family: Trebuchet MS;
font-family: Trebuchet MS;
font-weight: bold;
font-weight: bold;
color:black;
color:black;
-
background:#ffcc33;
+
background-color:#FFCC33;
}
}
-
#block .list .submenu a:hover  
+
#block4 .list .submenu li .submenu1 a:hover, #block4 .list .submenu li .submenu2 a:hover
{
{
 +
color:white;
display:block;
display:block;
background:#A901DB;
background:#A901DB;
}
}
-
#block .list li:hover .submenu
+
#block1 .list .submenu li a:hover, #block2 .list .submenu li a:hover, #block2 .list .submenu li a:hover,
 +
#block3 .list .submenu li a:hover, #block4 .list .submenu li a:hover
{
{
display:block;
display:block;
 +
background:#A901DB;
}
}
-
.submenu li:hover .submenu1
+
#block .list li:hover .submenu
{
{
display:block;
display:block;
-
position:absolute;
 
-
left:145px;
 
-
top:0;
 
}
}
-
.submenu li:hover .submenu2
+
.expand
{
{
-
display:block;
+
-webkit-transition-duration:0.1s;
-
position:absolute;
+
-webkit-timing-function:linear;
-
left:145px;
+
transition-duration:0.1s;
-
top:28px;
+
transition-timing-function:linear;
-
}
+
-
#block .list li .submenu li:hover .submenu2 a
 
-
{
 
-
clear:both;
 
-
display:block;
 
-
border:1px solid #4C0082;
 
-
margin:0 auto;
 
-
width:150px;
 
-
font-size: 12px;
 
-
font-family: Trebuchet MS;
 
-
font-weight: bold;
 
-
color:black;
 
-
background:#FFCC33;
 
-
}
 
-
 
-
.expand
 
-
{
 
width:65px;
width:65px;
height:65px;
height:65px;
Line 396: Line 380:
position:absolute;
position:absolute;
clear:both;
clear:both;
-
width:960px;
+
width:940px;
-
height:550px;
+
height:2100px;
top:110px;
top:110px;
left:0;
left:0;
 +
padding:10px;
background-color:white;
background-color:white;
Line 407: Line 392:
}
}
-
.wrapper .left
+
 
 +
 
 +
.shading .left
{
{
float:left;
float:left;
-
margin:10px 0 5px 20px;
+
margin:10px 0 5px 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
Line 430: Line 417:
}
}
-
.wrapper .right
+
.shading .right
{
{
float:left;
float:left;
-
margin:10px 20px 5px 0;
+
margin:10px 10px 5px 0;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
Line 449: Line 436:
{
{
clear:both;
clear:both;
-
width:960px;
+
width:940px;
margin:0;
margin:0;
-
 
}
}
.text p
.text p
{
{
-
margin:20px;
+
margin:10px;
background:#F2F2F2;
background:#F2F2F2;
text-align:justify;
text-align:justify;
Line 470: Line 456:
}
}
-
/******************************************************next button*****************************************************/
+
iframe
-
.next a
+
{
{
-
width:150px;
+
margin:0;
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
.graph img
 +
{
 +
margin-left:10px;
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
.block1 a, .block2 a, .block3 a, .block4 a, .block5 a, .block6 a, .block7 a, .block8 a, .block9 a, .block10 a, .block11 a, .block12 a, .block13 a
 +
{
 +
width:120px;
text-decoration:none;
text-decoration:none;
color:white;
color:white;
-
position:fixed;
 
-
bottom:400px;
 
-
right:5px;
 
text-align:center;
text-align:center;
background:#606060;
background:#606060;
-
padding:15px;
+
padding:5px;
font-style:Trebuchet MS;
font-style:Trebuchet MS;
font-weight:bold;
font-weight:bold;
-
font-size:26px;
+
font-size:12px;
color:white;
color:white;
}
}
-
.next a:hover
+
.block1 a:hover, .block2 a:hover, .block3 a:hover, .block4 a:hover, .block5 a:hover, .block6 a:hover, .block7 a:hover, .block8 a:hover, .block9 a:hover, .block10 a:hover, .block11 a:hover, .block12 a:hover, .block13 a:hover
{
{
background:#C0C0C0;
background:#C0C0C0;
Line 494: Line 492:
}
}
-
/******************************************************back button*****************************************************/
+
.leftbar
-
.back a
+
{
{
-
width:150px;
+
width:120px;
-
text-decoration:none;
+
height:600px;
-
color:white;
+
position:fixed;
position:fixed;
-
bottom:400px;
+
top:120px;
left:5px;
left:5px;
-
text-align:center;
+
}
-
background:#606060;
+
-
padding:15px;
+
-
font-style:Trebuchet MS;
+
-
font-weight:bold;
+
-
font-size:26px;
+
-
color:white;
+
 +
.block1 a
 +
{
 +
background:#660099;
 +
float:left;
 +
display:block;
 +
padding:5px;
}
}
-
.back a:hover
+
.block2 a
{
{
-
background:#C0C0C0;
+
display:block;
-
color:#606060;
+
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block3 a
 +
{
 +
background:#bc80ea;
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block4 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block5 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block6 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block7 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block8 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
 
 +
padding:5px;
 +
}
 +
 
 +
.block9 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block10 a
 +
{
 +
 
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block11 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block12 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.block13 a
 +
{
 +
display:block;
 +
float:left;
 +
margin-top:1px;
 +
padding:5px;
 +
}
 +
 
 +
.gallery
 +
{
 +
width:920px;
 +
margin-left:10px;
 +
margin-bottom:20px;
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
.preview {
 +
width:920px;
 +
height:360px}
 +
 
 +
.thumb {
 +
width:290px;
 +
margin:5px 0 5px 10px;
 +
}
 +
 
 +
.normal {
 +
}
 +
 
 +
.select {
}
}
Line 522: Line 636:
</head>
</head>
-
<body onLoad="showImage(); hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3();
+
<body onLoad="showImage(); hover1(); hover2(); hover3(); hover4(); hover5(); hover6(); hover7(); preview();">
-
              hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5(); hoverLink6(); hoverImage6();">
+
<div class="header">
<div class="header">
<div class="banner">
<div class="banner">
  <div class="igem">  
  <div class="igem">  
-
  <a>
+
  <a href="https://2013.igem.org/Main_Page">
           <img src="https://static.igem.org/mediawiki/2013/3/3f/Igem.png">
           <img src="https://static.igem.org/mediawiki/2013/3/3f/Igem.png">
           </a>
           </a>
Line 552: Line 665:
         <div id="block">
         <div id="block">
               <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
               <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
-
      <a href="#" id="link1">Home</a>
+
      <a href="https://2013.igem.org/Team:Manchester/Hometest3" id="link1">Home</a>
         </div>
         </div>
-
         <div id="block">
+
         <div id="block1">
             <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/>
             <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/>
                   <ul class="list">
                   <ul class="list">
-
                     <li><a href="#" id="link2">About</a>
+
                     <li><a href="https://2013.igem.org/Team:Manchester/OurTeamtest" id="link2">Team</a>
-
                  <ul class="submenu" id="sub1">
+
                  <ul class="submenu">
-
        <li><a href="#" id="link2">Our Team</a></li>
+
                    <li><a href="https://igem.org/Team.cgi?id=1027" target="_blank">Team Profile</a></li>
-
                        <li><a href="#" id="link2">Team Profile</a></li>
+
  </ul>
  </ul>
                     </li>
                     </li>
Line 567: Line 679:
         </div>
         </div>
          
          
-
         <div id="block">
+
         <div id="block2">
             <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/>
             <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/>
               <ul class="list">
               <ul class="list">
-
                   <li><a href="#" id="link3">Project</a>
+
                   <li><a href="https://2013.igem.org/Team:Manchester/Projecttest" id="link3">Project</a>
                <ul class="submenu">
                <ul class="submenu">
-
    <li><a href="#" id="link3">Aim</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/Aimtest2" id="link3">Project Overview</a></li>
-
    <li><a href="#" id="link3">Notebook</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/Notebooktest2" id="link3">Notebook</a></li>
-
                             <li><a href="#" id="link3">Lab Book</a></li>
+
                             <li><a href="https://2013.igem.org/Team:Manchester/LabBooktest" id="link3">Lab Book</a></li>
-
                    <li><a href="#" id="link3">Contributions</a></li>
+
                    <li><a href="https://2013.igem.org/Team:Manchester/contributiontest" id="link3">Parts</a></li>
-
    <li><a href="#" id="link3">Safety</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/Safetytest" id="link3">Safety</a></li>
-
                             <li><a href="#" id="link3">Judging</a></li>                      
+
                             <li><a href="https://2013.igem.org/Team:Manchester/medaltest" id="link3">Judging</a></li>                      
-
    <li><a href="#" id="link3">Attributions</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/Attributionstest" id="link3">Attributions</a></li>
        </ul>
        </ul>
                 </li>
                 </li>
Line 584: Line 696:
         </div>
         </div>
-
         <div id="block">
+
         <div id="block3">
             <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/>
             <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/>
               <ul class="list">
               <ul class="list">
-
                   <li><a href="#" id="link6">Modelling</a>
+
                   <li><a href="https://2013.igem.org/Team:Manchester/Modellingtest" id="link6">Modelling</a>
                <ul class="submenu">
                <ul class="submenu">
-
    <li><a href="#" id="link6">Fatty Acid Production</a></li>
+
   
-
    <li><a href="#" id="link6">Parameter Estimation</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/parametertest" id="link6">Uncertainty Analysis</a></li>
-
                             <li><a href="#" id="link6">Modelling Collaboration</a></li>
+
                            <li><a href="https://2013.igem.org/Team:Manchester/fabAmodeltest" id="link6">FabA Dynamics Model</a></li>
 +
                          <li><a href="https://2013.igem.org/Team:Manchester/popdynamictest" id="link6">Population Dynamics</a></li>
 +
                             <li><a href="https://2013.igem.org/Team:Manchester/collabtest" id="link6">Modelling Collaboration</a></li>
        </ul>
        </ul>
                 </li>
                 </li>
               </ul>
               </ul>
-
         </div>
+
         </div>
-
         <div id="block">
+
         <div id="block4">
             <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/>
             <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/>
             <ul class="list">
             <ul class="list">
-
                   <li><a href="#" onclick="javascript:openMenu('sub3')" id="link4">Human Practices</a>
+
                   <li><a href="https://2013.igem.org/Team:Manchester/HumanPracticetest" id="link4">Human Practices</a>
-
                <ul class="submenu" id="sub3">
+
                <ul class="submenu">
-
    <li><a href="#" id="link4">Public Outreach</a>
+
    <li><a href="https://2013.igem.org/Team:Manchester/outreachtest" id="link4">Public Outreach</a>
-
<ul class="submenu1" >
+
<ul class="submenu1">
-
  <a href="#" id="link4">Science Stars</a></li>
+
  <a href="https://2013.igem.org/Team:Manchester/stars" id="link4">Science Stars</a></li>
-
  <a href="#" id="link4">Open day</a></li>
+
  <a href="https://2013.igem.org/Team:Manchester/openday" id="link4">Open day</a></li>
</ul>
</ul>
    </li>
    </li>
-
                    <li><a href="#" id="link4">Ethics</a>
+
                    <li><a href="https://2013.igem.org/Team:Manchester/ethicstest" id="link4">Ethics</a>
-
<ul class="submenu2" id="sub3">
+
<ul class="submenu2">
-
    <a href="#" id="link4">Environmental Impact</a></li>
+
  <li><a href="https://2013.igem.org/Team:Manchester/environmenttest" id="link4">Environmental Impact</a></li>
-
    <a href="#" id="link4">Economical Impact</a></li>
+
  <li><a href="https://2013.igem.org/Team:Manchester/economytest" id="link4">Economic Impact</a></li>
-
    <a href="#" id="link4">Impact Management</a></li>
+
  <li><a href="https://2013.igem.org/Team:Manchester/managementtest" id="link4">Impact Management</a></li>
-
    <a href="#" id="link4">Conclusion</a></li>
+
  <li><a href="https://2013.igem.org/Team:Manchester/conclusiontest" id="link4">Conclusion</a></li>
</ul>
</ul>
    </li>
    </li>
-
    <li><a href="#" id="link4">Business Plan</a></li>
+
                            <li><a href="https://2013.igem.org/Team:Manchester/businesstest" id="link4">Business Plan</a></li>
-
                    <li><a href="#" id="link4">Knowledge Deficit Assumption</a></li>
+
    <li><a href="https://2013.igem.org/Team:Manchester/collabtest" id="link4">Modelling Collaboration</a></li>
-
                             <li><a href="#" id="link4">Conferences and Discussions</a></li>
+
                    <li><a href="https://2013.igem.org/Team:Manchester/knoledgetest" id="link4">Knowledge Deficit Assumption</a></li>
-
                             <li><a href="#" id="link4">Social Media</a></li>
+
                             <li><a href="https://2013.igem.org/Team:Manchester/conferencetest" id="link4">Conferences and Discussions</a></li>
 +
                             <li><a href="https://2013.igem.org/Team:Manchester/socialtest" id="link4">Social Media</a></li>
                </ul>
                </ul>
                   </li>
                   </li>
Line 625: Line 740:
         </div>
         </div>
-
         <div id="block">
+
         <div id="block5">
             <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/>
             <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/>
-
             <a href="#" id="link5">Sponsorship</a>
+
             <a href="https://2013.igem.org/Team:Manchester/sponsorstest" id="link5">Sponsorship</a>
         </div>
         </div>
 
 
</div>
</div>
-
 
<div class="wrapper">
<div class="wrapper">
 +
<div class="shading">
             <img src="https://static.igem.org/mediawiki/2013/7/7c/ScienceMan.png" class="left" width="150" height="300"/>  
             <img src="https://static.igem.org/mediawiki/2013/7/7c/ScienceMan.png" class="left" width="150" height="300"/>  
              
              
<div class="slider">
<div class="slider">
-
                   <img src="https://static.igem.org/mediawiki/2013/a/a6/Team1.jpg"     id="1"/>
+
                   <img src="https://static.igem.org/mediawiki/2013/b/bf/Stars1.jpg" id="1"/>
-
          <img src="https://static.igem.org/mediawiki/2013/6/6b/Modelling.png" id="2"/>
+
          <img src="https://static.igem.org/mediawiki/2013/6/6b/Stars2.jpg" id="2"/>
-
          <img src="https://static.igem.org/mediawiki/2013/c/ce/Humanpractice.jpg" id="3"/>
+
          <img src="https://static.igem.org/mediawiki/2013/7/7c/Stars5.jpg" id="3"/>
-
          <img src="https://static.igem.org/mediawiki/2013/0/00/Sponsors.jpg" id="4"/>
+
                  <img src="https://static.igem.org/mediawiki/2013/6/6f/Stars6.jpg" id="4"/>
-
          <img src="https://static.igem.org/mediawiki/2013/d/d0/Judging.jpg" id="5"/>
+
                  <img src="https://static.igem.org/mediawiki/2013/0/0b/Stars7.jpg" id="5"/>
-
                  <img src="https://static.igem.org/mediawiki/2013/b/bb/Attributions1.jpg" id="6"/>
+
          <img src="https://static.igem.org/mediawiki/2013/b/be/Stars10.jpg" id="6"/>
 +
          <img src="https://static.igem.org/mediawiki/2013/1/19/Stars11.jpg" id="7"/>
 +
                  <img src="https://static.igem.org/mediawiki/2013/b/b2/Stars12.jpg" id="8"/>
 +
                  <img src="https://static.igem.org/mediawiki/2013/c/c5/Stars16.png" id="9"/>
</div>
</div>
Line 647: Line 765:
           <div class="text">                   
           <div class="text">                   
-
           <p>
+
           <p><b>Overview</b><br>
-
          Incididunt ut labore et dolore magna
+
On 2nd & 3rd July, Rob, Elsa, Jess, Lorna and Tim ran a series of 12 workshops for around 200 11-14 year old schoolchildren as part of the University of Manchester Science Stars day (<a href="http://www.ls.manchester.ac.uk/schoolsandcommunity/schooleventhighlights/sciencestarsday/"> Visit this Event! </a>). This was an activity of two halves. Firstly, Elsa gave a brief and interactive presentation about the structure of DNA, which then lead to our “Sweet DNA” activity (using sweets and cocktail sticks to build a double helix model). This activity introduced the concepts of the double strand, and complementary base pairing of DNA. In some cases, the children had already learned about these topics. However in many cases these ideas were something totally new. Regardless, the children told us they had a lot of fun doing this activity and they felt they had learned a lot.<br></br>
-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+
Next, Rob gave another brief presentation, this time describing our project and explaining the current ways that palm oil is obtained. This then led nicely on to group discussions about what the children would like synthetic biology to be used for, and any ethical implications these ideas may raise, with the team making their way around the groups for more in-depth discussions. As expected, some wild ideas were thrown about. However many of the children had a very mature attitude to the subject and came up with some brilliant concepts and well thought-out ethical ideas. We're sure the future of synthetic biology is in safe hands!</p>
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
 
-
Duis aute irure dolor in reprehenderit in voluptate velit
+
<div class="gallery">
-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+
<img id="10" class="preview normal" src="" alt="preview" /><br />
-
occaecat cupidatat non proident, sunt in culpa qui officia
+
<img id="11" class="thumb normal" src="https://static.igem.org/mediawiki/2013/0/09/Stars4.jpg" alt="mountains" onmouseover="preview(this)"/>
-
deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
+
<img id="12" class="thumb normal" src="https://static.igem.org/mediawiki/2013/6/60/Stars3.jpg" alt="desert" onmouseover="preview(this)"/>
-
consectetur adipisicing elit, ed do eiusmod tempor incididunt
+
<img id="13" class="thumb normal" src="https://static.igem.org/mediawiki/2013/a/ad/Stars13.jpg" alt="highway" onmouseover="preview(this)"/>
-
ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation
+
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
-
Duis aute irure dolor in reprehenderit in voluptate velit
+
-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
-
Duis aute irure dolor in reprehenderit in voluptate velit
+
-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+
-
occaecat cupidatat non proident, sunt in culpa qui officia
+
-
deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
+
-
consectetur adipisicing elit, ed do eiusmod tempor incididunt
+
-
ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation
+
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
-
Duis aute irure dolor in reprehenderit in voluptate velit
+
-
          </p>
+
-
          </div>
+
</div>
</div>
-
    <div class="next">
 
-
        <a href="https://2013.igem.org/Team:Manchester/Projecttest" class="nextButton">Next</a>
 
-
      </div>
 
-
      <div class="back">
+
<center><iframe src="http://prezi.com/embed/85fbcfd8db359af5ee2a5ed90d8f0d013dfadf4e/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0&amp;features=undefined&amp;disabled_features=undefined" width="920" height="400" frameBorder="0"></iframe></center>
-
        <a href="https://2013.igem.org/Team:Manchester/Hometest" class="backButton">Previous</a>
+
 
-
      </div>
+
<p><b>Reception</b><br>
 +
Both pupils and teachers alike enjoyed the workshop, with many children commenting on how “<i>this [was] better than science class</i>”, “<i>this was the best workshop so far</i>” and that the Sweet DNA helix “<i>was so cool</i>”! Several of the teachers also sincerely thanked us for the workshop, and said that they were going to use the activity again in their classes to teach about DNA. The second half of the sessions was also productive, with pupils eagerly sharing their ideas on what synthetic biology would best be used for. We had some very interesting suggestions come up, including the re-engineering of plants to make them cold-resistant and using the cancer-resistant genes from the naked mole rat to look into cancer prevention. A feedback form was distributed and we got a great response!<br>
 +
The schoolchildren and teachers alike were asked whether they agree or disagree that the Science Stars workshops we delivered were interesting/informative/something/something. Below are the results:</p>
 +
 
 +
<div class="graph">
 +
<img src="https://static.igem.org/mediawiki/2013/9/9a/SciStarsFeedback.png" width="920" height="300"/>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
                                 
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 17:24, 24 October 2013

Top

Overview
On 2nd & 3rd July, Rob, Elsa, Jess, Lorna and Tim ran a series of 12 workshops for around 200 11-14 year old schoolchildren as part of the University of Manchester Science Stars day ( Visit this Event! ). This was an activity of two halves. Firstly, Elsa gave a brief and interactive presentation about the structure of DNA, which then lead to our “Sweet DNA” activity (using sweets and cocktail sticks to build a double helix model). This activity introduced the concepts of the double strand, and complementary base pairing of DNA. In some cases, the children had already learned about these topics. However in many cases these ideas were something totally new. Regardless, the children told us they had a lot of fun doing this activity and they felt they had learned a lot.

Next, Rob gave another brief presentation, this time describing our project and explaining the current ways that palm oil is obtained. This then led nicely on to group discussions about what the children would like synthetic biology to be used for, and any ethical implications these ideas may raise, with the team making their way around the groups for more in-depth discussions. As expected, some wild ideas were thrown about. However many of the children had a very mature attitude to the subject and came up with some brilliant concepts and well thought-out ethical ideas. We're sure the future of synthetic biology is in safe hands!

preview
mountains desert highway

Reception
Both pupils and teachers alike enjoyed the workshop, with many children commenting on how “this [was] better than science class”, “this was the best workshop so far” and that the Sweet DNA helix “was so cool”! Several of the teachers also sincerely thanked us for the workshop, and said that they were going to use the activity again in their classes to teach about DNA. The second half of the sessions was also productive, with pupils eagerly sharing their ideas on what synthetic biology would best be used for. We had some very interesting suggestions come up, including the re-engineering of plants to make them cold-resistant and using the cancer-resistant genes from the naked mole rat to look into cancer prevention. A feedback form was distributed and we got a great response!
The schoolchildren and teachers alike were asked whether they agree or disagree that the Science Stars workshops we delivered were interesting/informative/something/something. Below are the results:

Retrieved from "http://2013.igem.org/Team:Manchester/stars"