|
|
| (19 intermediate revisions by the same user not shown) |
| Line 2: |
Line 2: |
| | <head> | | <head> |
| | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| − | <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Newcastle/libs/HP/Simulator.css?action=raw&ctype=text/css" /> | + | <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Newcastle/libs/HP/Simulator-css?action=raw&ctype=text/css" /> |
| | <script src="https://2016.igem.org/Team:Newcastle/libs/jquery-1124-js?action=raw&ctype=text/javascript"></script> | | <script src="https://2016.igem.org/Team:Newcastle/libs/jquery-1124-js?action=raw&ctype=text/javascript"></script> |
| | <script src="https://2016.igem.org/Team:Newcastle/libs/jquery-ui-1120-js?action=raw&ctype=text/javascript"></script> | | <script src="https://2016.igem.org/Team:Newcastle/libs/jquery-ui-1120-js?action=raw&ctype=text/javascript"></script> |
| | + | <script src="https://2016.igem.org/Team:Newcastle/libs/HP/js-js?action=raw&ctype=text/javascript"></script> |
| | </head> | | </head> |
| | <style> | | <style> |
| Line 14: |
Line 15: |
| | background-color: #F1594B; | | background-color: #F1594B; |
| | } | | } |
| − | body {background-color:#2C235A; } | + | body { background-color: #FFBDA9; } |
| | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| | /* ... */ | | /* ... */ |
| Line 24: |
Line 25: |
| | font-weight: normal; | | font-weight: normal; |
| | font-style: normal; | | font-style: normal; |
| | + | } |
| | + | |
| | + | #globalWrapper, #content, body |
| | + | { |
| | + | background-color: #FFBDA9; |
| | } | | } |
| | </style> | | </style> |
| − | <script>
| |
| − | function init() {
| |
| − | var a = document.getElementById("levelOneAppear");
| |
| − | $(a).css("display", "block");
| |
| − | $('.component').draggable({
| |
| − | //containment: "#breadboard",
| |
| − | cursor: "move", // stop: stopHandler,
| |
| − | // drag: dragHandler,
| |
| − | helper: "clone"
| |
| − | });
| |
| − | $('#batterydrop').droppable({
| |
| − | drop: batteryHandler
| |
| − | });
| |
| − | $('#bulbdrop').droppable({
| |
| − | drop: bulbHandler
| |
| − | });
| |
| − | $('#wiredrop').droppable({
| |
| − | drop: wireHandler
| |
| − | });
| |
| − | $('#turbinedrop').droppable({
| |
| − | drop: turbineHandler
| |
| − | });
| |
| − | $('#applicationsdrop').droppable({
| |
| − | drop: turbineHandler
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | var states = {
| |
| − | LEVEL_ONE: 0
| |
| − | , LEVEL_TWO: 6
| |
| − | , LEVEL_THREE: 12
| |
| − | , LEVEL_FOUR: 19
| |
| − | , LEVEL_FIVE: 23
| |
| − | }
| |
| − | var passwordbase4 = 312;
| |
| − | var gbl_state = states.LEVEL_ONE;
| |
| − | var gbl_txtix = 0;
| |
| − | var helpTxt = [
| |
| − | 'Welcome to Level 1'
| |
| − | , 'Drag and drop a lightbulb and battery to form a basic circuit.'
| |
| − | , 'Change the voltage to make the lightbulb brighter or dimmer.'
| |
| − | , 'Now bin the lightbulb, and drag and drop the bacterial lightbulb instead.'
| |
| − | , 'Like before, change the voltage to make the bacterial lightbulb brighter or dimmer.'
| |
| − | , 'Oops! The e.coli used in the bulb have died. This has upset the e.coli activists who feel there should be rights for bacteria. Click next to find out more.'
| |
| − | , 'Welcome to Level 2'
| |
| − | , 'Drag and drop electrical wires to connect the transmitter to mission control'
| |
| − | , 'Part of the wires have broken and there are not enough processed materials on board to fix the problem. This means that communication to Earth has been lost.'
| |
| − | , 'Drag and drop the neuron wires instead. Neurons have self healing capabilities so they should repair parts of the wire that break without the need for processed materials.'
| |
| − | , 'Oh no! Something is wrong with the neuron wires! Try adding a feature so that the neurons can tell you what the problem is.'
| |
| − | , 'It seems that the high levels of radiation and vibration from the rocket have made the neurons ill. Click next to find out more.'
| |
| − | , 'Welcome to Level 3'
| |
| − | , 'On less windy days, turbines use electrical power to help initiate movement of the turbine. Fuel cells could be a possible substitute for replacing the non-renewable power needed to do this. Drag and drop a fuel cell containing genetically engineered e.coli.'
| |
| − | , 'Unfortunately, the e.coli fuel cell has not generated enough power to start the turbine. Bin the e.coli fuel cell'
| |
| − | , 'Drag and drop the fuel cell containing insect cells instead.'
| |
| − | , 'Unfortunately, the insect fuel cell has not generated enough power to start the turbine. Bin the insect fuel cell'
| |
| − | , 'Drag and drop the fuel cell containing cat tissue.'
| |
| − | , 'The cat cell has not generated enough power to start the turbine either. The idea of binning a fuel cell containing cats might upset you, how far are you willing to go? Click next to find out more about disposal of cells and the ethics surrounding it'
| |
| − | , 'Welcome to Level 4'
| |
| − | , 'Click on the 3D printer to print a 3D heart, and then drag and drop it into the circuit to power a kidney dialysis machine'
| |
| − | , 'Click on the 3D printer to print another 3D heart, and drag and drop it into the circuit to power a video game'
| |
| − | , 'In July, Newcastle iGEM 2016 ran a sixth formers day where they asked students about the application of cells. Click next to find out more'
| |
| − | , 'Welcome to Level 5'
| |
| − | , 'Oh look! Bob has sent a message! Click open to find out what he says.'
| |
| − | , 'Bob wants you to tell him your name, click reply to respond to his email'
| |
| − | , 'Type your name in the box, and we will send your name via Edinburgh iGEM 2016 Babbled system.'
| |
| − | , 'Press find to search the word library and assign a number to your name.'
| |
| − | , 'As you can see below, We have converted the base 10 value of your name to base 4'
| |
| − | , 'The password previously agreed with Bob is "MagicFish". MagicFish has a value of 54 in base 10. In base 4, this converts to 312.'
| |
| − | , 'In order to send your encypted message, we have to XOR the base 4 values for your name and the password'
| |
| − | , 'Babbled stores base 4 values so that each digit represents a base'
| |
| − | , 'Press send to tell Billy your name'
| |
| − | , 'Oh no! Your name has been intercepted by the e.coli activists! Luckily, they do not know the password to decrypt your message, so your message is safe. But imagine if they cracked your password... click next to find out more!'
| |
| − | ];
| |
| − | $(function () {
| |
| − | var spinner = $("#voltageSpinner").spinner();
| |
| − | $("#getvalue").on("click", function () {
| |
| − | currentVal = spinner.spinner("value");
| |
| − | if (batterybulbCombo === true) {
| |
| − | if (currentVal >= 30 && currentVal <= 40) {
| |
| − | console.log("Max bulb!");
| |
| − | $("#bulbdrop").css("background-image", "url('electricbulb_100on.png')");
| |
| − | }
| |
| − | else if (currentVal >= 5 && currentVal < 20) {
| |
| − | console.log("Low Bulb");
| |
| − | }
| |
| − | else if (currentVal >= 20 && currentVal < 30) {
| |
| − | console.log("Medium Bulb");
| |
| − | }
| |
| − | }
| |
| − | else if (bacteriafuelcellCombo === true) {
| |
| − | if (currentVal >= 30 && currentVal <= 40) {
| |
| − | console.log("Max Bacteria!");
| |
| − | $("#bulbdrop").css("background-image", "url('bacteriabulb_on100.png')");
| |
| − | }
| |
| − | else if (currentVal >= 5 && currentVal < 20) {
| |
| − | console.log("Low Bacteria");
| |
| − | }
| |
| − | else if (currentVal >= 20 && currentVal < 30) {
| |
| − | console.log("Medium Bacteria");
| |
| − | }
| |
| − | else if (currentVal === 40) {
| |
| − | console.log("Dead Bacteria");
| |
| − | }
| |
| − | }
| |
| − | console.log(spinner.spinner("value"));
| |
| − | });
| |
| − | });
| |
| − | Number.prototype.pad = function (size) {
| |
| − | var s = String(this);
| |
| − | while (s.length < (size || 2)) {
| |
| − | s = "0" + s;
| |
| − | }
| |
| − | return s;
| |
| − | }
| |
| − |
| |
| − | function TenToFour(number) {
| |
| − | var ix = 0;
| |
| − | var digits = [];
| |
| − | while (number != 0) {
| |
| − | var remainder = number % 4;
| |
| − | number = Math.floor(number / 4);
| |
| − | digits.push(remainder);
| |
| − | ix++;
| |
| − | }
| |
| − | digits.reverse();
| |
| − | var tmp = "";
| |
| − | //console.log(digits);
| |
| − | if (digits.length == 0) {
| |
| − | digits.push(0);
| |
| − | }
| |
| − | for (var i = 0; i < digits.length; i++) {
| |
| − | tmp += String(digits[i]);
| |
| − | }
| |
| − | return parseInt(tmp);
| |
| − | }
| |
| − |
| |
| − | function xor(num1, num2) {
| |
| − | // console.log("___XORing: " + String(num1) + " and " + String(num2));
| |
| − | return (4 - (num1 + num2) % 4) % 4;
| |
| − | }
| |
| − |
| |
| − | function encrypt(msg, key) {
| |
| − | var ary_msg = msg.pad(5).split("");
| |
| − | var ary_key = key.pad(5).split("");
| |
| − | return apply_xor(ary_msg, ary_key);
| |
| − | }
| |
| − |
| |
| − | function apply_xor(as, bs) {
| |
| − | if (as.length != bs.length) {
| |
| − | return NaN;
| |
| − | }
| |
| − | var tmp = [];
| |
| − | for (var i = 0; i < as.length; i++) {
| |
| − | //console.log("XORing: " + String(as[i]) + " and " + String(bs[i]));
| |
| − | var res = xor(parseInt(as[i]), parseInt(bs[i]));
| |
| − | console.log(res);
| |
| − | tmp.push(res);
| |
| − | }
| |
| − | return tmp;
| |
| − | }
| |
| − | var dna = "ATGC";
| |
| − |
| |
| − | function nToDNA(n) {
| |
| − | var str_n = n.toString();
| |
| − | var tmp = "";
| |
| − | for (var i = 0; i < str_n.length; i++) {
| |
| − | tmp += dna[parseInt(str_n[i])];
| |
| − | }
| |
| − | return tmp;
| |
| − | }
| |
| − |
| |
| − | function nxt() {
| |
| − | // alert("Test");
| |
| − | $("#levelOneAppear").text(helpTxt[gbl_txtix++]);
| |
| − | if (gbl_txtix >= states.LEVEL_TWO) {
| |
| − | $(".toolbox").hide();
| |
| − | }
| |
| − | else {
| |
| − | $(".toolbox").show();
| |
| − | }
| |
| − | if (gbl_txtix == 25) {
| |
| − | $("#onebutton").attr('value', 'Open');
| |
| − | $("#unopened").show();
| |
| − | }
| |
| − | else if (gbl_txtix == 26) {
| |
| − | $("#onebutton").attr('value', 'Reply');
| |
| − | $("#email").show();
| |
| − | $("#unopened").hide();
| |
| − | }
| |
| − | else if (gbl_txtix == 27) {
| |
| − | $("#onebutton").attr('value', 'Next');
| |
| − | $("#email").hide();
| |
| − | $("#unopened").hide();
| |
| − | }
| |
| − | else if (gbl_txtix == 28) {
| |
| − | $("#onebutton").attr('value', 'Find');
| |
| − | $("#email").hide();
| |
| − | console.log("gbl is " + gbl_txtix);
| |
| − | nameFunction();
| |
| − | }
| |
| − | //Display number associated with the name
| |
| − | else if (gbl_txtix == 29) {
| |
| − | displayRandNumber();
| |
| − | }
| |
| − | //Display base 4 of random number of the name
| |
| − | else if (gbl_txtix == 30) {
| |
| − | displayBase4OfName();
| |
| − | console.log("works");
| |
| − | }
| |
| − | //Display XOR
| |
| − | else if (gbl_txtix == 31) {
| |
| − | displayXOR();
| |
| − | }
| |
| − | //Display XOR result
| |
| − | else if (gbl_txtix == 32) {
| |
| − | displayXORResult();
| |
| − | }
| |
| − | else if (gbl_txtix == 33) {
| |
| − | $("#onebutton").attr('value', 'Send');
| |
| − | $("#email").hide();
| |
| − | $("#baseTable").hide();
| |
| − | $("#unopened").hide();
| |
| − | }
| |
| − | else {
| |
| − | $("#onebutton").attr('value', 'Next');
| |
| − | $("#email").hide();
| |
| − | $("#unopened").hide();
| |
| − | }
| |
| − | }
| |
| − | var randomnumber = generateNumber();
| |
| − | var base4Name = convertBaseFour();
| |
| − |
| |
| − | function showEmail() {
| |
| − | $("#email").show();
| |
| − | }
| |
| − |
| |
| − | function displayRandNumber() {
| |
| − | document.getElementById("displayNumber").innerHTML = randomnumber;
| |
| − | }
| |
| − |
| |
| − | function displayBase4OfName() {
| |
| − | document.getElementById("displayBase4Name").innerHTML = base4Name;
| |
| − | }
| |
| − |
| |
| − | function displayXOR() {
| |
| − | document.getElementById("displayXOR").innerHTML = base4Name + " XOR 312";
| |
| − | }
| |
| − |
| |
| − | function displayXORResult() {
| |
| − | document.getElementById("displayXORResult").innerHTML = " = " + printArray(encrypt(base4Name, 312));
| |
| − | }
| |
| − |
| |
| − | function printArray(array) {
| |
| − | var result = array.join("");
| |
| − | return result;
| |
| − | }
| |
| − |
| |
| − | function nameFunction() {
| |
| − | var person = prompt("Please enter your name");
| |
| − | if (person != null) {
| |
| − | document.getElementById("displayname").innerHTML = "Your name is " + person + "!";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function generateNumber() {
| |
| − | var randNum = Math.floor((Math.random() * 400) + 1);
| |
| − | console.log("rand num = " + randNum);
| |
| − | return randNum;
| |
| − | }
| |
| − |
| |
| − | function convertBaseFour() {
| |
| − | var base4 = parseInt(randomnumber.toString(), 4);
| |
| − | if (isNaN(base4)) {
| |
| − | console.log(0);
| |
| − | return 0;
| |
| − | }
| |
| − | console.log(base4);
| |
| − | return base4;
| |
| − | }
| |
| − |
| |
| − | function batteryHandler(event, ui) {
| |
| − | var draggable = ui.draggable;
| |
| − | if (draggable.attr('id') === "BATTERY") {
| |
| − | $("#batterydrop").css("background-image", "url('electricbattery.png')");
| |
| − | SpinnerActivation("Battery Confirmation");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "FUEL_CELL") {
| |
| − | $("#batterydrop").css("background-image", "url('fuelcell_empty.png')");
| |
| − | SpinnerActivation("Fuel Cell Confirmation");
| |
| − | }
| |
| − | else {
| |
| − | alert("This combination is not quite right. Try again");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function bulbHandler(event, ui) {
| |
| − | var draggable = ui.draggable;
| |
| − | if (draggable.attr('id') === "LIGHTBULB") {
| |
| − | $("#bulbdrop").css("background-image", "url('electricbulb_off.png')");
| |
| − | SpinnerActivation("Bulb Confirmation");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "BIOBULB") {
| |
| − | $("#bulbdrop").css("background-image", "url('bacteriabulb_off.png')");
| |
| − | SpinnerActivation("Bacteria Confirmation");
| |
| − | }
| |
| − | else {
| |
| − | alert("This combination is not quite right. Try again");
| |
| − | }
| |
| − | }
| |
| − | /** This makes the Spinner become enabled.
| |
| − | This method ensures that the Battery + Bulb or Bacteria + Fuel Cell are in place correctly, at which point it is correct to enable the voltage to be input. **/
| |
| − | var batteryConfirm;
| |
| − | var bulbConfirm;
| |
| − | var bacteriaConfirm;
| |
| − | var fuelcellConfirm;
| |
| − | var batterybulbCombo = false;
| |
| − | var bacteriafuelcellCombo;
| |
| − |
| |
| − | function SpinnerActivation(confirm) {
| |
| − | if (confirm === "Battery Confirmation") {
| |
| − | batteryConfirm = true;
| |
| − | }
| |
| − | else if (confirm === "Bulb Confirmation") {
| |
| − | bulbConfirm = true;
| |
| − | }
| |
| − | else if (confirm === "Fuel Cell Confirmation") {
| |
| − | fuelcellConfirm = true;
| |
| − | }
| |
| − | else if (confirm === "Bacteria Confirmation") {
| |
| − | bacteriaConfirm = true;
| |
| − | }
| |
| − | if (batteryConfirm && bulbConfirm) {
| |
| − | var spinner = $("#voltageSpinner").spinner();
| |
| − | spinner.spinner("enable");
| |
| − | batterybulbCombo = true;
| |
| − | bacteriafuelcellCombo = false;
| |
| − | }
| |
| − | if (fuelcellConfirm && bacteriaConfirm) {
| |
| − | var spinner = $("#voltageSpinner").spinner();
| |
| − | spinner.spinner("enable");
| |
| − | bacteriafuelcellCombo = true;
| |
| − | batterybulbCombo = false;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function wireHandler(event, ui) {
| |
| − | var draggable = ui.draggable;
| |
| − | if (draggable.attr('id') === "WIRE") {
| |
| − | $("#wiredrop").css("background-image", "url('wireX.png')");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "NEURON_WIRE") {
| |
| − | $("#wiredrop").css("background-image", "url('neuron_wire.png')");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function turbineHandler(event, ui) {
| |
| − | var draggable = ui.draggable;
| |
| − | if (draggable.attr('id') === "CELL") {
| |
| − | $("#turbinedrop").css("background-image", "url('fuelcell_empty.jpg')");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "INSECT_CELL") {
| |
| − | $("#turbinedrop").css("background-image", "url('fuelcell_insects.jpg')");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "CAT_CELL") {
| |
| − | $("#turbinedrop").css("background-image", "url('fuelcell_cat.jpg')");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function applicationsHandler(event, ui) {
| |
| − | var draggable = ui.draggable;
| |
| − | if (draggable.attr('id') === "KIDNEY") {
| |
| − | $("#applicationsdrop").css("background-image", "url('kidney.png')");
| |
| − | }
| |
| − | else if (draggable.attr('id') === "GAME") {
| |
| − | $("#applicationsdrop").css("background-image", "url('game.png')");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function hideAppear() {
| |
| − | var a = document.getElementById("levelOneAppear");
| |
| − | $(a).css("display", "none");
| |
| − | var a = document.getElementById("levelTwoAppear");
| |
| − | $(a).css("display", "none");
| |
| − | var a = document.getElementById("levelThreeAppear");
| |
| − | $(a).css("display", "none");
| |
| − | var a = document.getElementById("levelFourAppear");
| |
| − | $(a).css("display", "none");
| |
| − | var a = document.getElementById("levelFiveAppear");
| |
| − | $(a).css("display", "none");
| |
| − | }
| |
| − | /* Gets the relative text boxes to appear when each level of the simulator is clicked*/
| |
| − | function levelOneAppear() {
| |
| − | var spinner = $("#voltageSpinner").spinner();
| |
| − | spinner.spinner("disable");
| |
| − | $(".circuit img").show();
| |
| − | $(".circuit img").attr("src", "level1.png");
| |
| − | $('#batterydrop').removeAttr('id');
| |
| − | $('#bulbdrop').removeAttr('id');
| |
| − | $('#wiredrop').removeAttr('id');
| |
| − | $('#turbinedrop').removeAttr('id');
| |
| − | $('#applicationsdrop').removeAttr('id');
| |
| − | $('#babbleddrop').removeAttr('id');
| |
| − | $('.gamebox').append("<div id=\"batterydrop\"></div>");
| |
| − | $('.gamebox').append("<div id=\"bulbdrop\"></div>");
| |
| − | $('.link').empty();
| |
| − | $("<li id='BATTERY' class='component'><img src='electricbattery.png' style='height: 135px; width: 180px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='FUEL_CELL' class='component'><img src='fuelcell_empty.jpg' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='LIGHTBULB' class='component'><img src='electricbulb_off.png' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='BIOBULB' class='component'><img src='bacteriabulb_off.png' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | init();
| |
| − | gbl_txtix = states.LEVEL_ONE;
| |
| − | nxt();
| |
| − | var $newdiv2 = $("<div id='page-cover'></div>");
| |
| − | $("body").append($newdiv2);
| |
| − | $("#page-cover").css("opacity", 0.6).fadeIn(300, function () {
| |
| − | var $newdiv1 = $("<div id='level1popup'><div id='popuptext'>Hello! Welcome to the Culture Shock interactive experience, we've created 5 different levels which explore the ethical issues surrounding the integration of biology and electronics. When you're ready, use the Next button at the top to navigate through the first level which involves building a simple circuit featuring a bulb and a fuel cell - based on a real circuit we've built in the lab!</div></div>");
| |
| − | $("body").append($newdiv1);
| |
| − | var $button = $("<input type='button' id='button1' value='Close'>");
| |
| − | $($newdiv1).append($button);
| |
| − | $($button).click(function () {
| |
| − | $('#level1popup').remove();
| |
| − | $('#page-cover').remove();
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | function levelTwoAppear() {
| |
| − | $(".circuit img").show();
| |
| − | $(".circuit img").attr("src", "level2.png");
| |
| − | $('#batterydrop').removeAttr('id');
| |
| − | $('#bulbdrop').removeAttr('id');
| |
| − | $('#wiredrop').removeAttr('id');
| |
| − | $('#turbinedrop').removeAttr('id');
| |
| − | $('#applicationsdrop').removeAttr('id');
| |
| − | $('#babbleddrop').removeAttr('id');
| |
| − | $('.gamebox').append("<div id=\"wiredrop\"></div>");
| |
| − | $('.link').empty();
| |
| − | $("<li id='WIRE' class='component'><img src='wireX.png' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='NEURON_WIRE' class='component'><img src='neuron_wire.png' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | init();
| |
| − | gbl_txtix = states.LEVEL_TWO;
| |
| − | nxt();
| |
| − | var $newdiv2 = $("<div id='page-cover'></div>");
| |
| − | $("body").append($newdiv2);
| |
| − | $("#page-cover").css("opacity", 0.6).fadeIn(300, function () {
| |
| − | var $newdiv1 = $("<div id='level2popup'><div id='popuptext'>One key advantage of biological circuitry is the potential to self-heal, negating the need for additional supplies or repair specialists. This would be particularly useful in places where these assets are in short supply, such as on the upcoming manned mission to Mars - this is the scenario covered by exercise 2.</div></div>");
| |
| − | $("body").append($newdiv1);
| |
| − | var $button = $("<input type='button' id='button2' value='Close'>");
| |
| − | $($newdiv1).append($button);
| |
| − | $($button).click(function () {
| |
| − | $('#level2popup').remove();
| |
| − | $('#page-cover').remove();
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | function levelThreeAppear() {
| |
| − | $(".circuit img").show();
| |
| − | $(".circuit img").attr("src", "level3.png");
| |
| − | $('#batterydrop').removeAttr('id');
| |
| − | $('#bulbdrop').removeAttr('id');
| |
| − | $('#wiredrop').removeAttr('id');
| |
| − | $('#turbinedrop').removeAttr('id');
| |
| − | $('#applicationsdrop').removeAttr('id');
| |
| − | $('#babbleddrop').removeAttr('id');
| |
| − | $('.gamebox').append("<div id=\"turbinedrop\"></div>");
| |
| − | $('.link').empty();
| |
| − | $("<li id='CELL' class='component'><img src='fuelcell_empty.jpg' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='INSECT_CELL' class='component'><img src='fuelcell_insects.jpg' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | $("<li id='CAT_CELL' class='component'><img src='fuelcell_cat.jpg' style='height: 90px; width: 90px;' alt='battery'></li>").appendTo('.link');
| |
| − | init();
| |
| − | gbl_txtix = states.LEVEL_THREE;
| |
| − | nxt();
| |
| − | var $newdiv2 = $("<div id='page-cover'></div>");
| |
| − | $("body").append($newdiv2);
| |
| − | $("#page-cover").css("opacity", 0.6).fadeIn(300, function () {
| |
| − | var $newdiv1 = $("<div id='level3popup'><div id='popuptext'>Level 3 concerns renewable fuel sources and features a turbine which requires a fuel source to activate it and get it to a speed from which it can generate electricity. While certain fuel sources are more effective than others, they bring with them their own sets of associated ethical issues.</div></div>");
| |
| − | $("body").append($newdiv1);
| |
| − | var $button = $("<input type='button' id='button3' value='Close'>");
| |
| − | $($newdiv1).append($button);
| |
| − | $($button).click(function () {
| |
| − | $('#level3popup').remove();
| |
| − | $('#page-cover').remove();
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | function levelFourAppear() {
| |
| − | $(".circuit img").show();
| |
| − | $(".circuit img").attr("src", "level4.png");
| |
| − | $('#batterydrop').removeAttr('id');
| |
| − | $('#bulbdrop').removeAttr('id');
| |
| − | $('#wiredrop').removeAttr('id');
| |
| − | $('#turbinedrop').removeAttr('id');
| |
| − | $('#applicationsdrop').removeAttr('id');
| |
| − | $('#babbleddrop').removeAttr('id');
| |
| − | $('.gamebox').append("<div id=\"applicationsdrop\"></div>");
| |
| − | $('.link').empty();
| |
| − | $("<li id='KIDNEY' class='component'><img src='kidney.png' style='height: 90px; width: 90px;' alt='kidney'></li>").appendTo('.link');
| |
| − | init();
| |
| − | gbl_txtix = states.LEVEL_FOUR;
| |
| − | nxt();
| |
| − | var $newdiv2 = $("<div id='page-cover'></div>");
| |
| − | $("body").append($newdiv2);
| |
| − | $("#page-cover").css("opacity", 0.6).fadeIn(300, function () {
| |
| − | var $newdiv1 = $("<div id='level4popup'><div id='popuptext'></div></div>");
| |
| − | $("body").append($newdiv1);
| |
| − | var $button = $("<input type='button' id='button4' value='Close'>");
| |
| − | $($newdiv1).append($button);
| |
| − | $($button).click(function () {
| |
| − | $('#level4popup').remove();
| |
| − | $('#page-cover').remove();
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | function levelFiveAppear() {
| |
| − | $(".circuit img").hide();
| |
| − | $('#batterydrop').removeAttr('id');
| |
| − | $('#bulbdrop').removeAttr('id');
| |
| − | $('#wiredrop').removeAttr('id');
| |
| − | $('#turbinedrop').removeAttr('id');
| |
| − | $('#applicationsdrop').removeAttr('id');
| |
| − | $('#babbleddrop').removeAttr('id');
| |
| − | $('.link').empty();
| |
| − | init();
| |
| − | gbl_txtix = states.LEVEL_FIVE;
| |
| − | nxt();
| |
| − | var $newdiv2 = $("<div id='page-cover'></div>");
| |
| − | $("body").append($newdiv2);
| |
| − | $("#page-cover").css("opacity", 0.6).fadeIn(300, function () {
| |
| − | var $newdiv1 = $("<div id='level5popup'><div id='popuptext'>This level is a little different to the last 4. Working with the iGEM team at Edinburgh University, we've developed a level featuring their Babbled DNA data storage system. Level 5 shows how the sytem works and uses encryption to avoid the hacking of sensitive data, which is an important issue facing this emerging technology.</div></div>");
| |
| − | $("body").append($newdiv1);
| |
| − | var $button = $("<input type='button' id='button5' value='Close'>");
| |
| − | $($newdiv1).append($button);
| |
| − | $($button).click(function () {
| |
| − | $('#level5popup').remove();
| |
| − | $('#page-cover').remove();
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| | <body onLoad="init()"> | | <body onLoad="init()"> |
| | + | <div class="hiddenText"> |
| | + | <p id="levelOneAppear">Welcome to Level One: Living Circuits. Click next to start this level.</p> |
| | + | <input type="button" id="onebutton" onclick="nxt()" value="Next"> |
| | + | </div> |
| | + | <div id="wrappr" class="minwidth"> |
| | + | <div class="InteractiveLinks"> |
| | + | <ul class="InteractiveDemo"> |
| | + | <li class="levelOneAppear" onclick="levelOneAppear()"><img src="https://static.igem.org/mediawiki/2016/e/e7/T--Newcastle--HPS-button1.png" alt="Level One">Living Circuits</li> |
| | + | <li class="levelTwoAppear" onclick="levelTwoAppear()"><img src="https://static.igem.org/mediawiki/2016/7/74/T--Newcastle--HPS-button2.png" alt="Level Two">Self-healing Rockets</li> |
| | + | <li class="levelThreeAppear" onclick="levelThreeAppear()"><img src="https://static.igem.org/mediawiki/2016/5/5d/T--Newcastle--HPS-button3.png" alt="Level Three">Bio-Renewables</li> |
| | + | <li class="levelFiveAppear" onclick="levelFiveAppear()"><img src="https://static.igem.org/mediawiki/2016/d/da/T--Newcastle--HPS-button4.png" alt="Level Five">DNA Memory</li> |
| | + | </ul> |
| | + | </div> |
| | <div class="gamebox"> | | <div class="gamebox"> |
| | <table id="baseTable"> | | <table id="baseTable"> |
| | <tr> | | <tr> |
| | + | <th></th> |
| | <th>Text</th> | | <th>Text</th> |
| | <th>Base 10</th> | | <th>Base 10</th> |
| | <th>Base 4</th> </tr> | | <th>Base 4</th> </tr> |
| − | <tr> | + | <!--<tr> |
| | <td>Name</td> | | <td>Name</td> |
| | + | <td>My name</td> |
| | <td id="bTen"></td> | | <td id="bTen"></td> |
| | <td id="bFour"></td> | | <td id="bFour"></td> |
| Line 583: |
Line 61: |
| | <tr> | | <tr> |
| | <td>Password</td> | | <td>Password</td> |
| | + | <td>MagicFish</td> |
| | <td>54</td> | | <td>54</td> |
| | <td>312</td> | | <td>312</td> |
| − | </tr> | + | </tr>--> |
| − | </table> <img id="email" src="sentemail.png" alt="email"> <img id="unopened" src="unopened.png" alt="unopened"> | + | </table> <img id="email" src=" https://static.igem.org/mediawiki/2016/0/03/T--Newcastle--HPS-sentemail.png" alt="email"> <img id="unopened" src=" https://static.igem.org/mediawiki/2016/6/69/T--Newcastle--HPS-unopened.png" alt="unopened"> |
| | <p id="displayname"></p> | | <p id="displayname"></p> |
| | <p id="displayNumber"></p> | | <p id="displayNumber"></p> |
| Line 592: |
Line 71: |
| | <p id="displayXOR"></p> | | <p id="displayXOR"></p> |
| | <p id="displayXORResult"></p> | | <p id="displayXORResult"></p> |
| − | <div class="circuit" style="width: 55% height: 70%;"> <img src="level1.png" style="height: 100%; width: 100%;"> </div> | + | <div class="circuit" style="width: 55% height: 70%;"><div id="batterydrop"> </div> |
| − | <div id="batterydrop"> </div> | + | <div id="bulbdrop"></div><img src=" https:/ /static. igem.org/ mediawiki/2016/f/fb/ T--Newcastle--HPS-level1.png" style="height: 100%; width: 100%;"><div class="toolbox"> |
| − | <div id="bulbdrop"> </div> | + | |
| − | </div>
| + | |
| − | <div class="componentbox">
| + | |
| − | <ul class="link" id="components">
| + | |
| − | <li id="BATTERY" class="component"><img src=" electricbattery.png" style="height: 135px; width: 180px;" alt="battery"></ li> | + | |
| − | <li id="FUEL_CELL" class="component"><img src="fuelcell_empty.jpg" style="height: 90px; width: 90px;" alt="battery"></li>
| + | |
| − | <li id="LIGHTBULB" class="component"><img src="electricbulb_off.png" style="height: 90px; width: 90px;" alt="battery"></li>
| + | |
| − | <li id="BIOBULB" class="component"><img src="bacteriabulb_off.png" style="height: 90px; width: 90px;" alt="battery"></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="InteractiveLinks">
| + | |
| − | <ul class="InteractiveDemo">
| + | |
| − | <li class="levelOneAppear" onclick="levelOneAppear()"><img src="button1.png" alt="Level One">Living Circuits</li>
| + | |
| − | <li class="levelTwoAppear" onclick="levelTwoAppear()"><img src="button2.png" alt="Level Two">Self-healing Rockets</li>
| + | |
| − | <li class="levelThreeAppear" onclick="levelThreeAppear()"><img src="button3.png" alt="Level Three">Bio-Renewables</li>
| + | |
| − | <li class="levelFourAppear" onclick="levelFourAppear()"><img src="button4.png" alt="Level Four">Applications</li>
| + | |
| − | <li class="levelFiveAppear" onclick="levelFiveAppear()"><img src="button5.png" alt="Level Five">DNA Memory</li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <input type="button" id="onebutton" onclick="nxt()" value="Next">
| + | |
| − | <div class="hiddenText">
| + | |
| − | <p id="levelOneAppear">Welcome to Level One: Living Circuits. Click next to start this level.</p>
| + | |
| − | </div>
| + | |
| − | | + | |
| | <div id="voltage buttons"> | | <div id="voltage buttons"> |
| | <p> | | <p> |
| | <label for="voltageSpinner">Voltage: </label> | | <label for="voltageSpinner">Voltage: </label> |
| − | <input id="voltageSpinner" type="number" value="0" min="0" max="40" step="5" enable="" /> | + | <input id="voltageSpinner" type="number" value="0" min="0" max="30" step="10" enable="" /> |
| − | <button id="getvalue">Apply!</button>
| + | |
| | </p> | | </p> |
| | </div> | | </div> |
| | + | </div></div> |
| | + | </div> |
| | + | <div class="componentbox"> |
| | + | <ul class="link" id="components"> |
| | + | <li id="BATTERY" class="component"><img src="https://static.igem.org/mediawiki/2016/4/46/T--Newcastle--HPS-electricbattery.png" style="height: 135px; width: 180px;" alt="battery"></li> |
| | + | <li id="FUEL_CELL" class="component"><img src="https://static.igem.org/mediawiki/2016/a/ae/T--Newcastle--HPS-fuelcell_empty.jpg" style="height: 90px; width: 90px;" alt="battery"></li> |
| | + | <li id="LIGHTBULB" class="component"><img src="https://static.igem.org/mediawiki/2016/9/9e/T--Newcastle--HPS-electricbulb_off.png" style="height: 90px; width: 90px;" alt="battery"></li> |
| | + | <li id="BIOBULB" class="component"><img src="https://static.igem.org/mediawiki/2016/0/0b/T--Newcastle--HPS-bacteriabulb_off.png" style="height: 90px; width: 90px;" alt="battery"></li> |
| | + | </ul> |
| | </div> | | </div> |
| | <script> | | <script> |
| Line 630: |
Line 93: |
| | </script> | | </script> |
| | </body> | | </body> |
| − |
| |
| | </html> | | </html> |
Living Circuits
Self-healing Rockets
Bio-Renewables
DNA Memory
