Team:Harvard/virtual

From 2010.igem.org

(Difference between revisions)
(Replacing page with '<html onLoad="game()"> <script type="text/javascript"> document.getElementsByTagName('body')[0].innerHTML="test"; </script> </html>')
 
(19 intermediate revisions not shown)
Line 1: Line 1:
-
<html onLoad="game()">
+
<html>
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
  <style type="text/css" src="http://www.hcs.harvard.edu/usundergrad/test/css.css"></style>
 +
  <script type="text/javascript">
 +
    $(document).ready(function()
 +
    {
 +
   
 +
    var team;
 +
    var flavor;
 +
   
 +
    //flavor
 +
   
 +
      $(".option1").click(function () {
 +
  $(".option2").fadeOut("slow");
 +
  $(".option3").fadeOut("slow");
 +
$(".option1").css("opacity","1");
 +
$(".suboption1").html("<h1>miraculin</h1>makes sour food taste sweet<br />click to add");
 +
$(".suboption2").html("<h1>brazzein</h1>a sweet tasting protein<br />click to add");
 +
$(".suboption1").fadeIn(1100);
 +
$(".suboption2").fadeIn(1100);
 +
team="flavor";
 +
});
 +
 +
//miraculin
 +
 +
      $(".suboption1").click(function () {
 +
      if(team=="flavor")
 +
      {
 +
  $(".option1").html("add miraculin");
 +
  $(".suboption1").fadeOut("slow");
 +
  $(".suboption2").fadeOut("slow");
 +
$("#description1").fadeIn(1100);
 +
$("#img1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculinbbcut.gif' width='250px' />");
 +
$("#img1").fadeIn(1100);
 +
$("#img2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculingene.gif' width='70px' />");
 +
$("#img2").fadeIn(1100);
 +
$("#img3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/mcs1.gif' width='60px'  />");
 +
$("#img3").fadeIn(1100);
 +
$("#img4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/mcs2.gif' width='60px'  />");
 +
$("#img4").fadeIn(1100);
 +
$("#enz1").fadeIn(1100);
 +
$("#enz2").fadeIn(1100);
 +
$("#enz3").fadeIn(1100);
 +
$("#enz4").fadeIn(1100);
 +
$("#enz5").fadeIn(1100);
 +
$("#scissor1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor5").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
  flavor="miraculin";
 +
  }
 +
});
 +
 +
 +
//brazzein
 +
 +
      $(".suboption2").click(function () {
 +
      if(team=="flavor")
 +
      {
 +
  $(".option1").html("add brazzein");
 +
  $(".suboption1").fadeOut("slow");
 +
  $(".suboption2").fadeOut("slow");
 +
$("#description1").html("The DNA sequence that codes for the brazzein protein is kept in the V0120 vector. The brazzein gene is bordered on both sides by restriction enzyme sites. Drag enzymes over the restriction enzyme sites to cut the gene out of the vector.").fadeIn(1100);
 +
$("#img1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculinbbcut.gif' width='250px' />");
 +
$("#img1").fadeIn(1100);
 +
$("#img2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/brazzeingene.png' width='70px' />");
 +
$("#img2").fadeIn(1100);
 +
$("#img3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/mcs1.gif' width='60px'  />");
 +
$("#img3").fadeIn(1100);
 +
$("#img4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/mcs2.gif' width='60px'  />");
 +
$("#img4").fadeIn(1100);
 +
$("#enz1").fadeIn(1100);
 +
$("#enz2").fadeIn(1100);
 +
$("#enz3").fadeIn(1100);
 +
$("#enz4").fadeIn(1100);
 +
$("#enz5").fadeIn(1100);
 +
$("#scissor1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
$("#scissor5").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/scissors.gif' width='38px' />").fadeIn(1100);
 +
  flavor="brazzein";
 +
  }
 +
});
 +
 +
//color
 +
 +
      $(".option2").click(function () {
 +
  $(".option1").fadeOut("slow");
 +
  $(".option3").fadeOut("slow");
 +
$(".option2").css("opacity","1");
 +
$(".option2").animate({right:"600px",top:"10%"});
 +
});
 +
 +
//allergy
 +
 +
      $(".option3").click(function () {
 +
  $(".option1").fadeOut("slow");
 +
  $(".option2").fadeOut("slow");
 +
$(".option3").css("opacity","1");
 +
$(".option3").animate({right:"600px",top:"10%"});
 +
});
 +
 +
 +
 +
$("#scissor1").draggable({containment: 'window'});
 +
$("#scissor2").draggable({containment: 'window'});
 +
$("#scissor3").draggable({containment: 'window'});
 +
$("#scissor4").draggable({containment: 'window'});
 +
$("#scissor5").draggable({containment: 'window'});
-
<script type="text/javascript">
+
var score=0;
-
document.getElementsByTagName('body')[0].innerHTML="test";
+
-
</script>
+
$(".droppable1").droppable({ accept: '.draggable' },{
 +
  drop: function(ev, ui) {
 +
  if($(ui.draggable).attr("id")=="scissor1")
 +
  {
 +
$("#img3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/eco.gif' width='60px' />");
 +
score=score+1;
 +
 +
if(score==11 || score==21 || score==31)
 +
{
 +
digested(score);
 +
}
 +
$(".droppable1").droppable( "disable" );
 +
}
 +
 +
  if($(ui.draggable).attr("id")=="scissor2")
 +
  {
 +
$("#img3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/not.gif' width='60px' />");
 +
score=score+2;
 +
 +
if(score==12 || score==22 || score==32)
 +
{
 +
digested(score);
 +
}
 +
$(".droppable1").droppable( "disable" );
 +
}
 +
 +
  if($(ui.draggable).attr("id")=="scissor3")
 +
  {
 +
$("#img3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/xba.gif' width='60px' />");
 +
score=score+3;
 +
 +
if(score==13 || score==23 || score==33)
 +
{
 +
digested(score);
 +
}
 +
$(".droppable1").droppable( "disable" );
 +
}
 +
  }
 +
});
 +
 +
 +
$(".droppable2").droppable({ accept: '.draggable' },{
 +
  drop: function(ev, ui) {
 +
  if($(ui.draggable).attr("id")=="scissor4")
 +
  {
 +
$("#img4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/spe.gif' width='60px' />");
 +
score=score+10;
 +
 +
if(score>10)
 +
{
 +
if (score<14) {digested(score);}
 +
}
 +
$(".droppable2").droppable( "disable" );
 +
}
 +
 +
  if($(ui.draggable).attr("id")=="scissor2")
 +
  {
 +
$("#img4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/not2.gif' width='60px' />");
 +
score=score+20;
 +
 +
if(score>20)
 +
{
 +
if (score<24) {digested(score);}
 +
}
 +
$(".droppable2").droppable( "disable" );
 +
}
 +
 +
  if($(ui.draggable).attr("id")=="scissor5")
 +
  {
 +
$("#img4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/pst.gif' width='60px' />");
 +
score=score+30;
 +
if(score>30)
 +
{
 +
if (score<34) {digested(score);}
 +
}
 +
$(".droppable2").droppable( "disable" );
 +
}
 +
 +
  }
 +
});
 +
 +
function digested(a)
 +
{
 +
 +
if (flavor=="miraculin")
 +
{
 +
if(a==11)
 +
{
 +
var insert="mirecospe.gif";
 +
var enzymes="EcoI and SpeI";
 +
}
 +
 +
else if(a==21)
 +
{
 +
var insert="mireconot.gif";
 +
var enzymes="EcoI and NotI";
 +
}
 +
 +
else if(a==31)
 +
{
 +
var insert="mirecopst.gif";
 +
var enzymes="EcoI and PstI";
 +
}
 +
 +
else if(a==12)
 +
{
 +
var insert="mirnotspe.gif";
 +
var enzymes="NotI and SpeI";
 +
}
 +
 +
else if(a==22)
 +
{
 +
var insert="mirnotnot.gif";
 +
var enzymes="NotI on both sides of the miraculin gene";
 +
}
 +
 +
else if(a==32)
 +
{
 +
var insert="mirnotpst.gif";
 +
var enzymes="NotI and PstI";
 +
}
 +
 +
else if(a==13)
 +
{
 +
var insert="xbaspe.gif";
 +
var enzymes="XbaI and SpeI";
 +
}
 +
 +
else if(a==23)
 +
{
 +
var insert="xbanot.gif";
 +
var enzymes="XbaI and NotI";
 +
}
 +
 +
else if(a==33)
 +
{
 +
var insert="xbapst.gif";
 +
var enzymes="XbaI and PstI";
 +
}
 +
}
 +
 +
else if (flavor=="brazzein")
 +
{
 +
if(a==11)
 +
{
 +
var insert="brazes.gif";
 +
var enzymes="EcoI and SpeI";
 +
}
 +
 +
else if(a==21)
 +
{
 +
var insert="brazen.gif";
 +
var enzymes="EcoI and NotI";
 +
}
 +
 +
else if(a==31)
 +
{
 +
var insert="brazep.gif";
 +
var enzymes="EcoI and PstI";
 +
}
 +
 +
else if(a==12)
 +
{
 +
var insert="brazns.gif";
 +
var enzymes="NotI and SpeI";
 +
}
 +
 +
else if(a==22)
 +
{
 +
var insert="braznn.gif";
 +
var enzymes="NotI on both sides of the miraculin gene";
 +
}
 +
 +
else if(a==32)
 +
{
 +
var insert="braznp.gif";
 +
var enzymes="NotI and PstI";
 +
}
 +
 +
else if(a==13)
 +
{
 +
var insert="brazxs.gif";
 +
var enzymes="XbaI and SpeI";
 +
}
 +
 +
else if(a==23)
 +
{
 +
var insert="brazxn.gif";
 +
var enzymes="XbaI and NotI";
 +
}
 +
 +
else if(a==33)
 +
{
 +
var insert="brazxp.gif";
 +
var enzymes="XbaI and PstI";
 +
}
 +
}
 +
 +
 +
$("#digested").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/"+ insert +"' width='250px' />");
 +
$(".droppable2").delay(300).fadeOut("slow");
 +
$(".droppable1").delay(300).fadeOut("slow");
 +
$(".enz").delay(300).fadeOut("slow");
 +
$(".draggable").delay(300).fadeOut("slow");
 +
$(".plasmid").delay(300).fadeOut("slow");
 +
$("#description1").delay(300).fadeOut("slow").html("You digested with " + enzymes).fadeIn("slow");
 +
$("#digested").delay(300).fadeIn(2500);
 +
$(".description2").delay(300).html("digest the vector backbone >>>").fadeIn("slow");
 +
}
 +
 +
var des2=1;
 +
      $(".description2").click(function () {
 +
     
 +
      if(des2==1)
 +
      {
 +
$("#img4").fadeOut("slow");
 +
$(".description2").animate({right:"0px"});
 +
$("#digested").animate({left:"7px",top:"50px",opacity:.7});
 +
$("#description1").fadeOut("fast").delay(1000).html("The mirculin gene that you cut out does not include a promoter or terminator. You need to insert the gene into the iGarden V9 plasmid. The V9 plasmid contains a promoter and a terminator surrounding restriction enzyme sites. First, you need to digest the V9 plasmid so that it's ready for the insertion of the miraculin gene.").fadeIn("slow");
 +
$("#V9bb").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/V9bb.gif' width='270px' />").fadeIn("slow");
 +
$("#bbmcs").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/bbmcs.gif' width='70px' />").fadeIn("slow");
 +
 +
if (score==11)
 +
{
 +
$("#enz1").fadeIn("slow");
 +
$("#scissor1").css({top:"300px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz4").fadeIn("slow");
 +
$("#scissor4").css({top:"300px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==21)
 +
{
 +
$("#enz1").fadeIn("slow");
 +
$("#scissor1").css({top:"300px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz2").fadeIn("slow");
 +
$("#scissor2").css({top:"350px",left:"350px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==31)
 +
{
 +
$("#enz1").fadeIn("slow");
 +
$("#scissor1").css({top:"300px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz5").fadeIn("slow");
 +
$("#scissor5").css({top:"350px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
-
</html>
+
if (score==12)
 +
{
 +
$("#enz2").fadeIn("slow");
 +
$("#scissor2").css({top:"350px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz4").fadeIn("slow");
 +
$("#scissor4").css({top:"300px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==22)
 +
{
 +
$("#enz2").fadeIn("slow");
 +
$("#scissor2").css({top:"350px",left:"350px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==32)
 +
{
 +
$("#enz2").fadeIn("slow");
 +
$("#scissor2").css({top:"350px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz5").fadeIn("slow");
 +
$("#scissor5").css({top:"350px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
 +
 
 +
if (score==13)
 +
{
 +
$("#enz3").fadeIn("slow");
 +
$("#scissor3").css({top:"400px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz4").fadeIn("slow");
 +
$("#scissor4").css({top:"300px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==23)
 +
{
 +
$("#enz3").fadeIn("slow");
 +
$("#scissor3").css({top:"400px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz2").fadeIn("slow");
 +
$("#scissor2").css({top:"350px",left:"350px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
else if (score==33)
 +
{
 +
$("#enz3").fadeIn("slow");
 +
$("#scissor3").css({top:"400px",left:"350px","z-index":5}).fadeIn("slow");
 +
$("#enz5").fadeIn("slow");
 +
$("#scissor5").css({top:"350px",left:"550px","z-index":5}).fadeIn("slow");
 +
}
 +
 +
score=0;
 +
des2=2;
 +
 +
}
 +
 +
else if(des2==2)
 +
{
 +
$("#tube").fadeOut("fast");
 +
$("#heatshock").fadeOut("fast");
 +
$("#description1").fadeOut("fast").delay(1000).html("Plate your E. coli").fadeIn("fast");
 +
$(".description2").animate({right:"0px"});
 +
$("#ecoli").fadeOut("fast");
 +
$("#V9andinsert").fadeOut("fast");
 +
$("#petridish").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/petridish.png' width='200px' />").fadeIn("slow").draggable({containment: 'window'});
 +
$("#ecolitransformed1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecoli.gif' width='50px' />").fadeIn("slow").draggable({containment: 'window'});
 +
$("#ecolitransformed2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='50px' />").fadeIn("slow").draggable({containment: 'window'});
 +
$("#ecolitransformed3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecoli.gif' width='50px' />").fadeIn("slow").draggable({containment: 'window'});
 +
$("#ecolitransformed4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='50px' />").fadeIn("slow").draggable({containment: 'window'});
 +
$("#ecolitransformed5").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='50px' />").fadeIn("slow").draggable({containment: 'window'});
 +
des2=3;
 +
}
 +
 +
else if(des2==3)
 +
{
 +
$("#description1").fadeOut("fast").delay(800).html("Pick a colony and put in the culture tube").fadeIn("fast");
 +
$(".description2").animate({right:"0px"});
 +
$("#bigtube").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/bigtube.png' width='45px' />").fadeIn("slow");
 +
$(".ecoli").draggable({disabled:false, containment: 'window'});
 +
des2=4;
 +
}
 +
 +
else if(des2==4)
 +
{
 +
$("#description1").fadeOut("fast").delay(800).html("Next you obtain your plasmid from the E. coli").fadeIn("fast");
 +
$(".description2").animate({right:"0px"});
 +
$("#bigtube").fadeOut("slow");
 +
$("#ecolismall1").fadeOut("slow");
 +
$("#ecolismall2").fadeOut("slow");
 +
$("#ecolismall3").fadeOut("slow");
 +
$("#ecolismall4").fadeOut("slow");
 +
$("#ecolismall5").fadeOut("slow");
 +
$("#ecolismall6").fadeOut("slow");
 +
$("#ecolismall7").fadeOut("slow");
 +
$("#ecoli2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='175px' />").fadeIn().delay(1000).hide("explode", 1000);
 +
if (flavor=="miraculin")
 +
{
 +
$("#V9andinsert").css({left:"220px",top:"200px"}).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculininserted.gif' width='175px' />").delay(1500).fadeIn("fast");
 +
}
 +
if (flavor=="brazzein")
 +
{
 +
$("#V9andinsert").css({left:"220px",top:"200px"}).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/brazzeininserted.gif' width='175px' />").delay(1500).fadeIn("fast");
 +
}
 +
$(".description3").delay(1300).html("insert into agrobacterium >>>").fadeIn("slow");
 +
}
 +
 +
});
 +
 +
 +
 +
var des3=1;
 +
 +
      $(".description3").click(function () {
 +
     
 +
      if(des3==1)
 +
      {
 +
$(".description3").animate({right:"0px"}).fadeOut("slow");
 +
$("#description1").fadeOut("fast").delay(1000).html("Put the plasmid and agrobacterium into the cuvette").fadeIn("fast");
 +
$("#agro").fadeIn("slow").draggable({containment: 'window'});
 +
$("#cuvette").fadeIn("slow");
 +
$("#V9andinsert").draggable({disabled:false, containment: 'window'});
 +
des3=2;
 +
}
 +
 +
else if(des3==2)
 +
{
 +
$(".description3").animate({right:"0px"}).fadeOut("slow");
 +
$("#agro2").fadeIn("slow");
 +
$("#cuvette").animate({opacity:.3});
 +
$(".description4").delay(2800).html("plate agrobacteria >>>").css({right:"600px"}).fadeIn("slow");
 +
if (flavor=="miraculin")
 +
{
 +
$("#V9andinsert").draggable({ disabled: true }).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculininserted.gif' width='75px' />").css({"left":"100px","top":"200px","z-index":20}).fadeIn("slow").animate({"left":"327px","top":"340px"},3000);
 +
}
 +
else if (flavor=="brazzein")
 +
{
 +
$("#V9andinsert").draggable({ disabled: true }).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/brazzeininserted.gif' width='75px' />").css({"left":"100px","top":"200px","z-index":20}).fadeIn("slow").animate({"left":"327px","top":"340px"},3000);
 +
}
 +
des3=3;
 +
}
 +
 +
});
 +
 
 +
var des4=1;
 +
      $(".description4").click(function () {
 +
      if(des4==1)
 +
      {
 +
$("#cuvette").fadeOut("fast");
 +
$("#description1").fadeOut("fast").delay(800).html("Plate your agrobacteria").fadeIn("fast");
 +
$(".description4").animate({right:"0px"});
 +
$("#agro2").fadeOut("fast");
 +
$("#V9andinsert").fadeOut("fast");
 +
$("#petridish2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/petridish.png' width='200px' />").fadeIn("slow");
 +
$("#agrotransformed1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/agrobacterium.png' width='50px' />").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
$("#agrotransformed2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/agromir.png' width='50px' />").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
$("#agrotransformed3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/agrobacterium.png' width='50px' />").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
$("#agrotransformed4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/agromir.png' width='50px' />").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
$("#agrotransformed5").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/agromir.png' width='50px' />").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
des4=2;
 +
}
 +
 +
else if(des4==2)
 +
{
 +
$("#petridish3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/petridish.png' width='200px' />").fadeIn("slow");
 +
$(".description4").animate({right:"0px"});
 +
$("#description1").fadeOut("fast").delay(1000).html("Pick one of the colonies and tranfer to the other petri dish to create a lawn plate.").fadeIn("fast");
 +
$(".agro").draggable({disabled:false, containment: 'window'});
 +
}
 +
 
 +
});
 +
 +
 +
 +
 +
 +
var mixcount2=0;
 +
 +
$("#cuvette").droppable({ accept: '.draggable2' },{
 +
  drop: function(ev, ui) {
 +
$(ui.draggable).fadeOut("fast");
 +
mixcount2=mixcount2+1;
 +
 +
if (mixcount2==2)
 +
{
 +
$("#description1").fadeOut("fast").delay(1000).html("To make the agrobacteria take in the plasmid you need to give them an electric shock. This process is called electroporation.").fadeIn(2100);
 +
$(".description3").html("electroporate agrobacteria >>>").css({right:"600px"}).fadeIn("slow");
 +
}
 +
}});
 +
 +
var petri3=1;
 +
 +
$("#petridish3").droppable({ accept: '.agro' },{
 +
  drop: function(ev, ui) {
 +
  if(petri3==1)
 +
  {
 +
$(".agro").fadeOut("slow").draggable({ disabled: true });
 +
$("#petridish2").fadeOut("slow");
 +
$("#petridish3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/lawn.png' width='200px' />").fadeIn("slow");
 +
$("#flower").fadeIn("slow").draggable({disabled:false, containment: 'window'});
 +
$("#description1").fadeOut("fast").delay(1000).html("Dip the flower in the agrobacteria to carry out the transformation.").fadeIn("slow");
 +
petri3=2;
 +
}
 +
else if(petri3==2)
 +
{
 +
$("#petridish2").fadeOut("slow");
 +
$("#flower").fadeOut("slow");
 +
$("#petridish3").fadeOut("slow");
 +
$("#pot").fadeIn("slow");
 +
$("#seed").fadeIn("slow").draggable({containment: 'window'});
 +
$("#description1").fadeOut("fast").delay(1000).html("Some of the plant's seeds are transgenic. Plant the seed to grow a plant that expresses miraculin.").fadeIn("slow");
 +
}
 +
 +
}});
 +
 +
 
 +
$("#pot").droppable({ accept: '#seed' },{
 +
  drop: function(ev, ui) {
 +
$("#description1").fadeOut("fast").delay(1000).html("A few weeks later...").fadeIn("slow");
 +
$("#seed").fadeOut("slow");
 +
$("#plant").delay(1500).fadeIn("slow");
 +
$("#pot").delay(1500).fadeOut("slow");
 +
}});
 +
 
 +
 +
 +
$(".droppable3").droppable({ accept: '.draggable' },{
 +
  drop: function(ev, ui) {
 +
  if($(ui.draggable).attr("id")=="scissor1")
 +
  {
 +
$("#cut1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecocut.gif' width='60px' />").fadeIn("slow");
 +
score=score+1;
 +
  }
 +
 +
  if($(ui.draggable).attr("id")=="scissor2")
 +
  {
 +
$("#cut1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/notcut.gif' width='60px' />").fadeIn("slow");
 +
score=score+2;
 +
  }
 +
 +
  if($(ui.draggable).attr("id")=="scissor3")
 +
  {
 +
$("#cut1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/xbacut.gif' width='60px' />").fadeIn("slow");
 +
score=score+3;
 +
  }
 +
 
 +
  if($(ui.draggable).attr("id")=="scissor4")
 +
  {
 +
$("#cut2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/specut.gif' width='60px' />").fadeIn("slow");
 +
score=score+10;
 +
  }
 +
 +
  if($(ui.draggable).attr("id")=="scissor5")
 +
  {
 +
$("#cut2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/pstcut.gif' width='60px' />").fadeIn("slow");
 +
score=score+30;
 +
  }
 +
 
 +
if (score==11||score==12||score==13||score==21||score==20||score==23||score==31||score==32||score==33)
 +
{
 +
$(".droppable3").droppable( "disable" );
 +
$(".draggable").fadeOut("slow");
 +
$(".enz").fadeOut("slow");
 +
$(".droppable3").fadeOut("slow");
 +
$("#V9bb").fadeOut("slow");
 +
 +
if (score==11)
 +
{
 +
$("#V9bbcut").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/V9bbecospe.gif' width= '270px'/>").fadeIn(2100);
 +
$("#description1").fadeOut("fast").delay(1000).html("You digested the V9 with EcoRI and SpeI. Drag the miraculin insert over the vector backbone to carry out the ligation.").fadeIn(2100);
 +
$("#digested").css({"z-index":100,cursor:"grab",cursor:"-moz-grab"}).animate({opacity:1}).draggable({containment: 'window'});
 +
}
 +
 +
if (score==31)
 +
{
 +
$("#V9bbcut").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/V9bbecopst.gif' width= '270px'/>").fadeIn(2100);
 +
$("#description1").fadeOut("fast").delay(1000).html("You digested the V9 plasmid with EcoRI and PstI. Drag the miraculin insert over the vector backbone to carry out the ligation.").fadeIn(2100);
 +
$("#digested").css({"z-index":100,cursor:"grab",cursor:"-moz-grab"}).animate({opacity:1}).draggable({containment: 'window'});
 +
}
 +
 +
if (score==13)
 +
{
 +
$("#V9bbcut").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/V9bbxbaspe.gif' width= '270px'/>").fadeIn(2100);
 +
$("#description1").fadeOut("fast").delay(1000).html("You digested the V9 with XbaI and SpeI. Drag the miraculin insert over the vector backbone to carry out the ligation.").fadeIn(2100);
 +
$("#digested").css({"z-index":100,cursor:"grab",cursor:"-moz-grab"}).animate({opacity:1}).draggable({containment: 'window'});
 +
}
 +
 +
if (score==33)
 +
{
 +
$("#V9bbcut").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/V9bbxbapst.gif' width= '270px'/>").fadeIn(2100);
 +
$("#description1").fadeOut("fast").delay(1000).html("You digested the V9 plasmid with XbaI and PstI. Drag the miraculin insert over the vector backbone to carry out the ligation.").fadeIn(2100);
 +
$("#digested").css({"z-index":100,cursor:"grab",cursor:"-moz-grab"}).animate({opacity:1}).draggable({containment: 'window'});
 +
}
 +
 +
}
 +
 +
  }
 +
});
 +
 +
$("#V9bbcut").droppable({ accept: '#digested' },{
 +
  drop: function(ev, ui) {
 +
$("#description1").fadeOut("fast").delay(1000).html("Your ligation was successful. Open the tube and add the plasmid and the E. coli.").fadeIn(2100);
 +
$("#V9bbcut").fadeOut("slow");
 +
$("#digested").fadeOut("slow");
 +
$("#tube").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/tubeclosed.png' />").fadeIn("slow");
 +
if (flavor=="miraculin")
 +
{
 +
$("#V9andinsert").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculininserted.gif' width='150px' />").fadeIn("slow");
 +
}
 +
else if (flavor=="brazzein")
 +
{
 +
$("#V9andinsert").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/brazzeininserted.gif' width='150px' />").fadeIn("slow");
 +
}
 +
$("#ecoli").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecoli.gif' width='80px' />").fadeIn("slow");
 +
}});
 +
 +
var firstopen=1;
 +
 +
      $("#tube").click(function () {
 +
      if (firstopen==1)
 +
      {
 +
$("#tube").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/tube.png' />");
 +
$("#V9andinsert").draggable({containment: 'window'});
 +
$("#ecoli").draggable({containment: 'window'});
 +
firstopen=0;
 +
}
 +
});
 +
 
 +
var mixcount=0;
 +
 +
$("#tube").droppable({ accept: '.draggable2' },{
 +
  drop: function(ev, ui) {
 +
$(ui.draggable).fadeOut("fast");
 +
mixcount=mixcount+1;
 +
 +
if (mixcount==2)
 +
{
 +
$("#tube").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/tubeclosed.png' />");
 +
$("#description1").fadeOut("fast").delay(1000).html("Heat shock the E. coli to make them take in the plasmid.").fadeIn(2100);
 +
$("#tube").draggable({containment: 'window'});
 +
$("#heatshock").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/heatshock.png' width='320px' />").fadeIn("slow");
 +
}
 +
}});
 +
 
 +
 
 +
 
 +
$("#heatshock").droppable({ accept: '#tube' },{
 +
  drop: function(ev, ui) {
 +
$("#tube").animate({opacity:0.3}).draggable({ disabled: true });
 +
$("#heatshock").animate({opacity:0.3});
 +
 +
if (flavor=="miraculin")
 +
{
 +
$("#V9andinsert").draggable({ disabled: true }).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/miraculininserted.gif' width='75px' />").css({"left":"100px","top":"200px","z-index":20}).fadeIn("slow").animate({"left":"225px","top":"300px"},3000);
 +
}
 +
 +
else if (flavor=="brazzein")
 +
{
 +
$("#V9andinsert").draggable({ disabled: true }).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/brazzeininserted.gif' width='75px' />").css({"left":"100px","top":"200px","z-index":20}).fadeIn("slow").animate({"left":"225px","top":"300px"},3000);
 +
}
 +
 +
$("#ecoli").draggable({ disabled: true }).html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecoli.gif' width='150px' />").css({"left":"200px","top":"200px"}).fadeIn("slow");
 +
$("#description1").fadeOut("fast").delay(1000).html("Inside the tube...").fadeIn("fast");
 +
$(".description2").css({top:"450px",right:"600px"}).html("plate your transformed cells >>>").fadeIn("slow");
 +
}});
 +
 
 +
var cellcount=1;
 +
 
 +
$("#petridish").droppable({ accept: '.ecoli' },{
 +
  drop: function(ev, ui) {
 +
if (cellcount==5)
 +
  {
 +
$(".ecoli").draggable({ disabled: true });
 +
$("#ecolitransformed1").fadeOut(2000);
 +
$("#ecolitransformed3").fadeOut(2000);
 +
$("#description1").fadeOut("fast").delay(1000).html("E. coli without the plasmid are killed by antibiotics on the plate").fadeIn("fast");
 +
$(".description2").css({top:"450px",right:"600px"}).html("make cultures >>>").fadeIn("slow");
 +
}
 +
cellcount=cellcount+1;
 +
  $(ui.draggable).draggable({ disabled: true });
 +
}});
 +
 +
 +
var agrocount=1;
 +
$("#petridish2").droppable({ accept: '.agro' },{
 +
  drop: function(ev, ui) {
 +
if (agrocount==5)
 +
  {
 +
$(".agro").draggable({ disabled: true });
 +
$("#agrotransformed1").fadeOut(2000);
 +
$("#agrotransformed3").fadeOut(2000);
 +
$("#description1").fadeOut("fast").delay(1000).html("Agrobacteria without the plasmid are killed by antibiotics on the plate").fadeIn("fast");
 +
$(".description4").css({top:"450px",right:"600px"}).html("make lawn plates >>>").fadeIn("slow");
 +
}
 +
agrocount=agrocount+1;
 +
  $(ui.draggable).draggable({ disabled: true });
 +
}});
 +
 
 +
 +
 +
 
 +
$("#bigtube").droppable({ accept: '.ecoli' },{
 +
  drop: function(ev, ui) {
 +
$("#ecolitransformed2").fadeOut("slow");
 +
$("#ecolitransformed4").fadeOut("slow");
 +
$("#ecolitransformed5").fadeOut("slow");
 +
$("#petridish").fadeOut("slow");
 +
$("#description1").fadeOut("fast").delay(1000).html("The cells multiply").fadeIn("fast");
 +
$(".ecoli").draggable({ disabled: true });
 +
$("#ecolismall1").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall2").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall3").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall4").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall5").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall6").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$("#ecolismall7").html("<img src='http://www.hcs.harvard.edu/usundergrad/test/ecolimir.png' width='10px' />").fadeIn("slow");
 +
$(".description2").css({top:"450px",right:"600px"}).html("obtain DNA >>>").fadeIn("slow");
 +
}});
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 +
  });
 +
 
 +
 
 +
 
 +
</script> 
 +
   
 +
<div id="newbody">
 +
            <div id="green" class="option1">add flavor</div>
 +
            <div id="blue" class="option2">add color</div>
 +
            <div id="red" class="option3">knockdown<br />allergen</div>
 +
            <div class="logo"><img src="http://www.hcs.harvard.edu/usundergrad/test/igemlogo.gif" height="170px"/></div>
 +
            <div class="suboption1" id="blue"></div>
 +
            <div class="suboption2" id="blue"></div>
 +
            <div id="photo"><img src="http://www.hcs.harvard.edu/usundergrad/test/plantphoto.png" width="550px"/></div>
 +
            <div id="bar"></div>
 +
            <div id="description1">The DNA sequence that codes for the miraculin protein is kept in the V0120 vector. The miraculin gene is bordered on both sides by restriction enzyme sites. Drag enzymes over the restriction enzyme sites to cut the gene out of the vector.</div>
 +
            <div class="description2"></div>
 +
            <div class="description3"></div>
 +
            <div class="description4"></div>
 +
            <div id="img1" class="plasmid"></div>
 +
            <div id="img2" class="plasmid"></div>
 +
            <div id="img3" class='droppable1'></div>
 +
            <div id="img4" class='droppable2'></div>
 +
            <div id="enz1" class="enz">EcoRI (E)</div>
 +
            <div id="enz2" class="enz">NotI (N)</div>
 +
            <div id="enz3" class="enz">XbaI (X)</div>
 +
            <div id="enz4" class="enz">SpeI (S)</div>
 +
            <div id="enz5" class="enz">PstI (P)</div>
 +
            <div id="scissor1" class="draggable"></div>
 +
            <div id="scissor3" class="draggable"></div>
 +
            <div id="scissor2" class="draggable"></div>
 +
            <div id="scissor4" class="draggable"></div>
 +
            <div id="scissor5" class="draggable"></div>
 +
<div id="digested"></div>
 +
<div id="V9bb"></div>
 +
<div id="bbmcs" class="droppable3"></div>
 +
<div id="cut1"></div>
 +
<div id="cut2"></div>
 +
<div id="V9bbcut"></div>
 +
<div id="tube"></div>
 +
<div id="V9andinsert" class="draggable2"></div>
 +
<div id="ecoli" class="draggable2"></div>
 +
<div id="heatshock"></div>
 +
<div id="petridish"></div>
 +
<div id="petridish2"></div>
 +
<div id="petridish3"></div>
 +
<div id="ecolitransformed1" class="ecoli"></div>
 +
<div id="ecolitransformed2" class="ecoli"></div>
 +
<div id="ecolitransformed3" class="ecoli"></div>
 +
<div id="ecolitransformed4" class="ecoli"></div>
 +
<div id="ecolitransformed5" class="ecoli"></div>
 +
<div id="agrotransformed1" class="agro"></div>
 +
<div id="agrotransformed2" class="agro"></div>
 +
<div id="agrotransformed3" class="agro"></div>
 +
<div id="agrotransformed4" class="agro"></div>
 +
<div id="agrotransformed5" class="agro"></div>
 +
<div id="ecolismall1" class="ecolismall"></div>
 +
<div id="ecolismall2" class="ecolismall"></div>
 +
<div id="ecolismall3" class="ecolismall"></div>
 +
<div id="ecolismall4" class="ecolismall"></div>
 +
<div id="ecolismall5" class="ecolismall"></div>
 +
<div id="ecolismall6" class="ecolismall"></div>
 +
<div id="ecolismall7" class="ecolismall"></div>
 +
<div id="bigtube"></div>
 +
<div id="ecoli2"></div>
 +
<div id="agro" class="draggable2"><img src="http://www.hcs.harvard.edu/usundergrad/test/agrobacterium.png" width="60px" /></div>
 +
<div id="agro2" class="draggable2"><img src="http://www.hcs.harvard.edu/usundergrad/test/agrobacterium.png" width="160px" /></div>
 +
<div id="cuvette"><img src="http://www.hcs.harvard.edu/usundergrad/test/cuvette.png" width="60px" /></div>
 +
<div id="flower" class="agro"><img src="http://www.hcs.harvard.edu/usundergrad/test/flower.png" width="70px" /></div>
 +
<div id="pot"><img src="http://www.hcs.harvard.edu/usundergrad/test/pot.png" width="160px" /></div>
 +
<div id="plant"><img src="http://www.hcs.harvard.edu/usundergrad/test/plant.png" width="160px" /></div>
 +
<div id="seed"><img src="http://www.hcs.harvard.edu/usundergrad/test/seed.png" width="40px" /></div>
 +
 
 +
    </div>
 +
<script type="text/javascript">
 +
var nb = document.getElementById("newbody");
 +
var gw = document.getElementById("globalWrapper");
 +
document.body.replaceChild(nb,gw);
 +
var newCss = document.createElement("link");
 +
newCss.type="text/css";
 +
newCss.href="http://www.hcs.harvard.edu/usundergrad/test/css.css";
 +
newCss.rel="stylesheet";
 +
newCss.media="screen";
 +
document.getElementsByTagName("head")[0].appendChild(newCss);
 +
</script>

Latest revision as of 20:58, 2 August 2010

add flavor
add color
knockdown
allergen
The DNA sequence that codes for the miraculin protein is kept in the V0120 vector. The miraculin gene is bordered on both sides by restriction enzyme sites. Drag enzymes over the restriction enzyme sites to cut the gene out of the vector.
EcoRI (E)
NotI (N)
XbaI (X)
SpeI (S)
PstI (P)

Retrieved from "http://2010.igem.org/Team:Harvard/virtual"