From 0817db95f0ac2fb979ff70aa3a8c9a7bd4b3e53c Mon Sep 17 00:00:00 2001 From: "james.markham29" Date: Tue, 13 Jan 2026 18:54:34 +0000 Subject: [PATCH 1/4] Adding real questions --- quiz.js | 100 +++++++++++++++++++++++++++----------------------------- 1 file changed, 49 insertions(+), 51 deletions(-) diff --git a/quiz.js b/quiz.js index 3443a1d..4c1a6c6 100644 --- a/quiz.js +++ b/quiz.js @@ -1,61 +1,59 @@ -// Web app's Firebase configuration - var firebaseConfig = { - apiKey: "AIzaSyAbFistmgFQcIOojLVD7cgXmTE9mLvuqVc", - authDomain: "quizapp-74d37.firebaseapp.com", - databaseURL: "https://quizapp-74d37.firebaseio.com", - projectId: "quizapp-74d37", - storageBucket: "quizapp-74d37.appspot.com", - messagingSenderId: "10113678267", - appId: "1:10113678267:web:d2aa73777b379fb241629e", - measurementId: "G-PEKPZ347TY" - }; - // Initialize Firebase - firebase.initializeApp(firebaseConfig); - var database = firebase.database(); - - - - var getQuestion = document.getElementById("question"); - var getAnswer1 = document.getElementById("answer1"); - var getAnswer2 = document.getElementById("answer2"); - var getAnswer3 = document.getElementById("answer3"); - var getScore = document.getElementById("showScore"); - - - var quizQuestions; - var questionId = 0; - var score = 1; - -// getting quiz data from Firebase -database.ref('QuizData').on('value', function(questions){ - quizQuestions = questions.val(); -}); - +var getQuestion = document.getElementById("question"); +var getAnswer1 = document.getElementById("answer1"); +var getAnswer2 = document.getElementById("answer2"); +var getAnswer3 = document.getElementById("answer3"); +var getScore = document.getElementById("showScore"); + +var quizQuestions = [ + { + question: "Which planet is known as the Red Planet?", + answer1: "Venus", + answer2: "Mars", + answer3: "Jupiter", + correctAnswer: "Mars", + }, + { + question: "What is the largest ocean on Earth?", + answer1: "Atlantic Ocean", + answer2: "Pasific Ocean", + answer3: "Indian Ocean", + correctAnswer: "Pasific Ocean", + }, + { + question: "What gas do plants absorb during photosynthesis?", + answer1: "Carbon Dioxide", + answer2: "Oxygen", + answer3: "Nitrogen", + correctAnswer: "Carbon Dioxide", + }, +]; +var questionId = 0; +var score = 1; let getQuest = () => { //for (question in quizQuestions) { - getQuestion.innerHTML = quizQuestions[questionId].question; - getAnswer1.innerText = quizQuestions[questionId].answer1; - getAnswer2.innerText = quizQuestions[questionId].answer2; - getAnswer3.innerText = quizQuestions[questionId].answer3; - getScore.innerText = score; - if(quizQuestions[questionId].correctAnswer) - {} + getQuestion.innerHTML = quizQuestions[questionId].question; + getAnswer1.innerText = quizQuestions[questionId].answer1; + getAnswer2.innerText = quizQuestions[questionId].answer2; + getAnswer3.innerText = quizQuestions[questionId].answer3; + getScore.innerText = score; + if (quizQuestions[questionId].correctAnswer) { + } //} -} +}; setInterval(getQuest, 1000); //quizQuestions[1].correctAnswer; -questionId = questionId + 1; +// questionId = questionId + 1; -// showing quiz data +// showing quiz data let nextQuestion = () => { - questionId = questionId + 1; - getQuestion.innerHTML = quizQuestions[questionId].question; - getAnswer1.innerText = quizQuestions[questionId].answer1; - getAnswer2.innerText = quizQuestions[questionId].answer2; - getAnswer3.innerText = quizQuestions[questionId].answer3; - console.log(quizQuestions[question].correctAnswer) - questionId = questionId; -} \ No newline at end of file + questionId = questionId + 1; + getQuestion.innerHTML = quizQuestions[questionId].question; + getAnswer1.innerText = quizQuestions[questionId].answer1; + getAnswer2.innerText = quizQuestions[questionId].answer2; + getAnswer3.innerText = quizQuestions[questionId].answer3; + console.log(quizQuestions[question].correctAnswer); + questionId = questionId; +}; From 260b9bcd3fb75e44044f2d61bc8d7e6f0e039cbc Mon Sep 17 00:00:00 2001 From: "james.markham29" Date: Thu, 15 Jan 2026 18:42:21 +0000 Subject: [PATCH 2/4] Fixing up the code --- Quiz.html | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ quiz.js | 59 ++++++++++++++++++++------------- 2 files changed, 135 insertions(+), 22 deletions(-) create mode 100644 Quiz.html diff --git a/Quiz.html b/Quiz.html new file mode 100644 index 0000000..0d3d015 --- /dev/null +++ b/Quiz.html @@ -0,0 +1,98 @@ + + + + Simple Quiz + + + +

