ColouredTrails.github.io/task-instructions_original.html at master · morVered/ColouredTrails.github.io · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="manifest" href="site.webmanifest">
    <link rel="apple-touch-icon" href="icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap-spinner.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-spinner.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

    <h3 style="text-align: center;">Coloured Trails Game Instructions</h3>

    <div id="instructions">

        <p><br />
            You will be requested to play the Coloured Trails game. The objective of the game is to gain the highest score possible.
            Points may be gained by moving to a target location on the board and rewarded for the amount of coloured chips the player has in
            his/her possesion at the end of the round. Coloured trails is a one-round game played on a
            square board by two or more players. The board consists of a square grid of tiles. Each
            tile is assigned a solid color from a given palette of colors (e.g., red, blue, green). Two different types of
            objects may also be placed on top of tiles—these are players and the goal. Tiles may contain multiple
            players and the goal.
        </p>

        <img src="img/instructions1.jpg" width="300px" class="center" />

        <p>Each player begins with a number of allocated chips of different colours. Chips are designated colors from
            the same
            palette as the board. Players can use chips to build a path towards the target tile.</p>

        <img src="img/instructions2.jpg" width="400px" class="center" />

        <p>Chips may only be used to move to a tile of the same color as the
            chip (e.g., a player uses one green chip to move to a green tile adjacent to the player’s current
            position). Players can only move up, down, left or right and not diagonally. Chips may only be used once.
        </p>

        <img src="img/instructions3.jpg" width="300px" class="center" />

        <p>The objective of each player is to <b>gain the highest score possible</b> over a set of 10 games (the score
            from each game will be added together for the final score). During each game you will have one chance to
            determine the best course of action which will award you with the highest possible amount of points. Often this is achieved
            by reaching the target tile, however sometimes it is better to do nothing. During the game you may request chips from
            other players if you need them to reach the target tile. A player must relinquish a chip that has been requested from it,
            if they are not already using that chip to reach a goal. If both you and another player have requested the same chip, you have precedance and will get the chip.
            During the game you can assume that the other players are necessarily following the best path in terms of maximizing their
            score.</p>

        <p>During each game you can ask all players for as many chips as you want. An interaction with a specific player
            is considered a single <i>"chip request"</i> regardless of how many chips were requested. The game is
            constructed as a one-round game. You have 3 minutes per each game to decide if you want to request a chip
            from other players or not. Once you have decided click "Done" and the next game will begin. If you have not
            made a decision in 3 minutes, the game will time out and you will not receive any points for that game</p>

        <img src="img/instructions4.png" width="600px" class="center" />

        <h3 style="text-align: center;">Scoring</h3>

        <p>The scores may range from -500 to +500. The following factors effect the score :</p>
        <ol>
            <li>When reaching the goal the player gets a bonus +150 points.</li>
            <li>Another +5 points are allocated for every chip the player has not used at the end of their play.</li>
            <li>The act of requesting a chip costs -70 points for each player from whom you request chips, and each
                single chip requested costs an additional -6
                points. A chip request refers to an interaction with a specific player regardless of how many chips were
                requested. Therefore, when possible, you should reduce the number of players you are requesting chips
                from.</li>
        </ol>

        <h3 style="text-align: center;">Computer Assistant</h3>
        <p><br />During the game you may use the advice provided by a computer assistant. The computer assistant will
            provide
            you with the best course of action to take for yourself and the best course other players may take,
            <em>according to
                its own understanding</em>. The computer assistant suggestions are not necessarily the best possible
            paths
            for you or for the other players. The other players are necessarily pursuing the best path in terms of
            maximizing the score, therefore if there exists a better solution, the other players will not perform the
            path suggested by the computer assistant.</p>

        <h3 style="text-align: center;">Example</h3>
        <br />
        <img src="img/instructions5.png" width="100%" class="center" />

        <p>In this instance the computer assistant suggests for you to follow the path illustrated above. Following the
            computer assistants’ advice would mean asking Player 1 for 3 white chips and Player 2 for 1 blue chip,
            reaching the goal and having 5 chips remaining. Your final score would be:</p>
        <ul>
            <li>For reaching the goal : +150</li>
            <li>For the remaining chips : 5*5 = 25</li>
            <li>For the chip requests : 2*(-70) + 4*(-6) = -164</li>
            <li>Overall : 150 + 25 – 164 = 11</li>
        </ul>

        <p>A better course of action under these circumstances would be to do <u>nothing</u>, and not reach the goal at
            all. Your final score would be:</p>
        <ul>
            <li>For not reaching the goal : 0</li>
            <li>For the remaining chips : 5*5 = 25</li>
            <li>For the chip requests : 0</li>
            <li>Overall : 0 + 25 + 0 = 25</li>
        </ul>
        <!-- MOR VERED TODO changed task-test.html to task-train.html. After the instructions proceed to the training -->
        <!--<p><a id="test_link" href="task-train.html">Proceed to interface tutorial video, please turn volume up</a>.</p>-->


        <p><br /> <u>You must answer the following five questions correctly in order to proceed. </u>
        </p>


        <div id="test-one" style="display:inline">
            <p>1. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-two" style="display:inline">
            <p>2. Requesting two chips from two different players would cost :<BR>
                <input type="radio" id="test-two1" name="2. Requesting two chips from two different players would cost :" value="70 + 6 + 6 = 82 points" onkeydown="evaluateTest(2)" onclick="evaluateTest(2)">70 + 6 + 6 = 82 points<BR>
                <input type="radio" id="test-two2" name="2. Requesting two chips from two different players would cost :" value="6 + 6 = 12 points" onkeydown="evaluateTest(2)" onclick="evaluateTest(2)">6 + 6 = 12 points<BR>
                <input type="radio" id="test-two3" name="2. Requesting two chips from two different players would cost :" value="70 + 6 + 70 + 6 = 152 points" onkeydown="evaluateTest(2)" onclick="evaluateTest(2)">70 + 6 + 70 + 6 = 152 points<BR>
            </p>
        </div>

        <div id="test-three" style="display:inline">
            <p>3. It is better to reach the target tile even if it leads to a lower score :<BR>
                <input type="radio" id="test-three1" name="3. It is better to reach the target tile even if it leads to a lower score :" value="True" onkeydown="evaluateTest(3)" onclick="evaluateTest(3)">True<BR>
                <input type="radio" id="test-three2" name="3. It is better to reach the target tile even if it leads to a lower score :" value="False" onkeydown="evaluateTest(3)" onclick="evaluateTest(3)">False<BR>
            </p>
        </div>

        <div id="test-four" style="display:inline">
            <p>4. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-five" style="display:inline">
            <p>5. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-six" style="display:inline">
            <p>6. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-seven" style="display:inline">
            <p>7. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-eight" style="display:inline">
            <p>8. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-nine" style="display:inline">
            <p>9. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <div id="test-ten" style="display:inline">
            <p>10. At the end of the game I get extra points for each chip that I didn't use :<BR>
                <input type="radio" id="test-one1" name="At the end of the game I get extra points for each chip that I didn't use :" value="True" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">True<BR>
                <input type="radio" id="test-one2" name="At the end of the game I get extra points for each chip that I didn't use :" value="False" onkeydown="evaluateTest(1)" onclick="evaluateTest(1)">False<BR>
            </p>
        </div>

        <button id="doneEvalUnderstandingBtn" class="btn btn-sm btn-outline-primary" onclick="evaluateUnderstanding()">Done</button>

        <div id="next_page" style="display:none">
            <p>You have successfully completed the test. <a id="task_instructions_link" href="task-instructions.html">Please click here to proceed</a>.</p>
        </div>

    </div>


    <div class="clear"></div>

    <script src="js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- TODO get jquery local -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/plugins.js"></script>

    <script>

    var answerArray = [0,0,0,0,0,0,0,0,0,0]

        function evaluateUnderstanding(){
            var wrong = false;
            var incorrect = 0;
            //Go over the answer array and find out if there were any wrong answers
            for(var i = 0 ; i < answerArray.length; i++){
                if(answerArray[i]==0)
                    incorrect++
            }

            //If more than 3 mistakes
            if(incorrect > 3)
            {
                document.getElementById("next_page").children[0].textContent = "You did not pass the test, the task is now complete.Please enter completion code: " + completionCode() + ".";
            }
            else {
                // Set the condition.
                condition = 0;
                condition = randomIntFromInterval(0, 2);
                alert("condition="+condition)

                if(condition == 0) {
                    document.getElementById("task_instructions_link").href = "task-instructions-no.html" + window.location.search + "&cond=" + condition;
                } else {//Mor Vered else if condition == 1 / condition == 2
                    document.getElementById("task_instructions_link").href = "task-instructions.html" + window.location.search + "&cond=" + condition;
                }
            }
        }

        function evaluateTest(task){
            if(task == 1 && document.getElementById('test-one1').checked)
                answerArray[0] = 1;
            else if( task == 1 && !(document.getElementById('test-one1').checked))
                answerArray[0] = 0;

            if(task == 2 && document.getElementById('test-two3').checked)
                answerArray[1] = 1;
            else if( task == 2 && !(document.getElementById('test-two3').checked))
                answerArray[1] = 0;

            if(task == 3 && document.getElementById('test-three2').checked)
                answerArray[2] = 1;
            else if( task == 3 && !(document.getElementById('test-three2').checked))
                answerArray[2] = 0;

        }

        function completionCode() {
            return Math.floor(Math.random() * 90 + 10) + "0" + Math.floor(Math.random() * 90 + 10) + qs["id"] + Math.floor(Math.random() * 90 + 10) + "x";
            // return qs["id"] + qs["gender"] + qs["genderc"] + qs["age"] + "-" + Math.floor(Math.random() * (999 - 111)) + 111;
        }

        $(document).ready(function () {
            function saveToFile(data) {
                jsonString = String(data);
                jQuery.ajax({
                    url: baseurl + '/savedemographics.php',
                    data: { 'jsonString': jsonString },
                    type: 'POST'
                });
            }

            var qs = (function (a) {
                if (a == "") return {};
                var b = {};
                for (var i = 0; i < a.length; ++i) {
                    var p = a[i].split('=', 2);
                    if (p.length == 1)
                        b[p[0]] = "";
                    else
                        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
                }
                return b;
            })(window.location.search.substr(1).split('&'));

            var gameprogress = qs["id"] + "," + qs["gender"] + "," + qs["genderc"] + "," + qs["age"] + "," + (new Date).getTime();
            saveToFile(gameprogress);

            document.getElementById("test_link").href = "task-train.html" + "?id=" + qs["id"] + "&cond=" + qs["cond"];
        });
    </script>
</body>

</html>