> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/6-events/toepassing-1-reactietest.md).

# Toepassing 1: reactietest

{% hint style="success" %}
★ Open **events/toep\_reactieTest.html** en bekijk het resultaat in een browser.
{% endhint %}

![](/files/-L9sGf8f9KU5v0eNj6c9)

```markup
<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.

{% hint style="success" %}
★ Pas het click-event op de knop als volgt aan:
{% endhint %}

```javascript
$('#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()`](https://www.w3schools.com/jsref/met_win_settimeout.asp) met een tijdsvertraging van 0 sec. (de variabele wachttijd staat voorlopig nog op 0.)

{% hint style="success" %}
★ 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:
{% endhint %}

```javascript
$('#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.

{% hint style="success" %}
★ Bewaar de pagina en test het resultaat in een browser.\
★ Klik op de startknop en vervolgens op het rode blok.
{% endhint %}

![](/files/-L9sGg-V8nWWWY6gQuQN)

{% hint style="success" %}
★ Zet bovenaan het script de variabele wachttijd op *3000* en test het resultaat.
{% endhint %}