-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
84 lines (73 loc) · 6.84 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<head>
<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>8nilai</title>
<link rel="icon" type="x-icon" href="icon.png">
<link rel="shortcut icon" type="x-icon" href="icon.png">
<meta charset="utf-8">
</head>
<body>
<a href="https://github.com/8values/8values.github.io" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<h1>8nilai</h1>
<hr>
<button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">Klik disini untuk mulai!</button>
<img src="values.svg" class="center"></img>
<h2 class="faq">⬇ FAQ ⬇</h2>
<h2>Apa itu 8nilai?</h2>
<p>8nilai adalah kuis politik yang menempatkan delapan nilai politik yang berbeda. Kamu akan disajikan sebuah pernyataan dan kemudian kamu akan menjawab tentang pendapatmu terhadap pernyataan tersebut, mulai dari <b>Sangat Setuju</b> sampai <b>Sangat Tidak Setuju</b>, dimana setiap jawaban akan mempengaruhi sedikit nilai skor mu. Di akhir kuis ini jawabanmu akan dibandingkan dengan kemungkinan terbanyak dari setiap nilai skor dalam bentuk persentase. Dimohon untuk menjawab dengan jujur!<br /><br />
Terdapat total <b><u><span id="numOfQuestions"></span></u></b> pertanyaan di dalam kuis ini.</p>
<h2>Apa saja ke 8 nilai tersebut?</h2>
<p>Terdapat empat sumbu independen - Economic, Diplomatic, Civil dan Societal - dan masing-masing nya memiliki dua nilai yang berlawanan. Yaitu:</p>
<p class="value-description"><b style="color:#d32f2f;">Equality</b> (Economic)<br/>
Seseorang yang memiliki skor Equality lebih tinggi percaya bahwa ekonomi harus di distribusikan secara merata ke semua populasi. Mereka cenderung mendukung pengenaan pajak progresif, program sosial. Pada nilai tertingginya yaitu sosialisme.</p>
<p class="value-description"><b style="color:#00796b;">Markets</b> (Economic)<br/>
Seseorang yang memiliki skor Markets lebih tinggi percaya bahwa ekonomi harus berfokus pada pertumbuhan yang pesat. Mereka cenderung mendukung pajak rendah, privatisasi, deregulasi. Pada nilai tertingginya yaitu laissez-faire kapitalisme.</p>
<p class="value-description"><b style="color:#f57c00;">Nation</b> (Diplomatic)<br/>
Seseorang yang memiliki skor Nation lebih tinggi adalah seorang patriotik dan nasionalis. Mereka seringkali percaya bahwa kebijakan luar negeri yang agresif, militerisme, kekuatan, kedaulatan. Pada nilai tertingginya yaitu ekspansi teritorial.</p>
<p class="value-description"><b style="color:#0288d1;">World</b> (Diplomatic)<br/>
Seseorang yang memiliki skor World lebih tinggi adalah seorang kosmopolitan dan globalis. Mereka seringkali percaya pada kebijakan luar negeri yang damai, menekankan diplomasi, kerja sama. Pada nilai tertingginya yaitu suatu pemerintahan dunia.</p>
<p class="value-description"><b style="color:#fbc02d;">Liberty</b> (State)<br/>
Seseorang yang memiliki skor Liberty lebih tinggi percaya pada kebebasan sipil yang kuat. Mereka cenderung mendukung demokrasi dan menolak campur tangan pemerintah pada kehidupan sehari-hari. <i>Catatan bahwa ini mengacu pada kebebasan sipil, bukan kebebasan ekonomi.</i> </p>
<p class="value-description"><b style="color:#303f9f;">Authority</b> (State)<br/>
Seseorang yang memiliki skor Authority lebih tinggi percaya pada kekuatan pemerintah yang kuat. Mereka cenderung mendukung campur tangan pemerintah pada kehidupan sehari-hari dan pengawasan dari pemerintah. Pada nilai tertingginya yaitu otokrasi.</p>
<p class="value-description"><b style="color:#689f38;">Tradition</b> (Society)<br/>
Seseorang yang memiliki skor Tradition lebih tinggi percaya bahwa nilai tradisi dan ketaatan pada moral. Meskipun tidak selalu, mereka biasanya religius dan mendukung status quo.</p>
<p class="value-description"><b style="color:#7b1fa2;">Progress</b> (Society)<br/>
Seseorang yang memiliki skor Progress lebih tinggi percaya pada perubahan sosial dan rationalitas. Meskipun tidak selalu, mereka biasanya sekuler, mendukung kepedulian lingkungan dan penelitian bidang sains atau teknologi.</p>
<h2>Apa maksud dari "Closest Match" di bagian bawah dari hasil skor? </h2>
<p>Sebagai tambahan kecocokanmu dengan delapan nilai, kuis ini juga mencoba untuk menemukan kecocokanmu dengan ideologi politik. Untuk bagian ini masih dalam pengembangan dan belum terlalu akurat dibanding 8 nilai sebelumnya, jadi jangan terlalu dianggap serius ya. Terima kasih!</p>
<h2>Catatan</h2>
<p>Website ini dibuat sangat terinspirasi oleh website ini: <a href="https://8values.github.io/">8values.github.io</a>, dimohon untuk mengunjungi website tersebut untuk versi original nya.</p>
<footer>Re-design by <a href="https://github.com/nomadkode">nomadkode</a></footer>
<script type="application/javascript"src="questions.js"></script>
<!--* GSAP Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
document.getElementById("numOfQuestions").innerHTML = questions.length;
// GSAP Script
gsap.from('h1, .github-corner', {
duration: 1.5,
delay: 0.5,
y: -200,
opacity: 0,
});
gsap.from('button', {
duration: 1.5,
delay: 1,
x: -200,
opacity: 0,
});
gsap.from('img', {
duration: 1.5,
delay: 1.5,
x: 200,
opacity: 0,
});
gsap.from('h2, p', {
duration: 1.5,
delay: 2,
y: 200,
opacity: 0,
});
</script>
</body>