Skip to content

Commit cbedaf7

Browse files
author
Taylor O'Neill
committed
Made it more mobile-friendly
1 parent 5948c19 commit cbedaf7

File tree

6 files changed

+88
-9
lines changed

6 files changed

+88
-9
lines changed

‎feedback.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,16 @@
1111

1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1313
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1415
</head>
1516

1617
<body>
1718

1819

19-
<h1>SapplyValues Feedback</h1>
20+
<h1 class="title">SapplyValues</h1>
21+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
22+
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
23+
</svg>
2024
<hr>
2125

2226
<h2 style="text-align:center;" id="question-number">All done!</h2>

‎index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
<link rel="icon" type="x-icon" href="icon.png">
66
<link rel="shortcut icon" type="x-icon" href="icon.png">
77
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
89
</head>
910

1011
<body>
11-
<h1>SapplyValues</h1>
12+
<h1 class="title">SapplyValues</h1>
13+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
14+
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
15+
</svg>
1216
<hr>
1317
<img src="" id="banner">
14-
<button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">Click here to start!</button>
18+
<button class="button" onclick="location.href='instructions.html';">Click here to start!</button>
1519

1620
<h2>What is SapplyValues?</h2>
1721
<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 />

‎instructions.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@
44
<title>SapplyValues Quiz</title>
55
<link rel="icon" type="x-icon" href="icon.png">
66
<link rel="shortcut icon" type="x-icon" href="icon.png">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<meta charset="utf-8">
89
</head>
910
<body>
10-
<h1>SapplyValues</h1>
11+
<h1 class="title">SapplyValues</h1>
12+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
13+
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
14+
</svg>
1115
<hr>
1216
<h2 style="text-align:center;">Instructions</h2>
1317
<p class="question">You will be presented with a series of statements. For each one, click the button with your opinion on it.</p>

‎quiz.html

+8-3
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,21 @@
1010
<script type="application/javascript" src="questions.js"></script>
1111

1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1314
</head>
1415

1516
<body>
1617

17-
<h1>SapplyValues</h1>
18+
<h1 class="title">SapplyValues</h1>
19+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
20+
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
21+
</svg>
1822
<hr>
1923
<h2 style="text-align:center;" id="question-number">Loading...</h2>
2024
<p class="question" id="question-text"></p>
2125
<button class="button" onclick="next_question(1.0)" style="background-color: #1b5e20;">Strongly Agree</button> <br>
2226
<button class="button" onclick="next_question(0.5)" style="background-color: #4caf50;">Agree</button> <br>
23-
<button class="button" onclick="next_question(0)" style="background-color: #bbbbbb;">Neutral/Unsure</button> <br>
27+
<button class="button" onclick="next_question(0)" style="background-color: #bbbbbb;">Neutral / Unsure</button> <br>
2428
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;">Disagree</button> <br>
2529
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;">Strongly Disagree</button> <br>
2630
<button class="small_button" onclick="prev_question()" id="back_button">Back</button>
@@ -135,7 +139,8 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
135139
}
136140
}
137141
//return;
138-
location.href = ((window.location.hostname == "sapplyvalues.github.io") ? `feedback.html` : `results.html`) + args
142+
//location.href = ((window.location.hostname == "sapplyvalues.github.io") ? `feedback.html` : `results.html`) + args
143+
location.href = `feedback.html` + args
139144

140145
}
141146

‎results.html

+10-2
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,23 @@
55
<link rel="icon" type="x-icon" href="icon.png">
66
<link rel="shortcut icon" type="x-icon" href="icon.png">
77
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
89
</head>
910

1011
<body>
11-
<h1>SapplyValues</h1>
12+
<h1 class="title">SapplyValues</h1>
13+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
14+
<text x="50%" y="15" class="svgHeader">SapplyValues</text>
15+
</svg>
1216
<hr>
1317

14-
<h1>Results</h1>
18+
<h1 class="title">Results</h1>
19+
<svg id="svgHeader" style="width: 100%;" viewBox="0 0 112 19">
20+
<text x="50%" y="15" class="svgHeader">Results</text>
21+
</svg>
1522

1623
<img src="" id="banner"></canvas></br>
24+
<p style="text-align:center;margin:-2px auto">Hint: you can download this image directly. No need to screenshot!</p></br>
1725
<button class="button" onclick="location.href='index.html';" style="background-color: #2196f3;">Back</button> <br>
1826

1927

‎style.css

+54
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ h1 {
5757
margin-top: 0pt;
5858
margin-bottom: 0pt;
5959
}
60+
#svgHeader {
61+
display: none;
62+
}
6063
h2 {
6164
color: #333333;
6265
font-family: 'Montserrat', sans-serif;
@@ -210,3 +213,54 @@ span.weight-300 {
210213
max-width: 50%;
211214
min-width: 500pt;
212215
}
216+
217+
@media screen and (orientation:portrait) {
218+
body {
219+
width: auto !important;
220+
border-width: 0px !important;
221+
}
222+
223+
.title {
224+
display: none;
225+
}
226+
227+
#svgHeader {
228+
display: block !important;
229+
}
230+
231+
.svgHeader {
232+
color: #222222;
233+
font-family: 'Montserrat', sans-serif;
234+
text-align: center;
235+
margin-top: 0pt;
236+
margin-bottom: 0pt;
237+
font-weight: bold;
238+
text-anchor: middle;
239+
}
240+
241+
#banner {
242+
min-width: 0px;
243+
max-width: 100%;
244+
border-width: 1px;
245+
}
246+
247+
.button, .button:disabled, .text_input, .num_input, .selection {
248+
min-width: 0px;
249+
max-width: 100%;
250+
width: 100%;
251+
font-size: 1.5em;
252+
}
253+
254+
h2 {
255+
font-size: 1.5em;
256+
line-height: initial
257+
}
258+
259+
p.question {
260+
min-height: 224px !important;
261+
min-width: 0px;
262+
max-width: 100%;
263+
width: auto;
264+
font-size: 1.75em;
265+
}
266+
}

0 commit comments

Comments
 (0)