stroop-effect/game-start.html at main · KrishnaBMU/stroop-effect · 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
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://gitcdn.xyz/repo/pi0/clippyjs/master/assets/clippy.css" media="all">
    <title>
        Directional Stroop Test
    </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        .container {
        /*background-image: repeating-linear-gradient(0deg, hsla(51,82%,96%,0.1) 0px, hsla(51,82%,96%,0.1) 50px,transparent 50px, transparent 100px),repeating-linear-gradient(90deg, hsla(51,82%,96%,0.1) 0px, hsla(51,82%,96%,0.1) 50px,transparent 50px, transparent 100px),linear-gradient(90deg, hsl(350,89%,85%),hsl(350,89%,85%));
    */

    }
    body {

        /*background-image: linear-gradient(135deg, transparent 0%, transparent 9%,rgba(126, 196, 233,0.6) 9%, rgba(126, 196, 233,0.6) 51%,transparent 51%, transparent 57%,rgba(146, 246, 234,0.6) 57%, rgba(146, 246, 234,0.6) 100%),linear-gradient(45deg, transparent 0%, transparent 12%,rgb(126, 196, 233) 12%, rgb(126, 196, 233) 33%,rgb(126, 196, 233) 33%, rgb(126, 196, 233) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(126, 196, 233),rgb(255,255,255));
        */
        background-color: #92F6EA;
        opacity: 0.9;
        color: black;
        margin: 0px;
        padding-left: 80px;
        padding-top: 30px;
        padding-right: 80px;
        padding-bottom: 20px;
    }
    p {
        font-size: 17.5px;
    }
    h1 {

    }
    ul {
        font-size: 17.5px;
    }
    ol {
        font-size: 17.5px;
    }
    .lefty {
        text-align: left;
        max-width: 450px;
    }
    .righty {
        align: right;
        max-width: 250px;
    }
    </style>
    <link rel="stylesheet" href="base.css">
</head>
<body>
<script src="https://unpkg.com/jquery@3.2.1"></script>
<script src="https://unpkg.com/clippyjs@latest"></script>
<script src="./demo2.js"></script>
    <body data-lightMode="[light | dark]">
<h1>Directional Stroop Test</h1>
<hr>
<div class=buttons>
    <button id=play></button> &nbsp;
    <button id=pause></button> &nbsp;
    <button id=stop></button>
  </div>
<article>
    <p>
    In this experiment you are required to say if the word is located up in
    the box, down in the box, on the left side of the box, or on the right
    side of the box.  Do NOT say what the word says.  For example:</p>

    <img src = "left2.gif" align=center> You should click "Up" because the word
    is located up in the box.<p> <img src = "left3.gif" align=center> You
    should click "Right" because the word is located in the right side of the
    box.<p> <img src = "left1.gif" align=center> You should click "Left" because
    the word is located in the left side of the box.<p>

    As soon as the boxes appear on your screen, identify the locations of the
    words as fast as you can.  When you have finished, click on the "Finish"
    button.  The time it took you to say the locations of the words will
    appear on the screen.  If you want to try the same set of words, click on
    the "reload" button of your browser.  If you want to continue with the
    experiment, click on "Continue Experiment."<p>

    <a href = "game.html">Play the directional stoop test.</a>
    <br>
    <a href = "index.html">Go back.</a>
</article>
</body>
</html>