-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprompt.html
executable file
·473 lines (440 loc) · 36.4 KB
/
prompt.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
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
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<!DOCTYPE HTML>
<html>
<head>
<title>Create Prompt</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery-ui-1.11.0.min.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link href="css/navbar.css" rel="stylesheet" type="text/css"/>
<link href="css/prompt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-cookie.js"></script>
<script type="text/javascript" src="js/ohmage.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/configuration.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/Constant.js"></script>
<script type="text/javascript" src="js/promptUtil.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/insertXmlModal.js"></script>
<script type="text/javascript" src="js/alerts.js"></script>
<script type="text/javascript" src="js/help-icon.js"></script>
<script type="text/javascript" src="js/json2xml.js"></script>
<script type="text/javascript" src="js/campaign-editor.js"></script>
<script type="text/javascript" src="js/surveyItemDisplay.js"></script>
<script type="text/javascript" src="js/prompt.js"></script>
<script type="text/javascript" src="js/vkbeautify.0.99.00.beta.js"></script>
<script type="text/javascript" src="js/breadcrumb.js"></script>
<script type="text/javascript" src="js/promptType.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript" src="js/condition.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 page-header">
<h1>Campaign Authoring</h1>
</div>
<div class="span3">
<div class="boxDark boxRounded" id="campaignMenu">
<div class="center">
<h5></h5>
<button type="button" class="btn btn-block" id="editCampaign">Edit Campaign Info</button>
<button type="button" class="btn btn-block" id="createNewSurvey">Create New Survey</button>
<button type="button" class="btn btn-block" id="editExistingSurvey">Edit Existing Surveys</button>
<button type="button" class="btn btn-block" id="viewSurveyXML">View Campaign XML</button>
<button type="button" class="btn btn-info btn-block" id="submitCampaign">Save Campaign to Server</button>
<button type="button" class="btn btn-danger btn-block" id="deleteCampaign">Exit Campaign</button>
</div>
<div class="xmlModal">
<!-- xml modal -->
</div>
<div id="loginModal" class="modal hide fade" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-header centered">
Time Out. Please relogin
</div>
<div class="modal-body centered">
<div class="">
<form class="form-horizontal" id="login-form">
<div class="control-group centered">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input type="text" class="span3" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group centered">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" class="span3" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-info">Login</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="span9">
<div class="boxRounded boxDark content">
<h5>Survey Items</h5>
<div class="accordion-heading">
<a class="left btn btn-link textLink accordion-toggle createItem createPrompt pull-left" data-toggle="collapse" data-parent="#addNewItemAccordion" href="#newPrompt">
<small><i class="icon-ok-circle"></i> Create a new prompt.</small>
</a>
<a class="left btn btn-link textLink accordion-toggle createItem createMessage" data-toggle="collapse" data-parent="#addNewItemAccordion" href="#newMessage">
<small><i class="icon-comment"></i> Create a new message (not supported on all clients).</small>
</a>
</div>
<h6 class="left">
Existing Items
<small>(Prompt count: <span id="numQuestion">0</span>)</small>
<small>Reorder survey items by dragging!</small>
</h6>
<table>
<div class="previousItems" id="previousItem">
<ul class="previousItemsSortable" id="previousItemsSortable">
</ul>
</div>
</table>
<div class="addNewItem">
<h6 class="left">New Item</h6>
<div class="accordion" id="addNewItemAccordion">
<!-- Condition Modal -->
<div id="conditionModal" class="modal hide fade" tabindex="-1" aria-labelledby="conditionModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 class="centered">Edit Condition</h3>
</br>
<p class="centered">
Select a way to edit condition or select "No Condition" if
you don't want using condition for this prompt.
</p>
<div class="centered controls">
<span class="centered">Edit Condition Using: </span>
<select id="conditionType">
<option value="">No Condition</option>
<option value="simple">Simple Condition</option>
<option value="advanced">Advanced Condition</option>
</select>
</div>
<input type="hidden" id="conditionType">
<input type="hidden" id="conditionSource">
</div>
<div class="modal-body centered">
<div class="container">
<div class="control-group">
<div class="controls conditionHelpText" id="conditionHelpText">
</div>
<div class="controls" id="conditionData">
</div>
<div class="centered" id="simpleCondition">
<input type="hidden" id="conditionGroupCounter" value="0"/>
<div class="centerd">
<p style="text-align:left;">
Create condtions using predefined operator and conjunction as below. </br>
If you know the condition syntax or want to create more complex condition, please choose "Advanced Option".
</p>
</div>
<div class="centered" id="simpleConditionHelp">
<p style="text-align:left;" >
Hover your mouse over <a class="conditionTooltip" title="" rel="tooltip" data-html="true" href="#" data-placement="right">here</a> to show instructions
</P>
</div>
</br>
</br>
<table class="outsideTbl">
<!--<button class="btn btn-primary addConditionGroup" id="addConditionGroup">Add New Group</button>-->
<table class="group1" id="simpleConditionTbl" align="center">
<tr>
<!--<th>Group #</th>-->
<th>Move Up</th>
<th>Move Down</th>
<th>Prompt ID</th>
<th>Operator</th>
<th>Value</th>
<th></th>
<th>Conjunction</th>
<th>Add</th>
<th>Delete</th>
</tr>
<tr>
<!--<td><input class="conditionGroupNum span1" value="1" disabled/></td>-->
<td><button class='btn btn-primary upCondition'><i class="icon-arrow-up icon-white"></i></button></td>
<td><button class='btn btn-primary downCondition'><i class="icon-arrow-down icon-white"></i></button></td>
<td><select class="span2 previousPrompts"></select></td>
<td>
<select class="span1 operator">
<option value="==">==</option>
<option value=">">></option>
<option value=">=">>=</option>
<option value="<"><</option>
<option value="<="><=</option>
<option value="!=">!=</option>
</select>
</td>
<td>
<select class="span2 conditionValueChoice">
<option value="NOT_DISPLAYED">Not Display</option>
<option value="SKIPPED">Skipped</option>
<option value="USER_INPUT">Input your own value</option>
</select>
</td>
<td class="valueRow"><!--<input type="text" class="conditionValue span2" value="" disabled/>-->
</td>
<td>
<select class="span1 conjunction" >
<option value="">None</option>
<option value="and">AND</option>
<option value="or">OR</option>
</select>
</td>
<td><button class='btn btn-primary addCondition'><i class="icon-plus icon-white"></i></button></td>
<td><button class='btn btn-primary deleteCondition'><i class="icon-remove icon-white"></i></button></td>
</tr>
</table>
</table>
</div>
<div class="centered hide" id="advancedCondition">
<div class="centered">
<p style="text-align: left;">
Write your own condition in the text box below</br>
Advanced condition option assumes that you know about condition syntax. </br>
If you're not sure about syntax. Visit <a href="https://github.com/cens/ohmageServer/wiki/Campaign-Definition#wiki-condition" target="_blank"><span class="blue">this site</span></a>
</p>
</div>
</br>
</br>
<div class="centered">
<p>Current condition rule :</p>
<textarea class="advancedCondition span10" id="advancedConditionText"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn" id="conditionSubmit">Save changes</button>
</div>
</div>
<!-- End Condition Modal -->
<!-- Prompt Type Modal -->
<div id="promptTypeModal" class="modal hide fade" tabindex="-1" aria-labelledby="promptTypeModal" aria-hidden="true">
<div class="modal-header">
<h3 class="centered">Prompt Type</h3> </br>
<div class="centered">
<span class="centered">Choose a prompt type from the dropdown list: </span>
<select id="groupPromptType" class="promptType">
<option value="">Please choose a prompt type</option>
<option value="audio">Audio (native Android only)</option>
<option value="multi_choice">Multiple Choice</option>
<option value="multi_choice_custom">Multiple Choice Custom</option>
<option value="number">Number</option>
<option value="photo">Photo</option>
<option value="remote_activity">Remote Activity (native Android only)</option>
<option value="single_choice">Single Choice</option>
<option value="single_choice_custom">Single Choice Custom</option>
<option value="text">Text</option>
<option value="timestamp">Timestamp</option>
<option value="video">Video (native Android only)</option>
</select>
</div>
</div>
<div class="modal-body centered">
<div class="container">
<div class="control-group">
<div class="controls">
</div>
<div class="controls" id="promptData">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary submit" id="promptTypeSubmit">Save changes</button>
<button class="btn btn-primary " id="promptTypeCancel" aria-hidden="true">Cancel</button>
</div>
</div>
<!-- End Prompt Type Modal-->
<!-- Message -->
<div class="accordion-group">
<div id="newMessage" class="accordion-body collapse">
<div class="accordion-inner">
<br>
<form class="form-horizontal" id="messageForm">
<input type="hidden" name="editMessageId" id="editMessageId">
<div class="control-group">
<label class="control-label" for="messageId">Message ID: <span class="red">*</span></label>
<div class="controls">
<input type="text" name="id" class="span4 hastip" id="messageId" placeholder="A unique name so you can refer back to this message."/>
<i class="help-icon icon-question-sign" data-original-title="A unique identifier for this message." rel="tooltip" data-placement="right"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="messageText">Message: <span class="red">*</span></label>
<div class="controls">
<input type="text" name="messageText" class="span4 hastip" id="messageText" placeholder="The message to display to the user."/>
<i class="help-icon icon-question-sign" data-original-title="The text to be displayed to the user." rel="tooltip" data-placement="right"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="condition">Condition: </label>
<div class="controls">
<!--<div class="input-append">-->
<input type="hidden" class="messageConditionType" id="messageConditionType" />
<input type="hidden" class="messageConditionJson" id="messageConditionJson" />
<textarea name="messageCondition" class="span4 messageCondition" id="messageCondition" placeholder="None." disabled></textarea>
<button type="button" class="btn btn-link hastip" id="messageConditionBtn">Edit Condition </button>
<i class="help-icon icon-question-sign" data-original-title="The condition which determines if the message is displayed or not." rel="tooltip" data-placement="bottom"></i>
<!--</div>-->
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" id="createMessage">Create Message</button>
<button type="button" class="btn cancel" id="cancelMessage">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Message -->
<!-- Prompt -->
<div class="accordion-group">
<div id="newPrompt" class="accordion-body collapse">
<div class="accordion-inner">
<p class="left">**Do not refresh the page during prompt creation, as the current prompt will be lost.**</p>
<br>
<form class="form-horizontal" id="promptForm">
<input type="hidden" name="editPromptId" id="editPromptId">
<div class="control-group">
<label class="control-label" for="promptId">Prompt ID: <span class="red">*</span></label>
<div class="controls">
<input type="text" class="span4 hastip" name="id" id="promptId" placeholder="A unique name so you can refer back to this prompt." />
<i class="help-icon icon-question-sign" data-original-title="A unique identifier for the prompt." rel="tooltip" data-placement="right"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="displayLabel">Display Label: <span class="red">*</span></label>
<div class="controls">
<input type="text" class="span4 hastip" name="displayLabel" id="displayLabel" placeholder="Display Label" />
<i class="help-icon icon-question-sign" data-original-title="The user-friendly name of this prompt used in visualizations." rel="tooltip" data-placement="right"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="promptText">Prompt Text: <span class="red">*</span></label>
<div class="controls">
<textarea type="text" class="span4 hastip" name="promptText" id="promptText" placeholder="Question Text"></textarea>
<i class="help-icon icon-question-sign" data-original-title="The text to display to the user when prompting them to respond." rel="tooltip" data-placement="right"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="promptType">Prompt Type: <span class="red">*</span></label>
<div class="controls">
<select id="choosePromptType" name="promptType" class="promptType span4 hastip">
<option value="">Please choose a prompt type</option>
<option value="audio">Audio (native Android only)</option>
<option value="multi_choice">Multiple Choice</option>
<option value="multi_choice_custom">Multiple Choice Custom</option>
<option value="number">Number</option>
<option value="photo">Photo</option>
<option value="remote_activity">Remote Activity (native Android only)</option>
<option value="single_choice">Single Choice</option>
<option value="single_choice_custom">Single Choice Custom</option>
<option value="text">Text</option>
<option value="timestamp">Timestamp</option>
<option value="video">Video (native Android only)</option>
</select>
<!--<input type="hidden" name="promptType" id="promptType"/> -->
<i class="help-icon icon-question-sign" data-original-title="Choose type of your prompt" rel="tooltip" data-placement="right"></i>
</div>
</br>
<label class="control-label" for="addedPrompt">Prompt Details:</label>
<div class="controls">
<div>
<textarea name="properties" class="span4 promptDetails" id="addedPrompt" readonly></textarea>
<button type="button" class="btn btn-link" id="promptTypeBtn">Edit Prompt Detail</button>
</div>
</div>
<div class="control-group">
<!--<label type="hiden" class="control-label" for="default">Default</label>-->
<div class="controls">
<input type="hidden" name="default" id="default" placeholder="Default" />
<input type="hidden" class="jsonText" id="jsonText" />
<input type="hidden" class="currPromptType" id="currPromptType" />
<!--<i class="help-icon icon-question-sign" data-original-title="The default value for this prompt. This is type-dependent." rel="tooltip" data-placement="right"></i>-->
</div>
</div>
<div class="control-group">
<label class="control-label" for="condition">Condition:</label>
<div class="controls">
<!--<div class="input-append">-->
<input type="hidden" class="promptConditionType" id="promptConditionType" />
<input type="hidden" class="promptConditionJson" id="promptConditionJson" />
<textarea name="promptCondition" class="span4" id="promptCondition" placeholder="None." disabled></textarea>
<button type="button" class="btn btn-link hastip" id="promptConditionBtn">Edit Condition </button> <i class="help-icon icon-question-sign" data-original-title="The condition which determines if the prompt is displayed or not." rel="tooltip" data-placement="top"></i>
<!--</div>-->
</div>
</div>
<div class="control-group">
<label class="control-label" for="skippable">Skip Option:</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="skippable" id="skippable">
Check if this prompt is skippable?
</label>
</div>
</div>
<div class="control-group">
<label class="control-label skipLabelText" for="skipLabel">Skip Label: </label>
<div class="controls">
<input type="text" class="span4 hastip" name="skipLabel" id="skipLabel" value="Skip" disabled/>
<i class="help-icon icon-question-sign" data-original-title="If skippable, this is the text of the button to use to skip the prompt." rel="tooltip" data-placement="right"></i>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" id="addPrompt">Add Prompt</button>
<button type="button" class="btn" id="cancelPrompt">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Prompt -->
</div>
</div>
<span class="red">*</span> <small>Required Fields</small>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<hr>
<div class="pull-right">
<a href="#">Back to top</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>