-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
289 lines (254 loc) · 10.8 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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
font-family: sans-serif;
font-weight: bold;
text-align: center;
font-size: 2em;
}
.unselectable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button {
padding: 1em;
background-color: cornflowerblue;
color: white;
display: inline-block;
border-radius: 1em;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.button:hover {
cursor: pointer;
}
.button:active {
box-shadow: rgba(0, 0, 0, 0.39) 0px 3px 8px;
}
#question-holder {
margin-top: 1em;
margin-bottom: 3em;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
/* letter-spacing: 0.04em; */
}
#count {
margin-top: 1em;
font-weight: normal;
font-size: x-small;
color: rgb(160, 87, 65);
}
#questions {
font-size: medium;
text-align: left;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 1em;
border: 1px solid #888;
width: 90%;
font-size: medium;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<body>
<ol id="questions" hidden>
<li>Dacă ai putea locui oriunde în lume, unde ai vrea să locuiești?</li>
<li>Care e cartea ta preferată?</li>
<li>Ce te amuză aproape oricând?</li>
<li>Care e ultima carte pe care ai citit-o?</li>
<li>Care e sportul tău preferat?</li>
<li>Ce preferi: spălatul vaselor sau datul cu aspiratorul?</li>
<li>Care e autorul tău preferat?</li>
<li>Îți plac surprizele? De ce (nu)?</li>
<li>Descrie unul dintre hobby-urile tale.</li>
<li>Ce acțiuni ale celorlalți te irită?</li>
<li>Care e cea mai înaltă clădire în care ai urcat?</li>
<li>Care e ultimul articol de îmbrăcăminte pe care l-ai cumpărat?</li>
<li>La ce oră te trezești în timpul săptămânii?</li>
<li>Câte limbi vorbești?</li>
<li>Ce îți place să ronțăi?</li>
<li>Care e cel mai bun fel de mâncare pe care știi să îl gătești?</li>
<li>Ce faci când vezi un păianjen?</li>
<li>Care e cea mai lungă călătorie în care ai fost?</li>
<li>Dacă ai putea face cunoștință cu orice personalitate din istorie, pe cine ai alege?</li>
<li>Când erai mic/ă, ce voiai să devii când o să fii mare?</li>
<li>McDonald's, KFC sau Burger King? Sau altceva...</li>
<li>Dacă ar trebui să îți schimbi numele, ce nume ai alege?</li>
<li>Dacă ai putea primi răspuns la orice întrebare, ce ai întreba?</li>
<li>Care e locul tău preferat din localitatea ta?</li>
<li>Cât de des asculți muzică, și cum?</li>
<li>Ce abilitate ți-ar plăcea să ai?</li>
<li>Care e anotimpul tău preferat?</li>
<li>Dacă ai o zi liberă, cum o petreci?</li>
<li>Dacă ai putea călători în spațiu, ai vrea?</li>
<li>Dacă ai putea învăța instantaneu o limbă străină, ce limbă ai alege?</li>
<li>Care e o realizare cu care te mândrești?</li>
<li>Ai frați/surori? Dacă nu, ți-ai dori?</li>
<li>Dacă ar trebui să ai o anumită vârstă pentru tot restul vieții, ce vârstă ai alege?</li>
<li>Vara, preferi să mergi la munte sau la mare?</li>
<li>Când ai interacționat ultima oară cu o persoană străină?</li>
<li>Care e un lucru pe care l-ai învățat recent?</li>
<li>Ce carte ai primit anul trecut în tabără? Ai citit-o?</li>
<li>Care a fost materia ta preferată, în școală/liceu?</li>
<li>Care a fost cel mai drăguț cadou pe care l-ai primit?</li>
<li>Cu ce mijloc de transport te deplasezi cel mai des?</li>
<li>În ce parte a sălii stai cel mai des, la adunare?</li>
<li>Cum te înțelegi cu verișorii tăi?</li>
<li>Ai o cântare preferată?</li>
<li>Pe cine admiri foarte mult?</li>
<li>Ai donat vreodată sânge?</li>
<li>Îți place să primești ajutor, când nu reușești ceva?</li>
<li>Câte tricouri ai luat cu tine, pentru tabăra asta?</li>
<li>Cât de des îți încarci telefonul?</li>
<li>Știi să conduci? Dacă da, de cât timp? Dacă nu, plănuiești să înveți?</li>
<li>Ai talent la desen?</li>
<li>La ce oră iei, de obicei, prânzul?</li>
<li>Unde erai, anul trecut, în perioada asta?</li>
<li>La ce ți se pare că te pricepi foarte bine?</li>
<li>Care e un loc reprezentativ pentru copilăria ta?</li>
<li>Îți place să vorbești la telefon?</li>
<li>Dacă ar trebui să elimini un lucru din programul tău zilnic, ce ai elimina?</li>
<li>Dacă ai putea schimba un lucru despre tine, ce ai schimba?</li>
<li>Care e cel mai neobișnuit lucru pe care l-ai mâncat vreodată?</li>
<li>Te consideri o persoană introvertită?</li>
<li>Ce hobby ți-ar plăcea să începi, dacă timpul/banii nu ar fi o problemă?</li>
<li>Îți place să te plimbi? Singur sau în grup?</li>
<li>Ai un program zilnic?</li>
<li>Ești matinal sau nocturn?</li>
<li>Preferi dulce sau sărat?</li>
<li>Ai o floare preferată?</li>
<li>Ai o culoare preferată?</li>
<li>Care e versetul tău preferat?</li>
<li>Care este personajul tău biblic preferat, în afară de Isus?</li>
<li>Care carte din Biblie îți place cel mai mult?</li>
<li>La ce eveniment istoric ți-ar fi plăcut să participi?</li>
<li>Ai un animal preferat? De ce?</li>
<li>Reziști mai bine la frig sau la căldură?</li>
<li>Ce miros neobișnuit îți place?</li>
<li>Dacă ai putea alege, ai prefera să locuiești la țară sau la oraș?</li>
<li>Dacă ai avea de ales între a citi gândurile oamenilor și a deveni invizibil/ă, ce ai alege?</li>
<li>Cu ce personaj fictiv ți se pare că te asemeni?</li>
<li>Ce combinație (neobișnuită) de mâncare îți place să faci?</li>
<li>Ce melodie ai ascultat foarte mult în ultimul an?</li>
<li>Care este un lucru pe care ți l-ai propus să îl faci și nu ai reușit/apucat?</li>
<li>Poți să dai un exemplu de o rugăciune ascultată pe care ai făcut-o?</li>
<li>Care este un loc frumos în care ai fost pe care l-ai recomanda și altora să îl viziteze?</li>
<li>Care este un lucru la care te pricepi mai bine decât majoritatea oamenilor?</li>
<li>Dacă ar trebui să fii profesor la o materie din liceu, la ce ai alege să fii?</li>
<li>Laptele peste cereale sau cerealele peste lapte?</li>
<li>Poți să dai exemplu de un film care ți-a plăcut și să zici de ce?</li>
</ol>
<div id="count" class="unselectable" onclick="toggleQuestions()">
Întrebări rămase: <span id="questions-left-count"></span>
</div>
<div id="question-holder">
<span id="question">Hello! Apasă butonul ca să primești o întrebare 😊</span>
</div>
<div class="button unselectable" id="next-question" onclick="nextQuestion()">
Altă întrebare!
</div>
<div id="modal-root" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p>Parola, s'il vous plait!</p>
<input id="password" type="password" placeholder="12345678">
<div id="submit-passowrd" class="button unselectable" onclick="checkPassword()">Confirm</div>
</div>
</div>
</body>
<script>
function hideElement(elementId) {
document.getElementById(elementId).style.display = "none"
}
function showElement(elementId) {
document.getElementById(elementId).style.display = "block"
}
const SOURCE_LIST_ID = "questions";
const QUESTION_ID = "question";
const NEXT_QUESTION_ID = "next-question";
const COUNT_ID = "count";
const QUESTIONS_LEFT_COUNT_ID = "questions-left-count";
const MODAL_ID = "modal-root";
const PASSWORD_ID = "password";
const CORRECT_PASSWORD = "alabalaportocala"
var questionsAreVisible = false;
var questionElements = document.getElementById(SOURCE_LIST_ID).children;
const allQuestions = Array.from(questionElements).map(questionElement => questionElement.textContent);
var remainingQuestions = Array.from(allQuestions);
function setQuestionCount() {
var questionCount = remainingQuestions.length;
document.getElementById(QUESTIONS_LEFT_COUNT_ID).textContent = questionCount;
}
setQuestionCount();
function resetQuestions() {
remainingQuestions = Array.from(allQuestions);
}
function nextQuestion() {
var randomIndex = Math.floor(Math.random() * remainingQuestions.length);
var randomQuestion = remainingQuestions[randomIndex];
remainingQuestions.splice(randomIndex, 1);
document.getElementById(QUESTION_ID).textContent = randomQuestion;
if (remainingQuestions.length == 0)
resetQuestions();
setQuestionCount();
}
function toggleQuestions() {
if (questionsAreVisible) {
hideElement(SOURCE_LIST_ID);
questionsAreVisible = false;
return;
}
showElement(MODAL_ID);
}
function checkPassword() {
var inputPassword = document.getElementById(PASSWORD_ID).value;
if (inputPassword != CORRECT_PASSWORD) {
alert("hah, nu-i asta!");
return;
}
hideElement(MODAL_ID);
showQuestions();
}
function showQuestions() {
showElement(SOURCE_LIST_ID);
questionsAreVisible = true;
}
function closeModal() {
hideElement(MODAL_ID);
}
</script>
</html>