Toepassing 1: reactietest

★ Open events/toep_reactieTest.html en bekijk het resultaat in een browser.

<section id="speelveld">
    <div id="blok"></div>
</section>
...
<script>
$(function() {
    var startTijd, eindTijd; 
    var wachttijd = 0;
    var speelH = $('#speelveld').height() - $('#blok').height(); 
    var speelW = $('#speelveld').width() - $('#blok').width();
    $('#start').click(function(e) {
        // klik op startknop
    });
    ('#blok').click(function(e) {
        // klik op blok
    });
});
</script>

De section-tag #speelveld krijgt vanuit CSS een gele achtergrondkleur en staat relatief gepositioneerd. Binnen #speelveld staat een div-tag #blok. Deze staat absoluut gepositioneerd binnen #speelveld. Zodra u op de startknop klikt, gaan we na enkele seconden #blok op een willekeurige plaats binnen #speelveld positioneren. De reactietijd is de tijd tussen het verschijnen van #blok en het moment dat u op #blok klikt.

De variabelen speelH en speelW bepalen de hoogte en de breedte waarbinnen we #blok mogen positioneren. #speelveld is 500px breed. #blok is 40px breed. Dus de x-coördinaat van #blok kan minimum 0px en maximum 460px bedragen. Voor de y-positie maken we een gelijkaardige berekening.

★ Pas het click-event op de knop als volgt aan:

$('#start').click(function(e) {
    $('#blok').hide();
    var blokX = Math.floor(Math.random() * speelW) + 'px'; 
    var blokY = Math.floor(Math.random() * speelH) +'px';
    $('#blok').css({top: blokY, left: blokX}); 
    startTijd = e.timeStamp; 
    setTimeout(function(){
        $('#blok').show();
    },wachttijd);
});

Telkens we op de klop klikken, gaan we #blok verbergen. De variabelen blokX en blokY geven ons een willekeurig getal tussen 0px en 460px. Op de vijfde lijn wordt #blok opnieuw gepositioneerd. Het tijdstip waarop we op de knop klikken, wordt bewaard in de variabele startTijd. Als laatste maken we #blok opnieuw zichtbaar. Dit gebeurt via de (JavaScript) methode setTimeout() met een tijdsvertraging van 0 sec. (de variabele wachttijd staat voorlopig nog op 0.)

★ Bewaar de pagina en test het resultaat in een browser. ★ Klik enkele malen op de knop. Het blok verschijnt telkens op een willekeurige plaats. ★ Pas vervolgens de code achter het #blok aan:

$('#blok').click(function(e) { 
    eindTijd = e.timeStamp;
    var tijd = (eindTijd - startTijd - wachttijd)/1000;
    $('#uwScore').html('Start: ' + startTijd + ' ms<br>' + 
        'Stop: ' + eindTijd + ' ms<br>' + 
        'Reactietijd: ' + tijd + ' sec');
});

De variabele eindTijd bevat het tijdstip waarop we op het blok klikken. Zowel startTijd als eindtijd bevatten een timestamp in ms. De variabele tijd geeft het verschil tussen het verschijnen van het blok en het moment waarop we op het blok klikken. (Vergeet niet de wachttijd in rekening te brengen. ) Door het tijdsverschil te delen door 1000, bekomen we een getal in sec. De reactietijd wordt in de p-tag #uwScore getoond.

★ Bewaar de pagina en test het resultaat in een browser. ★ Klik op de startknop en vervolgens op het rode blok.

★ Zet bovenaan het script de variabele wachttijd op 3000 en test het resultaat.