Question will appear here

+ +

+

+

+ +

Score: 0

+ + + + + + + + diff --git a/quiz.js b/quiz.js index 4c1a6c6..3bc69b5 100644 --- a/quiz.js +++ b/quiz.js @@ -1,9 +1,12 @@ +// Get elements var getQuestion = document.getElementById("question"); var getAnswer1 = document.getElementById("answer1"); var getAnswer2 = document.getElementById("answer2"); var getAnswer3 = document.getElementById("answer3"); var getScore = document.getElementById("showScore"); + +// Quiz data var quizQuestions = [ { question: "Which planet is known as the Red Planet?", @@ -15,9 +18,9 @@ var quizQuestions = [ { question: "What is the largest ocean on Earth?", answer1: "Atlantic Ocean", - answer2: "Pasific Ocean", + answer2: "Pacific Ocean", answer3: "Indian Ocean", - correctAnswer: "Pasific Ocean", + correctAnswer: "Pacific Ocean", }, { question: "What gas do plants absorb during photosynthesis?", @@ -27,33 +30,45 @@ var quizQuestions = [ correctAnswer: "Carbon Dioxide", }, ]; + var questionId = 0; -var score = 1; +var score = 0; -let getQuest = () => { - //for (question in quizQuestions) { - getQuestion.innerHTML = quizQuestions[questionId].question; +// Load first question +function loadQuestion() { + getQuestion.innerText = quizQuestions[questionId].question; getAnswer1.innerText = quizQuestions[questionId].answer1; getAnswer2.innerText = quizQuestions[questionId].answer2; getAnswer3.innerText = quizQuestions[questionId].answer3; getScore.innerText = score; - if (quizQuestions[questionId].correctAnswer) { +} + +// Check answer +function checkAnswer(selectedAnswer) { + let correct = quizQuestions[questionId].correctAnswer; + + if (selectedAnswer === correct) { + score++; + alert("Correct!"); + } else { + alert("Wrong!"); } - //} -}; -setInterval(getQuest, 1000); + getScore.innerText = score; + nextQuestion(); +} -//quizQuestions[1].correctAnswer; -// questionId = questionId + 1; +// Move to next question +function nextQuestion() { + questionId++; -// showing quiz data -let nextQuestion = () => { - questionId = questionId + 1; - getQuestion.innerHTML = quizQuestions[questionId].question; - getAnswer1.innerText = quizQuestions[questionId].answer1; - getAnswer2.innerText = quizQuestions[questionId].answer2; - getAnswer3.innerText = quizQuestions[questionId].answer3; - console.log(quizQuestions[question].correctAnswer); - questionId = questionId; -}; + if (questionId >= quizQuestions.length) { + alert("Quiz finished! Final score: " + score); + return; + } + + loadQuestion(); +} + +// Start quiz +loadQuestion(); From 07128f8ecbb963c07f1d5c2d67e4e985a3fa2e4d Mon Sep 17 00:00:00 2001 From: "james.markham29" Date: Thu, 15 Jan 2026 19:06:26 +0000 Subject: [PATCH 3/4] getting the code in index.html and quiz.js work --- Quiz.html | 98 --------------------------------- index.html | 86 +++++++++++++++++++++-------- quiz.js | 155 +++++++++++++++++++++++++++++++++++------------------ 3 files changed, 167 insertions(+), 172 deletions(-) delete mode 100644 Quiz.html diff --git a/Quiz.html b/Quiz.html deleted file mode 100644 index 0d3d015..0000000 --- a/Quiz.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - Simple Quiz - - - -

