Pairings Game Tutorial

Pairings Game Tutorial

In this programming world, it is comforting to think of the “pairings” that go on. But it’s everywhere, the comfort a “pairing” can represent for people.

With this in mind, we designed a simple game …

• the player is presented with 5 ideas of a “pairing” … it’s subjective, but …
• we believe only one of these will score you a point by clicking on

… in this first draft Pairings Game whose tabular cell innards consist of 5 buttons and 5 overlaying …


var rectos=[];

function prepopulate() { // called at document.body onload
for (var icell=0; icell<5; icell++) {
rectos.push(document.getElementById('td' + eval(1 + icell)).getBoundingClientRect());
}
}

function populate() { // called whenever question changes
var fivebuts=[], fiveoverlays=[];
var makecorrect=Math.floor(Math.random() * 5), recto=null;
var interestg=-1, tg=-1;
sofarb=',';
sofaro=',';

for (var icell=0; icell<5; icell++) {
recto=rectos[icell]; //document.getElementById('td' + eval(1 + icell)).getBoundingClientRect();
interestg=Math.floor(Math.random() * eval('' + pairingsa.length));
if (makecorrect == icell) {
while ((sofarb + sofaro).indexOf(',' + interestg + ',') != -1) {
interestg=Math.floor(Math.random() * eval('' + pairingsa.length));
}
fivebuts.push(interestg);
fiveoverlays.push(interestg);
sofarb+='' + interestg + ',';
sofaro+='' + interestg + ',';
if (eval(Math.floor(Math.random() * 19876754) % 2) == 0) {
document.getElementById('td' + eval(1 + icell)).innerHTML='<button onclick=scoreit(1);>' + pairingsa[interestg].split('&')[1] + '</button><div style="margin-left:10px;margin-top:10px;font-size:24px;position:absolute;top:' + ('' + recto.top).split('.')[0] + 'px;' + 'left:' + ('' + recto.left).split('.')[0] + 'px;width:' + ('' + recto.width).split('.')[0] + 'px;height:' + ('' + recto.height).split('.')[0] + 'px;z-index:2345;opacity:0.6;pointer-events:none;">' + pairingsa[interestg].split('&')[0] + '</div>';
} else {
document.getElementById('td' + eval(1 + icell)).innerHTML='<button onclick=scoreit(1);>' + pairingsa[interestg].split('&')[0] + '</button><div style="margin-left:10px;margin-top:10px;font-size:24px;position:absolute;top:' + ('' + recto.top).split('.')[0] + 'px;' + 'left:' + ('' + recto.left).split('.')[0] + 'px;width:' + ('' + recto.width).split('.')[0] + 'px;height:' + ('' + recto.height).split('.')[0] + 'px;z-index:2345;opacity:0.6;pointer-events:none;">' + pairingsa[interestg].split('&')[1] + '</div>';
}
} else {
while (sofarb.indexOf(',' + interestg + ',') != -1) {
interestg=Math.floor(Math.random() * eval('' + pairingsa.length));
}
sofarb+='' + interestg + ',';
tg=interestg;
interestg=Math.floor(Math.random() * eval('' + pairingsa.length));
while ((sofarb + sofaro).indexOf(',' + interestg + ',') != -1 || tg == interestg) {
interestg=Math.floor(Math.random() * eval('' + pairingsa.length));
}
sofaro+='' + interestg + ',';
if (eval(Math.floor(Math.random() * 19876754) % 2) == 0) {
document.getElementById('td' + eval(1 + icell)).innerHTML='<button onclick=scoreit(0);>' + pairingsa[interestg].split('&')[1] + '</button><div style="margin-left:10px;margin-top:10px;font-size:24px;position:absolute;top:' + ('' + recto.top).split('.')[0] + 'px;' + 'left:' + ('' + recto.left).split('.')[0] + 'px;width:' + ('' + recto.width).split('.')[0] + 'px;height:' + ('' + recto.height).split('.')[0] + 'px;z-index:2345;opacity:0.6;pointer-events:none;">' + pairingsa[tg].split('&')[0] + '</div>';
} else {
document.getElementById('td' + eval(1 + icell)).innerHTML='<button onclick=scoreit(0);>' + pairingsa[tg].split('&')[0] + '</button><div style="margin-left:10px;margin-top:10px;font-size:24px;position:absolute;top:' + ('' + recto.top).split('.')[0] + 'px;' + 'left:' + ('' + recto.left).split('.')[0] + 'px;width:' + ('' + recto.width).split('.')[0] + 'px;height:' + ('' + recto.height).split('.')[0] + 'px;z-index:2345;opacity:0.6;pointer-events:none;">' + pairingsa[interestg].split('&')[1] + '</div>';
}
}
}


}


… div elements (optionally we’ve decided to apply pointer-events:none; to, per game question.

Pretty, simple, huh?!

If this was interesting you may be interested in this too.