-
Notifications
You must be signed in to change notification settings - Fork 0
/
adminpage.html
326 lines (305 loc) · 9.76 KB
/
adminpage.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
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
<html>
<head>
<title>INTACT Admin Interface</title>
<style>
body {
text-align: center;
background: #b7c0b4;
}
form {
display: inline-block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
/* List items but not the first one */
margin-top: 1em;
}
label {
display: inline-block;
min-width: 90px;
text-align: right;
color: #083d77;
font-weight: bold;
}
p {
/* Approximates optimal line length for text */
max-width: 75em;
}
input,
textarea {
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #083d77;
}
input:focus,
textarea:focus {
border-color: #000;
}
textarea {
vertical-align: top;
height: 5em;
}
.block-button {
padding: 0.5em;
}
.or-div {
display: grid;
grid-template-columns: 8fr 1fr 8fr;
gap: 10px;
margin: 2em;
}
.or-text {
font-size: large;
}
.topicbox {
padding: 1em 4em;
border: 1px solid #083d77;
border-radius: 1em;
margin: 1em auto;
width: 75%;
background: #ebebd3;
}
#password-box {
display: flex;
justify-content: center;
text-align: left;
}
#header-spacer {
height: 3em;
}
#participant_ids_file {
/* No border for file inputs */
border: none;
}
#get-test-data-ordiv-left,
#get-test-data-ordiv-right {
/* these particular divs look awkward w default alignment
because very little content in each */
align-content: end;
}
</style>
</head>
<body>
<div id="header-spacer"></div>
<h1>INTACT Admin Interface</h1>
<form method="post">
<div id="password-box">
<div>
<label for="password"
>Admin Password (required for all operations):
</label>
<input type="password" name="password" id="password" required />
<p>
No need to enter/submit - this password will be used for each of the
sections below.
</p>
</div>
</div>
<div class="topicbox">
<h2>1. Add new studies</h2>
<p>
The first step is to generate studies for each participant. Each study
is linked to a participant and can be a baseline or a follow-up study.
<strong
>So, for example, if you would like each participant to be assigned
1 baseline and 2 follow-up studies, enter 1 and 2 below.</strong
>
If left blank, the default of 1 baseline and 1 follow-up will be
generated.
</p>
<ul>
<li>
<label for="baselines_per_participant"
>Baseline studies per participant (optional, default 1):
</label>
<input
type="number"
name="baselines_per_participant"
id="baselines_per_participant"
/>
</li>
<li>
<label for="followups_per_participant"
>Follow-up studies per participant (optional, default 1):
</label>
<input
type="number"
name="followups_per_participant"
id="followups_per_participant"
/>
</li>
</ul>
<p>
Next, provide the list of participant_ids for which to generate
studies. Continuing the example where you have set 1 baseline and 2
follow-up studies per participant, if you provide here 2
participant_ids "abc12" and "xyz34", you will generate 6 study_ids in
total.
</p>
<p>
You can either enter the participant_ids in the text box (on the
left), or upload a file (on the right). The text box or uploaded file
should contain only a <strong>newline-separated</strong> list of
<strong>alphanumeric</strong> participant IDs. Blank lines and
whitespace will be ignored.
</p>
<div class="or-div">
<div>
<ul>
<li>
<label for="participant_ids">Participant ID list: </label>
</li>
<li>
<textarea
name="participant_ids"
id="participant_ids"
></textarea>
</li>
<li>
<input
class="block-button"
type="submit"
formaction="/studies"
value="Generate studies from text list"
/>
</li>
</ul>
</div>
<div>
<p class="or-text">OR</p>
</div>
<div>
<ul>
<li>
<label for="participant_ids_file"
>Participant ID file (.txt or .csv):
</label>
</li>
<li>
<input
type="file"
name="participant_ids_file"
id="participant_ids_file"
accept=".txt,.csv"
/>
</li>
<li>
<input
class="block-button"
type="submit"
formaction="/studies/upload-file"
formenctype="multipart/form-data"
value="Generate studies from file"
/>
</li>
</ul>
</div>
</div>
<p>
After you submit, you will see a JSON response listing the studies you
just created.
<strong>Navigate back to this page for the next steps.</strong>
</p>
<p>
If you later find you need to add more participants, or if a
participant had a technical problem and you would like to generate a
new study for them, you can (for example) set "baselines per
participant" to 1 and "followups per participant" to 0, and enter just
one participant_id "abc12". This would generate just one new baseline
study associated with participant "abc12".
</p>
</div>
<div class="topicbox">
<h2>2. Get all studies</h2>
<p>
Once you have generated your studies, use this section to retrieve a
CSV file containing all studies and their associated study types
(baseline/follow-up), participant_ids, and URLs. The study URLs can
then be shared with the corresponding participants.
</p>
<input
class="block-button"
type="submit"
formaction="/studies/download-file"
value="Get studies as CSV"
/>
</div>
<div class="topicbox">
<h2>3. Get test data</h2>
<p>
As the participants complete their studies, you will be able to query
the test data here. (You do not need to wait until everyone has
finished before you can query the data. If there is no data yet for
the given parameters, however, you will get an empty CSV file.)
</p>
<p>
You can choose to download a ZIP archive of data from all the test
types; the data from each test will be contained in a separate CSV
file in the archive. Alternatively, you can query test data for a
single test type; in this case, the data will be returned in a single
CSV.
</p>
<p>
If you input a participant_id of interest, the results (in both the
combined ZIP and single CSV formats) will be restricted to data from
studies (both baseline and follow-up) associated with that
participant. If no participant_id is entered, data from all
participants will be returned.
</p>
<div>
<label for="participant_id"
>Participant ID of interest (optional):
</label>
<input type="text" name="participant_id" id="participant_id" />
</div>
<div class="or-div">
<div id="get-test-data-ordiv-left">
<input
class="block-button"
type="submit"
formaction="/tests/zip-archive/download-file"
value="Get combined test data as ZIP"
/>
</div>
<div>
<p class="or-text">OR</p>
</div>
<div id="get-test-data-ordiv-right">
<ul>
<li>
<label for="test_type-select">Test type:</label>
<select name="test_type" id="test_type-select">
<option value="immediate_recall">Immediate Recall</option>
<option value="delayed_recall">Delayed Recall</option>
<option value="choice_reaction_time">
Choice Reaction Time
</option>
<option value="visual_paired_associates">
Visual Paired Associates
</option>
<option value="digit_symbol_matching">
Digit Symbol Matching
</option>
<option value="spatial_memory">Spatial Memory</option>
</select>
</li>
<li>
<input
class="block-button"
type="submit"
formaction="/tests/single-test-type/download-file"
value="Get single test data as CSV"
/>
</li>
</ul>
</div>
</div>
</div>
</form>
</body>
</html>