-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
178 lines (157 loc) · 7.95 KB
/
index.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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaps for Tablet</title>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link href="game.css" rel="stylesheet">
<link href="fonts/css/fontello.css" rel="stylesheet">
</head>
<body>
<div id="game-parent">
<div id="game-container">
<canvas id="pixi-canvas" tabindex="0"></canvas>
<div id="html-layer">
<div id="sections">
<!-- screen 1 -->
<div id="intro-gui">
<h1>Welcome to the game of shifting shapes</h1>
<p>Your goal is to discover interesting and beautiful shapes.</p>
<p>To continue, please enter the unique ID given to you</p>
<br>
<p><input id="user-provided-id"></p>
<br><button id="done-intro">Continue</button></p>
</div>
<div id="training-gui">
<h1 id="training-title">Training session</h1>
<!-- screen 2 -->
<div id="training-1">
<p>In this game you are going to explore the space of "shifting shapes"
<br>and make interesting and beautiful shapes.
</p>
<p>To make these shapes you are going to be moving these green blocks on the screen</p>
<div class="bottom-text">
<p class="highlight">Drag the left-most or right-most block to a different place.</p>
<br><button id="done-training-1" class="hidden">Next</button>
</div>
</div>
<!-- screen 3 -->
<div id="training-2" class="hidden">
<p>You can move any block provided that all other blocks touch each other.
<br>If there is a block you cannot move, choose another one.
</p>
<div class="bottom-text">
<p>You can move as many blocks as you like
<br>until you find a shape that is interesting and beautiful. </p>
<br><button id="done-training-2">Got it</button>
</div>
</div>
<!-- screen 4 -->
<div id="training-3" class="hidden">
<p>When you make a shape that you find interesting and beautiful
<br>you can save it by clicking on the grey box,
<br>or on the "Collect shape" button.
</p>
<div class="bottom-text">
<!-- <p>אפשר לשמור צורה גם על ידי לחיצה על הלחצן הנוסף שבידך.</p> -->
<p class="highlight">Save the shape now.</p>
</div>
</div>
<!-- screen 5 -->
<div id="training-4" class="hidden">
<p></p>
<div class="bottom-text">
<h1 id="practice-title">Practice - please wait for further instructions.</h1>
<button id="done-training-4">Continue</button>
</div>
</div>
<!-- screen 6 -->
<div id="training-5" class="hidden">
<p>When the game is over
<br>you will get to see all the shapes you have made
<br>and pick your 5 favorite shapes.
</p>
<div class="bottom-text">
<p id="game-length-sentence">The game is 12 minutes long.
<!-- <br>Please play alone, in a quiet surroundings with no interruptions.
<br>
<br>Thanks and enjoy the game! -->
</p>
<button id="done-training-5">Let's play</button>
</div>
</div>
</div>
<div id="blocks-gui">
<button id="add-shape">Collect shape</button>
<br><button id="done-adding">End Game</button>
<p id="end-early-message" class="hidden">You need to collect at least 5 shapes to move to the next step</p>
<p id="stuck-message" class="vertical-align hidden">Ooops, time has run out!
<br>You need to collect at least 5 shapes to continue.
<br>
<br>Please reload and try again
</p>
<p id="continue-message" class="vertical-align hidden">Time's up!
<br>
<br>Press the button below to continue
</p>
<div id="modal-confirm-done" class="hidden">
<div id="modal-confirm-box">
<p>Are you sure you want to end now?</p>
<button id="modal-confirm-cancel-button">Return to game</button>
<button id="modal-confirm-done-button">End game</button>
</div>
</div>
</div>
<div id="selection-gui">
<p id="gallery-instructions">Please choose the 5 most creative shapes among the shapes you saved.
</p>
<button id="done-selection">Done</button>
<button id="previous-page-button">Previous page</button>
<button id="next-page-button">Next page</button>
</div>
<div id="results-gui">
<div id="results-block">
<h1>Results</h1>
<div id="results-text" class="bottom-text">
<p id="rapid-search-text" class="hidden">
Our study shows that creative search is a trade-off between novelty and value.
<br>Your playing method suggests that you are <span class="highlight"><span class="searchScorePercent highlight"></span>%</span> more inclined toward <span class="highlight">rapid and spreading</span>
searches which result in higher visual novelty.
In this kind of search, players tend to move rapidly between shapes, creating many shapes which spread across many different visual categories.
This search strategy usually produces shapes that are more unique in our game.
</p>
<p id="focused-search-text" class="hidden">
Our study shows that creative search is a trade-off between novelty and value.
<br>Your playing method suggests that you are <span class="highlight"><span class="searchScorePercent highlight"></span>%</span> inclined toward <span class="highlight">focused and thoughtful searches</span> which result in higher visual value.
In this kind of search, players tend to focus on each visual category they discover, collecting thoughtfully
shapes at increasing visual consensus.
This search strategy usually produces shapes that carry more meaning in our game.
</p>
<p><br>Your game ID is: <br><br><span class="code" id="code"></span></p>
<p id="followup-link-container">To complete the experiment, <a id="followup-link" href="">please follow this link</a>.</p>
</div>
</div>
<div id="thanks-block">
<h1 class="vertical-align">Thanks for playing!</h1>
</div>
</div>
</div>
<div id="fullscreen-button">
<i id="fullscreen-button-full" class="icon-resize-full"></i>
<i id="fullscreen-button-small" class="icon-resize-small"></i>
</div>
<div id="redmetrics-connection-status">
<p id="redmetrics-connection-status-connected">Connected to RedMetrics</p>
<p id="redmetrics-connection-status-disconnected">Not connected to RedMetrics</p>
<p id="redmetrics-connection-status-connecting">Connecting to RedMetrics...</p>
</div>
</div>
</div>
<script src="deps/pixi.js"></script>
<script src="deps/q.js"></script>
<script src="deps/q-xhr.js"></script>
<script src="deps/underscore.js"></script>
<script src="deps/redmetrics.js"></script>
<script src="bundle.js"></script>
</body>
</html>