-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.js
115 lines (93 loc) · 3.13 KB
/
game.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
110
111
112
113
114
115
const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
const progressText = document.getElementById("progressText");
const scoreText = document.getElementById("score");
const progressBarFull = document.getElementById("progressBarFull");
const loader = document.getElementById("loader");
const game = document.getElementById("game");
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];
let questions = [];
fetch(
"https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple"
)
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
// console.log(loadedQuestions.results);
questions = loadedQuestions.results.map((loadedQuestion) => {
const formattedQuestion = {
question: loadedQuestion.question,
};
const answerChoices = [...loadedQuestion.incorrect_answers];
formattedQuestion.answer = Math.floor(Math.random() * 3 + 1);
answerChoices.splice(
formattedQuestion.answer - 1,
0,
loadedQuestion.correct_answer
);
answerChoices.forEach((choice, index) => {
formattedQuestion["choice" + (index + 1)] = choice;
});
return formattedQuestion;
});
startGame();
})
.catch((error) => {
console.error(error);
});
//Constants
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 10;
startGame = () => {
questionCounter = 0;
score = 0;
availableQuestions = [...questions];
getNewQuestion();
game.classList.remove("hidden");
loader.classList.add("hidden");
};
getNewQuestion = () => {
if (availableQuestions.length === 0 || questionCounter >= MAX_QUESTIONS) {
localStorage.setItem("mostRecentScore", score);
//go to the end page
return window.location.assign("/end.html");
}
questionCounter++;
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
//update the progress bar
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
const questionIndex = Math.floor(Math.random() * availableQuestions.length);
currentQuestion = availableQuestions[questionIndex];
question.innerText = currentQuestion.question;
choices.forEach((choice) => {
const number = choice.dataset["number"];
choice.innerText = currentQuestion["choice" + number];
});
availableQuestions.splice(questionIndex, 1);
acceptingAnswers = true;
};
choices.forEach((choice) => {
choice.addEventListener("click", (e) => {
if (!acceptingAnswers) return;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
const classToApply =
selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
classToApply === "correct" && incrementScore(CORRECT_BONUS);
selectedChoice.parentElement.classList.add(classToApply);
setTimeout(() => {
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
}, 1000);
});
});
incrementScore = (number) => {
score += number;
scoreText.innerText = score;
};