-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
853 lines (730 loc) · 52.6 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
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
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="Valentin Schwind">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta property="og:site_name" content="Informed Consent Generator">
<title>Informed Consent Generator</title>
</head>
<body class="transparent">
<div id="mainFrame" class="vertical-center">
<a id="downloadAnchorElem" style="display:none"></a>
<div id="demographicsPage" class="whiteBox container rounded">
<form id="demographicsForm" class="form-horizontal" action="javascript:generate(this);">
<div id="input">
<div class="row">
<div class="col mt-4 mb-2 ">
<a id="hostUrl" href=""><img id="hostLogo" class="float-right mr-3" width="140px" alt="Media Informatics Groups"></a>
</div>
</div>
<div class="row mt-3">
<div class="col">
<h3 id="demographicsTitle" class="display-6">Informed Consent Generator</h3>
</div>
</div>
<div class="row mt-3">
<div class="col mb-1">
Obtaining informed consent ensures the users' autonomy and privacy, and that the users are aware of potential risks and benefits of your HCI study. That consent should be freely given, specific, informed and unambiguous by way of a request presented in clear and plain language. Consent should be given by an affirmative act, such as checking a box online or signing the form. Please reach out to your superviser in case of any requests.
</div>
</div>
<div class="row mt-3">
<div class="col mb-1">
This informed consent is not suitable for vulnerable groups (children, disabled, prisoners) or when any harm can occur (medical studies). Please consult your local ethics committee.
</div>
</div>
<hr />
<div class="row mt-3 ">
<div class="col-4"><span id="institutionText">Your Institution</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><select class="form-control" name="institution" onchange="onChange(event)" required></select></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="researchText">Kind of research</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><select class="form-control" name="type" onchange="onChange(event)" required></select></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="topicText">Title</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="title" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="compensationText">Compensation</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><select class="form-control" name="compensation" onchange="onChange(event)" required></select></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="monetaryCompensationText">Monetary Compensation </span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="monetaryCompensation" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="recordingsText">Recorded Data</span></div>
<div class="col-8">
<div class="row row-cols-3">
<div class="col"><input type="checkbox" class="form-check-input" name="recordDemographics" id="recordDemographics" onchange="onChange(event)" checked required><label class="form-check-label" for="recordDemographics">Demographics<span class="text-danger">*</span></label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordContact" id="recordContact" onchange="onChange(event)"><label class="form-check-label" for="recordContact">Contact information</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordNotes" id="recordNotes" onchange="onChange(event)"><label class="form-check-label" for="recordNotes">Manual notes</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordInteraction" id="recordInteraction" onchange="onChange(event)"><label class="form-check-label" for="recordInteraction">User Interaction</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordAudio" id="recordAudio" onchange="onChange(event)"><label class="form-check-label" for="recordAudio">Audio</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordPhotos" id="recordPhotos" onchange="onChange(event)"><label class="form-check-label" for="recordPhotos">Photos</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordVideos" id="recordVideos" onchange="onChange(event)"><label class="form-check-label" for="recordVideos">Videos</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordMotion" id="recordMotion" onchange="onChange(event)"><label class="form-check-label" for="recordMotion">Motion Tracking</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordPhysiological" id="recordPhysiological" onchange="onChange(event)"><label class="form-check-label" for="recordPhysiological">Physio. Sensing</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordEyetracking" id="recordEyetracking" onchange="onChange(event)"><label class="form-check-label" for="recordEyetracking">Eye/Head Tracking</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordScreenrecoding" id="recordScreenrecoding" onchange="onChange(event)"><label class="form-check-label" for="recordScreenrecoding">Screen Recording</label></div>
<div class="col"><input type="checkbox" class="form-check-input" name="recordNotes" id="recordNotes" onchange="onChange(event)"><label class="form-check-label" for="recordNotes">Manual notes</label></div>
</div>
</div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="personalDataText">Which personal data will be collected? (list all)</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="personalData" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="storageTimeText">How long will the data stored with the researchers?</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="storageTime" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="shareText">Do you make the raw data public?</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><select class="form-control" name="share" onchange="onChange(event)" required></select></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="encryptionText">Will the data stored encrypted?</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><select class="form-control" name="encryption" onchange="onChange(event)" required></select></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="durationText">Estimated Study Duration</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="duration" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="durationText">Estimated Number of Participants</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="participants" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="purposeText">Purpose (one sentence)</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="purpose" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="goalText">Goal (one sentence)</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="goal" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="procedureText">Procedure (in 4-6 steps)</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><textarea rows="4" class="form-control" name="procedure" onchange="onChange(event)" required></textarea></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="thePIname">First Researchers' Name (The PI)</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" name="thePIname" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="thePIemail">First Researchers' E-Mail</span><span class="text-danger">*</span><br /></div>
<div class="col-8"><input class="form-control" type="email" name="thePIemail" onchange="onChange(event)" required></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="PIText">Head of the Department (if not = PI)</span></div>
<div class="col-8"><input class="form-control" name="departmentHead" onchange="onChange(event)"></input></div>
</div>
<div class="row mt-3" id="addResearchersContainer">
<div class="col-4"><span id="thePIname">All other researchers' involved</span><span class="text-danger">*</span></div>
<div class="col-8"><button class="btn btn-success" id="btnAddResearcher" type="button" id="button-add-researcher">+ Add Addional Researcher</button></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="funding">Funding</span></div>
<div class="col-8"><input class="form-control" name="funding" onchange="onChange(event)"></input></div>
</div>
<div class="row mt-3 ">
<div class="col-4"><span id="ethicalComitteeText">Ethical Comittee</span></div>
<div class="col-8"><input class="form-control" name="ethicalComittee" onchange="onChange(event)"></input></div>
</div>
</div>
<div class="row mt-3 mb-3 itemRow" id="fieldsrequired">
<div class="col" >
<span class="text-danger">* fields required</span> <br />
</div>
</div>
<hr class="uiEdit">
<div class="row mt-3 itemRow uiEdit">
<div class="col-8">
<a id="btnExample" class="btn btn-secondary btn-md float-left mr-3 " >Example</a>
<a id="btnSave" class="btn btn-secondary btn-md float-left mr-3 btnSave" >Save Settings (*.json)</a>
<a id="btnLoad" class="btn btn-secondary btn-md float-left mr-3">Load Settings (*.json)</a>
<input class="form-control form-control-sm" id="fileInput" type="file" type="hidden" style='display: none;'>
</div>
<div class="d-grid gap-2 col-4 mx-auto">
<button id="btnGenerate" class="btn btn-primary btn-md float-right" type="Submit" value="">Generate From</button>
</div>
</div>
<div class="row mt-2 itemRow uiView">
<div class="col" >
<button id="btnBack" class="btn btn-primary btn-md float-left btnBack" >Back</button>
<button id="btnSave" class="btn btn-secondary btn-md float-left mr-3 btnSave" >Save (*.json)</button>
<button id="btnPrint" class="btn btn-primary btn-md float-right" value="">Print</button>
</div>
</div>
<div id="results"></div>
<div class="row mt-2 mb-2 itemRow" id="githublink">
<div class="row mt-2 itemRow uiView">
<div class="col" >
<button id="btnBack" class="btn btn-primary btn-md float-left btnBack" >Back</button>
</div>
</div>
<div class="col" >
<small><a href="https://github.com/interactionlab/informed-consent-generator/">Source Code on GitHub</a></small><small> running <span id="version">v0.2</span></small>
</div>
</div>
</form>
</div>
</div>
<script>
function onChange(event){
data = collectData();
}
function capitalize(s)
{
return s && s[0].toUpperCase() + s.slice(1);
}
function capital_letter(str) {
str = str.replace(/\s\s+/g, ' ');
str = str.split(" ");
for (var i = 0, x = str.length; i < x; i++) {
str[i] = str[i][0].toUpperCase() + str[i].substr(1);
}
return str.join(" ");
}
function downloadObjectAsJson(data, fileName){
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 4));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", fileName);
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
var inputKeys = ["title", "duration", "personalData", "storageTime", "purpose", "goal", "departmentHead", "thePIname", "thePIemail", "participants", "monetaryCompensation", "ethicalComittee", "funding"];
var inputRecord = ["demographics", "contact", "audio", "photos", "videos", "motion", "physiological", "eyetracking", "screenrecoding", "notes", "interaction"];
function myXOR(a,b) {
return ( a || b ) && !( a && b );
}
function fillSelect(){
$("select[name='institution']").append(new Option(settings["hints"]["select"], ""));
for (let key in settings["institutions"]) {
let institution = settings["institutions"][key]
$("select[name='institution']").append(new Option(institution["name"], institution["name"]));
}
$("select[name='type']").append(new Option(settings["hints"]["select"], ""));
for (let i = 0; i < settings["types"].length; i++) {
type = settings["types"][i]
$("select[name='type']").append(new Option(type[0], type[1]));
}
$("select[name='share']").append(new Option(settings["hints"]["select"], ""));
for (let i = 0; i < settings["dataShare"].length; i++) {
share = settings["dataShare"][i]
$("select[name='share']").append(new Option(share[0], share[1]));
}
$("select[name='encryption']").append(new Option(settings["hints"]["select"], ""));
for (let i = 0; i < settings["dataEncryption"].length; i++) {
encryption = settings["dataEncryption"][i]
$("select[name='encryption']").append(new Option(encryption[0], encryption[1]));
}
$("select[name='compensation']").append(new Option(settings["hints"]["select"], ""));
for (let i = 0; i < settings["compensation"].length; i++) {
compensation = settings["compensation"][i]
$("select[name='compensation']").append(new Option(compensation[0], compensation[1]));
}
var hints = settings["hints"]
for (let key in hints) {
if (key == "select"){
//None
}
else if (key == "procedure"){
$("textarea[name='" + key + "'] ").attr("placeholder", hints[key]);
} else {
$("input[name='" + key + "'] ").attr("placeholder", hints[key]);
}
}
$("#hostUrl").attr("href", settings["hostUrl"]);
$("#hostLogo").attr("src", "img/" + settings["hostLogo"]);
let cookieData = getCookie("data");
if (cookieData != null){
cookieData = JSON.parse(cookieData);
fillData(cookieData);
} else {
for (let i = 0; i < settings["researcherCount"]; i++){
addResearcher();
}
}
}
function addResearcher (){
var lstResearchers = document.getElementsByClassName("researchersContainer");
var lastElement = null;
if (lstResearchers.length == 0){
lastElement = document.getElementById("addResearchersContainer");
} else {
lastElement = lstResearchers[lstResearchers.length-1];
}
var link = `<div class="row mt-3 researchersContainer">
<div class="col-4"></div>
<div class="col-8">
<div class="row mt-3">
<div class="col-2"><span class="researcherName">Name</span><span class="text-danger">*</span></div>
<div class="col-10">
<div class="input-group">
<input class="form-control" name="researcherName" onchange="onChange(event)" required></input>
<button class="btn btn-danger btnRemoveResearcher" onclick="removeResearcher(1)" type="button">-</button>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-2"><span class="researcherEmail">E-Mail</span><span class="text-danger">*</span></div>
<div class="col-10"><input class="form-control" name="researcherEmail" input type="email" onchange="onChange(event)" required></input>
</div>
</div>
</div>
</div>`;
lastElement.insertAdjacentHTML("afterend", link);
correctResercherNumbers();
}
function removeResearcher(value){
var lstResearchers = document.getElementsByClassName("researchersContainer");
if (lstResearchers.length > 0){
lstResearchers[value].remove();
}
correctResercherNumbers();
data = collectData();
}
function correctResercherNumbers (){
var lstResearchers = document.getElementsByClassName("researcherName");
for (var i = 0; i < lstResearchers.length; i++){
var researcherName = lstResearchers[i];
researcherName.innerHTML = "Name " + (i+1);
}
var lstResearchers = document.getElementsByClassName("btnRemoveResearcher");
for (var i = 0; i < lstResearchers.length; i++){
var researcherName = lstResearchers[i];
researcherName.setAttribute("onclick", "removeResearcher(" + (i) + ")");
}
var lstResearchers = document.getElementsByClassName("researcherEmail");
for (var i = 0; i < lstResearchers.length; i++){
var researcherName = lstResearchers[i];
researcherName.innerHTML = "E-mail " + (i+1);
}
}
function fillData(data){
$("textarea[name='procedure']").val(data["procedure"]);
var record = data["record"];
for (let key in record) {
$("input[name='record" + capitalize(key) + "']").prop("checked", record[key]);
}
inputKeys.forEach((key) => {
$("input[name='" + key + "']").val(data[key]);
});
$("select[name='institution'] option[value='" + data["institution"] + "']").attr("selected", true);
$("select[name='type'] option[value='" + data["type"] + "']").attr("selected", true);
$("select[name='share'] option[value='" + data["share"] + "']").attr("selected", true);
$("select[name='encryption'] option[value='" + data["encryption"] + "']").attr("selected", true);
$("select[name='compensation'] option[value='" + data["compensation"] + "']").attr("selected", true);
document.querySelectorAll(".researchersContainer").forEach(el => el.remove());
if (data["researchers"] != null){
data["researchers"].forEach((researcher) => {
addResearcher();
var lstResearchers = document.getElementsByClassName("researchersContainer");
var lastElement = lstResearchers[lstResearchers.length-1];
lastElement.getElementsByClassName("form-control")[0].value = researcher["name"];
lastElement.getElementsByClassName("form-control")[1].value = researcher["email"];
});
}
}
function collectData(){
let data = {};
data["version"] = settings["version"];
document.getElementById("version").innerHTML = settings["version"];
inputKeys.forEach((key) => {
data[key] = $("input[name='" + key + "']").val();
});
data["record"] = {};
inputRecord.forEach((key) => {
data["record"][key] = $("input[name='record" + capitalize(key) + "']").prop('checked')
});
data["procedure"] = $("textarea[name='procedure']").val();
data["institution"] = $("select[name='institution']").val();
data["type"] = $("select[name='type']").val();
data["share"] = $("select[name='share']").val();
data["encryption"] = $("select[name='encryption']").val();
data["compensation"] = $("select[name='compensation']").val();
data["researchers"] = [];
var lstResearchers = document.getElementsByClassName("researchersContainer");
for (var i = 0; i < lstResearchers.length; i++){
var researcher = lstResearchers[i];
var name = researcher.getElementsByClassName("form-control")[0].value;
var email = researcher.getElementsByClassName("form-control")[1].value;
data["researchers"].push({"name": name, "email": email});
}
document.cookie = "data=" + JSON.stringify(data);
return data;
}
const makeCommaSeparatedString = (arr, andSeparator, useOxfordComma) => {
const listStart = arr.slice(0, -1).join(', ');
const listEnd = arr.slice(-1);
const conjunction = arr.length <= 1 ? '' : useOxfordComma && arr.length > 2 ? ', ' + andSeparator + ' ' : ' ' + andSeparator + ' ';
return [listStart, listEnd].join(conjunction)
}
function generate(){
data = collectData();
$(".uiView").show();
$(".uiEdit").hide();
$("#input").hide();
$("#fieldsrequired").hide();
var article = "";
var str = "";
switch(data["type"]){
case "online study": article = " an "; break;
case "user study": article = " a "; break;
case "field study": article = " a "; break;
case "interview": article = " an "; break;
}
str += "<div class='row' id='firstItem'><div class='col mt-4 mb-2 '><img src='img/" + settings["institutions"][data["institution"]]["logo"] + "' class='float-right' width='150px' alt='Logo' /></a></div></div>";
// TITLE
str += "<div class='pageBreak'><h1>Informed Consent of Participation</h1>";
var additionalResearcher = "";
data["researchers"].forEach((researcher) => {
additionalResearcher += researcher["name"] + ", ";
});
if (additionalResearcher != ""){
additionalResearcher = additionalResearcher + " and " ;
}
// INVITATION (SUMMARY OF THE FOLLOWING)
str += "<p>You are invited to participate in the " + data["type"] + " <b>" + capital_letter(data["title"]) + "</b>, initiated and conducted by " + additionalResearcher + data["thePIname"] + ". The research is supervised";
if(data["departmentHead"] != ""){
str += " by " + data["departmentHead"];
}
if(data["thePIname"] != ""){
str += " by " + data["thePIname"];
}
if(data["institution"] != ""){
str += " at the " + data["institution"];
}
str += ". ";
if(data["funding"] != ""){
str += "This study is funded and financed by the research project " + data["funding"] + ". ";
}
// BULLET POINT AT THE BEGINNING
str += "Please note:</p><ul>";
str += "<li>Your participation is voluntary.</li>";
str += "<li>The " + data["type"] + " will last approximately " + data["duration"] + ".</li>";
if(data["record"]["demographics"])
str += "<li>We will record personal demographics (" + data["personalData"] + ").</li>";
if(data["record"]["photos"])
str += "<li>We will take photos during the session.</li>";
if(data["record"]["videos"])
str += "<li>We will record videos during the session.</li>";
if(data["record"]["audio"])
str += "<li>We will record audio during the session.</li>";
if(data["record"]["motion"])
str += "<li>We will track your body motion during the session.</li>";
if(data["record"]["eyetracking"])
str += "<li>We will track your eye and head motion during the session.</li>";
if(data["record"]["physiological"])
str += "<li>We will take physiological measurements of your body.</li>";
if(data["record"]["screenrecoding"])
str += "<li>We will record the screen on your device that are necessary for the study.</li>";
if(data["record"]["interaction"])
str += "<li>>We will record interaction data (e.g., clickes, timings) during the session.</li>";
if(data["compensation"] == "points" | data["compensation"] == "moneyPoints"){
str += "<li>You will receive 1 credit point per hour for your study course as compensation.</li>";
}
str += "<li>We may publish results from this and other sessions.</li>"
if(data["share"] == "yes"){
str += "<li>All data you provide in this " + data["type"] + " will be published <b>not anonymized</b></li>.";
} else if(data["share"] == "anonymized"){
str += "<li>All data you provide in this " + data["type"] + " will be published anonymized; thus, they will neither include your name nor cannot be associated with your identity.</li>";
}
str += "</ul>"
str += "<p>If you have any questions about the whole informed consent process of this research or your rights as a human research subject, please contact ";
if(data["ethicalComittee"] != ""){
str += "our ethics committee office: " + data["ethicalComittee"] + ". ";
} else if (data["departmentHead"] != "") {
str += data["thePIname"] + " (E-Mail: " + data["thePIemail"] +") or "+ data["departmentHead"] + ". ";
} else {
str += data["thePIname"]+ " (E-Mail: " + data["thePIemail"] +"). ";
}
str += "You should carefully read the settings below. You may take as much time as you need to read the consent form. If you do not fully agree with something, or if your questions have not all been answered to your satisfaction, then you should not give your consent. </p></div>";
var itemCount = 1;
// GOAL AND PURPOSE
str += "<div class='pageBreak'><h3>" + itemCount + ". Purpose and Goal of this Research</h2>";
str += "<p>"+data["purpose"]+" "+ data["goal"] + " Your participation will help us achieve this goal. ";
str += "The results of this research may be presented at scientific or professional meetings or published in scientific proceedings and journals. </p></div>";
itemCount++;
// PARTICIPATION AND COMPENSATION
str += "<div class='pageBreak'><h3>" + itemCount + ". Participation and Compensation</h3>";
str += "<p>Your participation in this " + data["type"] + " is voluntary. ";
str += "You will be one of approximately " + data["participants"] + " people being ";
switch(data["type"]){
case "online study": str += "surveyed "; break;
case "user study": str += "tested "; break;
case "field study": str += "surveyed "; break;
case "interview": str += "interviewed "; break;
}
str += "for this research. ";
if(data["compensation"] == "none"){
str += "You will receive no compensation. You may withdraw and discontinue participation at any time without penalty. If you decline to participate or withdraw from the " + data["type"] + ", this will be confidential. ";
} else {
if(data["compensation"] == "points" | data["compensation"] == "moneyPoints"){
str += "You will receive one credit point per hour required for your study course at the " + data["institution"] + ". You may withdraw and discontinue participation at any time without justification for withdrawing. You will still receive your extra one credit point that your professor had offered in exchange for your participation. If you decline to participate or withdraw from the " + data["type"] + ", this will be confidential. ";
}
if(data["compensation"] == "money" | data["compensation"] == "moneyPoints"){
str += "You will receive " + data["monetaryCompensation"] + " as compensation for your participation. You may withdraw and discontinue participation at any time without penalty or losing the compensation. If you decline to participate or withdraw from the " + data["type"] + ", this will be confidential. ";
}
}
str += "If possible, you may refuse to answer any questions you do not want to answer or withdraw from participation at any time. ";
if(data["type"] == "experimental study")
str += "The investigator may withdraw you from this research if your physician tells us that continued participation may injure your health. ";
if(data["type"] == "interview")
str += "I have the right not to answer questions, and if I feel uncomfortable in any way during the interview session, I have the right to withdraw from the interview. ";
str += "</p>";
str += "<p>At any time and without giving any reason, you can notify us that you want to withdraw the consent given (GDPR Art. 21). In case of withdrawal, your data stored based on your consent will be deleted or anonymized where this is legally permissible (GDPR Art. 17). If deletion is impossible or only possible with unreasonable technical effort, your data will be anonymized by deleting the personal identification information. However, anonymization of your data cannot entirely exclude the possibility of subsequent tracing of information to you via other sources. Finally, once the data is anonymized, the deletion of the data is not possible anymore as we will not be able to identify which data is yours. </p>"
str += "</div>";
itemCount++;
// PROCEDURE
str += "<div class='pageBreak'><h3>" + itemCount + ". Procedure</h3>";
str += "<p>After giving consent, you will be guided through the following steps:</p><p style='padding-left: 10px; padding-top: 0px'>";
str += data["procedure"].replace(/\n/g, "<br />");
str += "</p><p>The complete procedure of this " + data["type"] + " will last approximately " + data["duration"] + ".</p>";
str += "</div>";
itemCount++;
// RISKS AND BENEFITS
str += "<div class='pageBreak'><h3>" + itemCount + ". Risks and Benefits</h3>";
str += "<p>There are no risks associated with this " + data["type"] + ". Discomforts or inconveniences will be minor and are unlikely to happen. If you feel uncomfortable, you may discontinue your participation. ";
if(data["compensation"] == "none")
str += "(You will not directly benefit through participation in this " + data["type"] +". We hope that the settings obtained from your participation may help to bring forward the research in this field.) ";
else
str += "Your benefit in participating is your compensation described above. ";
str += "With this research, we will advance knowledge in this research field.</p></div>";
itemCount++;
// DATA PROTECTION
str += "<div class='pageBreak'><h3>" + itemCount + ". Data Protection and Confidentiality</h3>";
str += "<p>";
str += "The General Data Protection Regulation (GDPR) of the European Union (EU) governs that data collection process. The legal basis for processing the personal data is the consent in accordance with GDPR Art. 6 (1). The GDPR agreneets a set of right to the data subjects, including the right to access, rectification, and erasure of personal data. ";
str += "<ul>"
str += "<li>You have the right to access your personal data at any time (GDPR Art. 15). </li>";
str += "<li>You have the right to correct inaccurate personal data at any time (GDPR Art. 16). </li>";
str += "<li>You have the right to have your personal data deleted (GDPR Art. 17). </li>";
str += "<li>You have the right to limit the processing of your personal data (GDPR Art. 18). </li>";
str += "<li>You have the right to have your data transforared to others (GDPR Art. 20). </li>";
str += "<li>You have the right to withdraw the consent given (GDPR Art. 21). </li>";
str += "</ul><p>";
str += "If you wish to exercise any of your rights, please contact the researchers. "
str += "</p><p>";
if(data["record"]["demographics"]) {
str += "Personal data (" + data["personalData"]+ ") will be recorded during participation. ";
}
if(data["type"] == "online study"){
str += "The contact details of the study participants can be used to track potential infection chains. ";
}
str += "Researchers will not identify you by your real name in any reports using settings obtained from this "+ data["type"] + ", and your confidentiality as a participant in this " + data["type"] + " will remain secure. ";
if(data["encryption"] == "yes"){
str += "All data you provide in this " + data["type"] + " will be encrypted. ";
}
str += "Data collected in this " + data["type"] + " will be treated in compliance with the GDPR. ";
str += "</p><p>"
records = [];
if(data["record"]["demographics"]) records.push("record demographics");
if(data["record"]["contact"]) records.push("record contact information");
if(data["record"]["photos"]) records.push("take photos");
if(data["record"]["videos"]) records.push("record videos");
if(data["record"]["audio"]) records.push("record audio");
if(data["record"]["motion"]) records.push("record your body motion");
if(data["record"]["eyetracking"]) records.push("record your eye motion");
if(data["record"]["physiological"]) records.push("take physiological measurements");
if(data["record"]["screenrecoding"]) records.push("record the screen and/or activities on your device");
if(data["record"]["interaction"]) records.push("record your interactions");
if(data["record"]["notes"]) records.push("make manual notes");
if(data["type"] == "online study"){
records.push("browser meta data");
}
records = makeCommaSeparatedString(records, "and", true);
str += "We will " + records + " during the " + data["type"] + ". ";
if(data["share"] == "yes"){
str += "All data you provide in this " + data["type"] + " will be published <b>not anonymized</b>. ";
str += "Subsequent uses of records and data will be subject to standard data use policies. ";
}else if(data["share"] == "anonymized"){
str += "All data you provide in this " + data["type"] + " will be published anonymized. ";
str += "Subsequent uses of records and data will be subject to standard data use policies that protect the participating individuals' anonymity. ";
str += "We will remove or code any personal information that could identify you before publishing the data to ensure that no one can identify you from the information we share. We will use current scientific standards and known methods for anonymization. When your data are anonymized, they are altered in a manner that they can no longer be traced back to your person or only with disproportionate technical effort. Despite these measures, we cannot guarantee the anonymity of your personal data. "
} else {
str += "All data you provide in this " + data["type"] + " will not be published and kept confidential. ";
}
if(data["type"] == "interview" && data["share"] != "yes"){
str += "The interview transcript will be primarily analyzed by ";
if(data["thePIname"] != ""){
str += data["thePIname"];
}
if(data["secondResearcherName"] != ""){
str += " and " + data["secondResearcherName"];
}
if(data["thirdResearcherName"] != ""){
str += " and " + data["thirdResearcherName"];
}
str += ". ";
str += "Access to the raw interview transcript will be limited to the authors of this research, academic colleagues, and researchers with whom he might collaborate as part of the research process. "
str += "Any summary interview content, or direct quotations from the interview, that are made available through academic publications or other outlets will be anonymized so that you cannot be identified, and care will be taken to ensure that other settings in the interview that could identify you is not revealed. I have the right not to answer questions, and if I feel uncomfortable in any way during the interview session, I have the right to withdraw from the interview. ";
}
if(data["type"] == "online study"){
str+= "This site uses cookies and other tracking technologies to conduct the research, to improve the user experience, the ability to interact with the system and to provide additional content from third parties. Despite careful control of content, the researchers assume no liability for damages, which directly or indirectly result from the use of this online application. ";
}
str += "</p><p>"
if (data["share"] != "yes"){
str += "Your non-anonymized data will be stored for " + data["storageTime"] + " from the time your consent is given, unless you withdraw your consent before this period has elapsed. Your non-anonymized data will be stored in a secure location and will be accessible only to the researchers involved in this work. ";
} else {
str += "Your non-anonymized data will be stored indefinitely, unless you withdraw your consent. ";
}
str += "</p><p>"
if (data["share"] == "yes"){
str += "Non-anonymized data collected can be shared publicly unless you have not signed the separate permission form allowing us to so (see below). ";
} else if (data["share"] == "anonymized"){
str += "Anonymized data collected can be shared publicly. ";
} else {
str += "The data collected cannot be viewed or used for futher research by everyone outside the researchers involved in this work. "
}
if(data["share"] == "no"){
str += "The data collected will be deleted after the end of the research. ";
str += "or if you contact the researcher to delete them. ";
} else {
str += "Data collected that have not been made public will be deleted after the end of the research. ";
}
str += "</p><p>";
str += "As with any publication or online-related activity, the risk of a breach of confidentiality is always possible. According to the GDPR, the researchers will inform the participant if a breach of confidential data is detected. </p></div>";
itemCount++;
// IDENTIFICATION OF INVESTIGATORS
str += "<div class='pageBreak'><h3>" + itemCount + ". Identification of Investigators</h3>";
let institution = settings["institutions"][data["institution"]]
var street = institution["street"];
var zip = institution["zip"];
var city = institution["city"];
var country = "Germany";
str += "<p>If you have any questions or concerns about the research, please feel free to contact: </p><div class='row'>";
var count = 1
if(data["departmentHead"] != "" && data["departmentHead"] != data["thePIname"]){
count++;
}
if (data["researchers"].length > 0){
count++;
}
if (count == 1){
cellPI = "<div class='col-12'>";
} else if (count == 2){
cellPI = "<div class='col-4'>";
cell = "<div class='col-8'>";
} else {
cellPI = "<div class='col-4'>";
cell = "<div class='col-4'>";
}
if (data["researchers"].length > 0){
var allReserchers = ""
data["researchers"].forEach((researcher) => {
allReserchers += researcher["name"] + " (" + researcher["email"] + ")<br>";
});
str += cell + allReserchers + "</div>";
}
if(data["thePIname"]!=""){
str += cellPI + data["thePIname"] + "<br />Principal Investigator<br />" + street + "<br />" + zip + " " + city + ", " + country + "<br />" + data["thePIemail"] + "</div>";
}
if(data["departmentHead"] != "" && data["departmentHead"] != data["thePIname"]){
str += cell + data["departmentHead"] +"<br />Professor/Head of Department<br />" + street + "<br />" + zip + " " + city + ", " + country + "</div>";
}
str += "<br /></div></div>";
itemCount++;
// INFORMED CONSENT
str += "<div class='pageBreak'><h3>" + itemCount + ". Informed Consent and Agreement</h3>";
str += "This consent form will be retained securely and in compliance with the GDPR for no longer than necessary."
str += "<table>";
str += "<tr><th><img src='img/square.jpg' width='15px' heighz='15px'/></th><th><p> I understand the explanation provided to me. I have been given a copy of this form. I have had all my questions answered to my satisfaction, and I voluntarily agree to participate in this " + data["type"] +". <p /></th></tr>";
str += "<tr><th><img src='img/square.jpg' width='15px' heighz='15px'/></th><th><p>I voluntarily consent to my data being recorded and subsequently processed in line with the GDPR. I have been informed about the consequences of withdrawing my consent.<p /></th></tr>";
if(data["share"] == "yes"){
str += "<tr><th><img src='img/square.jpg' width='15px' height='15px'/></th><th><p>I agree that my data records and measurements during the study can be published in context of this research in non-anonymized from.<p>"
record = "";
if(data["record"]["photos"]) record += "<tr><th><img src='img/square.jpg' width='15px' height='15px'/></th><th><p>I additionally agree that photos during this study can be made and published.<p /></th></tr>"
if(data["record"]["videos"]) record += "<tr><th><img src='img/square.jpg' width='15px' height='15px'/></th><th><p>I additionally agree that videos during this study can be recorded and published.<p /></th></tr>"
if(data["record"]["audio"]) record += "<tr><th><img src='img/square.jpg' width='15px' height='15px'/></th><th><p>I additionally agree that audio files during this study can be recorded and published.<p /></th></tr>"
if (record != ""){
str += "<table>" + record + "</table>";
}
str += "I understand that data will be anonymized cannot be associated with my name. From the consent of publication, I do not derive any rights (such as any renumeration or co-authorship). This declaration of consent is revocable at any time in line with the GDPR. In the case of revocation, the published recordings, insofar as they are subject to the disposition of the researchers, will be removed. Further recordings are no longer used or published after revocation of publication.</p></tr>"
str += "</table>"
}
str += "<table>"
str += "<tr><th><br /><br />__________________________________</th><th></th></tr>"
str += "<tr><th>Printed Name of Subject</th><th></th></tr>"
str += "<tr><th><br /><br />__________________________________</th><th><br /><br />_____________________________</th></tr>"
str += "<tr><th>Signature of Subject</th><th>Location, Date</th></tr>"
str += "</table>"
str += "</div>";
$("#results").html("<div class='frameStyle'>"+str+"</div>");
setTimeout(function () {
// window.print();
}, 100);
}
var settings = {};
var data = {};
$(document).ready(function() {
fetch('./settings.json')
.then((response)=>response.json())
.then((responseJson)=>{settings = responseJson; fillSelect();});
$(".uiEdit").show();
$(".uiView").hide();
$(".btnBack").click(function(e){
e.preventDefault();
$(".uiEdit").show();
$(".uiView").hide();
$("#input").show();
$("#fieldsrequired").show();
$("#btnGenerate").show();
$("#results").html("");
});
$("#btnPrint").click(function(e){
$('.print_special').css({ border : 'none'});
window.print();
e.preventDefault();
});
$("#btnAddResearcher").click(function(e){addResearcher ();});
$(".btnSave").click(function() {
data = collectData();
downloadObjectAsJson(data, "exportInformedConsent.json");
});
$("#btnLoad").click(function() {
$("#fileInput").click();
});
$('#fileInput').change(function (e) {
var [file] = document.querySelector('#fileInput').files;
var reader = new FileReader();
reader.onload = function(event) {
var jsonObj = JSON.parse(event.target.result);
data = jsonObj;
fillData(data);
};
reader.readAsText(event.target.files[0]);
});
$("#btnExample").click(function() {
fetch('./example.json')
.then((response)=>response.json())
.then((example)=>{fillData(example);data = collectData();});
});
});
</script>
</body>
</html>