-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
402 lines (370 loc) · 25.1 KB
/
Copy pathindex.html
File metadata and controls
402 lines (370 loc) · 25.1 KB
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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html class="uk-background-secondary">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Examiner V2</title>
<meta name="description" content="Examiner">
<meta author="adaxiik">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.5.9/css/uikit.min.css" />
<link rel="stylesheet" href="css/index.css?v=28">
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>
<body>
<div id="title">
<div class="title-text">
<h1 class="uk-light uk-text-center uk-heading-xlarge">Examiner</h1>
<h3 class="uk-light uk-text-center">Let the game begin</h3>
</div>
<div id="uploadButton" class="upload uk-light uk-background-secondary" uk-form-custom>
<input type="file" accept=".dlc" id="file-input">
<div class="uploadOptions">
<button class="uk-button uk-button-default uk-button-large" type="button" tabindex="-1"
onclick="document.getElementById('file-input').click();">Select File</button>
<span>OR</span>
<span style="color: white;">Drag and drop file</span>
</div>
<div class="dragInfo">
<span uk-icon="upload" class="icon"></span>
<p>Drag and drop a DLC file here</p>
</div>
<div class="dragInfo line"></div>
</div>
<div id="recentFilesPanel" hidden>
<div class="recent-files-header">Recently Opened</div>
<div id="recentFilesList"></div>
</div>
<div id="dataTransferBar">
<button type="button" class="data-transfer-btn" id="exportDataBtn"
title="Download ALL your data (every DLC's sessions, ratings, recent files, settings) as one backup file"
onclick="exportAllData()">
<span uk-icon="icon: download; ratio: 0.85;"></span> Export all
</button>
<button type="button" class="data-transfer-btn" id="importDataBtn"
title="Restore from a full backup or a single-DLC export file"
onclick="document.getElementById('import-data-input').click()">
<span uk-icon="icon: upload; ratio: 0.85;"></span> Import data
</button>
<input type="file" accept=".json,.examiner" id="import-data-input" style="display:none">
</div>
</div>
<div id="examiner" hidden>
<div class="uk-grid-collapse" uk-grid>
<div class="uk-width-3-4@l uk-width-4-5@xl">
<div class="section-title">
<button class="exit-button uk-button uk-button-danger" type="button"
onclick="confirmLeaveExaminer()"><a
class="uk-link-reset" uk-icon="icon: sign-out; ratio: 1.1;"></a></button>
<span id="dlc-name">
Examiner v2
</span>
<button class="reload-btn" id="reloadBtn" title="Reload questions from file" onclick="document.getElementById('reload-file-input').click()">
<span uk-icon="icon: refresh; ratio: 1.0;"></span>
</button>
<input type="file" accept=".dlc" id="reload-file-input" style="display:none">
</div>
<div id="questionHolder">
<!-- JS: Question -->
</div>
<div class="check-skip-row">
<button id="prevButton" class="uk-button uk-button-default" type="button" onclick="prevQuestion()" title="Previous question" disabled>PREV</button>
<button id="checkButton" class="uk-button uk-button-primary" type="button" onclick="checkAnswers()">Check</button>
<button id="skipButton" class="uk-button uk-button-default" type="button" onclick="skipQuestion()">Skip</button>
<button id="unmarkButton" class="uk-button uk-button-default" type="button" onclick="unmarkQuestion()" hidden>Unmark</button>
</div>
<hr class="uk-divider-icon" id="qaSplit">
<zero-md id="md-holder" src=""> <!-- JS: MD -->
<template>
<link rel="stylesheet" href="css/md.css?v=6">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css"/>
</template>
</zero-md>
<div id="answersHolder">
<!-- JS: Answers -->
</div>
</div>
<div class="uk-width-1-4@l uk-width-1-5@xl">
<div class="sidebar">
<span class="section-title darker">Time
<button class="pause-toggle-btn" id="pauseButton" onclick="togglePause()" title="Pause/Continue">⏸</button>
<button class="sound-toggle-btn" id="soundButton" onclick="toggleSound(event)" title="Zvuky"></button>
<div id="soundPanel" class="sound-panel" hidden></div>
</span>
<span class="timer" id="timer">
<!-- JS: Timer --> 00 : 00
</span>
<span class="section-title darker">Questions
<button class="search-toggle-btn" onclick="toggleSearch()" title="Search question"><span uk-icon="search"></span></button>
</span>
<div class="question-search-bar" id="questionSearchBar" hidden>
<input type="text" id="questionSearch" class="question-search-input" placeholder="Search..." oninput="searchQuestions(this.value)">
</div>
<div class="question-list" id="questionList">
<!-- JS: Question List -->
</div>
<div class="legend">
<span class="circle active"></span> Active
<span class="circle correct"></span> Correct
<span class="circle wrong"></span> Wrong
<span class="circle correct wrong"></span> Corrected
<span class="circle skipped"></span> Skipped
</div>
<button class="finish-exam-btn uk-button" onclick="confirmFinish()">Finish Exam</button>
</div>
</div>
</div>
</div>
<div id="endScreen" hidden>
<h1 id="titleText" class="uk-text-center uk-heading-xlarge uk-light">
<!-- JS: title -->
</h1>
<h2 id="subtitleText" class="uk-text-center uk-light">
<!-- JS: subtitle -->
</h2>
<div id="statsHolder"></div>
<div style="text-align:center; margin-top:2rem; padding-bottom:2rem;">
<button id="restartButton" class="uk-button uk-button-danger uk-button-large" type="button"
onClick="window.location.reload();">Restart</button>
</div>
</div>
<div id="confirmScreen" hidden>
<h1 id="confirmTitle" class="uk-text-center uk-light">
<!-- JS: text -->
</h1>
<p class="confirmation">
<button id="cancelButton" style="margin:1em; width: 18vw;" class="uk-button uk-button-danger uk-button"
type="button" title="Cancel" onClick="window.location.reload();"><span
uk-icon='icon: close; ratio: 3.5'></span></button>
<button id="leaveDiscardButton" class="uk-button uk-button-default" type="button"
title="Leave without saving" hidden>Leave without saving</button>
<button id="confirmButton" style="margin:1em; width: 18vw;" class="uk-button uk-button-primary uk-button "
type="button" onClick="window.location.reload();"><span
uk-icon='icon: check; ratio: 3.5'></span></button>
</p>
</div>
<!-- Questions Wheel view -->
<div id="wheelView" hidden>
<div class="uk-grid-collapse" uk-grid>
<div class="uk-width-3-4@l uk-width-4-5@xl">
<div class="section-title">
<button class="exit-button uk-button uk-button-danger" type="button"
onclick="leaveWheel()"><a class="uk-link-reset" uk-icon="icon: sign-out; ratio: 1.1;"></a></button>
<span id="wheel-dlc-name">Questions Wheel</span>
<button class="wheel-config-btn" id="wheelConfigButton" onclick="toggleWheelConfig(event)" title="Wheel configuration">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</button>
<div id="wheelConfigPanel" class="wheel-config-panel" hidden>
<div class="wheel-config-row" data-tooltip="Overall wheel size (60 – 200%)">
<span class="wheel-config-label">Wheel size</span>
<input type="range" id="wheelSizeSlider" min="60" max="200" step="5" value="100">
<input type="text" class="wheel-config-value" id="wheelSizeValue" value="100%">
</div>
<div class="wheel-config-row" data-tooltip="Label font size (20 – 400%)">
<span class="wheel-config-label">Text size</span>
<input type="range" id="wheelTextSizeSlider" min="20" max="400" step="5" value="50">
<input type="text" class="wheel-config-value" id="wheelTextSizeValue" value="50%">
</div>
<div class="wheel-config-row" data-tooltip="Spin animation duration (1 – 10 s)">
<span class="wheel-config-label">Spin time</span>
<input type="range" id="wheelSpinTimeSlider" min="1000" max="10000" step="250" value="4000">
<input type="text" class="wheel-config-value" id="wheelSpinTimeValue" value="4s">
</div>
<div class="wheel-config-row" data-tooltip="Size of the central SPIN hub (8 – 40%)">
<span class="wheel-config-label">Spin button</span>
<input type="range" id="wheelHubSizeSlider" min="8" max="40" step="1" value="15">
<input type="text" class="wheel-config-value" id="wheelHubSizeValue" value="15%">
</div>
<div class="wheel-config-divider"></div>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelHintsRow" data-tooltip="Show the 'Show hint' button in the question modal">
<span class="wheel-config-label">Show hints</span>
<span class="sound-switch" id="wheelHintsSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelScoringRow" data-tooltip="Show a 1-5 star self-rating on each question (saved between sessions)">
<span class="wheel-config-label">Self-rating</span>
<span class="sound-switch" id="wheelScoringSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelTextOuterRow" data-tooltip="Place labels at the outer rim instead of centred in the sector">
<span class="wheel-config-label">Align to outer side</span>
<span class="sound-switch" id="wheelTextOuterSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelDynamicRotationRow" data-tooltip="Re-orient labels after each spin so none appear upside-down">
<span class="wheel-config-label">Auto rotate</span>
<span class="sound-switch" id="wheelDynamicRotationSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelCenteredRow" data-tooltip="Vertically center the wheel in the available viewport">
<span class="wheel-config-label">Center on screen</span>
<span class="sound-switch" id="wheelCenteredSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelTimerRow" data-tooltip="Show a global timer and a per-question timer">
<span class="wheel-config-label">Timer</span>
<span class="sound-switch" id="wheelTimerSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelTimerContinuousRow" data-tooltip="On: global timer ticks continuously. Off: only counts while a question is open.">
<span class="wheel-config-label">Count always</span>
<span class="sound-switch" id="wheelTimerContinuousSwitch"></span>
</label>
<label class="wheel-config-row wheel-config-toggle-row" id="wheelMembersRow" data-tooltip="Track members answering each question — edit the roster with the people icon">
<span class="wheel-config-label">Members</span>
<span class="sound-switch" id="wheelMembersSwitch"></span>
</label>
<div class="wheel-config-divider"></div>
<div class="wheel-config-actions">
<button type="button" class="wheel-config-action" id="wheelExportBtn" title="Export this DLC's progress or just the ratings table">Export</button>
<button type="button" class="wheel-config-action wheel-config-action-danger" id="wheelEraseRatingsBtn" title="Delete all star ratings for this DLC">Erase all ratings</button>
</div>
</div>
<button class="wheel-members-btn" id="wheelMembersButton" onclick="toggleWheelMembersPanel(event)" title="Edit members" hidden>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</button>
<div id="wheelMembersManagePanel" class="wheel-config-panel wheel-members-manage-panel" hidden>
<div class="wheel-members-manage-header">Members</div>
<div class="wheel-members-config" id="wheelMembersConfig">
<div class="wheel-members-add">
<input type="text" id="wheelMemberInput" class="wheel-member-input" placeholder="Add member…" maxlength="40">
<button type="button" id="wheelMemberAddBtn" class="wheel-member-add-btn">Add</button>
</div>
<div class="wheel-members-config-list" id="wheelMembersConfigList"></div>
</div>
<div class="wheel-members-manage-actions">
<div class="wheel-members-action-row">
<button type="button" id="wheelMembersShowPendingBtn" class="wheel-members-action-btn" title="Choose which unanswered questions to show">Show unanswered</button>
<button type="button" id="wheelMembersHideAnsweredBtn" class="wheel-members-action-btn" title="Choose which answered questions to hide">Hide answered</button>
</div>
</div>
</div>
<button class="sound-toggle-btn wheel-sound-btn" id="wheelSoundButton" data-panel="wheelSoundPanel" onclick="toggleSound(event)" title="Sounds"></button>
<div id="wheelSoundPanel" class="sound-panel" hidden></div>
</div>
<div class="wheel-stage">
<div class="wheel-container" id="wheelContainer">
<div class="wheel-pointer"></div>
<div class="wheel-spinner" id="wheelSpinner">
<svg id="wheelSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"></svg>
</div>
<div class="wheel-hub" id="wheelHub">SPIN</div>
</div>
</div>
</div>
<div class="uk-width-1-4@l uk-width-1-5@xl">
<div class="sidebar">
<div class="wheel-global-timer-box" id="wheelGlobalTimerBox" hidden>
<span class="section-title darker wheel-global-timer-title">Total time
<button class="pause-toggle-btn wheel-global-pause-btn" id="wheelGlobalPauseBtn" type="button" title="Pause/Continue total timer">⏸</button>
</span>
<span class="timer wheel-global-timer" id="wheelGlobalTimer">00 : 00</span>
<span class="wheel-global-inq" id="wheelGlobalInQuestion" hidden>
<span class="wheel-global-inq-label">in questions</span>
<span class="wheel-global-inq-value" id="wheelGlobalInQuestionValue">00 : 00</span>
</span>
</div>
<span class="section-title darker">Questions
<button class="wheel-stats-btn" id="wheelStatsBtn" title="Show rating statistics" hidden>📊</button>
<button class="wheel-showall-btn" id="wheelShowAllBtn" title="Hide all questions">⦸</button>
<button class="wheel-search-btn" id="wheelSearchBtn" title="Search questions"><span uk-icon="search"></span></button>
<button class="wheel-shuffle-header-btn" id="wheelShuffleBtn" title="Randomize wheel section order">⇄</button>
</span>
<div class="wheel-search-bar" id="wheelSearchBar" hidden>
<input type="text" id="wheelQuestionSearch" class="question-search-input" placeholder="Search...">
</div>
<div class="wheel-question-list" id="wheelQuestionList">
<!-- JS: Wheel Question List -->
</div>
<div class="wheel-legend">
Click a question to toggle it on the wheel.
</div>
</div>
</div>
</div>
</div>
<!-- Wheel question modal -->
<div id="wheelModal" hidden>
<div id="wheelModalLayout">
<div id="wheelModalContent">
<div id="wheelModalColorBar"></div>
<button id="wheelModalMembersBtn" type="button" title="Members" hidden>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</button>
<div id="wheelModalBody"></div>
<div id="wheelModalButtons">
<button id="wheelModalShowHint" class="uk-button uk-button-default" type="button" hidden>Show hint</button>
<button id="wheelModalClose" class="uk-button uk-button-default" type="button">Close question</button>
<button id="wheelModalHide" class="uk-button uk-button-danger" type="button">Hide question</button>
</div>
</div>
<div id="wheelModalSide" hidden>
<div id="wheelModalTimerBox" class="wheel-modal-timer-box" hidden>
<span class="wheel-modal-timer-label">Question time</span>
<span class="timer wheel-modal-timer" id="wheelModalTimer">00 : 00</span>
<div class="wheel-modal-timer-controls">
<button type="button" id="wheelModalTimerPauseBtn" class="wheel-modal-timer-btn" title="Pause/Continue">⏸</button>
<button type="button" id="wheelModalTimerResetBtn" class="wheel-modal-timer-btn" title="Reset to 00 : 00">↺</button>
</div>
</div>
<div id="wheelMembersPanel" hidden>
<div class="wheel-members-panel-header">
<span>Members</span>
<button type="button" id="wheelMembersRollBtn" class="wheel-members-roll-btn" title="Pick a random member who hasn't answered yet">Roll</button>
</div>
<div id="wheelMembersRollResult" class="wheel-members-roll-result" hidden></div>
<div id="wheelMembersPanelList" class="wheel-members-panel-list"></div>
<div id="wheelMembersPanelEmpty" class="wheel-members-panel-empty" hidden>
No members yet. Add some with the members button next to the gear icon.
</div>
</div>
</div>
</div>
</div>
<!-- Member answered-questions breakdown -->
<div id="wheelMemberDetailModal" hidden>
<div id="wheelMemberDetailContent">
<div class="wheel-member-detail-header">
<span id="wheelMemberDetailTitle">Member</span>
<button type="button" id="wheelMemberDetailClose" class="wheel-member-detail-close" title="Close">×</button>
</div>
<div id="wheelMemberDetailBody" class="wheel-member-detail-body"></div>
</div>
</div>
<!-- Rating statistics table -->
<div id="wheelStatsModal" hidden>
<div id="wheelStatsContent">
<div class="wheel-stats-header">
<span class="wheel-stats-title">Rating statistics</span>
<select id="wheelStatsSelect" class="wheel-stats-select" title="Show the global average or a single member"></select>
<button type="button" id="wheelStatsClose" class="wheel-member-detail-close" title="Close">×</button>
</div>
<div id="wheelStatsBody" class="wheel-stats-body"></div>
</div>
</div>
<!-- Show/Hide question filter choice -->
<div id="wheelChoiceModal" hidden>
<div id="wheelChoiceContent">
<div class="wheel-choice-title" id="wheelChoiceTitle">Choose</div>
<div class="wheel-choice-options" id="wheelChoiceOptions"></div>
<button type="button" id="wheelChoiceCancel" class="wheel-choice-cancel">Cancel</button>
</div>
</div>
<!-- Question preview modal (end screen) -->
<div id="questionModal" hidden>
<div id="questionModalContent">
<button id="questionModalClose" title="Close">×</button>
<div id="questionModalBody"></div>
</div>
</div>
<script src="js/utils.js?v=14"></script>
<script src="js/examiner.js?v=7"></script>
<script src="js/interpret.js?v=8"></script>
<script src="js/wheel.js?v=35"></script>
<script src="js/index.js?v=12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.5.9/js/uikit.min.js"
integrity="sha512-OZ9Sq7ecGckkqgxa8t/415BRNoz2GIInOsu8Qjj99r9IlBCq2XJlm9T9z//D4W1lrl+xCdXzq0EYfMo8DZJ+KA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.5.9/js/uikit-icons.min.js"
integrity="sha512-hcz3GoZLfjU/z1OyArGvM1dVgrzpWcU3jnYaC6klc2gdy9HxrFkmoWmcUYbraeS+V/GWSgfv6upr9ff4RVyQPw=="
crossorigin="anonymous"></script>
</body>
</html>