Question will appear here

- -

-

-

- -

Score: 0

- - - - - - - - diff --git a/index.html b/index.html index 3a0c288..327eb32 100644 --- a/index.html +++ b/index.html @@ -5,30 +5,72 @@ JavaScript Quiz App - - - - - - + + -
-
-

JavaScript Quiz App

-
-

Score : 0

-
-
-

- - - -
- + +

JavaScript Quiz App

+ +

Score: 0

+ +
+

+ + + + + +
- + +
+ + + +
+ + - - \ No newline at end of file + diff --git a/quiz.js b/quiz.js index 3bc69b5..fc89b32 100644 --- a/quiz.js +++ b/quiz.js @@ -1,74 +1,125 @@ -// Get elements var getQuestion = document.getElementById("question"); -var getAnswer1 = document.getElementById("answer1"); -var getAnswer2 = document.getElementById("answer2"); -var getAnswer3 = document.getElementById("answer3"); var getScore = document.getElementById("showScore"); +var scoreBox = document.getElementById("scoreCounter"); +var answer1 = document.getElementById("answer1"); +var answer2 = document.getElementById("answer2"); +var answer3 = document.getElementById("answer3"); + +var text1 = document.getElementById("text1"); +var text2 = document.getElementById("text2"); +var text3 = document.getElementById("text3"); + +var nextBtn = document.getElementById("nextQuestion"); +var backBtn = document.getElementById("backQuestion"); +var submitBtn = document.getElementById("submitQuiz"); -// Quiz data var quizQuestions = [ - { - question: "Which planet is known as the Red Planet?", - answer1: "Venus", - answer2: "Mars", - answer3: "Jupiter", - correctAnswer: "Mars", - }, - { - question: "What is the largest ocean on Earth?", - answer1: "Atlantic Ocean", - answer2: "Pacific Ocean", - answer3: "Indian Ocean", - correctAnswer: "Pacific Ocean", - }, - { - question: "What gas do plants absorb during photosynthesis?", - answer1: "Carbon Dioxide", - answer2: "Oxygen", - answer3: "Nitrogen", - correctAnswer: "Carbon Dioxide", - }, + { + question: "Which planet is known as the Red Planet?", + answers: ["Venus", "Mars", "Jupiter"], + correct: "Mars" + }, + { + question: "What is the largest ocean on Earth?", + answers: ["Atlantic Ocean", "Pacific Ocean", "Indian Ocean"], + correct: "Pacific Ocean" + }, + { + question: "What gas do plants absorb during photosynthesis?", + answers: ["Carbon Dioxide", "Oxygen", "Nitrogen"], + correct: "Carbon Dioxide" + } ]; var questionId = 0; var score = 0; -// Load first question function loadQuestion() { - getQuestion.innerText = quizQuestions[questionId].question; - getAnswer1.innerText = quizQuestions[questionId].answer1; - getAnswer2.innerText = quizQuestions[questionId].answer2; - getAnswer3.innerText = quizQuestions[questionId].answer3; - getScore.innerText = score; -} + let q = quizQuestions[questionId]; + + getQuestion.innerText = q.question; + + text1.innerText = q.answers[0]; + text2.innerText = q.answers[1]; + text3.innerText = q.answers[2]; -// Check answer -function checkAnswer(selectedAnswer) { - let correct = quizQuestions[questionId].correctAnswer; + answer1.value = q.answers[0]; + answer2.value = q.answers[1]; + answer3.value = q.answers[2]; - if (selectedAnswer === correct) { - score++; - alert("Correct!"); - } else { - alert("Wrong!"); - } + answer1.checked = false; + answer2.checked = false; + answer3.checked = false; - getScore.innerText = score; - nextQuestion(); + clearHighlight(); + + backBtn.disabled = questionId === 0; + + if (questionId === quizQuestions.length - 1) { + nextBtn.style.display = "none"; + submitBtn.style.display = "inline-block"; + } else { + nextBtn.style.display = "inline-block"; + submitBtn.style.display = "none"; + } } -// Move to next question +function clearHighlight() { + document.querySelectorAll(".answer-option").forEach(opt => { + opt.classList.remove("selected"); + }); +} + +document.querySelectorAll("input[name='answer']").forEach(radio => { + radio.addEventListener("change", function () { + clearHighlight(); + this.parentElement.classList.add("selected"); + }); +}); + function nextQuestion() { - questionId++; + let selected = document.querySelector("input[name='answer']:checked"); + if (!selected) { + alert("Please select an answer first."); + return; + } - if (questionId >= quizQuestions.length) { - alert("Quiz finished! Final score: " + score); - return; - } + if (selected.value === quizQuestions[questionId].correct) { + score++; + } - loadQuestion(); + questionId++; + loadQuestion(); } -// Start quiz +function backQuestion() { + if (questionId > 0) { + questionId--; + loadQuestion(); + } +} + +function submitQuiz() { + let selected = document.querySelector("input[name='answer']:checked"); + + if (!selected) { + alert("Please select an answer first."); + return; + } + + if (selected.value === quizQuestions[questionId].correct) { + score++; + } + + getScore.innerText = score; + scoreBox.style.display = "block"; + + alert("Quiz finished! Your score is: " + score); +} + +nextBtn.addEventListener("click", nextQuestion); +backBtn.addEventListener("click", backQuestion); +submitBtn.addEventListener("click", submitQuiz); + loadQuestion(); From f0d6469d6de04db8ca86f64d94c874ed44cfee0f Mon Sep 17 00:00:00 2001 From: "james.markham29" Date: Tue, 20 Jan 2026 18:34:04 +0000 Subject: [PATCH 4/4] compressing the code --- index.html | 76 +++++----------------- quiz.js | 183 ++++++++++++++++++++--------------------------------- 2 files changed, 84 insertions(+), 175 deletions(-) diff --git a/index.html b/index.html index 327eb32..43990de 100644 --- a/index.html +++ b/index.html @@ -1,76 +1,30 @@ - + - - JavaScript Quiz App - - + Simple Quiz - -

