|
|
| Line 194: |
Line 194: |
| | | | |
| | }); | | }); |
| − | </hmtl> | + | </html> |
Revision as of 13:49, 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++) {
$('
').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 {
$('
').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++;
$('
').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'
});
}
});