Skip to content

Commit f60ceac

Browse files
gervasiocajgervasiocaj
committed
Add localization for index and instructions
 Progress of adaptation: - [x] Questions - [x] Quiz - [x] Index - [x] Instructions - [ ] Results
1 parent cac4aed commit f60ceac

File tree

7 files changed

+119
-30
lines changed

7 files changed

+119
-30
lines changed

‎index.html

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,38 +14,32 @@
1414
</script>
1515
</head>
1616
<body>
17+
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
18+
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
19+
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
1720

1821
<h1>8values</h1>
1922
<hr>
20-
<button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">Click here to start!</button>
23+
<button id="start" class="button translate" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
2124
<img src="values.svg" class="center"></img>
2225

23-
<h2>What is 8values?</h2>
24-
<p>8values is, in essence, a political quiz that attempts to assign percentages for eight different political values. 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 compared to the maximum possible for each value, thus giving you a percentage. Answer honestly!</p>
26+
<h2 id="faq_whatis" class="translate"></h2>
27+
<p id="faq_whatis_answer" class="translate"></p>
2528

26-
<h2>What are the eight values?</h2>
27-
<p>There are four independent axes - Economic, Diplomatic, State, and Society - and each has two opposing values assigned to them. They are:</p>
28-
<p class="value-description"><b style="color:#d32f2f;">Equality</b> (Economic)<br/>
29-
Those with higher Equality scores believe the economy should distribute value evenly among the populace. They tend to support progressive tax codes, social programs, and at high values, socialism.</p>
30-
<p class="value-description"><b style="color:#00796b;">Markets</b> (Economic)<br/>
31-
Those with higher Market scores believe the economy should be focused on rapid growth. They tend to support lower taxes, privatization, deregulation, and at high values, laissez-faire capitalism.</p>
32-
<p class="value-description"><b style="color:#f57c00;">Nation</b> (Diplomatic)<br/>
33-
Those with higher Nation scores are patriotic and nationalist. They often believe in an aggressive foreign policy, valuing the military, strength, sovereignty, and at high values, territorial expansion.</p>
34-
<p class="value-description"><b style="color:#0288d1;">Globe</b> (Diplomatic)<br/>
35-
Those with higher Globe scores are cosmopolitan and globalist. They often believe in a peaceful foreign policy, emphasizing diplomacy, cooperation, integration, and at high values, a world government.</p>
36-
<p class="value-description"><b style="color:#fbc02d;">Liberty</b> (State)<br/>
37-
Those with higher Liberty scores believe in strong civil liberties. They tend to support democracy and oppose state intervention in personal lives. Note that this refers to civil liberties, not economic liberties.</p>
38-
<p class="value-description"><b style="color:#303f9f;">Authority</b> (State)<br/>
39-
Those with higher Authority scores believe in strong state power. They tend to support state intervention in personal lives, government surveillance, and at high values, censorship or autocracy.</p>
40-
<p class="value-description"><b style="color:#689f38;">Tradition</b> (Society)<br/>
41-
Those with higher Tradition scores believe in traditional values and strict adherence to a moral code. Though not always, they are usually religious, and support the status quo or the status quo ante.</p>
42-
<p class="value-description"><b style="color:#7b1fa2;">Progress</b> (Society)<br/>
43-
Those with higher Progress scores believe in social change and rationality. Though not always, they are usually secular or atheist, and support environmental action and scientific or technological research.</p>
44-
<h2>What's the "Closest Match" mean at the bottom of the results?</h2>
45-
<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>
46-
<h2>I don't like my scores!</h2>
47-
<p>¯\_(ツ)_/¯<br/>
48-
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>
29+
<h2 id="faq_values" class="translate"></h2>
30+
<p id="faq_values_answer" class="translate"></p>
31+
<p id="equality" class="value-description translate"></p>
32+
<p id="wealth" class="value-description translate"></p>
33+
<p id="might" class="value-description translate"></p>
34+
<p id="peace" class="value-description translate"></p>
35+
<p id="liberty" class="value-description translate"></p>
36+
<p id="authority" class="value-description translate"></p>
37+
<p id="tradition" class="value-description translate"></p>
38+
<p id="progress" class="value-description translate"></p>
39+
<h2 id="faq_match" class="translate"></h2>
40+
<p id="faq_match_answer" class="translate"></p>
41+
<h2 id="faq_scores" class="translate"></h2>
42+
<p id="faq_scores_answer" class="translate"></p>
4943

5044
<!-- Website visit statistics - no personal information is collected! -->
5145
<script type="text/javascript">
@@ -63,4 +57,19 @@ <h2>I don't like my scores!</h2>
6357
class="statcounter"
6458
src="//c.statcounter.com/11325211/0/fd9f0659/1/" alt="web
6559
stats"></a></div></noscript>
60+
61+
<script type="text/javascript">
62+
window.i18next
63+
.use(window.i18nextBrowserLanguageDetector)
64+
.use(window.i18nextXHRBackend)
65+
.init({
66+
"fallbackLng": "en"
67+
}, ready)
68+
69+
function ready() {
70+
for (i of document.getElementsByClassName("translate")) {
71+
document.getElementById(i.id).innerHTML=i18next.t(i.id)
72+
}
73+
}
74+
</script>
6675
</body>

‎instructions.html

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,16 @@
1414
</script>
1515
</head>
1616
<body>
17+
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
18+
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
19+
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
1720

