-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
263 lines (243 loc) · 11.1 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psychology Test</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.hidden {
display: none;
}
/* Penyesuaian untuk tombol "Next" */
input[type="button"] {
background-color: #007bff; /* Warna biru */
padding: 10px 20px; /* Ukuran padding yang serupa dengan tombol "Submit" */
border: none;
border-radius: 5px;
cursor: pointer;
color: white;
margin-top: 10px; /* Membuat sedikit jarak di atas tombol */
}
input[type="button"]:hover {
background-color: #0056b3; /* Warna biru yang lebih gelap pada hover */
}
/* Popup style */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f9f9f9;
padding: 20px;
border: 2px solid #ccc;
border-radius: 5px;
z-index: 9999;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
/* Gaya untuk tombol */
.popup-button {
background-color: #ff0000; /* Warna biru */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px; /* Menambahkan sedikit jarak dari atas */
}
.popup-button:hover {
background-color: #e46e94; /* Warna biru yang lebih gelap saat dihover */
}
<style>
footer {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
footer p {
margin: 5px 0;
}
</style>
</style>
</head>
<body>
<div class="container">
<h2>Psychology Test</h2>
<button class="popup-button" onclick="openPopup()">Klik di sini untuk membaca pesan penting sebelum mengisi formulir</button>
<div id="popup" class="popup">
<span class="close" onclick="closePopup()">Close</span>
<p>Sebelum Anda mengisi formulir, silakan baca pesan berikut:</p>
<p>Formulir ini merupakan tes psikologi yang dapat mengungkap siapa sebenarnya yang Anda cintai.</p>
<p>Tes ini telah ditemukan oleh peneliti kejiwaan di Jepang pada tahun 1990.</p>
<p>Tes ini memiliki tingkat keakuratan hingga mencapai 100%, bergantung pada seberapa jujur Anda dalam menjawab 7 pertanyaan yang diajukan.</p>
<p>Aturan dalam tes psikologi ini sangat sederhana. Jawablah pertanyaan berdasarkan apa yang terlintas di benak Anda pertama kali, tanpa banyak berpikir. Namun, pastikan Anda menjawab dengan jujur.</p>
<p>Ingat, jawablah pertanyaan berdasarkan apa yang terlintas di benak Anda pertama kali.</p>
</div>
<div id="overlay" class="overlay"></div>
<form id="psychologyForm">
<div id="step1">
<h4><span>Pertanyaan :</span>Isi form dibawah ini masing-masing sebuah angka yang kamu suka</h4>
<label for="answer1">1. Masukkan angka (1-11):</label>
<input type="text" id="answer1" name="answer1" pattern="[1-9]|10|11" required>
<label for="luckyNumber">2. Masukkan angka (1-11):</label>
<input type="text" id="luckyNumber" name="luckyNumber" pattern="[1-9]|10|11" required>
<input type="button" onclick="nextStep(1)" value="Next">
</div>
<div id="step2" class="hidden">
<h4> <span>Pertanyaan :</span>Tuliskan masing masing satu lawan jenis kamu yang kamu kenal,yang bukan merupakan anggota kamu</h4>
<label for="beloved">3. Masukkan nama:</label>
<input type="text" id="beloved" name="beloved" required>
<label for="conflict">7. Masukkan nama:</label>
<input type="text" id="conflict" name="conflict" required>
<input type="button" onclick="nextStep(2)" value="Next">
</div>
<div id="step3" class="hidden">
<h4><span>Pertanyaan :</span>Tulisakan masing masing satu nama orang yang saling kenal dengan kamu. Boleh siapa saja entah itu keluarga,teman kerja atau siapapun yang pernah anda temui.</h4>
<label for="understand">4. Masukkan nama :</label>
<input type="text" id="understand" name="understand" required>
<label for="relyOn">5. Masukkan nama:</label>
<input type="text" id="relyOn" name="relyOn" required>
<label for="trustworthy">6. Masukkan nama :</label>
<input type="text" id="trustworthy" name="trustworthy" required>
<input type="button" onclick="nextStep(3)" value="Next">
</div>
<div id="step4" class="hidden">
<h4><span>Pertanyaan:</span> Tuliskan masing masing satu judul lagu yang kamu suka. lagu apapun entah lagu lokal maupun lagu manca negara.</h4>
<label for="songTo7">8. Masukkan judul lagu:</label>
<input type="text" id="songTo7" name="songTo7" required>
<label for="songTo3">9. Masukkan judul lagu:</label>
<input type="text" id="songTo3" name="songTo3" required>
<input type="button" onclick="nextStep(4)" value="Next">
</div>
<div id="step5" class="hidden">
<h4><span>Pertanyaan :</span> tuliskan masing-masing satu judul lagu yang kamu hapal liriknya dengan baik.</h4>
<label for="currentSituationSong">10. Masukkan judul lagu :</label>
<input type="text" id="currentSituationSong" name="currentSituationSong" required>
<label for="hopeSong">11. Masukkan judul lagu:</label>
<input type="text" id="hopeSong" name="hopeSong" required>
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="results" class="container"></div>
<script>
let currentStep = 1;
function nextStep(step) {
if (step === currentStep) {
if (!validateStep(step)) {
return; // Jika validasi gagal, tidak lanjut ke langkah berikutnya
}
document.getElementById("step" + currentStep).classList.add("hidden");
currentStep++;
document.getElementById("step" + currentStep).classList.remove("hidden");
}
}
function validateStep(step) {
let inputs = document.querySelectorAll("#step" + step + " input");
for (let i = 0; i < inputs.length; i++) {
if (!inputs[i].checkValidity()) {
alert("Mohon isi semua bidang dengan benar.");
return false;
}
}
return true;
}
let resultsData = {};
document.getElementById("psychologyForm").onsubmit = function(event) {
event.preventDefault();
let formData = new FormData(this);
formData.forEach((value, key) => {
resultsData[key] = value;
});
displayResults(); // Menampilkan hasil tes
};
function displayResults() {
let resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = "<h3>Hasil Test:</h3>";
resultsDiv.innerHTML += "<p>Angka di nomor urut 1 adalah: " + resultsData.answer1 + " ( Dan angka ini yang kamu pilih secara Acak)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Angka di nomor urut 2 adalah: " + resultsData.luckyNumber + " ( Dan angka ini yang kamu anggap merupakan angka keberuntungan kamu.)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Orang di nomor urut 3 adalah: " + resultsData.beloved + " ( Dan orang ini yang kamu cintai.)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Orang di nomor urut 7 adalah: " + resultsData.conflict + " ( Dan orang yang kamu suka namun terdapat konflik [contoh: bertepuk sebelah tangan, dsb])</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Orang di nomor urut 4 adalah: " + resultsData.understand + " ( Dan orang ini yang kamu anggap paling mengerti kamu)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Orang di nomor urut 5 adalah: " + resultsData.relyOn + " ( Dan orang ini yang sering kamu andalkan)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Orang di nomor urut 6 adalah: " + resultsData.trustworthy + " ( Dan orang yang kamu anggap bisa di percaya)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Lagu di nomor urut 8 adalah: " + resultsData.songTo7 + " ( Dan lagu ini yang kamu tunjukan ke orang nomor 7)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Lagu di nomor urut 9 adalah: " + resultsData.songTo3 + " ( Dan lagu ini yang kamu tunjukkan ke orang nomor 3)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Lagu di nomor urut 10 adalah: " + resultsData.currentSituationSong + " ( Dan lagu ini yang menggambarkan situasi kamu saat ini.)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<p>Lagu di nomor urut 11 adalah: " + resultsData.hopeSong + " ( Dan lagu ini yang menggambarkan harapan kamu)</p>";
resultsDiv.innerHTML += "<hr>";
resultsDiv.innerHTML += "<h4>Jangan Lupa kasih Hasil tes ini Ke orang nomor 7</h4>";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("overlay").style.display = "block"; // Tampilkan overlay saat membuka popup
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("overlay").style.display = "none";
document.getElementById("step" + currentStep).classList.remove("hidden"); // Menampilkan langkah berikutnya setelah menutup popup
}
</script>
<footer style="background-color: #f0f0f0; padding: 20px; text-align: center;">
<p>Copyright © 2024 Himang. All rights reserved.</p>
<p>Website by <a href="https://www.himang.my.id/">Himang</a></p>
</footer>
</body>
</html>