Difference between revisions of "Template:Team:TU Eindhoven/Memory Script"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | $(document).ready(function(){ | + | $(document).ready(function() { |
| − | + | ||
| − | + | ||
| − | + | total = 22; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | var inhoud = ['Cas', 'Cas', 'Elles', 'Elles', 'Esther', 'Esther', 'Femke', 'Femke', 'Hans', 'Hans', 'Jan-Willem', 'Jan-Willem', 'Kwankwan', 'Kwankwan', 'LauraJ', 'LauraJ', 'LauravS', 'LauravS', 'Sjoerd', 'Sjoerd', 'Yeshi', 'Yeshi']; | |
| − | + | var picture = ['5/55/TU_Eindhoven_Cas.png', '5/55/TU_Eindhoven_Cas.png', '5/57/TU_Eindhoven_Elles.png', '5/57/TU_Eindhoven_Elles.png', '0/01/TU_Eindhoven_Esther.png', '0/01/TU_Eindhoven_Esther.png', '5/5b/TU_Eindhoven_Femke.png', '5/5b/TU_Eindhoven_Femke.png', 'c/cd/TU_Eindhoven_Hans.png', 'c/cd/TU_Eindhoven_Hans.png', 'd/d1/TU_Eindhoven_Jan-Willem.png', 'd/d1/TU_Eindhoven_Jan-Willem.png', 'd/dc/TU_Eindhoven_Kwankwan.png', 'd/dc/TU_Eindhoven_Kwankwan.png', '1/10/TU_Eindhoven_LauraJ.png', '1/10/TU_Eindhoven_LauraJ.png', 'd/d0/TU_Eindhoven_LauravS.png', 'd/d0/TU_Eindhoven_LauravS.png', 'b/bb/TU_Eindhoven_Sjoerd.png', 'b/bb/TU_Eindhoven_Sjoerd.png', '2/2a/TU_Eindhoven_Yeshi.png', '2/2a/TU_Eindhoven_Yeshi.png'] | |
| − | + | var inhoudverhaal = ['VERHAAL CAS', 'Elles', 'Esther', 'Femke', 'Hans', 'Jan-Willem', 'Kwankwan', 'LauraJ', 'LauravS', 'Sjoerd', 'Yeshi']; | |
| − | + | for (i = 1; i <= (inhoud.length / 2); i++) { | |
| − | + | $('<div class="inhoud" id="inhoud' + inhoud[(i - 1) * 2].toString() + '">' + inhoudverhaal[i - 1].toString() + '</div>').appendTo($("#inhoud")).css({ | |
| + | 'background-size': '100% 100%', | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/' + picture[(i - 1) * 2].toString() + ')', | ||
| + | 'z-index': '-1' | ||
| + | }); | ||
| + | }; | ||
| + | $('<div class="inhoud" id="inhoudfirst">Find the matching cards.</div>').appendTo($("#inhoud")).css({ | ||
| + | 'background-size': '100% 100%', | ||
| + | 'background-color': 'black', | ||
| + | 'z-index': '1' | ||
| + | }); | ||
| + | $('<div class="inhoud" id="inhoudsecond">Hover over someones picture to find out more about him/her.</div>').appendTo($("#inhoud")).css({ | ||
| + | 'background-size': '100% 100%', | ||
| + | 'background-color': 'black', | ||
| + | 'z-index': '0' | ||
| + | }); | ||
| − | + | var idnr = 1; | |
| − | + | var gekozen = []; | |
| − | + | var cardstat = []; | |
| − | + | var b = 0; | |
| − | + | var wait = 0; | |
| − | + | ||
| − | + | ||
| − | + | list1 = inhoud; | |
| − | + | list2 = picture; | |
| − | + | for (var i = list1.length - 1; i > 0; i--) { | |
| − | + | var j = Math.floor(Math.random() * (i + 1)); | |
| − | + | var temp1 = list1[i]; | |
| − | + | list1[i] = list1[j]; | |
| − | + | list1[j] = temp1; | |
| − | + | ||
| − | + | var temp2 = list2[i]; | |
| − | + | list2[i] = list2[j]; | |
| − | + | list2[j] = temp2; | |
| − | + | } | |
| − | + | rand = list1; | |
| − | + | randpic = list2; | |
| − | + | ||
| − | + | for (i = 1; i <= 5; i++) { | |
| − | + | $('<div class="row" id="row' + i.toString() + '"></div>').appendTo($("#wrapper")); | |
| − | + | ||
| − | + | if (i == 1 || i == 5) { | |
| − | + | for (ii = 1; ii <= 8; ii++) { | |
| − | + | $('<div class="card" id="card' + idnr.toString() + '"><br /><br /><br /> <p' + idnr.toString() + '>' + rand[idnr - 1] + '</p></div>').appendTo($("#row" + i.toString())).css({ | |
| − | + | 'height': '400px', | |
| − | + | 'width': '300px', | |
| − | + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' | |
| − | + | }); | |
| − | + | cardstat[idnr - 1] = 'yellow'; | |
| − | + | idnr++; | |
| − | + | }; | |
| − | + | } else { | |
| − | + | $('<div class="card" id="card' + idnr.toString() + '"><br /><br /><br /> <p' + idnr.toString() + '>' + rand[idnr - 1] + '</p></div>').appendTo($("#row" + i.toString())).css({ | |
| − | + | 'height': '400px', | |
| + | 'width': '300px', | ||
| + | 'float': 'left', | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' | ||
| + | }); | ||
| + | cardstat[idnr - 1] = 'yellow'; | ||
| + | idnr++; | ||
| + | $('<div class="card" id="card' + idnr.toString() + '"><br /><br /><br /> <p' + idnr.toString() + '>' + rand[idnr - 1] + '</p></div>').appendTo($("#row" + i.toString())).css({ | ||
| + | 'height': '400px', | ||
| + | 'width': '300px', | ||
| + | 'float': 'right', | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' | ||
| + | }); | ||
| + | cardstat[idnr - 1] = 'yellow'; | ||
| + | idnr++; | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | for (cardnr = 1; cardnr <= rand.length; cardnr++) { | ||
| + | $("#card" + cardnr.toString()).hover(function() { | ||
| + | groen($(this).attr('id').match(/\d+/)) | ||
| + | }, function() { | ||
| + | geel($(this).attr('id').match(/\d+/)) | ||
| + | }); | ||
| + | $("#card" + cardnr.toString()).click(function() { | ||
| + | blauw($(this).attr('id').match(/\d+/)) | ||
| + | }); | ||
| + | }; | ||
| + | $("#ALLES").click(function() { | ||
| + | Alles() | ||
| + | }); | ||
| + | |||
| + | function groen(numb) { | ||
| + | if (cardstat[numb - 1] == 'yellow') { | ||
| + | $('#card' + numb.toString()).css({ | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/a/a1/TU_Eindhoven_card2.png)' | ||
| + | }); | ||
| + | cardstat[numb - 1] = 'green'; | ||
| + | } else if (cardstat[numb - 1] == 'red') { | ||
| + | for (inhoud = 1; inhoud <= (rand.length); inhoud++) { | ||
| + | $("#inhoud" + rand[inhoud - 1].toString()).css({ | ||
| + | 'z-index': '0' | ||
| + | }); | ||
| + | } | ||
| + | $("#inhoudsecond").css({ | ||
| + | 'z-index': '0' | ||
| + | }); | ||
| + | $("#inhoud" + rand[numb - 1].toString()).css({ | ||
| + | 'z-index': '2' | ||
| + | }); | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | function geel(numb) { | ||
| + | if (cardstat[numb - 1] == 'green') { | ||
| + | cardstat[numb - 1] = 'yellow'; | ||
| + | $("#card" + numb.toString()).css({ | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' | ||
| + | }); | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | function blauw(numb) { | ||
| + | if (cardstat[numb - 1] == 'green' || cardstat[numb - 1] == 'yellow') { | ||
| + | if (wait == 0) { | ||
| + | gekozen[b] = numb; | ||
| + | b++; | ||
| + | cardstat[numb - 1] = 'blue'; | ||
| + | $("#card" + numb.toString()).css({ | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/' + randpic[numb - 1].toString() + ')' | ||
| + | }); | ||
| + | $("p" + numb.toString()).css({ | ||
| + | 'visibility': 'visible' | ||
| + | }); | ||
| + | if (b >= 2) { | ||
| + | wait = 1; | ||
| + | setTimeout(function() { | ||
| + | $(".card").css({ | ||
| + | 'pointer-events': 'auto' | ||
| + | }); | ||
| + | dezelfde(gekozen); | ||
| + | gekozen = []; | ||
| + | b = 0; | ||
| + | wait = 0; | ||
| + | }, 600); | ||
| + | }; | ||
| + | }; | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | function dezelfde(gekozen) { | ||
| + | for (iii = 0; iii <= 1; iii++) { | ||
| + | varia = gekozen[iii]; | ||
| + | if (rand[gekozen[0] - 1] == rand[gekozen[1] - 1]) { | ||
| + | $("#inhoudfirst").css({ | ||
| + | 'z-index': '-1' | ||
| + | }); | ||
| + | $("#inhoudsecond").css({ | ||
| + | 'z-index': '1' | ||
| + | }); | ||
| + | cardstat[varia - 1] = 'red'; | ||
| + | } else { | ||
| + | $("#card" + varia.toString()).css({ | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' | ||
| + | }); | ||
| + | $("p" + varia.toString()).css({ | ||
| + | 'visibility': 'hidden' | ||
| + | }); | ||
| + | cardstat[varia - 1] = 'yellow'; | ||
| + | } | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | function Alles() { | ||
| + | for (crd = 1; crd <= rand.length; crd++) { | ||
| + | cardstat[crd - 1] = 'red'; | ||
| + | $("#card" + crd.toString()).css({ | ||
| + | 'background-image': 'url(https://static.igem.org/mediawiki/2015/' + randpic[crd - 1].toString() + ')' | ||
| + | }); | ||
| + | $("p" + crd.toString()).css({ | ||
| + | 'visibility': 'visible' | ||
| + | }); | ||
| + | |||
| + | } | ||
| + | $("#inhoudfirst").css({ | ||
| + | 'z-index': '-1' | ||
| + | }); | ||
| + | $("#inhoudsecond").css({ | ||
| + | 'z-index': '1' | ||
| + | }); | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}); | }); | ||
| − | </ | + | </hmtl> |
Revision as of 13:48, 3 August 2015
$(document).ready(function() { total = 22; var inhoud = ['Cas', 'Cas', 'Elles', 'Elles', 'Esther', 'Esther', 'Femke', 'Femke', 'Hans', 'Hans', 'Jan-Willem', 'Jan-Willem', 'Kwankwan', 'Kwankwan', 'LauraJ', 'LauraJ', 'LauravS', 'LauravS', 'Sjoerd', 'Sjoerd', 'Yeshi', 'Yeshi']; var picture = ['5/55/TU_Eindhoven_Cas.png', '5/55/TU_Eindhoven_Cas.png', '5/57/TU_Eindhoven_Elles.png', '5/57/TU_Eindhoven_Elles.png', '0/01/TU_Eindhoven_Esther.png', '0/01/TU_Eindhoven_Esther.png', '5/5b/TU_Eindhoven_Femke.png', '5/5b/TU_Eindhoven_Femke.png', 'c/cd/TU_Eindhoven_Hans.png', 'c/cd/TU_Eindhoven_Hans.png', 'd/d1/TU_Eindhoven_Jan-Willem.png', 'd/d1/TU_Eindhoven_Jan-Willem.png', 'd/dc/TU_Eindhoven_Kwankwan.png', 'd/dc/TU_Eindhoven_Kwankwan.png', '1/10/TU_Eindhoven_LauraJ.png', '1/10/TU_Eindhoven_LauraJ.png', 'd/d0/TU_Eindhoven_LauravS.png', 'd/d0/TU_Eindhoven_LauravS.png', 'b/bb/TU_Eindhoven_Sjoerd.png', 'b/bb/TU_Eindhoven_Sjoerd.png', '2/2a/TU_Eindhoven_Yeshi.png', '2/2a/TU_Eindhoven_Yeshi.png'] var inhoudverhaal = ['VERHAAL CAS', 'Elles', 'Esther', 'Femke', 'Hans', 'Jan-Willem', 'Kwankwan', 'LauraJ', 'LauravS', 'Sjoerd', 'Yeshi']; for (i = 1; i <= (inhoud.length / 2); i++) { $('
' + inhoudverhaal[i - 1].toString() + '
').appendTo($("#inhoud")).css({
'background-size': '100% 100%',
'background-image': 'url(https://static.igem.org/mediawiki/2015/' + picture[(i - 1) * 2].toString() + ')',
'z-index': '-1'
});
};
$('Find the matching cards.
').appendTo($("#inhoud")).css({
'background-size': '100% 100%',
'background-color': 'black',
'z-index': '1'
});
$('Hover over someones picture to find out more about him/her.
').appendTo($("#inhoud")).css({
'background-size': '100% 100%',
'background-color': 'black',
'z-index': '0'
});
var idnr = 1;
var gekozen = [];
var cardstat = [];
var b = 0;
var wait = 0;
list1 = inhoud;
list2 = picture;
for (var i = list1.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp1 = list1[i];
list1[i] = list1[j];
list1[j] = temp1;
var temp2 = list2[i];
list2[i] = list2[j];
list2[j] = temp2;
}
rand = list1;
randpic = list2;
for (i = 1; i <= 5; i++) {
$('').appendTo($("#wrapper"));
if (i == 1 || i == 5) {
for (ii = 1; ii <= 8; ii++) {
$('