-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.js
116 lines (94 loc) · 3.47 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
116
const question = document.getElementById("question");
const choices= Array.from(document.getElementsByClassName("choice-text"));
//console.log(choices);
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 availalbeQuestions=[];
let questions = [];
// fetch question from questions.json
fetch(
'https://opentdb.com/api.php?amount=10&category=18&difficulty=hard&type=multiple'
)
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions.results.map((loadedQuestion) => {
const formattedQuestion = {
question: loadedQuestion.question,
};
const answerChoices = [...loadedQuestion.incorrect_answers];
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
answerChoices.splice( formattedQuestion.answer - 1,0,loadedQuestion.correct_answer );
answerChoices.forEach((choice, index) => {
formattedQuestion['choice' + (index + 1)] = choice;
});
return formattedQuestion;
});
startGame();
})
.catch((err) => {
console.error(err);
});
const CORRECT_BONUS= 1;
const MAX_QUESTIONS=10;
//start game
startGame= () =>{
questionCounter=0;
score=0;
availalbeQuestions=[...questions];
// console.log(availalbeQuestions);
getNewQuestion();
game.classList.remove('hidden');
loader.classList.add('hidden');
};
getNewQuestion = () =>{
if(availalbeQuestions.length ==0 || questionCounter >MAX_QUESTIONS){
localStorage.setItem('mostRecentScore',score);
return window.location.assign('/end.html');
}
questionCounter++;
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
//update progress bar
//progress bar increment
progressBarFull.style.width=`${(questionCounter/MAX_QUESTIONS)*100}%`;
const questionIndex = Math.floor(Math.random()*availalbeQuestions.length);
currentQuestion = availalbeQuestions[questionIndex];
question.innerText= currentQuestion.question;
choices.forEach(choice =>{
const number = choice.dataset['number'];
choice.innerText=currentQuestion['choice' + number]
});
availalbeQuestions.splice(questionIndex,1);
acceptingAnswers=true;
};
//cxalculate score
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';
// console.log(classToApply);
if(classToApply==='correct'){
incrementScore(CORRECT_BONUS);
}
selectedChoice.parentElement.classList.add(classToApply);
setTimeout( ()=>{
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
},3000);
});
});
incrementScore = num=>{
score+=num;
scoreText.innerText=score;
}