-
-
Notifications
You must be signed in to change notification settings - Fork 83
/
index.html
68 lines (61 loc) · 4.5 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
<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>SapplyValues</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">SapplyValues</h1>
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
</svg>
<hr>
<img src="" id="banner">
<button class="button" onclick="location.href='instructions.html';">Click here to start!</button>
<h2>What is SapplyValues?</h2>
<p>SapplyValues is 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 />
* A few questions have been reworded as I feel some of them were poorly written.</br></br>
There are <b><u><span id="numOfQuestions"></span></u></b> questions in the test.</p>
<h2>Why use this version?</h2>
<p>Both the original and the popular clone version have a number of issues and are very poorly coded. For starters, many users run into NaN errors. This happens when using the keyboard to press enter to go to the next page instead of clicking it. This doesn't apply at all to this version.</br></br>
Secondly, the original version does not properly generate an image. It puts an overlay on top of a CSS-defined background image, meaning that if you save the image, it just saves the overlay instead of the whole compass. This is fixed in this version.</br></br>
Thirdly, this version supports URL parameters, meaning you can easily share the link to your results and if you lose the image, you can find the results page entry with parameters in your history so you don't have to retake the whole test.</br></br>
Finally, the 8values / 9Axes UI is far better (in my opinion anyway). It looks nicer and takes less clicks to answer.</p>
<h2>Your questions / results suck!</h2>
<p>You will have to complain to the original Sapply creator. I did not make this test, I simply changed the UI.</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-2021 SapplyValues</p>
<p>8values, 9axes, and SapplyValues 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/SapplyValues/SapplyValues.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>