-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSlumsBasic.html
450 lines (354 loc) · 14.1 KB
/
SlumsBasic.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<title>SLUMS Examination</title>
<script type="text/javascript">
//Function used by moveEventFunction to detect where on the appplication canvas the event has taken place.
//Takes into account different platforms - Firefox, Chrome, Safari.
function getCoords(e) {
if (e.offsetX) {
// Works in Chrome / Safari (except on iPad/iPhone)
return { x: e.offsetX, y: e.offsetY };
}
else if (e.layerX) {
// Works in Firefox
return { x: e.layerX, y: e.layerY };
}
else {
// Works in Safari on iPad/iPhone
return { x: e.pageX - currentDrawCanvas.offsetLeft, y: e.pageY - currentDrawCanvas.offsetTop };
}
}
var p1; //Coordinates for location on the application canvas that has been touched.
var currentDrawCanvas; //Current state of application canvas.
//Sets the p1 variable to reflect position of the touch event.
function moveEventFunction(e) {
if(currentDrawCanvas){
ctx = currentDrawCanvas.getContext("2d");
if (e.touches) {
for (var i = 1; i <= e.touches.length; i++) {
var p = getCoords(e.touches[i - 1]); // Get info for finger i
console.log(p.x,p.y)
if(!p1){
p1 = p
}else{
ctx.beginPath();
ctx.strokeStyle = "#F00";
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p.x,p.y);
ctx.stroke();
p1 = p;
}
}
}
}
return false; // Stop event bubbling up and doing other stuff (like pinch zoom or scroll)
}
//Draws a circle on the application canvas.
function drawCircle(domElement){
$(domElement).attr("width", 500)
$(domElement).attr("height", 500)
ctx = domElement.getContext("2d");
ctx.clearRect(0, 0, domElement.width, domElement.height);
ctx.strokeStyle = "black";
ctx.arc(domElement.width / 2, domElement.height / 2, 200 , 0, Math.PI * 2);
ctx.stroke();
}
//Draws a box on the application canvas.
function drawBoxes(domElement){
console.log("drawBoxes")
$(domElement).attr("width", 700)
$(domElement).attr("height", 210)
var ctx=domElement.getContext("2d");
ctx.clearRect(0, 0, domElement.width, domElement.height);
ctx.strokeRect(1,1,200,200);
var d = 500;
ctx.strokeRect(1+d,1,100,200);
var tX = 350;
ctx.beginPath();
ctx.moveTo(tX,1);
ctx.lineTo(tX+100,200);
ctx.lineTo(tX-100,200);
ctx.lineTo(tX,1);
ctx.stroke();
}
if(localStorage.getItem("current_item")){
var currentQuestion = JSON.parse(localStorage.getItem("current_item"))
console.log("Loaded current object:", currentQuestion)
}else{
console.log("No current obbject.")
var currentQuestion = {};
}
//Attaches the event handler 'touchmove' to the document.
$(document).bind('touchmove', false);
//Holds off function execution till DOM completely loaded.
$(document).ready(function(){
$("input, select").change(function(evt){
currentQuestion[evt.target.name] = evt.target.value;
localStorage.setItem("current_item", JSON.stringify(currentQuestion));
console.log("saved:", currentQuestion)
});
//Applies function to every element with class='question'
$(".question").each(function(i,e){
$(e).attr("id","q"+i)
//The 'Next' button
var btn = $('<input type="button" class="next" value="Next">'); //Creates the 'Next' button
btn.attr("data-to",i+1) //'Next' Button associated with next page (question).
btn.attr("data-id",i) //Let the 'Next' button know what page (question) it's currently on.
//Binds the event handler 'click' to the event where the 'Next' button is clicked.
btn.bind('click', function(ev){
var toId = $(ev.target).data("to")
$(".question").hide()//Hide previous page
$("#q"+toId).show() //Show next page
location.hash = "#q"+toId //Moves to next page.
});
$(e).append(btn) //'Next' button now listens for events
//The 'Start over' button
var btn2 = $('<input type="button" class="over" value="start over">'); //Creates the 'Start over' button.
//Binds the event handler 'click' to the event where the 'Start over' button is clicked.
btn2.bind('click', function(ev){
//Display a pop-up box that asks user to confirm action
if(confirm("really start over?")){
//Reset the page (question) number
location.hash = "#q0";
//Reload the page.
location.reload();
}
});
$(e).append(btn2) //'Start over' button now listens for events (i.e. detects when it is clicked)
});
//START
if(location.hash){
//Logs the question (page) number to the console
console.log(location.hash)
//Introduce a variable holding the question identifier representing the current question number, e.g. q1 will be the identifier if we are on question 1.
var hId = location.hash
}else{
//Introduce a variable holding the question identifier representing the start of the test, q0.
var hId = "#q0"
}
//Display the question identifier
$(hId).show()
can = document.getElementById("canvas1");
//Draws circle on 'canvas1'
drawCircle(can);
//When canvas1 is touched, associate it wth currentDrawCanvas so we know it is now available to act on.
can.ontouchstart = function(e){
currentDrawCanvas = document.getElementById("canvas1");
}
//Handle different types of input.
can.ontouchmove = moveEventFunction; //Associates touch with moveEventFunction.
can.onmousemove = moveEventFunction; //Associates mouse movement with moveEventFunction.
//When canvas interaction has ended, no more cooordinates recorded.
can.ontouchend = function(e){
//Resets p1
p1 = null;
};
var can2 = document.getElementById("canvas2");
//Draws boxes on 'canvas2'
drawBoxes(can2);
//When canvas2 is touched, associate it with currentDrawCanvas so we know it is available to act on.
can2.ontouchstart = function(e){
currentDrawCanvas = document.getElementById("canvas2");
}
//Handle different types of input.
can2.ontouchmove = moveEventFunction; //Associates touch with moveEventFunction.
can2.onmousemove = moveEventFunction; //Associates mouse movement with moveEventFunction.
//When canvas interaction has ended, no more cooridnates recorded.
can2.ontouchend = function(e){
//Resets p1
p1 = null;
};
});
</script>
<style>
/*Default font*/
*{
font-family:'Arial Rounded MT Bold';
}
/*Formatting for questions (pages)*/
.question{
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
display: none;
padding: 30px;
}
.number{
position: absolute;
top:0px;
right:0px;
width:50px;
height:50px;
font-size: 18px;
}
.next{
position: absolute;
right:0px;
bottom:10px;
}
.over{
position: absolute;
left:0px;
bottom:10px;
}
#q0 .over{
display:none;
}
.database{
position: absolute;
left:0px;
bottom:10px;
}
#q15 .next{
display:none;
}
table{
margin: 30px;
}
td{
padding:00px;
}
input, select{
font-size: 36px;
padding: 10px;
margin:20px;
}
#local_database{
display: none;
}
/*Formatting for canvas1*/
#canvas1{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="getData">
<div class="question" title="info">
<table>
<tr><td><h2>First name</h2></td><td><input id="first_name" name="first_name" type="text" value=""/></tr>
<tr><td><h2>Surname</h2></td><td><input id="surname" name="surname" type="text" value=""/></tr>
<tr><td><h2>Age</h2></td><td><input id = "age" name="age" type="number" min="10" max="110" value=""/></td></tr>
<tr><td><h2>Date of birth</h2></td><td><input id="dob" name="dob" type="date" value=""></td></tr>
<tr><td><h2>If you are able, please tick this box?</h2></td><td><input id="alertlevel" name="alertlevel" type="checkbox" value="false"/></td></tr>
<tr><td><h2>Education</h2></td><td><input id="education" name="education" type="text" list="educationlevels" value="None"/></td></tr>
<datalist id="educationlevels">
<option label="Primary" value="Primary"></option>
<option label="Secondary" value="Secondary"></option>
<option label="University" value="University"></option>
<option label="Masters" value="Masters"></option>
<option label="PhD" value="PhD"></option>
<option label="Other" value="Other"></option>
</datalist>
</table>
</div>
<div class="question">
<h2>What day of the week is it?</h2>
<input id="q1" name="q1" type="text" value=""/>
</div>
<div class="question">
<h2>What is the year?</h2>
<input id="q2" name="q2" type="number" value=""/>
</div>
<div class="question">
<h2>What county are we in?</h2>
<input id="q3" name="q3" type="text" value=""/>
</div>
<div class="question">
<h2>Please remember these five objects? I will ask you what they are later.</h2>
<ul>
<li>Apple</li>
<li>Pen</li>
<li>Tie</li>
<li>House</li>
<li>Car</li>
</ul>
</div>
<div class="question">
<h2>You have $100 and you go to the store and buy a dozen apples for $3 and a tricyle for $20.</h2>
<h2>How much did you spend</h2>
<input id="q5a" name="q5a" type="text" value=""/>
<h2>How much do you have left</h2>
<input id="q5b" name="q5b" type="text" value=""/>
</div>
<div class="question">
<h2>Please name as many animals as you can in one minute.</h2>
<tr><td><textarea id="q6" name="q6" rows=20 value=""></textarea></td></tr>
</div>
<div class="question">
<h2>What were the five objects I asked you to remember</h2>
<tr><td><textarea id="q7" name="q7" rows=5 value=""></textarea></td></tr>
</div>
<div class="question">
<h2>I'm going to give you a series of numbers and I would like you to give them to me backwards. For Example, if I say 42, you would say 24.</h2>
<table>
<tr><td><h2>If I say 87, you would say</h2></td><td><input id="q8a" name="q8a" type="text" value=""></td></tr>
<tr><td><h2>If I say 659, you would say</h2></td><td><input id="q8b" name="q8b" type="text" value=""></td></tr>
<tr><td><h2>If I say 8537, you would say</h2></td><td><input id="q8c" name="q8c" type="text" value=""></td></tr>
</table>
</div>
<div class="question">
<span style="font-size:14px;">This is a clock face.<br>
Please input in the hour markers and <u>the time</u> at ten minutes to eleven o'clock.</span>
<canvas id="canvas1"></canvas
<input type="button" onclick="drawCircle($('#canvas1')[0]);" value="clear" />
</div>
<div class="question">
<h1>Please hand the tablet back to the test assistant.</h1>
</div>
<div class="question">
<h2>clock input correct?</h2>
<table>
<tr><td><input id="q9a" name="q9a" type="checkbox" value=""/></td><td><h2>12 hours approximately correct</h2></td></tr>
<tr><td><input id="q9b" name="q9b" type="checkbox" value=""/></td><td><h2>Time hands approximately correct</h2></td></tr>
</table>
</div>
<div class="question">
<h2>Please place an X in the triangle</h2>
<canvas id="canvas2"></canvas>
<h2>Which of the above figures is largest?</h2>
<input id="q10b" name="q10b" type="text"/>
</div>
<div class="question">
<h1>Please hand the tablet back to the test assistant.</h1>
</div>
<div class="question">
<h2>was the x correct?</h2>
<input id="q10a" name="q10a" type="checkbox"/>
</div>
<div class="question">
<h2>I am going to tell you a story. Please listen carefully because afterwards, I'm going to ask you some questions about it.</h2>
<p>
Jill was a very successfull stockbroker.
She made a lot of money on the stock market.
She then met Jack, a devastatingly handsome man.
She married him and had three children.
They lived in Chicago.
She then stopped work and stayed at home to bring up her children.
When they were teenagers, she went back to work.
She and Jack lifed happily ever after.
</p>
<table>
<tr><td><h2>What was the female's name?</h2></td><td><input id="q11a" name="q11a" type="text" value=""></td></tr>
<tr><td><h2>When did she go back to work?</h2></td><td><input id="q11b" name="q11b" type="text" value=""></td></tr>
<tr><td><h2>What work did she do?</h2></td><td><input id="q11c" name="q11c" type="text" value=""></td></tr>
<tr><td><h2>What state did she live in?</h2></td><td><input id="q11d" name="q11d" type="text" value=""></td></tr>
</table>
<label>
<p style="position: absolute; right:500; bottom:10">
<input type="submit" name="submit" id="submit" value="Submit"/>
</p>
</div>
</form>
</body>
</html>