Skip to content

Commit 9b9f01a

Browse files
TristanBombTristanBomb
authored
Adds back button (#20)
2 parents 0f6ec3f + f831725 commit 9b9f01a

File tree

4 files changed

+114
-85
lines changed

4 files changed

+114
-85
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,6 @@ <h2>What's the "Closest Match" mean at the bottom of the results?</h2>
3838
<p>In addition to matching you to the eight values, the quiz also attempts to match you to a political ideology. This is a work in progress and is much less accurate than the values and axes, so don't take it too seriously. If you disagree with your assigned ideology, send us an email at [email protected] with your scores, matched ideology, and preferred ideology, and we'll look into adjusting the system. Thanks!</p>
3939
<h2>I don't like my scores!</h2>
4040
<p>¯\_(ツ)_/¯<br/>
41-
If you have any suggestions or constructive criticism, feel free to send it to [email protected]</p>
41+
If you have any suggestions or constructive criticism, feel free to send it to [email protected] or open an issue on the GitHub page!</p>
4242

4343
</body>

‎quiz.html‎

Lines changed: 89 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,89 @@
1-
<head>
2-
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:400,700" rel="stylesheet">
3-
<link href='style.css' rel='stylesheet' type='text/css'>
4-
<title>8values Quiz</title>
5-
<link rel="icon" type="x-icon" href="icon.png">
6-
<link rel="shortcut icon" type="x-icon" href="icon.png">
7-
<meta charset="utf-8">
8-
</head>
9-
<body>
10-
<script type="application/javascript"
11-
src="questions.js">
12-
</script>
13-
<h1>8values</h1>
14-
<hr>
15-
<h2 style="text-align:center;" id="question-number">Loading...</h2>
16-
<p class="question" id="question-text"></p>
17-
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;">Strongly Agree</button> <br>
18-
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;">Agree</button> <br>
19-
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;">Neutral/Unsure</button> <br>
20-
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;">Disagree</button> <br>
21-
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;">Strongly Disagree</button> <br>
22-
23-
<script>
24-
var max_econ, max_dipl, max_govt, max_scty; // Max possible scores
25-
max_econ = max_dipl = max_govt = max_scty = 0
26-
var econ, dipl, govt, scty; // User's scores
27-
econ = dipl = govt = scty = 0
28-
var qn = 0; // Question number
29-
document.getElementById("question-text").innerHTML=questions[qn].question
30-
document.getElementById("question-number").innerHTML="Question " + (qn + 1) + " of " + (questions.length)
31-
for (var i = 0; i < questions.length; i++) {
32-
max_econ += Math.abs(questions[i].effect.econ)
33-
max_dipl += Math.abs(questions[i].effect.dipl)
34-
max_govt += Math.abs(questions[i].effect.govt)
35-
max_scty += Math.abs(questions[i].effect.scty)
36-
}
37-
function next_question(mult) {
38-
econ += mult*questions[qn].effect.econ
39-
dipl += mult*questions[qn].effect.dipl
40-
govt += mult*questions[qn].effect.govt
41-
scty += mult*questions[qn].effect.scty
42-
qn++
43-
if (qn < questions.length) {
44-
document.getElementById("question-text").innerHTML=questions[qn].question
45-
document.getElementById("question-number").innerHTML="Question " + (qn + 1) + " of " + (questions.length)
46-
} else {
47-
results()
48-
}
49-
}
50-
function calc_score(score,max) {
51-
return (100*(max+score)/(2*max)).toFixed(1)
52-
}
53-
function results() {
54-
location.href = `results.html`
55-
+ `?e=${calc_score(econ,max_econ)}`
56-
+ `&d=${calc_score(dipl,max_dipl)}`
57-
+ `&g=${calc_score(govt,max_govt)}`
58-
+ `&s=${calc_score(scty,max_scty)}`
59-
}
60-
</script>
61-
</body>
1+
<head>
2+
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:400,700" rel="stylesheet">
3+
<link href='style.css' rel='stylesheet' type='text/css'>
4+
<title>8values Quiz</title>
5+
<link rel="icon" type="x-icon" href="icon.png">
6+
<link rel="shortcut icon" type="x-icon" href="icon.png">
7+
<meta charset="utf-8">
8+
</head>
9+
<body>
10+
<script type="application/javascript"
11+
src="questions.js">
12+
</script>
13+
<h1>8values</h1>
14+
<hr>
15+
<h2 style="text-align:center;" id="question-number">Loading...</h2>
16+
<p class="question" id="question-text"></p>
17+
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;">Strongly Agree</button> <br>
18+
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;">Agree</button> <br>
19+
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;">Neutral/Unsure</button> <br>
20+
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;">Disagree</button> <br>
21+
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;">Strongly Disagree</button> <br>
22+
<button class="small_button" onclick="prev_question()" id="back_button">Back</button>
23+
<button class="small_button_off" id="back_button_off">Back</button><br>
24+
25+
<script>
26+
var max_econ, max_dipl, max_govt, max_scty; // Max possible scores
27+
max_econ = max_dipl = max_govt = max_scty = 0;
28+
var econ, dipl, govt, scty; // User's scores
29+
econ = dipl = govt = scty = 0;
30+
var qn = 0; // Question number
31+
var prev_answer = null;
32+
init_question();
33+
for (var i = 0; i < questions.length; i++) {
34+
max_econ += Math.abs(questions[i].effect.econ)
35+
max_dipl += Math.abs(questions[i].effect.dipl)
36+
max_govt += Math.abs(questions[i].effect.govt)
37+
max_scty += Math.abs(questions[i].effect.scty)
38+
}
39+
function init_question() {
40+
document.getElementById("question-text").innerHTML = questions[qn].question;
41+
document.getElementById("question-number").innerHTML = "Question " + (qn + 1) + " of " + (questions.length);
42+
if (prev_answer == null) {
43+
document.getElementById("back_button").style.display = 'none';
44+
document.getElementById("back_button_off").style.display = 'block';
45+
} else {
46+
document.getElementById("back_button").style.display = 'block';
47+
document.getElementById("back_button_off").style.display = 'none';
48+
}
49+
50+
}
51+
52+
function next_question(mult) {
53+
econ += mult*questions[qn].effect.econ
54+
dipl += mult*questions[qn].effect.dipl
55+
govt += mult*questions[qn].effect.govt
56+
scty += mult*questions[qn].effect.scty
57+
qn++;
58+
prev_answer = mult;
59+
if (qn < questions.length) {
60+
init_question();
61+
} else {
62+
results();
63+
}
64+
}
65+
function prev_question() {
66+
if (prev_answer == null) {
67+
return;
68+
}
69+
qn--;
70+
econ -= prev_answer * questions[qn].effect.econ;
71+
dipl -= prev_answer * questions[qn].effect.dipl;
72+
govt -= prev_answer * questions[qn].effect.govt;
73+
scty -= prev_answer * questions[qn].effect.scty;
74+
prev_answer = null;
75+
init_question();
76+
77+
}
78+
function calc_score(score,max) {
79+
return (100*(max+score)/(2*max)).toFixed(1)
80+
}
81+
function results() {
82+
location.href = `results.html`
83+
+ `?e=${calc_score(econ,max_econ)}`
84+
+ `&d=${calc_score(dipl,max_dipl)}`
85+
+ `&g=${calc_score(govt,max_govt)}`
86+
+ `&s=${calc_score(scty,max_scty)}`
87+
}
88+
</script>
89+
</body>

‎style.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,32 @@ img.center {
8585
text-decoration: none;
8686
display: block;
8787
font-size: 24pt;
88-
margin: 0 auto;
88+
margin: -2px auto;
89+
cursor: pointer;
90+
}
91+
.small_button, .small_button_off {
92+
background-color: #333;
93+
font-family: 'Montserrat', sans-serif;
94+
border: none;
95+
border-radius: 8pt;
96+
color: white;
97+
padding: 8pt;
98+
width: 10%;
99+
min-width: 100pt;
100+
text-align: center;
101+
text-decoration: none;
102+
display: block;
103+
font-size: 18pt;
104+
margin: -2px auto;
89105
cursor: pointer;
90106
}
107+
.small_button_off {
108+
background-color: #ddd;
109+
color: #888;
110+
border: 2px solid #888;
111+
cursor: not-allowed;
112+
margin: -4px auto;
113+
}
91114
div.axis {
92115
width: 100%;
93116
display: flex;

‎test.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)