JavaScript Quiz App

- -

Score: 0

- -
-

+

Quiz

- +

Score: 0

- +

- -
+
-
- - - -
+ + + + - + diff --git a/quiz.js b/quiz.js index fc89b32..85713b0 100644 --- a/quiz.js +++ b/quiz.js @@ -1,125 +1,80 @@ -var getQuestion = document.getElementById("question"); -var getScore = document.getElementById("showScore"); -var scoreBox = document.getElementById("scoreCounter"); - -var answer1 = document.getElementById("answer1"); -var answer2 = document.getElementById("answer2"); -var answer3 = document.getElementById("answer3"); - -var text1 = document.getElementById("text1"); -var text2 = document.getElementById("text2"); -var text3 = document.getElementById("text3"); - -var nextBtn = document.getElementById("nextQuestion"); -var backBtn = document.getElementById("backQuestion"); -var submitBtn = document.getElementById("submitQuiz"); - -var quizQuestions = [ - { - question: "Which planet is known as the Red Planet?", - answers: ["Venus", "Mars", "Jupiter"], - correct: "Mars" - }, - { - question: "What is the largest ocean on Earth?", - answers: ["Atlantic Ocean", "Pacific Ocean", "Indian Ocean"], - correct: "Pacific Ocean" - }, - { - question: "What gas do plants absorb during photosynthesis?", - answers: ["Carbon Dioxide", "Oxygen", "Nitrogen"], - correct: "Carbon Dioxide" - } +const questionEl = document.getElementById("question"); +const answersEl = document.getElementById("answers"); +const scoreBox = document.getElementById("scoreBox"); +const scoreEl = document.getElementById("score"); + +const nextBtn = document.getElementById("next"); +const backBtn = document.getElementById("back"); +const submitBtn = document.getElementById("submit"); +const restartBtn = document.getElementById("restart"); + +const quiz = [ + { q: "Red Planet?", a: ["Venus", "Mars", "Jupiter"], c: "Mars" }, + { q: "Largest ocean?", a: ["Atlantic", "Pacific", "Indian"], c: "Pacific" }, + { q: "Plants absorb?", a: ["CO2", "Oxygen", "Nitrogen"], c: "CO2" } ]; -var questionId = 0; -var score = 0; - -function loadQuestion() { - let q = quizQuestions[questionId]; - - getQuestion.innerText = q.question; - - text1.innerText = q.answers[0]; - text2.innerText = q.answers[1]; - text3.innerText = q.answers[2]; - - answer1.value = q.answers[0]; - answer2.value = q.answers[1]; - answer3.value = q.answers[2]; - - answer1.checked = false; - answer2.checked = false; - answer3.checked = false; - - clearHighlight(); - - backBtn.disabled = questionId === 0; - - if (questionId === quizQuestions.length - 1) { - nextBtn.style.display = "none"; - submitBtn.style.display = "inline-block"; - } else { - nextBtn.style.display = "inline-block"; - submitBtn.style.display = "none"; - } -} - -function clearHighlight() { - document.querySelectorAll(".answer-option").forEach(opt => { - opt.classList.remove("selected"); - }); -} - -document.querySelectorAll("input[name='answer']").forEach(radio => { - radio.addEventListener("change", function () { - clearHighlight(); - this.parentElement.classList.add("selected"); +let index = 0; +let score = 0; +let selected = null; + +function load() { + let q = quiz[index]; + questionEl.textContent = q.q; + + answersEl.innerHTML = ""; + selected = null; + + q.a.forEach(ans => { + let div = document.createElement("div"); + div.textContent = ans; + div.className = "answer"; + div.onclick = () => { + document.querySelectorAll(".answer").forEach(a => a.classList.remove("selected")); + div.classList.add("selected"); + selected = ans; + }; + answersEl.appendChild(div); }); -}); - -function nextQuestion() { - let selected = document.querySelector("input[name='answer']:checked"); - if (!selected) { - alert("Please select an answer first."); - return; - } - if (selected.value === quizQuestions[questionId].correct) { - score++; - } - - questionId++; - loadQuestion(); -} - -function backQuestion() { - if (questionId > 0) { - questionId--; - loadQuestion(); - } + backBtn.disabled = index === 0; + nextBtn.style.display = index === quiz.length - 1 ? "none" : "inline-block"; + submitBtn.style.display = index === quiz.length - 1 ? "inline-block" : "none"; } -function submitQuiz() { - let selected = document.querySelector("input[name='answer']:checked"); +nextBtn.onclick = () => { + if (!selected) return alert("Pick one"); + if (selected === quiz[index].c) score++; + index++; + load(); +}; - if (!selected) { - alert("Please select an answer first."); - return; - } +backBtn.onclick = () => { + if (index > 0) index--; + load(); +}; - if (selected.value === quizQuestions[questionId].correct) { - score++; - } +submitBtn.onclick = () => { + if (!selected) return alert("Pick one"); + if (selected === quiz[index].c) score++; - getScore.innerText = score; + scoreEl.textContent = score; scoreBox.style.display = "block"; - alert("Quiz finished! Your score is: " + score); -} - -nextBtn.addEventListener("click", nextQuestion); -backBtn.addEventListener("click", backQuestion); -submitBtn.addEventListener("click", submitQuiz); - -loadQuestion(); + nextBtn.style.display = "none"; + backBtn.style.display = "none"; + submitBtn.style.display = "none"; + restartBtn.style.display = "inline-block"; +}; + +restartBtn.onclick = () => { + index = 0; + score = 0; + scoreBox.style.display = "none"; + restartBtn.style.display = "none"; + nextBtn.style.display = "inline-block"; + backBtn.style.display = "inline-block"; + load(); +}; + +load();