Skip to content

Commit 08d3c1e

Browse files
JasperBollerJasperBoller
committed
Update made
Added new Changes
1 parent ef07bc7 commit 08d3c1e

File tree

4 files changed

+140
-23
lines changed

4 files changed

+140
-23
lines changed

‎Quiz App Master/app.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,50 @@ input {
125125
input::placeholder {
126126
color: #aaa;
127127
}
128+
.end-container {
129+
text-align: center;
130+
padding: 2rem;
131+
max-width: 600px;
132+
margin: 0 auto;
133+
}
134+
135+
.score-container {
136+
background: #f8f9fa;
137+
border-radius: 10px;
138+
padding: 2rem;
139+
margin: 2rem 0;
140+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
141+
}
142+
143+
.score-text {
144+
font-size: 1.5rem;
145+
font-weight: bold;
146+
margin-bottom: 1rem;
147+
}
148+
149+
.correct-answers, .percentage {
150+
font-size: 1.2rem;
151+
margin: 0.5rem 0;
152+
}
153+
154+
#feedbackMessage {
155+
font-size: 1.3rem;
156+
margin-top: 1.5rem;
157+
color: #2c3e50;
158+
font-weight: bold;
159+
}
160+
161+
button {
162+
background: #3498db;
163+
color: white;
164+
border: none;
165+
padding: 0.8rem 1.5rem;
166+
font-size: 1.1rem;
167+
border-radius: 5px;
168+
cursor: pointer;
169+
transition: background 0.3s;
170+
}
171+
172+
button:hover {
173+
background: #2980b9;
174+
}

‎Quiz App Master/game.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@
5959
#progressBarFull {
6060
height: 3.4rem;
6161
background-color: #56a5eb;
62-
width: 0%;
62+
#timer {
63+
font-size: 3.5rem;
64+
color: #56a5eb;
6365
}
64-
6566
/* LOADER */
6667
#loader {
6768
border: 1.6rem solid white;
@@ -79,4 +80,20 @@
7980
100% {
8081
transform: rotate(360deg);
8182
}
83+
#category-selection {
84+
text-align: center;
85+
}
86+
#category-select {
87+
width: 30rem;
88+
margin-bottom: 2rem;
89+
padding: 1.5rem;
90+
font-size: 1.8rem;
91+
border: 0.1rem solid #56a5eb;
92+
background-color: white;
93+
cursor: pointer;
94+
}
95+
#category-select:hover {
96+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
97+
transform: translateY(-0.1rem);
98+
transition: transform 150ms;
8299
}

‎Quiz App Master/game.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,17 @@
1010
</head>
1111
<body>
1212
<div class="container">
13-
<div id="loader"></div>
13+
<div id="category-selection" class="flex-center flex-column">
14+
<h2>Select Category</h2>
15+
<select id="category-select" class="btn">
16+
<option value="9">General Knowledge</option>
17+
<option value="17">Science & Nature</option>
18+
<option value="21">Sports</option>
19+
<option value="23">History</option>
20+
<option value="24">Politics</option>
21+
</select>
22+
<button id="start-game" class="btn">Start Quiz</button>
23+
</div>
1424
<div id="game" class="justify-center flex-column hidden">
1525
<div id="hud">
1626
<div id="hud-item">
@@ -29,6 +39,9 @@ <h1 class="hud-main-text" id="score">
2939
0
3040
</h1>
3141
</div>
42+
<div id="hud-item">
43+
<p class="hud-prefix">Time</p>
44+
<h1 class="hud-main-text" id="timer">15</h1>
3245
</div>
3346
<h2 id="question"></h2>
3447
<div class="choice-container">

