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($("#memoryWrapper")); | ||
| + | |||
| + | 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({'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({'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({'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'}); | ||
| + | } | ||
| + | |||
| + | }); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
Revision as of 09:48, 4 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($("#memoryWrapper"));
if (i == 1 || i == 5){
for (ii = 1; ii <= 8; ii++){
$('