-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (100 loc) · 4.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:400|Noto+Serif:700" rel="stylesheet" />
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- js dependencies -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mustache/mustache.min.js"></script>
<!-- js -->
<script src="js/main.js"></script>
<script src="js/exp.js"></script>
<script src="js/views.js"></script>
</head>
<body>
<noscript>This task requires JavaScript.</noscript>
<main id="main">
Loading...
</main>
<script id="intro-templ" type="x-tmpl-mustache">
<div class="intro-templ">
<article>
<h2>Herzlich Willkommen!</h2>
<p>Im Folgenden werden wir Ihnen nacheinander mehrere Gegenstände in verschiedenen Farben zeigen. Bitte bewerten Sie, <strong>wie typisch</strong> die entsprechende Farbe für den dargestellten Gegenstand ist. Die Bewertung erfolgt mittels eines Schiebereglers, welcher von <strong>“sehr untypisch”</strong> bis <strong>“sehr typisch”</strong> reicht. Bitte nutzen Sie für Ihre Bewertungen die gesamte Länge des Schiebereglers aus. Sie können erst zum nächsten Bild, wenn Sie mit dem Schieberegler einen Wert gewählt haben. Zu Beginn ist der Regler genau in der Mitte. Wenn Sie genau die Mitte wählen möchten, bewegen Sie kurz den Regler von der Ausgangstellung weg und zurück.</p>
<p>Entscheiden Sie bitte nach Ihrem Gefühl und denken Sie nicht zu lange über Ihre Entscheidung nach. Das Experiment wird ca. 15 Minuten dauern, der Fortschritt wird Ihnen angezeigt.</p>
<form>
<p>Bevor es los geht, bitte geben Sie hier Ihre Prolific ID ein:</p>
<input id="prolificID" type="text" placeholder="Prolific ID"/>
<h3>Vielen Dank!</h3>
<button type="button" id="start-exp-btn">zum Experiment</button>
</form>
</article>
</div>
</script>
<script id="instructions-templ" type="x-tmpl-mustache">
<div class="instructions-templ">
<h3>Zunächst üben wir den Ablauf mit Ihnen, damit Sie wissen was auf Sie zukommt.</h3>
<button type="submit" id="continue-btn" class="continue-btn">Weiter</button>
</div>
</script>
<script id="practice-templ" type="x-tmpl-mustache">
<div class="practice-templ trial-templ hidden">
<h3>Übung</h3>
<h3 class="question"></h3>
<div class="image-container">
<img class="image" />
</div>
<section class="slider">
<span class="untypisch">sehr untypisch</span>
<input type="range" id="response" min="0" max="100" value="50"/>
<span class="typisch">sehr typisch</span>
</section>
<button type="submit" id="continue-btn" class="continue-btn">Weiter</button>
<p class="helper-text hidden">Um fortzufahren zu können, müssen Sie den Regler bewegt haben.</p>
</div>
</script>
<script id="begin-exp-templ" type="x-tmpl-mustache">
<div class="begin-templ">
<h3>Sehr gut. Wenn Sie bereit sind, dann fahren Sie mit dem Experiment fort. Ab jetzt werden Ihre Bewertungen aufgezeichnet</h3>
<button type="submit" id="continue-btn" class="continue-btn">Experiment starten</button>
</div>
</script>
<script id="trial-templ" type="x-tmpl-mustache">
<div class="trial-templ hidden">
<div class="progress-bar-container">
<p>progress</p>
<div class="progress-bar-body">
<div class="progress-bar-fill"></div>
</div>
</div>
<h3 class="question"></h3>
<div class="image-container">
<img class="image" />
</div>
<section class="slider">
<span class="untypisch">sehr untypisch</span>
<input type="range" id="response" min="0" max="100" value="50"/>
<span class="typisch">sehr typisch</span>
</section>
<button type="submit" id="continue-btn" class="continue-btn">Weiter</button>
<p class="helper-text hidden">Um fortzufahren zu können, müssen Sie den Regler bewegt haben.</p>
</div>
</script>
<script id="submit-results-templ" type="x-tmpl-mustache">
<form id="form">
<h2>Bitte klicken Sie auf den Button, um Ihre Antworten zu speichern:</h2>
<input type="hidden" name="ID" value="{{ ID }}" />
<input type="hidden" name="results" value="{{ results }}" />
<button type="submit" id="submit-results-btn">save results</button>
</form>
<section class="thanks hidden">
<h2>Danke für Ihre Teilnahme!</h2>
<h3>Bitte klicken Sie diesen Link an, um das Experiment abzuschließen:</h3>
<a href="https://prolific.ac/submissions/complete?cc=321CBURL">https://prolific.ac/submissions/complete?cc=321CBURL</a>
</section>
</script>
</body>
</html>