cognitive-load-app/stroop.html at main · cbmorrell/cognitive-load-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Stroop Test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/lux/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <h1 class="text-center">Stroop Test</h1>
        <p class="text-center">
            This is a test displaying the Stroop effect. Please select the button whose text describes the font color of the prompt
            (i.e., if the prompt's font colour is blue, select the button that says "blue"). Your score will increase and decrease
            depending on if the correct button was pressed.
        </p>
        <div class="text-center">
            <h3 class="mt-3" id="score">Text</h3>
            <h4 class="mt-4" id="prompt">Text</h4>
            <button class="mt-5" id="left-button" onclick="leftButtonClicked()">Text</button>
            <button class="mt-5" id="right-button" onclick="rightButtonClicked()">Text</button>
        </div>

        <script>
            /*
            Display text that either says "Blue" or "Red".
            The colour of the font is randomly chosen, so it does not always match up with the text.
            The users should select the button whose text describes the color of the prompt at the top of the screen.
            */
            const colors = ['blue', 'red'];
            let score = 0;  // score count

            setAllElements();   // initially set all elements

            function setTextElementProperties(id, text, color) {
                const getRandomColorIndex = () => {
                    return Math.floor(Math.random() * colors.length);
                }
                if (text === undefined) {
                    const random_word_idx = getRandomColorIndex(); // get random integer to select word to display
                    text = colors[random_word_idx];
                }

                if (color === undefined) {
                    const random_font_color_idx = getRandomColorIndex();   // get random integer to select font colour
                    color = colors[random_font_color_idx];
                }

                document.getElementById(id).innerHTML = text.toUpperCase();
                document.getElementById(id).style.color = color;

                return [text, color];
            }

            function setAllElements() {
                document.getElementById("score").innerHTML = `Score: ${score.toString()}`;  // set score without modifying colour

                // Set prompt and left button randomly
                promptProperties = setTextElementProperties("prompt");
                leftButtonProperties = setTextElementProperties("left-button");

                // Set right button based on left button properties
                rightButtonText = leftButtonProperties[0] === colors[0] ? colors[1].toUpperCase() : colors[0].toUpperCase();   // set text opposite of left button
                rightButtonColor = leftButtonProperties[1] === colors[0] ? colors[1] : colors[0];     // set color opposite of left button
                setTextElementProperties("right-button", rightButtonText, rightButtonColor);

                // Determine the correct button that the user should press
                correctButtonId = rightButtonText === promptProperties[1] ? 'right-button' : 'left-button';

                return correctButtonId;
            }


            function correctButtonWasClicked(buttonId) {
                promptColor = document.getElementById("prompt").style.color;
                button_text = document.getElementById(buttonId).innerHTML.toLowerCase();
                return promptColor === button_text;
            }


            function leftButtonClicked() {
                if (correctButtonWasClicked("left-button")) {
                    score++;
                } else {
                    score--;
                }

                score = score <= 0 ? 0 : score; // stop score from displaying negative numbers

                setAllElements();   // reset elements
            }

            function rightButtonClicked() {
                if (correctButtonWasClicked("right-button")) {
                    score++;
                } else {
                    score--;
                }

                score = score <= 0 ? 0 : score; // stop score from displaying negative numbers

                setAllElements();   // reset elements
            }
        </script>
    </body>
</html>