Team:Manchester/stars

From 2013.igem.org

(Difference between revisions)
 
(65 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 397: Line 381:
clear:both;
clear:both;
width:940px;
width:940px;
-
height:705px;
+
height:2100px;
top:110px;
top:110px;
left:0;
left:0;
Line 403: Line 387:
background-color:white;
background-color:white;
-
-webkit-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
-moz-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1));
+
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
 
 +
 
 +
.shading .left
 +
{
 +
float:left;
 +
margin:10px 0 5px 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);
}
}
.slider
.slider
{
{
-
position:absolute;
+
float:left;
-
top:5;
+
margin:10px 10px 5px 10px;
-
left:200px;
+
width:600px;
width:600px;
height:300px;
height:300px;
Line 418: Line 412:
z-index:200;
z-index:200;
-
-webkit-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
-moz-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1));
+
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
.shading .right
 +
{
 +
float:left;
 +
margin:10px 10px 5px 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);
}
}
Line 432: Line 435:
.text
.text
{
{
-
width:900px;
+
clear:both;
 +
width:940px;
margin:0;
margin:0;
-
margin-top:310px;
 
-
margin-left:20px;
 
}
}
.text p
.text p
{
{
-
margin:5px 5px 5px 5px;
+
margin:10px;
-
line-height:24px;
+
background:#F2F2F2;
-
background:#E6E6E6;
+
text-align:justify;
text-align:justify;
color:black;
color:black;
Line 448: Line 449:
font-size:14px;
font-size:14px;
padding:10px;
padding:10px;
 +
color:#4c0082;
-
-webkit-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
-moz-box-shadow: 0px 0px 5px 0px rgba(76,0,130,1));
+
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-
box-shadow: 0px 0px 5px 0px rgba(76,0,130,1);
+
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
}
-
/******************************************************next button*****************************************************/
+
iframe
-
.next a
+
{
{
-
width:185px;
+
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:5px;
 
-
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 478: Line 492:
}
}
-
/******************************************************back button*****************************************************/
+
.leftbar
-
.back a
+
{
{
-
width:180px;
+
width:120px;
-
text-decoration:none;
+
height:600px;
-
color:white;
+
position:fixed;
position:fixed;
-
bottom:5px;
+
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 506: 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 536: 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 551: 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 568: 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 609: 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="slider">
+
<div class="shading">
-
                   <img src="https://static.igem.org/mediawiki/2013/a/a6/Team1.jpg"     id="1"/>
+
             <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/6/6b/Modelling.png" id="2"/>
+
           
-
          <img src="https://static.igem.org/mediawiki/2013/c/ce/Humanpractice.jpg" id="3"/>
+
<div class="slider">
-
          <img src="https://static.igem.org/mediawiki/2013/0/00/Sponsors.jpg" id="4"/>
+
                   <img src="https://static.igem.org/mediawiki/2013/b/bf/Stars1.jpg" id="1"/>
-
          <img src="https://static.igem.org/mediawiki/2013/d/d0/Judging.jpg" id="5"/>
+
          <img src="https://static.igem.org/mediawiki/2013/6/6b/Stars2.jpg" id="2"/>
-
                  <img src="https://static.igem.org/mediawiki/2013/b/bb/Attributions1.jpg" id="6"/>
+
          <img src="https://static.igem.org/mediawiki/2013/7/7c/Stars5.jpg" id="3"/>
-
          </div>
+
                  <img src="https://static.igem.org/mediawiki/2013/6/6f/Stars6.jpg" id="4"/>
 +
                  <img src="https://static.igem.org/mediawiki/2013/0/0b/Stars7.jpg" id="5"/>
 +
          <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 class="text">
+
          <img src="https://static.igem.org/mediawiki/2013/c/c7/StarsMan.png" class="right" width="150" height="300"/>
-
           <p>
+
 
-
          Incididunt ut labore et dolore magna
+
           <div class="text">                
-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+
           <p><b>Overview</b><br>
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
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>
-
Duis aute irure dolor in reprehenderit in voluptate velit
+
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>
-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+
 
-
occaecat cupidatat non proident, sunt in culpa qui officia
+
<div class="gallery">
-
deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
+
<img id="10" class="preview normal" src="" alt="preview" /><br />
-
consectetur adipisicing elit, ed do eiusmod tempor incididunt
+
<img id="11" class="thumb normal" src="https://static.igem.org/mediawiki/2013/0/09/Stars4.jpg" alt="mountains" onmouseover="preview(this)"/>
-
ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation
+
<img id="12" class="thumb normal" src="https://static.igem.org/mediawiki/2013/6/60/Stars3.jpg" alt="desert" onmouseover="preview(this)"/>
-
ullamco laboris nisi ut aliquip ex ea commodo consequat.  
+
<img id="13" class="thumb normal" src="https://static.igem.org/mediawiki/2013/a/ad/Stars13.jpg" alt="highway" onmouseover="preview(this)"/>
-
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"