taskD1.html

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Reaction test D.1</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"
          integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous"/>
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div class="row">
    <div id="standard" class="small-12 medium-8 large-6 small-centered columns">
        <div class="callout" style="height: 400px">
            <h4 class="text-center">Press SPACE, every time you see or hear a sheep!</h4>
        </div>
    </div>

    <div id="sheepPic" class="small-12 medium-8 large-6 small-centered columns" style="display: none">
        <div class="callout" style="height: 400px">
            <img height="427" src="sheepPicture.jpg">
        </div>
    </div>

    <div class="small-12 columns">
        <h3 class="text-center" id="instruction">When ready, press SPACE to start!</h3>
    </div>

</div>
<div class="row text-center">
    <p id="errorCount"></p>
</div>
<div class="row">
    <div class="small-6 columns text-center">
        <p id="picTime"></p>
        <p id="countPic"></p>
        <p id="meanPic"></p>
        <p id="sdPic"></p>
    </div>
    <div class="small-6 columns text-center">
        <p id="soundTime"></p>
        <p id="countSound"></p>
        <p id="meanSound"></p>
        <p id="sdSound"></p>
    </div>
    <div class="small-12 columns">
        <a class="button" href="index.html">< Go back</a>
    </div>
</div>

<script type="text/javascript">
    var experimentActive = false;
    var testActive = false;
    var picTimes = [];
    var soundTimes = [];
    var lastTimePicChanged;
    var lastTimeSoundPlayed;
    var sheepPicCounter;
    var sheepSoundCounter;
    var errorCounter;
    var sheepSound = new Audio('sheepSound.mp3');

    function startExperiment() {
        experimentActive = true;
        document.getElementById("errorCount").innerHTML = "";
        document.getElementById("picTime").innerHTML = "";
        document.getElementById("countPic").innerHTML = "";
        document.getElementById("meanPic").innerHTML = "";
        document.getElementById("sdPic").innerHTML = "";
        document.getElementById("soundTime").innerHTML = "";
        document.getElementById("countSound").innerHTML = "";
        document.getElementById("meanSound").innerHTML = "";
        document.getElementById("sdSound").innerHTML = "";
        document.getElementById("instruction").innerHTML = "Press 'a' for results!";
        sheepPicCounter = 0;
        sheepSoundCounter = 0;
        errorCounter = 0;
        startTest();
    }

    function startTest() {
        showSheep(false);
        playSound(false);
        timeInSeconds = Math.random() * 4 + 2; // 2 - 6s
        window.setTimeout("showStimulus()", timeInSeconds * 1000);
    }

    function showStimulus() {
        testActive = true;
        var isFull = false;

        if (!(sheepPicCounter < 25) && sheepSoundCounter < 25) {
            sheepSoundCounter++;
            isFull = true;
            playSound(true);
        }

        if (!(sheepSoundCounter < 25) && sheepPicCounter < 25) {
            sheepPicCounter++;
            isFull = true;
            showSheep(true);
        }

        if (!isFull && Math.random() >= 0.5 && sheepPicCounter < 25) {
            sheepPicCounter++;
            showSheep(true);
        }
        else if (!isFull && sheepSoundCounter < 25) {
            sheepSoundCounter++;
            playSound(true);
        }
    }

    function stopTest() {
        if (!testActive) {
            errorCounter++;
            document.getElementById("errorCount").innerHTML = "Errors: " + errorCounter;
        } else {
            var currTime = new Date().getTime();
            var deltaTime;

            if (lastTimeSoundPlayed >= lastTimePicChanged) {
                deltaTime = currTime - lastTimeSoundPlayed;
                soundTimes.push(deltaTime);
                document.getElementById("soundTime").innerHTML = "Sound: " + deltaTime + "ms";
                document.getElementById("countSound").innerHTML = "Count sound: " + soundTimes.length;
            }
            else {
                deltaTime = currTime - lastTimePicChanged;
                picTimes.push(deltaTime);
                document.getElementById("picTime").innerHTML = "Picture: " + deltaTime + "ms";
                document.getElementById("countPic").innerHTML = "Count pic: " + picTimes.length;
            }
            testActive = false;
            if (!(sheepPicCounter < 25) && !(sheepSoundCounter < 25)) {
                stopExperiment();
            } else {
                startTest();
            }
        }
    }

    function stopExperiment() {
        testActive = false;
        // Calculation of the picture stimulus
        var meanDeltaTime = 0.0;
        for (var i = 0; i < picTimes.length; ++i) {
            meanDeltaTime += picTimes[i];
        }
        meanDeltaTime = Math.round(meanDeltaTime / picTimes.length);
        var standardDerivation = 0.0;
        for (i = 0; i < picTimes.length; ++i) {
            var diff = (picTimes[i] - meanDeltaTime);
            standardDerivation += diff * diff;
        }
        standardDerivation = Math.round(Math.sqrt(standardDerivation / picTimes.length));
        document.getElementById("countPic").innerHTML = "Count pic: " + picTimes.length;
        document.getElementById("meanPic").innerHTML = "Mean pic: " + meanDeltaTime + "ms";
        document.getElementById("sdPic").innerHTML = "SD pic: " + standardDerivation + "ms";
        picTimes = [];

        // Calculation of the sound stimulus
        meanDeltaTime = 0.0;
        for (i = 0; i < soundTimes.length; ++i) {
            meanDeltaTime += soundTimes[i];
        }
        meanDeltaTime = Math.round(meanDeltaTime / soundTimes.length);
        standardDerivation = 0.0;
        for (i = 0; i < soundTimes.length; ++i) {
            diff = (soundTimes[i] - meanDeltaTime);
            standardDerivation += diff * diff;
        }
        standardDerivation = Math.round(Math.sqrt(standardDerivation / soundTimes.length));
        document.getElementById("countSound").innerHTML = "Count sound: " + soundTimes.length;
        document.getElementById("meanSound").innerHTML = "Mean sound: " + meanDeltaTime + "ms";
        document.getElementById("sdSound").innerHTML = "SD sound: " + standardDerivation + "ms";
        document.getElementById("instruction").innerHTML = "Press SPACE to start!";
        soundTimes = [];
        experimentActive = false;
    }

    function showSheep(show) {
        if (show) {
            document.getElementById("sheepPic").style.display = "block";
            document.getElementById("standard").style.display = "none";
        }
        else {
            document.getElementById("sheepPic").style.display = "none";
            document.getElementById("standard").style.display = "block";
        }
        lastTimePicChanged = new Date().getTime();
    }

    function playSound(play) {
        if (play) {
            sheepSound.play();
        }
        lastTimeSoundPlayed = new Date().getTime();
    }

    document.onkeydown = onKey;
    function onKey(e) {
        if (e === null) {
            e = window.event;
        }
        switch (e.which || e.charCode || e.keyCode) {
            case 32:
                // space
                if (!experimentActive) {
                    startExperiment();
                }
                else {
                    stopTest();
                }
                break;
            case 65: // a
                if (experimentActive) {
                    stopExperiment();
                }
                break;
            case 66:
            // b
            // here you can extend... alert("pressed the b key"); break;
        }
    }
</script>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/4.1.1/what-input.min.js"></script>
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"
        integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>
<script>
    $(document).foundation();
</script>

</body>
</html>