taskD4.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.4</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 class="small-4 columns" style="border: thin solid">
        <div class="small-4 float-right columns text-right">
            <a class="button secondary tiny" href="taskD4German.html">Deutsch ></a>
        </div>
        <div class="row">
            <div class="small-12 columns">
                <h4>Color brain-teaser</h4>
                <p>Your task is to press the correct arrow key for each color.</p>
                <p>Mode A: Only concentrate on the actual color, not the word.</p>
                <p>Mode B: Focus on the word, not the color.</p>
            </div>
            <div class="small-6 columns">
                <button class="button" id="modeA" onclick="startExperiment('a')">Mode A</button>
            </div>
            <div class="small-6 text-right columns">
                <button class="button" id="modeB" onclick="startExperiment('b')">Mode B</button>
            </div>
            <div class="small-8 columns">
                <p id="time"></p>
                <p id="mean"></p>
                <p id="sd"></p>
            </div>
            <div class="small-12 columns">
                <div class="progress" role="progressbar">
                    <div id="progressBar" class="progress-meter" style="width: 0"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="small-8 columns">
        <div class="row" style="padding-top: 0">
            <div class="small-3 small-centered columns text-center">
                <h4>↑</h4>
                <h4 id="greenColor" style="background-color: #3adb76">Green</h4>
            </div>
        </div>
        <br/>
        <br/>
        <div class="row">

            <div class="small-4 columns" id="blueSection">
                <h4>← <span id="blueColor" style="background-color: #1779ba; padding: 4px 40px">Blue</span>
                </h4>
            </div>
            <div class="small-4 text-center wordContainer columns" style="display: none">
                <h4 class="word">Blue</h4>
            </div>
            <div class="small-4 text-center wordContainer columns" style="display: none">
                <h4 class="word">Green</h4>
            </div>
            <div class="small-4 text-center wordContainer columns" style="display: none">
                <h4 class="word">Red</h4>
            </div>
            <div class="small-4 text-center wordContainer columns" style="display: none">
                <h4 class="word">Yellow</h4>
            </div>
            <div id="pointsContainer" class="small-4 text-center columns" style="display: none">
                <h4 id="points"></h4>
            </div>

            <div class="small-4 float-right text-right columns" id="redSection">
                <h4><span id="redColor" style="background-color: #cc4b37; padding: 4px 40px">Red</span> →</h4>
            </div>

        </div>
        <br/>
        <br/>
        <div class="row">
            <div class="small-3 small-centered columns text-center" id="yellowSection">
                <h4 id="yellowColor" style="background-color: #ffae00">Yellow</h4>
                <h4>↓</h4>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <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 times = [];
    var lastTimeWordShowed;
    var counter;
    var amountOfGames = 0;
    var startTime;
    var points;
    var gameMode;
    // Blue = 0, Red = 1, Yellow = 2, Green = 3
    var displayedColor;
    var displayedWord;

    var blue = '#1779ba';
    var red = '#cc4b37';
    var yellow = '#ffae00';
    var green = '#3adb76';

    // Elements
    var modeAButtonElement = document.getElementById("modeA");
    var modeBButtonElement = document.getElementById("modeB");
    var progressBarElement = document.getElementById("progressBar");
    var meanElement = document.getElementById("mean");
    var sdElement = document.getElementById("sd");
    var pointsContainerElement = document.getElementById("pointsContainer");
    var pointsElement = document.getElementById("points");
    var timeElement = document.getElementById("time");

    var blueElement = document.getElementById("blueColor");
    var greenElement = document.getElementById("greenColor");
    var redElement = document.getElementById("redColor");
    var yellowElement = document.getElementById("yellowColor");


    function millisToSeconds(millis) {
        var seconds = ((millis % 60000) / 1000).toFixed(0);
        return (seconds < 10 ? '0' : '') + seconds;
    }

    function startExperiment(selectedMode) {
        startTime = new Date().getTime();
        experimentActive = true;

        modeAButtonElement.setAttribute("disabled", "true");
        modeBButtonElement.setAttribute("disabled", "true");
        progressBarElement.style.width = '0';

        timeElement.innerHTML = "";
        meanElement.innerHTML = "";
        sdElement.innerHTML = "";

        counter = 0;
        points = 0;
        gameMode = selectedMode;
        chooseColorOrWordForGameMode(gameMode);
        amountOfGames++;
        startTest();
    }

    function chooseColorOrWordForGameMode(mode) {
        if (mode === 'a') {
            blueElement.style.backgroundColor = "transparent";
            greenElement.style.backgroundColor = "transparent";
            yellowElement.style.backgroundColor = "transparent";
            redElement.style.backgroundColor = "transparent";

            blueElement.style.color = "black";
            greenElement.style.color = "black";
            yellowElement.style.color = "black";
            redElement.style.color = "black";
        } else {
            blueElement.style.backgroundColor = blue;
            greenElement.style.backgroundColor = green;
            yellowElement.style.backgroundColor = yellow;
            redElement.style.backgroundColor = red;

            blueElement.style.color = "transparent";
            greenElement.style.color = "transparent";
            yellowElement.style.color = "transparent";
            redElement.style.color = "transparent";
        }
    }

    function startTest() {
        pointsContainerElement.style.display = "none";
        pointsElement.innerHTML = "";
        showStimulus();
    }

    function showStimulus() {
        testActive = true;
        counter++;
        showWordWithRandomColor(true);
    }

    function showWordWithRandomColor(show) {
        var wordContainers = document.getElementsByClassName("wordContainer");
        var words = document.getElementsByClassName("word");

        if (show) {
            // Hide all words
            showWordWithRandomColor(false);
            var i = Math.floor(Math.random() * (3 + 1));
            // Display one of the words...
            wordContainers[i].style.display = "block";
            displayedWord = i;
            // ... with a random color
            words[i].style.color = randomColor();
        }
        else {
            wordContainers[0].style.display = "none";
            wordContainers[1].style.display = "none";
            wordContainers[2].style.display = "none";
            wordContainers[3].style.display = "none";
        }
        lastTimeWordShowed = new Date().getTime();
    }

    function randomColor() {
        // Colors: Blue, Green, Red, Yellow
        var colors = [blue, green, red, yellow];
        var i = Math.floor(Math.random() * (3 + 1));
        displayedColor = i;
        return colors[i];
    }

    function stopTest(key) {
        var currTime = new Date().getTime();
        var deltaTime;

        deltaTime = currTime - lastTimeWordShowed;
        times.push(deltaTime);

        if (gameMode === "a") {
            if (displayedColor === key) {
                points++;
            }
        }
        if (gameMode === 'b') {
            if (displayedWord === key) {
                points++;
            }
        }

        // Display count in progress bar
        document.getElementById("progressBar").style.width = ((100 / 20) * counter) + "%";

        // Stop the experiment after 10 times
        testActive = false;
        if (!(counter < 20)) {
            stopExperiment();
        } else {
            startTest();
        }
    }

    function stopExperiment() {
        testActive = false;
        showWordWithRandomColor(false);
        pointsContainerElement.style.display = "block";
        pointsElement.innerHTML = "Finished! Your score is: " + points;

        // Update the time
        var currentTime = new Date().getTime();
        document.getElementById("time").innerHTML = "Total: " + millisToSeconds(currentTime - startTime) + " seconds";

        // Calculation of the picture stimulus
        var meanDeltaTime = 0.0;
        for (var i = 0; i < times.length; ++i) {
            meanDeltaTime += times[i];
        }
        meanDeltaTime = Math.round(meanDeltaTime / times.length);
        var standardDerivation = 0.0;
        for (i = 0; i < times.length; ++i) {
            var diff = (times[i] - meanDeltaTime);
            standardDerivation += diff * diff;
        }
        standardDerivation = Math.round(Math.sqrt(standardDerivation / times.length));
        meanElement.innerHTML = "Mean: " + meanDeltaTime + "ms";
        sdElement.innerHTML = "SD: " + standardDerivation + "ms";
        times = [];

        experimentActive = false;
        modeAButtonElement.removeAttribute("disabled");
        modeBButtonElement.removeAttribute("disabled");

        if (amountOfGames === 5) {
            alert("You just played 5 games in a row! Sick!")
        } else if (amountOfGames === 10) {
            alert("You've played 10 games now... Are you addicted?")
        } else if (amountOfGames === 50) {
            alert("50 games in a row... YOU ARE INSANE!")
        } else if (points === 20) {
            alert("Boom! No mistakes!")
        } else if (points === 19) {
            alert("Aww, so close! You can do it!")
        }

    }

    document.onkeydown = onKey;
    function onKey(e) {
        if (e === null) {
            e = window.event;
        }
        switch (e.which || e.charCode || e.keyCode) {
            case 37:
                if (experimentActive) {
                    stopTest(0);
                }
                break;
            case 38:
                if (experimentActive) {
                    stopTest(1);
                }
                break;
            case 39:
                if (experimentActive) {
                    stopTest(2);
                }
                break;
            case 40:
                if (experimentActive) {
                    stopTest(3);
                }
                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>