Difference between revisions of "Template:Team:TU Eindhoven/Memory Script"

Line 51: Line 51:
 
         if (i == 1 || i == 6) {
 
         if (i == 1 || i == 6) {
 
             for (ii = 1; ii <= 7; ii++) {
 
             for (ii = 1; ii <= 7; ii++) {
                 $('<div class="card" id="card' + idnr.toString() + '"><br /><br /> <p' + idnr.toString() + '>' + rand[idnr - 1] + '</p></div>').appendTo($("#row" + i.toString())).css({
+
                 $('<div class="card" id="card' + idnr.toString() + '"><br /><br /><br /> <p' + idnr.toString() + '>' + rand[idnr - 1] + '</p></div>').appendTo($("#row" + i.toString())).css({
 
                     'height': '200px',
 
                     'height': '200px',
 
                     'width': '150px',
 
                     'width': '150px',

Revision as of 14:34, 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 <= 6; i++) { $('
').appendTo($("#memoryWrapper")); if (i == 1 || i == 6) { for (ii = 1; ii <= 7; ii++) { $('



' + rand[idnr - 1] + '

').appendTo($("#row" + i.toString())).css({ 'height': '200px', 'width': '150px', 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' }); cardstat[idnr - 1] = 'yellow'; idnr++; }; } else { $('



' + rand[idnr - 1] + '

').appendTo($("#row" + i.toString())).css({ 'height': '200px', 'width': '150px', 'float': 'left', 'background-image': 'url(https://static.igem.org/mediawiki/2015/5/54/TU_Eindhoven_card1.png)' }); cardstat[idnr - 1] = 'yellow'; idnr++; $('



' + rand[idnr - 1] + '

').appendTo($("#row" + i.toString())).css({ 'height': '200px', 'width': '150px', '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' }); } });