Skip to content

Commit 63d7363

Browse files
jamesqquickjamesqquick
committed
Updated random index of answer to be in all spots
1 parent 4b66bcd commit 63d7363

File tree

2 files changed

+163
-163
lines changed
  • 11. Fetch API Questions from Open Trivia API
  • Quiz App Master

2 files changed

+163
-163
lines changed

‎11. Fetch API Questions from Open Trivia API/game.js

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
const question = document.getElementById("question");
2-
const choices = Array.from(document.getElementsByClassName("choice-text"));
3-
const progressText = document.getElementById("progressText");
4-
const scoreText = document.getElementById("score");
5-
const progressBarFull = document.getElementById("progressBarFull");
1+
const question = document.getElementById('question');
2+
const choices = Array.from(document.getElementsByClassName('choice-text'));
3+
const progressText = document.getElementById('progressText');
4+
const scoreText = document.getElementById('score');
5+
const progressBarFull = document.getElementById('progressBarFull');
66
let currentQuestion = {};
77
let acceptingAnswers = false;
88
let score = 0;
@@ -12,98 +12,98 @@ let availableQuesions = [];
1212
let questions = [];
1313

1414
fetch(
15-
"https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple"
15+
'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
1616
)
17-
.then(res => {
18-
return res.json();
19-
})
20-
.then(loadedQuestions => {
21-
console.log(loadedQuestions.results);
22-
questions = loadedQuestions.results.map(loadedQuestion => {
23-
const formattedQuestion = {
24-
question: loadedQuestion.question
25-
};
26-
27-
const answerChoices = [...loadedQuestion.incorrect_answers];
28-
formattedQuestion.answer = Math.floor(Math.random() * 3) + 1;
29-
answerChoices.splice(
30-
formattedQuestion.answer - 1,
31-
0,
32-
loadedQuestion.correct_answer
33-
);
34-
35-
answerChoices.forEach((choice, index) => {
36-
formattedQuestion["choice" + (index + 1)] = choice;
37-
});
38-
39-
return formattedQuestion;
17+
.then((res) => {
18+
return res.json();
19+
})
20+
.then((loadedQuestions) => {
21+
console.log(loadedQuestions.results);
22+
questions = loadedQuestions.results.map((loadedQuestion) => {
23+
const formattedQuestion = {
24+
question: loadedQuestion.question,
25+
};
26+
27+
const answerChoices = [...loadedQuestion.incorrect_answers];
28+
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
29+
answerChoices.splice(
30+
formattedQuestion.answer - 1,
31+
0,
32+
loadedQuestion.correct_answer
33+
);
34+
35+
answerChoices.forEach((choice, index) => {
36+
formattedQuestion['choice' + (index + 1)] = choice;
37+
});
38+
39+
return formattedQuestion;
40+
});
41+
startGame();
42+
})
43+
.catch((err) => {
44+
console.error(err);
4045
});
41-
startGame();
42-
})
43-
.catch(err => {
44-
console.error(err);
45-
});
4646

4747
//CONSTANTS
4848
const CORRECT_BONUS = 10;
4949
const MAX_QUESTIONS = 3;
5050

5151
startGame = () => {
52-
questionCounter = 0;
53-
score = 0;
54-
availableQuesions = [...questions];
55-
getNewQuestion();
52+
questionCounter = 0;
53+
score = 0;
54+
availableQuesions = [...questions];
55+
getNewQuestion();
5656
};
5757

5858
getNewQuestion = () => {
59-
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
60-
localStorage.setItem("mostRecentScore", score);
61-
//go to the end page
62-
return window.location.assign("/end.html");
63-
}
64-
questionCounter++;
65-
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
66-
//Update the progress bar
67-
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
68-
69-
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
70-
currentQuestion = availableQuesions[questionIndex];
71-
question.innerText = currentQuestion.question;
72-
73-
choices.forEach(choice => {
74-
const number = choice.dataset["number"];
75-
choice.innerText = currentQuestion["choice" + number];
76-
});
77-
78-
availableQuesions.splice(questionIndex, 1);
79-
acceptingAnswers = true;
59+
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
60+
localStorage.setItem('mostRecentScore', score);
61+
//go to the end page
62+
return window.location.assign('/end.html');
63+
}
64+
questionCounter++;
65+
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
66+
//Update the progress bar
67+
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
68+
69+
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
70+
currentQuestion = availableQuesions[questionIndex];
71+
question.innerText = currentQuestion.question;
72+
73+
choices.forEach((choice) => {
74+
const number = choice.dataset['number'];
75+
choice.innerText = currentQuestion['choice' + number];
76+
});
77+
78+
availableQuesions.splice(questionIndex, 1);
79+
acceptingAnswers = true;
8080
};
8181

