-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (187 loc) · 9.84 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
<!--This is basically just a single index.html-page,
whos sections get displayed based on the users actions-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<title>Braunscher Nullsummen-Persönlichkeitstest</title>
</head>
<body>
<div id="frame">
<!--First Section: "Landing/Starting" Section-->
<div id="startpage">
<h1>Bist du Typ Heinz oder Typ Charlie?</h1>
<h2>Ein ganz besonderer Persönlichkeitstest</h2>
<img src="heinzunhorst.jpg" alt="Ein Bild von Heinz und Horst">
<button id="startbutton" class="buttons">Start</button>
</div>
<!--Second Section: the personality test-->
<div id="quizsection" class="invisible">
<h1>Auf geht's!</h1>
<form action=""> <!--Note to myself: Form und Fieldset: Good Practice for
Multiple Choice (?)-->
<p>Wenn du ins Süßigkeitenfach greifst, suchst du nach...</p> <!--This is where the questions go-->
<!--This is where the answers go / for outcome 1 "Heinz": value=a, for outcome 2 "Horst": value=b-->
<fieldset>
<div>
<input type="radio" id="answer1a" name="answer1" value="a" autocomplete="off">
<label for="answer1a">Gummibärchen - aber nicht die Weißen oder Gelben!</label>
</div>
<div>
<input type="radio" id="answer1b" name="answer1" value="b" autocomplete="off">
<label for="answer1b">sauren Colaflaschen</label>
</div>
</fieldset>
<p>Mit welchem Wort würden Andere dich beschreiben?</p>
<fieldset>
<div>
<input type="radio" id="answer2a" name="answer2" value="a" autocomplete="off">
<label for="answer2a">"Macher"</label>
</div>
<div>
<input type="radio" id="answer2b" name="answer2" value="b" autocomplete="off">
<label for="answer2b">"Grüner Elefant"</label>
</div>
</fieldset>
<p>Das hast du IMMER dabei:</p>
<fieldset>
<div>
<input type="radio" id="answer3a" name="answer3" value="a" autocomplete="off">
<label for="answer3a">ein Messer</label>
</div>
<div>
<input type="radio" id="answer3b" name="answer3" value="b" autocomplete="off">
<label for="answer3b">dein Handy</label>
</div>
</fieldset>
<!--reversed order of answers is displayed (b before a)-->
<p>Aah, Wein. Welche Aufgabe als Winzer wählst du?</p>
<fieldset>
<div>
<input type="radio" id="answer4b" name="answer4" value="b" autocomplete="off">
<label for="answer4b">Pressen</label>
</div>
<div>
<input type="radio" id="answer4a" name="answer4" value="a" autocomplete="off">
<label for="answer4a">Niederziehen</label>
</div>
</fieldset>
<p>Wenn du jeden Tag das Gleiche essen müsstest, dann am liebsten...</p>
<fieldset>
<div>
<input type="radio" id="answer5b" name="answer5" value="b" autocomplete="off">
<label for="answer5b">Kaiserschmarrn</label>
</div>
<div>
<input type="radio" id="answer5a" name="answer5" value="a" autocomplete="off">
<label for="answer5a">Königsberger Klopse</label>
</div>
</fieldset>
<p>Wähle ein Urlaubsziel:</p>
<fieldset>
<div>
<input type="radio" id="answer6b" name="answer6" value="b" autocomplete="off">
<label for="answer6b">Italien, am Gardasee</label>
</div>
<div>
<input type="radio" id="answer6a" name="answer6" value="a" autocomplete="off">
<label for="answer6a">Frankreich</label>
</div>
</fieldset>
<p>Unter dem Tisch liegen Krümel vom Abendessen. Und jetzt?</p>
<fieldset>
<div>
<input type="radio" id="answer7b" name="answer7" value="b" autocomplete="off">
<label for="answer7b">Die saug' ich fix weg.</label>
</div>
<div>
<input type="radio" id="answer7a" name="answer7" value="a" autocomplete="off">
<label for="answer7a">Hä, wo sind da Krümel?</label>
</div>
</fieldset>
<!--regular order of answers recommences-->
<p>Stell dir vor, du verwandelst dich in ein Werkzeug. Simsalabim, du bist...</p>
<fieldset>
<div>
<input type="radio" id="answer8a" name="answer8" value="a" autocomplete="off">
<label for="answer8a">ein Hobel</label>
</div>
<div>
<input type="radio" id="answer8b" name="answer8" value="b" autocomplete="off">
<label for="answer8b">eine Gewindeschneidkluppe</label>
</div>
</fieldset>
<p>Du findest eine Zeitmaschine. Sie hat genau zwei Knöpfe. Welchen drückst du?</p>
<fieldset>
<div>
<input type="radio" id="answer9a" name="answer9" value="a" autocomplete="off">
<label for="answer9a">Mittelalter</label>
</div>
<div>
<input type="radio" id="answer9b" name="answer9" value="b" autocomplete="off">
<label for="answer9b">1. Weltkrieg - aber nur zum Gucken!</label>
</div>
</fieldset>
<p>Du könntest nicht leben ohne...</p>
<fieldset>
<div>
<input type="radio" id="answer10a" name="answer10" value="a" autocomplete="off">
<label for="answer10a">Süßigkeiten</label>
</div>
<div>
<input type="radio" id="answer10b" name="answer10" value="b" autocomplete="off">
<label for="answer10b">ein Motorrad</label>
</div>
</fieldset>
<!--reversed order of answers is displayed (b before a)-->
<p>Du bist wahnsinnig berühmt! Was hat dich zum Superstar gemacht?</p>
<fieldset>
<div>
<input type="radio" id="answer11b" name="answer11" value="b" autocomplete="off">
<label for="answer11b">Du findest immer eine Lösung - egal wie aussichtlos die Situation erscheint.</label>
</div>
<div>
<input type="radio" id="answer11a" name="answer11" value="a" autocomplete="off">
<label for="answer11a">Die unglaubliche Menge an Träubel, die du ohne Verdauungsprobleme essen kannst.</label>
</div>
</fieldset>
<p>Wähle ein Kleidungsstück, an dem man dich für den Rest deines Lebens erkennen kann:</p>
<fieldset>
<div>
<input type="radio" id="answer12b" name="answer12" value="b" autocomplete="off">
<label for="answer12b">eine Cargohose</label>
</div>
<div>
<input type="radio" id="answer12a" name="answer12" value="a" autocomplete="off">
<label for="answer12a">eine Cordhose</label>
</div>
</fieldset>
<p>Stell dir vor, es gibt ein Foto auf dem deine große Schwester dich quasi würgt. Stehst du auf dem Bild links oder rechts von ihr?</p>
<fieldset>
<div>
<input type="radio" id="answer13b" name="answer13" value="b" autocomplete="off">
<label for="answer13b">Hm, links? Aber sollte das nicht eher eine Umarmung sein?</label>
</div>
<div>
<input type="radio" id="answer13a" name="answer13" value="a" autocomplete="off">
<label for="answer13a">vermutlich rechts</label>
</div>
</fieldset>
<p></p>
<input type="submit" id="evaluationButton" value="zur Auswertung" class="buttons">
</form>
<!--Third Section: Evaluation Section-->
</div>
<div id="evaluation" class="invisible">
<h1>Das Ergebnis steht fest: Wenn du als Heinz oder als Charlie wiedergeboren werden würdest, wärst du eindeutig Typ </h1>
<div id="result"></div>
<button id="goAgainButton" class="buttons">Nochmal?</button>
<!--goAgainButton takes the site back to it's original settings-->
</div>
</div>
<script src="fragespiel.js"></script>
</body>
</html>