Skip to content

Commit fea482d

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

File tree

7 files changed

+118
-30
lines changed

7 files changed

+118
-30
lines changed

‎index.html‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,45 @@
77
<meta charset="utf-8">
88
</head>
99
<body>
10+
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
11+
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
12+
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
1013

1114
<h1>8values</h1>
1215
<hr>
13-
<button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">Click here to start!</button>
16+
<button id="start" class="button translate" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
1417
<img src="values.svg" class="center"></img>
1518

16-
<h2>What is 8values?</h2>
17-
<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>
19+
<h2 id="faq_whatis" class="translate"></h2>
20+
<p id="faq_whatis_answer" class="translate"></p>
1821

19-
<h2>What are the eight values?</h2>
20-
<p>There are four indendent axes - Economic, Diplomatic, State, and Society - and each has two opposing values assigned to them. They are:</p>
21-
<p class="value-description"><b style="color:#d32f2f;">Equality</b> (Economic)<br/>
22-
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>
23-
<p class="value-description"><b style="color:#00796b;">Wealth</b> (Economic)<br/>
24-
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.</p>
25-
<p class="value-description"><b style="color:#f57c00;">Might</b> (Diplomatic)<br/>
26-
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.</p>
27-
<p class="value-description"><b style="color:#0288d1;">Peace</b> (Diplomatic)<br/>
28-
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.</p>
29-
<p class="value-description"><b style="color:#fbc02d;">Liberty</b> (State)<br/>
30-
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>
31-
<p class="value-description"><b style="color:#303f9f;">Authority</b> (State)<br/>
32-
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>
33-
<p class="value-description"><b style="color:#689f38;">Tradition</b> (Society)<br/>
34-
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>
35-
<p class="value-description"><b style="color:#7b1fa2;">Progress</b> (Society)<br/>
36-
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>
37-
<h2>What's the "Closest Match" mean at the bottom of the results?</h2>
38-
<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>
39-
<h2>I don't like my scores!</h2>
40-
<p>¯\_(ツ)_/¯<br/>
41-
If you have any suggestions or constructive criticism, feel free to send it to [email protected]</p>
22+
<h2 id="faq_values" class="translate"></h2>
23+
<p id="faq_values_answer" class="translate"></p>
24+
<p id="equality" class="value-description translate"></p>
25+
<p id="wealth" class="value-description translate"></p>
26+
<p id="might" class="value-description translate"></p>
27+
<p id="peace" class="value-description translate"></p>
28+
<p id="liberty" class="value-description translate"></p>
29+
<p id="authority" class="value-description translate"></p>
30+
<p id="tradition" class="value-description translate"></p>
31+
<p id="progress" class="value-description translate"></p>
32+
<h2 id="faq_match" class="translate"></h2>
33+
<p id="faq_match_answer" class="translate"></p>
34+
<h2 id="faq_scores" class="translate"></h2>
35+
<p id="faq_scores_answer" class="translate"></p>
4236

37+
<script type="text/javascript">
38+
window.i18next
39+
.use(window.i18nextBrowserLanguageDetector)
40+
.use(window.i18nextXHRBackend)
41+
.init({
42+
"fallbackLng": "en"
43+
}, ready)
44+
45+
function ready() {
46+
for (i of document.getElementsByClassName("translate")) {
47+
document.getElementById(i.id).innerHTML=i18next.t(i.id)
48+
}
49+
}
50+
</script>
4351
</body>

‎instructions.html‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,31 @@
77
<meta charset="utf-8">
88
</head>
99
<body>
10+
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
11+
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
12+
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
1013

1114
<h1>8values</h1>
1215
<hr>
13-
<h2 style="text-align:center;">Instructions</h2>
14-
<p class="question">You will be presented with a series of statements. For each one, click the button with your opinion on it.</p>
15-
<button class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;">Got it!</button> <br>
16-
<button class="button" onclick="location.href='index.html';" style="background-color: #f44336;">Wait, nevermind!</button> <br>
16+
<h2 id="title" style="text-align:center;"></h2>
17+
<p id="description" class="question"></p>
18+
<button id="confirm" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
19+
<button id="cancel" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
20+
21+
<script type="text/javascript">
22+
window.i18next
23+
.use(window.i18nextBrowserLanguageDetector)
24+
.use(window.i18nextXHRBackend)
25+
.init({
26+
"fallbackLng": "en",
27+
"ns": [ "instructions" ]
28+
}, ready)
29+
30+
function ready() {
31+
ins = i18next.getFixedT(null, 'instructions')
32+
for (i of ["title", "description", "confirm", "cancel"]) {
33+
document.getElementById(i).innerHTML=ins(i)
34+
}
35+
}
36+
</script>
1737
</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
@@ -156,6 +156,30 @@ div.tradition {
156156
text-align: left;
157157
border-right-style: solid;
158158
}
159+
b.equality {
160+
color:#d32f2f;
161+
}
162+
b.wealth {
163+
color:#00796b;
164+
}
165+
b.might {
166+
color:#f57c00;
167+
}
168+
b.peace {
169+
color:#0288d1;
170+
}
171+
b.liberty {
172+
color:#fbc02d;
173+
}
174+
b.authority {
175+
color:#303f9f;
176+
}
177+
b.tradition {
178+
color:#689f38;
179+
}
180+
b.progress {
181+
color:#7b1fa2;
182+
}
159183
span.weight-300 {
160184
font-weight: 300;
161185
}

0 commit comments

Comments
 (0)