-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (57 loc) · 3.96 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
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99715444-7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-99715444-7');
</script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:400,700" rel="stylesheet">
<link href='style.css' rel='stylesheet' type='text/css'>
<title>4Squares (work in progress)</title>
<link rel="icon" type="x-icon" href="icon.png">
<link rel="shortcut icon" type="x-icon" href="icon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 class="title">4Squares (work in progress)</h1>
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
<text x="50%" y="15" class="svgHeader">The Political Compass</text>
</svg>
<hr>
<img src="" id="banner">
<button class="button" onclick="location.href='instructions.html';">Click here to start!</button>
<h2>What is 4Squares?</h2>
<p>4Squares is a modification of the <a href="https://sapplyvalues.github.io/">SapplyValues test</a>, a political compass test that combines the questions of the <a href="http://sapplypoliticalcompass.com/">Sapply test</a> with the UI of <a href="https://8values.github.io/">8values</a>. You will be presented by a statement, and then you will answer with your opinion on the statement, from <b>Strongly Agree</b> to <b>Strongly Disagree</b>, with each answer slightly affecting your scores. At the end of the quiz, your answers will be displayed on a political compass.<br /><br />
There are <b><u><span id="numOfQuestions"></span></u></b> questions in the test.</p>
<h2>Why use this version?</h2>
<p>Every political test I have ever taken has had vague or misleading questions in it, e.g. 'Every man is born equal' - what does this mean? In terms of intellect? Obviously not. In terms of how they should be treated by the legal system? Perhaps. 'Art that does not represent anything has no value' erm... why does this question make me more or less authoritarian? This quiz therefore aims to get rid of these and replace them with clear, unbiased and sensible questions.</p>
<h2>Your questions / results suck!</h2>
<p>Strongly disagree.</p>
<h2>Privacy notice</h2>
<p>This site uses Google Analytics. As well at the end of the test, you will be given the option to fill out general demographic information about yourself. There will be 3 options. The first will take you to a small survey and will record your answers to that along with the results. The second will just record your results. The third will not record anything. All information recorded is totally anonymous.</p>
<h2>Legal notice</h2>
<p>Copyright (C) 2017-2019 8values</p>
<p>Copyright (C) 2020-2022 4Squares</p>
<p>8values and 4Squares are licensed under the Expat/MIT license. You can find a copy of the license <a href="LICENSE">here</a> or on the <a href="https://github.com/Sneedsfeedandseed/sneedsfeedandseed.github.io/blob/master/LICENSE">GitHub repo</a>.</p>
<script type="application/javascript" src="questions.js"></script>
<script type="text/javascript">
document.getElementById("numOfQuestions").innerHTML = questions.length;
window.onload = function() {
var background = new Image();
background.onload = function() {
var c = document.createElement("canvas");
c.width = 1850;
c.height = 1300;
var ctx = c.getContext("2d");
ctx.fillStyle = "#EEEEEE"
ctx.fillRect(0, 0, 1850, 1300);
ctx.drawImage(background, 0, 0);
document.getElementById("banner").src = c.toDataURL();
}
background.src = "./compass.png";
}
</script>
</body>