82-
choices.forEach(choice => {
83-
choice.addEventListener("click", e => {
84-
if (!acceptingAnswers) return;
82+
choices.forEach((choice) => {
83+
choice.addEventListener('click', (e) => {
84+
if (!acceptingAnswers) return;
8585

86-
acceptingAnswers = false;
87-
const selectedChoice = e.target;
88-
const selectedAnswer = selectedChoice.dataset["number"];
86+
acceptingAnswers = false;
87+
const selectedChoice = e.target;
88+
const selectedAnswer = selectedChoice.dataset['number'];
8989

90-
const classToApply =
91-
selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
90+
const classToApply =
91+
selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
9292

93-
if (classToApply === "correct") {
94-
incrementScore(CORRECT_BONUS);
95-
}
93+
if (classToApply === 'correct') {
94+
incrementScore(CORRECT_BONUS);
95+
}
9696

97-
selectedChoice.parentElement.classList.add(classToApply);
97+
selectedChoice.parentElement.classList.add(classToApply);
9898

99-
setTimeout(() => {
100-
selectedChoice.parentElement.classList.remove(classToApply);
101-
getNewQuestion();
102-
}, 1000);
103-
});
99+
setTimeout(() => {
100+
selectedChoice.parentElement.classList.remove(classToApply);
101+
getNewQuestion();
102+
}, 1000);
103+
});
104104
});
105105

106-
incrementScore = num => {
107-
score += num;
108-
scoreText.innerText = score;
106+
incrementScore = (num) => {
107+
score += num;
108+
scoreText.innerText = score;
109109
};

‎Quiz App Master/game.js

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
const question = document.getElementById("question");
2-
const choices = Array.from(document.getElementsByClassName("choice-text"));
3-
const progressText = document.getElementById("progressText");
4-
const scoreText = document.getElementById("score");
5-
const progressBarFull = document.getElementById("progressBarFull");
6-
const loader = document.getElementById("loader");
7-
const game = document.getElementById("game");
1+
const question = document.getElementById('question');
2+
const choices = Array.from(document.getElementsByClassName('choice-text'));
3+
const progressText = document.getElementById('progressText');
4+
const scoreText = document.getElementById('score');
5+
const progressBarFull = document.getElementById('progressBarFull');
6+
const loader = document.getElementById('loader');
7+
const game = document.getElementById('game');
88
let currentQuestion = {};
99
let acceptingAnswers = false;
1010
let score = 0;
@@ -14,101 +14,101 @@ let availableQuesions = [];
1414
let questions = [];
1515

1616
fetch(
17-
"https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple"
17+
'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
1818
)
19-
.then(res => {
20-
return res.json();
21-
})
22-
.then(loadedQuestions => {
23-
console.log(loadedQuestions.results);
24-
questions = loadedQuestions.results.map(loadedQuestion => {
25-
const formattedQuestion = {
26-
question: loadedQuestion.question
27-
};
28-
29-
const answerChoices = [...loadedQuestion.incorrect_answers];
30-
formattedQuestion.answer = Math.floor(Math.random() * 3) + 1;
31-
answerChoices.splice(
32-
formattedQuestion.answer - 1,
33-
0,
34-
loadedQuestion.correct_answer
35-
);
36-
37-
answerChoices.forEach((choice, index) => {
38-
formattedQuestion["choice" + (index + 1)] = choice;
39-
});
40-
41-
return formattedQuestion;
19+
.then((res) => {
20+
return res.json();
21+
})
22+
.then((loadedQuestions) => {
23+
questions = loadedQuestions.results.map((loadedQuestion) => {
24+
const formattedQuestion = {
25+
question: loadedQuestion.question,
26+
};
27+
28+
const answerChoices = [...loadedQuestion.incorrect_answers];
29+
console.log(answerChoices);
30+
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
31+
answerChoices.splice(
32+
formattedQuestion.answer - 1,
33+
0,
34+
loadedQuestion.correct_answer
35+
);
36+
37+
answerChoices.forEach((choice, index) => {
38+
formattedQuestion['choice' + (index + 1)] = choice;
39+
});
40+
41+
return formattedQuestion;
42+
});
43+
44+
startGame();
45+
})
46+
.catch((err) => {
47+
console.error(err);
4248
});
4349

44-
startGame();
45-
})
46-
.catch(err => {
47-
console.error(err);
48-
});
49-
5050
//CONSTANTS
5151
const CORRECT_BONUS = 10;
5252
const MAX_QUESTIONS = 3;
5353

5454
startGame = () => {
55-
questionCounter = 0;
56-
score = 0;
57-
availableQuesions = [...questions];
58-
getNewQuestion();
59-
game.classList.remove("hidden");
60-
loader.classList.add("hidden");
55+
questionCounter = 0;
56+
score = 0;
57+
availableQuesions = [...questions];
58+
getNewQuestion();
59+
game.classList.remove('hidden');
60+
loader.classList.add('hidden');
6161
};
6262

6363
getNewQuestion = () => {
64-
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
65-
localStorage.setItem("mostRecentScore", score);
66-
//go to the end page
67-
return window.location.assign("/end.html");
68-
}
69-
questionCounter++;
70-
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
71-
//Update the progress bar
72-
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
73-
74-
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
75-
currentQuestion = availableQuesions[questionIndex];
76-
question.innerHTML = currentQuestion.question;
77-
78-
choices.forEach(choice => {
79-
const number = choice.dataset["number"];
80-
choice.innerHTML = currentQuestion["choice" + number];
81-
});
82-
83-
availableQuesions.splice(questionIndex, 1);
84-
acceptingAnswers = true;
64+
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
65+
localStorage.setItem('mostRecentScore', score);
66+
//go to the end page
67+
return window.location.assign('/end.html');
68+
}
69+
questionCounter++;
70+
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
71+
//Update the progress bar
72+
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
73+
74+
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
75+
currentQuestion = availableQuesions[questionIndex];
76+
question.innerHTML = currentQuestion.question;
77+
78+
choices.forEach((choice) => {
79+
const number = choice.dataset['number'];
80+
choice.innerHTML = currentQuestion['choice' + number];
81+
});
82+
83+
availableQuesions.splice(questionIndex, 1);
84+
acceptingAnswers = true;
8585
};
8686

87-
choices.forEach(choice => {
88-
choice.addEventListener("click", e => {
89-
if (!acceptingAnswers) return;
87+
choices.forEach((choice) => {
88+
choice.addEventListener('click', (e) => {
89+
if (!acceptingAnswers) return;
9090

91-
acceptingAnswers = false;
92-
const selectedChoice = e.target;
93-
const selectedAnswer = selectedChoice.dataset["number"];
91+
acceptingAnswers = false;
92+
const selectedChoice = e.target;
93+
const selectedAnswer = selectedChoice.dataset['number'];
9494

95-
const classToApply =
96-
selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
95+
const classToApply =
96+
selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
9797

98-
if (classToApply === "correct") {
99-
incrementScore(CORRECT_BONUS);
100-
}
98+
if (classToApply === 'correct') {
99+
incrementScore(CORRECT_BONUS);
100+
}
101101

102-
selectedChoice.parentElement.classList.add(classToApply);
102+
selectedChoice.parentElement.classList.add(classToApply);
103103

104-
setTimeout(() => {
105-
selectedChoice.parentElement.classList.remove(classToApply);
106-
getNewQuestion();
107-
}, 1000);
108-
});
104+
setTimeout(() => {
105+
selectedChoice.parentElement.classList.remove(classToApply);
106+
getNewQuestion();
107+
}, 1000);
108+
});
109109
});
110110

111-
incrementScore = num => {
112-
score += num;
113-
scoreText.innerText = score;
111+
incrementScore = (num) => {
112+
score += num;
113+
scoreText.innerText = score;
114114
};

0 commit comments

Comments
 (0)