1821
<h1>8values</h1>
1922
<hr>
20-
<h2 style="text-align:center;">Instructions</h2>
21-
<p class="question">You will be presented with a series of statements. For each one, click the button with your opinion on it.</p>
22-
<button class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;">Got it!</button> <br>
23-
<button class="button" onclick="location.href='index.html';" style="background-color: #f44336;">Wait, nevermind!</button> <br>
23+
<h2 id="title" style="text-align:center;"></h2>
24+
<p id="description" class="question"></p>
25+
<button id="confirm" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
26+
<button id="cancel" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
2427

2528
<!-- Website visit statistics - no personal information is collected! -->
2629
<script type="text/javascript">
@@ -38,4 +41,21 @@ <h2 style="text-align:center;">Instructions</h2>
3841
class="statcounter"
3942
src="//c.statcounter.com/11325211/0/fd9f0659/1/" alt="web
4043
stats"></a></div></noscript>
44+
45+
<script type="text/javascript">
46+
window.i18next
47+
.use(window.i18nextBrowserLanguageDetector)
48+
.use(window.i18nextXHRBackend)
49+
.init({
50+
"fallbackLng": "en",
51+
"ns": [ "instructions" ]
52+
}, ready)
53+
54+
function ready() {
55+
ins = i18next.getFixedT(null, 'instructions')
56+
for (i of ["title", "description", "confirm", "cancel"]) {
57+
document.getElementById(i).innerHTML=ins(i)
58+
}
59+
}
60+
</script>
4161
</body>

‎locales/en/instructions.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "Instructions",
3+
"description": "You will be presented with a series of statements. For each one, click the button with your opinion on it.",
4+
"confirm": "Got it!",
5+
"cancel": "Wait, nevermind!"
6+
}

‎locales/en/translation.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"start": "Click here to start!",
3+
"faq_whatis": "What is 8values?",
4+
"faq_whatis_answer": "8values is, in essence, a political quiz that attempts to assign percentages for eight different political values. 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 compared to the maximum possible for each value, thus giving you a percentage. Answer honestly!",
5+
"faq_values": "What are the eight values?",
6+
"faq_values_answer": "There are four indendent axes - Economic, Diplomatic, State, and Society - and each has two opposing values assigned to them. They are:",
7+
"faq_match": "What's the &quot;Closest Match&quot; mean at the bottom of the results?",
8+
"faq_match_answer": "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!",
9+
"faq_scores": "I don't like my scores!",
10+
"faq_scores_answer": "¯\\_(ツ)_/¯<br/>If you have any suggestions or constructive criticism, feel free to send it to [email protected]",
11+
12+
"equality": "<b class=\"equality\">Equality</b> (Economic)<br/>Those with higher Equality scores believe the economy should distribute value evenly among the populace. They tend to support progressive tax codes, social programs, and at high values, socialism.",
13+
"wealth": "<b class=\"wealth\">Wealth</b> (Economic)<br/>Those with higher Wealth scores believe the economy should be focused on rapid growth. They tend to support lower taxes, privatization, deregulation, and at high values, laissez-faire capitalism.",
14+
"might": "<b class=\"might\">Might</b> (Diplomatic)<br/>Those with higher Might scores believe in an aggressive, or hawkish, foreign policy. They tend to support high military spending, nationalism, rivalry with other countries, and at high values, rapid military expansion.",
15+
"peace": "<b class=\"peace\">Peace</b> (Diplomatic)<br/>Those with higher Peace scores believe in an peaceful, or dovish, foreign policy. They tend to support low military spending, international aid, cooperation with other countries, and at high values, pacifism.",
16+
"liberty": "<b class=\"liberty\">Liberty</b> (State)<br/>Those with higher Liberty scores believe in strong civil liberties. They tend to support democracy and oppose state intervention in personal lives. Note that this refers to civil liberties, not economic liberties.",
17+
"authority": "<b class=\"authority\">Authority</b> (State)<br/>Those with higher Authority scores believe in strong state power. They tend to support state intervention in personal lives, government surveillance, and at high values, censorship or autocracy.",
18+
"tradition": "<b class=\"tradition\">Tradition</b> (Society)<br/>Those with higher Tradition scores believe in traditional values and strict adherence to a moral code. Though not always, they are usually religious, and support the status quo or the status quo ante.",
19+
"progress": "<b class=\"progress\">Progress</b> (Society)<br/>Those with higher Progress scores believe in social change and rationality. Though not always, they are usually secular or atheist, and support environmental action and scientific or technological research."
20+
}

‎locales/pt/instructions.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "Instruções",
3+
"description": "Uma série de afirmações será apresentada. Para cada uma, clique no botão correspondente à sua opinião.",
4+
"confirm": "Entendi!",
5+
"cancel": "Espera, deixa pra lá!"
6+
}

‎locales/pt/translation.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"start": "Clique aqui para iniciar!",
3+
"faq_whatis": "O que é o 8values?"
4+
}

‎style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,30 @@ div.tradition {
179179
text-align: left;
180180
border-right-style: solid;
181181
}
182+
b.equality {
183+
color:#d32f2f;
184+
}
185+
b.wealth {
186+
color:#00796b;
187+
}
188+
b.might {
189+
color:#f57c00;
190+
}
191+
b.peace {
192+
color:#0288d1;
193+
}
194+
b.liberty {
195+
color:#fbc02d;
196+
}
197+
b.authority {
198+
color:#303f9f;
199+
}
200+
b.tradition {
201+
color:#689f38;
202+
}
203+
b.progress {
204+
color:#7b1fa2;
205+
}
182206
span.weight-300 {
183207
font-weight: 300;
184208
}

0 commit comments

Comments
 (0)