‎Quiz App Master/game.js

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ const scoreText = document.getElementById('score');
55
const progressBarFull = document.getElementById('progressBarFull');
66
const loader = document.getElementById('loader');
77
const game = document.getElementById('game');
8+
const categorySelect = document.getElementById('category-select');
9+
const startGameBtn = document.getElementById('start-game');
10+
const categorySelection = document.getElementById('category-selection');
811
let currentQuestion = {};
912
let acceptingAnswers = false;
1013
let score = 0;
1114
let questionCounter = 0;
1215
let availableQuesions = [];
13-
1416
let questions = [];
15-
16-
fetch(
17-
'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
18-
)
17+
const TIMER_SECONDS = 15;
18+
let timeLeft = null;
19+
let timer = null;
20+
1921
.then((res) => {
2022
return res.json();
2123
})
@@ -24,19 +26,16 @@ fetch(
2426
const formattedQuestion = {
2527
question: loadedQuestion.question,
2628
};
27-
2829
const answerChoices = [...loadedQuestion.incorrect_answers];
2930
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
3031
answerChoices.splice(
3132
formattedQuestion.answer - 1,
3233
0,
3334
loadedQuestion.correct_answer
3435
);
35-
3636
answerChoices.forEach((choice, index) => {
3737
formattedQuestion['choice' + (index + 1)] = choice;
3838
});
39-
4039
return formattedQuestion;
4140
});
4241

@@ -47,53 +46,94 @@ fetch(
4746
});
4847

4948
//CONSTANTS
50-
const CORRECT_BONUS = 10;
51-
const MAX_QUESTIONS = 3;
52-
5349
startGame = () => {
5450
questionCounter = 0;
5551
score = 0;
5652
availableQuesions = [...questions];
5753
getNewQuestion();
54+
categorySelection.classList.add('hidden');
5855
game.classList.remove('hidden');
5956
loader.classList.add('hidden');
6057
};
58+
// Add event listener for category selection
59+
startGameBtn.addEventListener('click', () => {
60+
const selectedCategory = categorySelect.value;
61+
loader.classList.remove('hidden');
62+
categorySelection.classList.add('hidden');
63+
64+
fetchQuestions(selectedCategory)
65+
.then((res) => res.json())
66+
.then((loadedQuestions) => {
67+
questions = loadedQuestions.results.map((loadedQuestion) => {
68+
const formattedQuestion = {
69+
question: loadedQuestion.question,
70+
};
71+
const answerChoices = [...loadedQuestion.incorrect_answers];
72+
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
73+
answerChoices.splice(
74+
formattedQuestion.answer - 1,
75+
0,
76+
loadedQuestion.correct_answer
77+
);
78+
answerChoices.forEach((choice, index) => {
79+
formattedQuestion['choice' + (index + 1)] = choice;
80+
});
81+
return formattedQuestion;
82+
});
83+
startGame();
84+
})
85+
.catch((err) => {
86+
console.error(err);
87+
});
88+
});
89+
loader.classList.add('hidden');
90+
6191

6292
getNewQuestion = () => {
6393
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
6494
localStorage.setItem('mostRecentScore', score);
65-
//go to the end page
6695
return window.location.assign('/end.html');
6796
}
97+
// Clear existing timer if any
98+
if (timer) {
99+
clearInterval(timer);
100+
}
68101
questionCounter++;
69102
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
70-
//Update the progress bar
71103
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
72-
73104
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
74105
currentQuestion = availableQuesions[questionIndex];
75106
question.innerHTML = currentQuestion.question;
76-
77-
choices.forEach((choice) => {
107+
choices.forEach(choice => {
78108
const number = choice.dataset['number'];
79109
choice.innerHTML = currentQuestion['choice' + number];
80110
});
81-
82111
availableQuesions.splice(questionIndex, 1);
83112
acceptingAnswers = true;
113+
// Start timer
114+
timeLeft = TIMER_SECONDS;
115+
document.getElementById('timer').textContent = timeLeft;
116+
timer = setInterval(() => {
117+
timeLeft--;
118+
document.getElementById('timer').textContent = timeLeft;
119+
if (timeLeft <= 0) {
120+
clearInterval(timer);
121+
getNewQuestion(); // Move to next question when time runs out
122+
}
123+
}, 1000);
84124
};
85-
125+
choices.forEach((choice) => {
86126
choices.forEach((choice) => {
87127
choice.addEventListener('click', (e) => {
88128
if (!acceptingAnswers) return;
129+
// Clear the timer
130+
clearInterval(timer);
89131

90132
acceptingAnswers = false;
91133
const selectedChoice = e.target;
92134
const selectedAnswer = selectedChoice.dataset['number'];
93-
94135
const classToApply =
95136
selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
96-
97137
if (classToApply === 'correct') {
98138
incrementScore(CORRECT_BONUS);
99139
}

0 commit comments

Comments
 (0)