-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathklishin.html
133 lines (108 loc) · 6.45 KB
/
klishin.html
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
<!-- THIS IS JUST A COPY PASTE OF INDEX.HTML AS OF JUN 17 2021, USING ANDREI KLISHIN'S PUZZLES -->
<!-- If you are looking to set parameters for your own work, check out the <script> section -->
<!-- To add your own puzzles, see puzzles.js -->
<!DOCTYPE HTML>
<html>
<head>
<title>Experiment Task</title>
<meta charset="UTF-8">
<meta name="description" content="Network Inference Pretest from Georgia Tech's RAIL Lab">
<meta name="author" content="Jack Kolb">
</head>
<!-- COPYRIGHTED (C) 2021, RAIL Lab @ Georgia Tech -->
<!-- import the Roboto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<!-- when running this on a dynamic webserver (ex Flask), uncomment this section below, you may need to reformat it based on your webserver -->
<!--
<link rel="stylesheet" href="{{url_for('static', filename='sa-test/css/styles.css')}}">
<script src="{{url_for('static', filename='nc-test/js/gameboard.js')}}"></script>
<script src="{{url_for('static', filename='nc-test/js/Networks.js')}}"></script>
<script src="{{url_for('static', filename='nc-test/js/Node.js')}}"></script>
<script src="{{url_for('static', filename='nc-test/js/puzzles.js')}}"></script>
<script src="{{url_for('static', filename='nc-test/js/sidePanel.js')}}"></script>
<script src="{{url_for('static', filename='nc-test/js/utility.js')}}"></script>
-->
<!-- when running this on a static webserver (ex GitHub), uncomment this section below -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/gameboard.js"></script>
<script src="js/Networks.js"></script>
<script src="js/Node.js"></script>
<script src="js/puzzles.js"></script>
<script src="Klishin/KlishinPuzzles.js"></script>
<script src="js/sidePanel.js"></script>
<script src="js/utility.js"></script>
<!-- HTML content -->
<body>
<div class="center-div">
<!-- title, currently kept blank -->
<h1></h1>
<!-- content -->
<div style="display: flex;">
<!-- gameboard canvas, if you would like you can change the height/width -->
<canvas id="Canvas" class="stage" width="800" height="800"></canvas>
<!-- left side instructions panel -->
<div id="SidePanel" class="side-panel">
<!-- side panel title -->
<div id="SidePanelTitle" style="text-decoration: underline; text-align: center;"></div>
<!-- side panel text content -->
<div id="SidePanelContent"></div>
<br>
<!-- side panel next button -->
<div style="display:flex; flex-direction: column; justify-content: center">
<button id="networks-next-button" class="side-panel-button"></button>
</div>
</div>
</div>
</div>
<script>
// log that this page is active
log({"stage": "networks", "action": "opened-page"});
// initialize game variables
var stage = document.getElementById("Canvas"); // the gameboard stage (for drawing)
var context = stage.getContext("2d"); // the gameboard context (for drawing)
var workerId = ""; // used in the RAIL@GT package to track the user's ID, you can change this if you are using a dynamic webserver and are passing in a user ID
var mission = "{{ mission }}"; // used in the RAIL@GT package to track the experiment's endgoal robot mission, you can change this if you are doing something similar, or you can remove it
var scores = []; // will contain the score of each stage
// initialize the gameboard
var gameboard = new Gameboard(context);
// initialize the Network Connectivity test
var networks = new Networks(0); // the argument is the starting puzzle
// initialize the puzzles, you can add your own puzzles in gameboard.js
// SET THIS networks.puzzles below to the puzzles you wish to include in your experiment, they will appear in the order of the array
//networks.puzzles = [generatePuzzle1, generatePuzzle2, generatePuzzle3, generatePuzzle4, generatePuzzle5, generatePuzzle6, generatePuzzle7, generatePuzzle8];
// make a list of the possible puzzles
let possiblePuzzles = [generatePuzzle4, generatePuzzle6, generatePuzzle7, generatePuzzle8, generatePuzzleKlishinSmall, generatePuzzleKlishinBaseline, generatePuzzleKlishinLarge, generatePuzzleKlishinSparse, generatePuzzle5, generatePuzzleKlishinShortcut, generatePuzzleKlishinTree, generatePuzzleKlishinTreeShortcut, generatePuzzleKlishinTreeShuffle, generatePuzzleKlishinSemilong, generatePuzzleKlishinHalo];
// initialize the start puzzles as training puzzles
networks.puzzles = [generatePuzzle1, generatePuzzle2, generatePuzzle3];
// shuffle the test puzzles for counterbalancing
var shuffledPuzzles = possiblePuzzles.slice(0), i = possiblePuzzles.length, temp, index;
while (i--) {
index = Math.floor((i+1) * Math.random());
temp = shuffledPuzzles[index];
shuffledPuzzles[index] = shuffledPuzzles[i];
shuffledPuzzles[i] = temp;
}
// add the shuffled puzzles to the network puzzles
networks.puzzles = networks.puzzles.concat(shuffledPuzzles);
networks.propagationPeriod = 500; // SET THIS to the desired propagation time step, 500 means 500ms per time step
networks.showScore = true; // SET THIS to whether you wish the show the user their score at the end of the game
networks.showTriangles = false; // SET THIS to whether you wish to display some nodes as triangles, in some networks
networks.showOptimalNodes = "{{ showAnswers }}" != "" ? true : false; // SET THIS to whether you wish to display the optimal nodes
gameboard.askId = true; // SET THIS to whether you wish to ask for the user's Mechanical Turk ID
// loads the next puzzle into the network (in this initial case, it loads the first puzzle)
networks.nextPuzzle();
// intialize the side panel to the introduction
sidePanelIntroduction();
// initialize the mouseclick handler
window.addEventListener("mousedown", mouseHandler);
// main game loop
function updateBoard() {
context.clearRect(0, 0, stage.width, stage.height); // clear the gameboard
gameboard.draw(); // draw the gameboard and objects
networks.timestep(); // update the timestep for the networks, for propagation
window.requestAnimationFrame(updateBoard); // loop
}
window.requestAnimationFrame(updateBoard);
</script>
</body>
</html>