-
Notifications
You must be signed in to change notification settings - Fork 0
/
quiz.js
109 lines (92 loc) · 2.74 KB
/
quiz.js
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
const initQuiz = () => {
const questionEl = document.getElementById("question");
const answerEl = document.getElementById("answer");
const prizeEl = document.getElementById("prize");
const letterKeys = document.querySelectorAll('input[type="button"]');
const modal = document.querySelector(".modal");
const prize = `<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3vJBYp02CRpQ5cP4Q3htVf?utm_source=generator&theme=0" width="100%" height="100%" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>`;
let questionObject;
let question;
let answer;
let attempt;
const attachEventListeners = () => {
letterKeys.forEach((letterKey) => {
letterKey.addEventListener("click", (e) => {
const letter = e.target.value;
if (answer.indexOf(letter) > -1) {
updateAnswer(letter);
e.target.classList.add("correct");
}
e.target.disabled = true;
});
});
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.classList.remove("active");
reset();
}
});
};
const setQuestion = () => {
questionObject = getQuestion();
question = questionObject.question;
answer = questionObject.answer.toLowerCase().split("");
attempt = Array(answer.length).fill(null);
questionEl.innerHTML = `${question}`;
answerEl.innerHTML = `${"_".repeat(attempt.length)}`;
};
const updateAnswer = (letter = null) => {
let attemptString = "";
answer.forEach((char, i) => {
if (char === letter) {
attempt[i] = letter;
}
});
attempt.forEach((char) => {
if (char) {
attemptString += char;
} else {
attemptString += "_";
}
});
answerEl.innerHTML = attemptString;
checkForWin();
};
const checkForWin = () => {
if (attempt.join("") == answer.join("")) {
prizeEl.innerHTML = prize;
modal.classList.add("active");
}
};
const reset = () => {
setQuestion();
letterKeys.forEach((key) => {
key.classList.remove("correct");
key.disabled = false;
});
};
const getQuestion = () => {
questions = [
{
question: "What is your name?",
answer: "Oliver"
},
{
question: "What kind of animal is Ben?",
answer: "dog"
},
{
question: "Where do you live?",
answer: "Radyr"
},
{
question: "What kind of animal is Manny?",
answer: "mammoth"
}
]
return questions[Math.floor(Math.random() * questions.length)];
}
attachEventListeners();
setQuestion();
};
initQuiz();