├── README.md ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Quiz-Tracker 2 | Shubham-cyber-prog/Quiz-Tracker 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quiz App 7 | 8 | 9 | 10 |

11 |

Simple Quiz

12 |

Time Left: 10s

13 |

14 |

Question goes here

15 |

16 | 17 | 18 | 19 | 20 |

21 | 22 |

23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | font-family: "Poppins", sans-serif; 6 | box-sizing: border-box; 7 | } 8 | body { 9 | 10 | background: linear-gradient(135deg, #091edd, #f70451); 11 | height: 100vh; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | color: #dde4ee; 16 | } 17 | .app { 18 | background: rgba(0, 0, 0, 0.7); 19 | width: 90%; 20 | max-width: 600px; 21 | border-radius: 10px; 22 | padding: 30px; 23 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 24 | } 25 | 26 | /* Heading */ 27 | .app h1 { 28 | font-size: 32px; 29 | font-weight: 600; 30 | color: #dde4ee; 31 | margin-bottom: 20px; 32 | border-bottom: 2px solid #333; 33 | padding-bottom: 15px; 34 | } 35 | 36 | /* Quiz Section */ 37 | .quiz { 38 | padding: 20px 0; 39 | } 40 | 41 | .quiz h2 { 42 | font-size: 20px; 43 | font-weight: 600; 44 | color: #e90aa6; 45 | margin-bottom: 15px; 46 | } 47 | 48 | /* Button Styles */ 49 | .btn { 50 | background: rgba(0, 0, 0, 0.6); 51 | color: #eaeeec; 52 | font-size: 18px; 53 | font-weight: 500; 54 | width: 100%; 55 | border: 1px solid #222; 56 | margin: 10px 0; 57 | padding: 12px; 58 | border-radius: 5px; 59 | text-align: left; 60 | cursor: pointer; 61 | transition: background 0.3s, color 0.3s; 62 | } 63 | 64 | .btn:hover:not([disabled]) { 65 | background: #333; 66 | color: #fff; 67 | } 68 | 69 | .btn:disabled { 70 | cursor: not-allowed; 71 | opacity: 0.6; 72 | } 73 | 74 | /* Next Button */ 75 | #next-btn { 76 | background: #001e4d; 77 | color: #fff; 78 | font-weight: 600; 79 | width: 150px; 80 | border: none; 81 | padding: 12px; 82 | margin: 20px auto 0; 83 | border-radius: 5px; 84 | cursor: pointer; 85 | text-align: center; 86 | display: none; 87 | transition: background 0.3s; 88 | } 89 | 90 | #next-btn:hover { 91 | background: #003080; 92 | } 93 | 94 | /* Feedback Classes */ 95 | .correct { 96 | background: #07f06c; 97 | color: #003080; 98 | } 99 | 100 | .incorrect { 101 | background: #ff9393; 102 | color: #003080; 103 | } 104 | 105 | /* Timer */ 106 | #timer { 107 | color: #dde4ee; 108 | font-size: 18px; 109 | margin-top: 10px; 110 | text-align: right; 111 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const questions = [ 2 | { 3 | question: "What does HTML stand for?", 4 | answers: [ 5 | { 6 | text: "Hyper Text Markup Language", 7 | correct: true, 8 | }, 9 | { 10 | text: "High Text Machine Language", 11 | correct: false, 12 | }, 13 | { 14 | text: "Hyper Text Machine Learning", 15 | correct: false, 16 | }, 17 | { 18 | text: "Hyper Text Marking Language", 19 | correct: false, 20 | }, 21 | ], 22 | }, 23 | { 24 | question: "What is the purpose of the `alt` attribute in an `` tag?", 25 | answers: [ 26 | { 27 | text: "To specify the URL of the image", 28 | correct: false, 29 | }, 30 | { 31 | text: "To provide alternative text for the image", 32 | correct: true, 33 | }, 34 | { 35 | text: "To align the image", 36 | correct: false, 37 | }, 38 | { 39 | text: "To style the image with CSS", 40 | correct: false, 41 | }, 42 | ], 43 | }, 44 | { 45 | question: "Which CSS property is used to change the text color?", 46 | answers: [ 47 | { 48 | text: "color", 49 | correct: true, 50 | }, 51 | { 52 | text: "font-color", 53 | correct: false, 54 | }, 55 | { 56 | text: "text-color", 57 | correct: false, 58 | }, 59 | { 60 | text: "background-color", 61 | correct: false, 62 | }, 63 | ], 64 | }, 65 | { 66 | question: "Which is the correct JavaScript syntax to write 'Hello World'?", 67 | answers: [ 68 | { 69 | text: "print('Hello World');", 70 | correct: false, 71 | }, 72 | { 73 | text: "document.write('Hello World');", 74 | correct: true, 75 | }, 76 | { 77 | text: "echo('Hello World');", 78 | correct: false, 79 | }, 80 | { 81 | text: "console.print('Hello World');", 82 | correct: false, 83 | }, 84 | ], 85 | }, 86 | { 87 | question: 88 | "Which of the following is a valid way to add comments in JavaScript?", 89 | answers: [ 90 | { 91 | text: "// This is a comment", 92 | correct: true, 93 | }, 94 | { 95 | text: "/* This is a comment */", 96 | correct: true, 97 | }, 98 | { 99 | text: "# This is a comment", 100 | correct: false, 101 | }, 102 | { 103 | text: "!-- This is a comment --", 104 | correct: false, 105 | }, 106 | ], 107 | }, 108 | { 109 | question: "Which CSS property controls the layout of elements?", 110 | answers: [ 111 | { 112 | text: "display", 113 | correct: true, 114 | }, 115 | { 116 | text: "position", 117 | correct: false, 118 | }, 119 | { 120 | text: "float", 121 | correct: false, 122 | }, 123 | { 124 | text: "visibility", 125 | correct: false, 126 | }, 127 | ], 128 | }, 129 | { 130 | question: "How do you declare a JavaScript variable?", 131 | answers: [ 132 | { 133 | text: "let myVariable;", 134 | correct: true, 135 | }, 136 | { 137 | text: "var = myVariable;", 138 | correct: false, 139 | }, 140 | { 141 | text: "variable myVariable;", 142 | correct: false, 143 | }, 144 | { 145 | text: "myVariable: var;", 146 | correct: false, 147 | }, 148 | ], 149 | }, 150 | { 151 | question: "What is the purpose of the tag in HTML?", 152 | answers: [ 153 | { 154 | text: "To contain meta information about the document", 155 | correct: true, 156 | }, 157 | { 158 | text: "To display the title of the page", 159 | correct: false, 160 | }, 161 | { 162 | text: "To include the main content of the page", 163 | correct: false, 164 | }, 165 | { 166 | text: "To declare the doctype", 167 | correct: false, 168 | }, 169 | ], 170 | }, 171 | { 172 | question: "Which JavaScript method is used to find an HTML element by ID?", 173 | answers: [ 174 | { 175 | text: "document.getElementById", 176 | correct: true, 177 | }, 178 | { 179 | text: "document.getElementsById", 180 | correct: false, 181 | }, 182 | { 183 | text: "document.querySelector", 184 | correct: false, 185 | }, 186 | { 187 | text: "document.getElement", 188 | correct: false, 189 | }, 190 | ], 191 | }, 192 | { 193 | question: 194 | "Which CSS property is used to create space inside an element, between the content and the border?", 195 | answers: [ 196 | { 197 | text: "padding", 198 | correct: true, 199 | }, 200 | { 201 | text: "margin", 202 | correct: false, 203 | }, 204 | { 205 | text: "border-spacing", 206 | correct: false, 207 | }, 208 | { 209 | text: "spacing", 210 | correct: false, 211 | }, 212 | ], 213 | }, 214 | ]; 215 | 216 | const questionElement = document.getElementById("question"); 217 | const answerButton = document.getElementById("answer-button"); 218 | const nextButton = document.getElementById("next-btn"); 219 | 220 | let currentQuestionIndex = 0; 221 | let score = 0; 222 | 223 | 224 | let timerElement = document.getElementById("timer"); 225 | let timeLeft = 10; // Set the time limit for each question 226 | let timerInterval; // To store the interval ID 227 | 228 | function startTimer() { 229 | timeLeft = 10; // Reset the time for each question 230 | timerElement.innerHTML = `Time Left: ${timeLeft}s`; 231 | timerInterval = setInterval(() => { 232 | timeLeft--; 233 | timerElement.innerHTML = `Time Left: ${timeLeft}s`; 234 | if (timeLeft <= 0) { 235 | clearInterval(timerInterval); // Stop the timer 236 | handleTimeout(); // Handle when time runs out 237 | } 238 | }, 1000); // Update every second 239 | } 240 | 241 | function stopTimer() { 242 | clearInterval(timerInterval); // Stop the timer 243 | } 244 | 245 | function handleTimeout() { 246 | // Disable all buttons and show the correct answer 247 | Array.from(answerButton.children).forEach((button) => { 248 | if (button.dataset.correct === "true") { 249 | button.classList.add("correct"); 250 | } 251 | button.disabled = true; 252 | }); 253 | nextButton.style.display = "block"; // Show the Next button 254 | } 255 | 256 | 257 | function startQuiz() { 258 | currentQuestionIndex = 0; 259 | score = 0; 260 | timerElement.style.display = "block"; // Show the timer 261 | nextButton.innerHTML = "Next"; 262 | showQuestion(); 263 | } 264 | 265 | 266 | function showQuestion() { 267 | resetSate(); 268 | let currentQuestion = questions[currentQuestionIndex]; 269 | let questionNo = currentQuestionIndex + 1; 270 | questionElement.innerHTML = questionNo + ". " + currentQuestion.question; 271 | 272 | currentQuestion.answers.forEach((answer) => { 273 | const button = document.createElement("button"); 274 | button.innerHTML = answer.text; 275 | button.classList.add("btn"); 276 | answerButton.appendChild(button); 277 | if (answer.correct) { 278 | button.dataset.correct = answer.correct; 279 | } 280 | button.addEventListener("click", (e) => { 281 | stopTimer(); // Stop the timer when an answer is selected 282 | selectAnswer(e); 283 | }); 284 | }); 285 | 286 | startTimer(); // Start the timer for the current question 287 | } 288 | function resetSate() { 289 | nextButton.style.display = "none"; 290 | while (answerButton.firstChild) { 291 | answerButton.removeChild(answerButton.firstChild); 292 | } 293 | } 294 | function selectAnswer(e) { 295 | const selectedBtn = e.target; 296 | const isCorrect = selectedBtn.dataset.correct === "true"; 297 | if (isCorrect) { 298 | selectedBtn.classList.add("correct"); 299 | score++; 300 | } else { 301 | selectedBtn.classList.add("incorrect"); 302 | } 303 | 304 | Array.from(answerButton.children).forEach((button) => { 305 | if (button.dataset.correct === "true") { 306 | button.classList.add("correct"); 307 | } 308 | button.disabled = true; 309 | }); 310 | nextButton.style.display = "block"; 311 | } 312 | 313 | function showScore() { 314 | resetSate(); 315 | timerElement.style.display = "none"; // Hide the timer when the quiz ends 316 | questionElement.innerHTML = `Your scored ${score} out of ${questions.length}!`; 317 | nextButton.innerHTML = "Play Again"; 318 | nextButton.style.display = "block"; 319 | } 320 | 321 | function handleNextButton() { 322 | currentQuestionIndex ++; 323 | if (currentQuestionIndex < questions.length) { 324 | showQuestion(); 325 | } else { 326 | showScore(); 327 | } 328 | } 329 | nextButton.addEventListener("click", () => { 330 | if (currentQuestionIndex < questions.length) { 331 | handleNextButton(); 332 | } else { 333 | startQuiz(); 334 | } 335 | }); 336 | 337 | startQuiz(); --------------------------------------------------------------------------------