-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (104 loc) · 4.98 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
<!DOCTYPE html>
<head>
<title>Stemwijzer</title>
<link rel="shortcut icon" type="image/png" href="assets/images/favicon/favicon.png">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="assets/js/index.js"></script>
<!-- script src="http://stemwijzer.dvc-icta.nl/data.js"></script -->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="assets/js/data.js"></script>
</head>
<body>
<header>
<div class="w3-container w3-blue">
<h1 class="w3-center">Stemwijzer</h1>
</div>
</header>
<main id="main">
<!--Start Screen -->
<div id="startScreen">
<div class="w3-container w3-center">
<p>
<button class="w3-button w3-black w3-round w3-xlarge" onclick="changeToQuestionScreen()">Start</button>
</p>
</div>
</div>
<!-- Questions Screen -->
<div id="questionScreen" style="display: none;">
<div class="w3-container">
<p>
<button class="w3-button w3-black w3-round w3-large" onclick="previousQuestion(currentQuestion)">Terug</button>
</p>
<h2 class="w3-center" id='subjectTitle'></h2>
<p class="w3-center" id='subjectStatement'></p>
<div class="w3-bar w3-center">
<button id="proButton" class="w3-button w3-black w3-round w3-large" onclick='nextQuestion(currentQuestion, "pro")'>Eens</button>
<button id="ambivalentButton" class="w3-button w3-black w3-round w3-large" onclick='nextQuestion(currentQuestion, "ambivalent")'>Geen van Beide</button>
<button id="contraButton" class="w3-button w3-black w3-round w3-large" onclick='nextQuestion(currentQuestion, "contra")'>Oneens</button>
</div>
</div>
<br>
<div class="w3-bar w3-center">
<button class="w3-button w3-blue w3-round w3-large" onclick='showPartiesTable()'>Wat vinden de partijen?</button>
<button class="w3-button w3-gray w3-round w3-large" onclick='nextQuestion(currentQuestion, "none")'>Sla vraag over</button>
</div>
<br>
<!-- Partie opinions -->
<div class="w3-row" id="partieOpinons" style="display:none;">
<div class="w3-col m4 w3-center">
<h1>Eens</h1>
<ul id="partiesProList" class="w3-ul"></ul>
</div>
<div class="w3-col m4 w3-center">
<h1>Geen van beide</h1>
<ul id="partiesAmbivalentList" class="w3-ul"></ul>
</div>
<div class="w3-col m4 w3-center">
<h1>Oneens</h1>
<ul id="partiesContraList" class="w3-ul"></ul>
</div>
</div>
</div>
<!--Select important questions screen -->
<div id="importantQuestionsSelect" style="display:none;">
<div class="w3-container">
<h1 class="w3-center">Voor u belangrijke vragen</h1>
<p class="w3-center">De vragen die u hier selecteerd zullen zwaarder mee tellen.</p>
<form id="questionForm">
<div id="questionsList"></div>
</form>
<div class="w3-bar w3-center">
<button class="w3-button w3-black w3-round w3-large" onclick="changeToQuestionScreen()">Terug</button>
<button class="w3-button w3-black w3-round w3-large" onclick="showSelectParties()">Verder</button>
</div>
</div>
</div>
<!-- Select parties screen -->
<div id="showPartiesList" style="display:none;">
<div class="w3-container">
<h1 class="w3-center">Partijen</h1>
<p class="w3-center">Selecteer hier welke partijen u wel wilt zien.</p>
<form id="partieForm">
<div id="partieList"></div>
</form>
<br>
<div class="w3-bar w3-center">
<button class="w3-button w3-black w3-round w3-large" onclick="showSelectImportantQuestions()">Terug</button>
<button class="w3-button w3-black w3-round w3-large" onclick="changeToEndResultScreen()">Verder</button>
</div>
</div>
</div>
<!-- End results screen -->
<div id="resultScreen" style="display:none;">
<div class="w3-container">
<p><button class="w3-button w3-black w3-round w3-large" onclick="showSelectParties()">Terug</button></p>
<div class="w3-row"><!-- Partie opinions -->
<div id="partieDisplayList" class="w3-col">
<h1>Parties:</h1>
</div>
</div>
</div>
</div>
</main>
</body>