From c6600d5de51c86e6c6da8409db49659680382dd0 Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Mon, 13 Oct 2025 17:37:24 +0200 Subject: [PATCH 01/11] question class done/ shuffle func done --- src/index.js | 3 ++- src/question.js | 23 ++++++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..2bddbbfe 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ document.addEventListener("DOMContentLoaded", () => { const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); + // End view elements const resultContainer = document.querySelector("#result"); @@ -26,7 +27,7 @@ document.addEventListener("DOMContentLoaded", () => { // Array with the quiz questions const questions = [ - new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), + new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), //object (instance of question) structure: question, choices (array), answer, difficulty new Question("What is the capital of France?", ["Miami", "Paris", "Oslo", "Rome"], "Paris", 1), new Question("Who created JavaScript?", ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], "Brendan Eich", 2), new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), diff --git a/src/question.js b/src/question.js index 68f6631a..62927f6e 100644 --- a/src/question.js +++ b/src/question.js @@ -3,5 +3,26 @@ class Question { // // 1. constructor (text, choices, answer, difficulty) + constructor(text, choices, answer, difficulty) { + this.text = text + this.choices = choices + this.answer = answer + this.difficulty = difficulty + } + // 2. shuffleChoices() -} \ No newline at end of file + + shuffleChoices() { + + for (let i = this.choices.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // random index 0–i + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; // swap elements + } + + return this.choices + } +} + +const questionOne = new Question('what is the color below?',['yellow','red','blue'], 'blue', 1) + +console.log(questionOne.shuffleChoices()) \ No newline at end of file From 3daa2e7079f9c16d53b6df711bc020078dd5eaf0 Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Mon, 13 Oct 2025 18:14:24 +0200 Subject: [PATCH 02/11] quiz class set and its functions --- src/question.js | 4 ++-- src/quiz.js | 47 +++++++++++++++++++++++++++++++++++++---------- 2 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/question.js b/src/question.js index 62927f6e..6996b740 100644 --- a/src/question.js +++ b/src/question.js @@ -23,6 +23,6 @@ class Question { } } -const questionOne = new Question('what is the color below?',['yellow','red','blue'], 'blue', 1) +const questionOne = new Question('what is the color below?',['yellow','red','blue'], 'blue', 1) // example queston, probably array that we use on quiz class named 'questions; goingt to consist of these objects -console.log(questionOne.shuffleChoices()) \ No newline at end of file +console.log(questionOne.shuffleChoices()) diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..9704ec41 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,42 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) - - // 2. getQuestion() + + constructor(questions,timeLimit,timeRemaining) { + this.questions = questions + this.timeLimit = timeLimit + this.timeRemaining = timeRemaining + this.correctAnswers = 0 + this.currentQuestionIndex = 0 + } + getQuestion() { + return this.questions[this.currentQuestionIndex] + } - // 3. moveToNextQuestion() + moveToNextQuestion() { + this.currentQuestionIndex++ + } + + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); // random index 0–i + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; // swap elements + } - // 4. shuffleQuestions() + return this.questions + } - // 5. checkAnswer(answer) + checkAnswer(answer){ - // 6. hasEnded() -} \ No newline at end of file + if(answer === this.questions[this.currentQuestionIndex].answer){ + this.correctAnswers++ + } + + } + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false + } else { + return true + } + } +} From bfdc3cc89bfda9f9c1e330d474bf145ffbd1c6a4 Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Mon, 13 Oct 2025 18:21:14 +0200 Subject: [PATCH 03/11] Quiz done --- src/quiz.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/quiz.js b/src/quiz.js index 9704ec41..5cd5b868 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -40,3 +40,4 @@ class Quiz { } } } + From 691bb88a679440f0dd3cf879e3d78c7247c1abbe Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Tue, 14 Oct 2025 16:01:55 +0200 Subject: [PATCH 04/11] diff filter func added --- src/quiz.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/quiz.js b/src/quiz.js index 5cd5b868..7a04d8e1 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,16 +1,16 @@ class Quiz { - - constructor(questions,timeLimit,timeRemaining) { + + constructor(questions, timeLimit, timeRemaining) { this.questions = questions this.timeLimit = timeLimit this.timeRemaining = timeRemaining this.correctAnswers = 0 this.currentQuestionIndex = 0 } - getQuestion() { - return this.questions[this.currentQuestionIndex] - } - + getQuestion() { + return this.questions[this.currentQuestionIndex] + } + moveToNextQuestion() { this.currentQuestionIndex++ } @@ -24,14 +24,14 @@ class Quiz { return this.questions } - checkAnswer(answer){ + checkAnswer(answer) { - if(answer === this.questions[this.currentQuestionIndex].answer){ + if (answer === this.questions[this.currentQuestionIndex].answer) { this.correctAnswers++ } } - + hasEnded() { if (this.currentQuestionIndex < this.questions.length) { return false @@ -39,5 +39,16 @@ class Quiz { return true } } -} + filterQuestionsByDifficulty(difficulty) { + + if(difficulty > 3 || difficulty <= 0 || typeof difficulty !== "number"){ + return + } + + this.questions = this.questions.filter(question => { + return question.difficulty === difficulty + }) + + } +} From 8e04707945cd719e023fc135ccee097d36c43f2d Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Tue, 14 Oct 2025 16:21:20 +0200 Subject: [PATCH 05/11] Day02 done add filterquestions and average difficulty methods to Quiz --- src/quiz.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/quiz.js b/src/quiz.js index 7a04d8e1..51bc8c97 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -51,4 +51,11 @@ class Quiz { }) } + averageDifficulty() { + let questionsLength = this.questions.length + let total = this.questions.reduce((acc,question) => { + return acc + question.difficulty + },0) + return total/questionsLength + } } From acc994bc79d4f1696d77ff0971f60a79092f674a Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Wed, 15 Oct 2025 18:34:37 +0200 Subject: [PATCH 06/11] showquestions function done --- src/index.js | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 2bddbbfe..36ad5b6c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,6 @@ document.addEventListener("DOMContentLoaded", () => { // View divs const quizView = document.querySelector("#quizView"); const endView = document.querySelector("#endView"); - // Quiz view elements const progressBar = document.querySelector("#progressBar"); const questionCount = document.querySelector("#questionCount"); @@ -99,21 +98,42 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Show the question // Update the inner text of the question container element and show the question text - + questionContainer.innerText = question.text // 2. Update the green progress bar // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered - - progressBar.style.width = `65%`; // This value is hardcoded as a placeholder + + progressBar.style.width = `${((quiz.currentQuestionIndex + 1/questions.length)*100)}%`; // This value is hardcoded as a placeholder // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - questionCount.innerText = `Question 1 of 10`; // This value is hardcoded as a placeholder + questionCount.innerText = `${quiz.currentQuestionIndex +1} of ${questions.length}`; // This value is hardcoded as a placeholder + + question.choices.forEach((choice) => { + // choiceContainer.innerHTML += `
    • ` + + //Longest way + const liNode = document.createElement("li") + const inputNode = document.createElement("input") + inputNode.type = "radio" + inputNode.name = "choice" + inputNode.value = `${choice}` + const labelNode = document.createElement("label") + labelNode.innerHTML = `${choice}` + liNode.appendChild(inputNode) + liNode.appendChild(labelNode) + choiceContainer.appendChild(liNode) + + + + + }) + // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. @@ -172,4 +192,4 @@ document.addEventListener("DOMContentLoaded", () => { resultContainer.innerText = `You scored 1 out of 1 correct answers!`; // This value is hardcoded as a placeholder } -}); \ No newline at end of file +}); From 1326c2bb1551db39b234d5f87fd88b1e8f25f7c4 Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Wed, 15 Oct 2025 19:13:35 +0200 Subject: [PATCH 07/11] naim took the steering wheel --- src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 36ad5b6c..4c8089bd 100644 --- a/src/index.js +++ b/src/index.js @@ -129,8 +129,7 @@ document.addEventListener("DOMContentLoaded", () => { choiceContainer.appendChild(liNode) - - + }) From a2c06a333a3607982066f606493444dc91ed0c4e Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Wed, 15 Oct 2025 20:25:56 +0200 Subject: [PATCH 08/11] nextButton() implemented --- src/index.js | 113 ++++++++++++++++++++++++++++++++---------------- src/question.js | 2 +- 2 files changed, 76 insertions(+), 39 deletions(-) diff --git a/src/index.js b/src/index.js index 4c8089bd..ad036a80 100644 --- a/src/index.js +++ b/src/index.js @@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ DATA ************/ - + // Array with the quiz questions const questions = [ new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), //object (instance of question) structure: question, choices (array), answer, difficulty @@ -36,7 +36,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ INSTANCE ************/ - + // Create a new Quiz instance object const quiz = new Quiz(questions, quizDuration, quizDuration); // Shuffle the quiz questions @@ -91,26 +91,26 @@ document.addEventListener("DOMContentLoaded", () => { const question = quiz.getQuestion(); // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - - + + // YOUR CODE HERE: // // 1. Show the question // Update the inner text of the question container element and show the question text questionContainer.innerText = question.text - + // 2. Update the green progress bar // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered - - progressBar.style.width = `${((quiz.currentQuestionIndex + 1/questions.length)*100)}%`; // This value is hardcoded as a placeholder + + progressBar.style.width = `${((quiz.currentQuestionIndex / questions.length) * 100)}%`; // This value is hardcoded as a placeholder // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - - questionCount.innerText = `${quiz.currentQuestionIndex +1} of ${questions.length}`; // This value is hardcoded as a placeholder + + questionCount.innerText = `${quiz.currentQuestionIndex + 1} of ${questions.length}`; // This value is hardcoded as a placeholder question.choices.forEach((choice) => { // choiceContainer.innerHTML += `
    • ` @@ -127,33 +127,70 @@ document.addEventListener("DOMContentLoaded", () => { liNode.appendChild(inputNode) liNode.appendChild(labelNode) choiceContainer.appendChild(liNode) + }) + + + // 4. Create and display new radio input element with a label for each choice. + // Loop through the current question `choices`. + // For each choice create a new radio input with a label, and append it to the choice container. + // Each choice should be displayed as a radio input element with a label: + /* + + +
    + */ + // Hint 1: You can use the `document.createElement()` method to create a new element. + // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. + // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. + // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + + } - + function nextButtonHandler() { + + const radiosNode = document.querySelectorAll('#choices li input') + // console.log(radiosNode) + let selectedAnswer; + + radiosNode.forEach(radioInput => { + if (radioInput.checked === true) { + selectedAnswer = radioInput.value + } }) + + // console.log(selectedAnswer) + + // console.log('just a test: ', quiz.questions) + + // console.log('just a test 2: ', questions) + + // console.log('just a test 3: ', quiz.currentQuestionIndex) - // 4. Create and display new radio input element with a label for each choice. - // Loop through the current question `choices`. - // For each choice create a new radio input with a label, and append it to the choice container. - // Each choice should be displayed as a radio input element with a label: - /* - - -
    - */ - // Hint 1: You can use the `document.createElement()` method to create a new element. - // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. - // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. - // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + if (selectedAnswer === quiz.questions[quiz.currentQuestionIndex].answer) { + console.log("answer is correct!") + quiz.correctAnswers ++ + console.log("correct answers total: ", quiz.correctAnswers) + quiz.moveToNextQuestion() + showQuestion() + + } else if(selectedAnswer === undefined){ + console.log("user have not choosen any answer!!!") + selectedAnswer = null + quiz.moveToNextQuestion() + showQuestion() + } else { + console.log("answer is wrong!!") + quiz.moveToNextQuestion() + showQuestion() + } + + console.log('the correct answer was:" ', quiz.questions[quiz.currentQuestionIndex - 1].answer) - } - - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value @@ -163,18 +200,18 @@ document.addEventListener("DOMContentLoaded", () => { // 2. Loop through all the choice elements and check which one is selected - // Hint: Radio input elements have a property `.checked` (e.g., `element.checked`). - // When a radio input gets selected the `.checked` property will be set to true. - // You can use check which choice was selected by checking if the `.checked` property is true. + // Hint: Radio input elements have a property `.checked` (e.g., `element.checked`). + // When a radio input gets selected the `.checked` property will be set to true. + // You can use check which choice was selected by checking if the `.checked` property is true. - - // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question - // Check if selected answer is correct by calling the quiz method `checkAnswer()` with the selected answer. - // Move to the next question by calling the quiz method `moveToNextQuestion()`. - // Show the next question by calling the function `showQuestion()`. - } + // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question + // Check if selected answer is correct by calling the quiz method `checkAnswer()` with the selected answer. + // Move to the next question by calling the quiz method `moveToNextQuestion()`. + // Show the next question by calling the function `showQuestion()`. + } + nextButton.addEventListener('click', nextButtonHandler) function showResults() { @@ -186,9 +223,9 @@ document.addEventListener("DOMContentLoaded", () => { // 2. Show the end view (div#endView) endView.style.display = "flex"; - + // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions resultContainer.innerText = `You scored 1 out of 1 correct answers!`; // This value is hardcoded as a placeholder } - + }); diff --git a/src/question.js b/src/question.js index 6996b740..37df55dd 100644 --- a/src/question.js +++ b/src/question.js @@ -25,4 +25,4 @@ class Question { const questionOne = new Question('what is the color below?',['yellow','red','blue'], 'blue', 1) // example queston, probably array that we use on quiz class named 'questions; goingt to consist of these objects -console.log(questionOne.shuffleChoices()) +// console.log(questionOne.shuffleChoices()) From a88ca15ca70ef8cc200da76ae91876a2716a6209 Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Thu, 16 Oct 2025 14:54:07 +0200 Subject: [PATCH 09/11] restart btn done --- index.html | 2 +- src/index.js | 25 ++++++++++++++++++++----- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 534cd886..a5fee0b6 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

    JavaScript Quiz

    - + diff --git a/src/index.js b/src/index.js index ad036a80..5b9f4631 100644 --- a/src/index.js +++ b/src/index.js @@ -9,10 +9,13 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); - - + + + // End view elements const resultContainer = document.querySelector("#result"); + const restartButton = document.querySelector("#restartButton"); + restartButton.style.display = "none"; // Hide the restart button initially /************ SET VISIBILITY OF VIEWS ************/ @@ -220,12 +223,24 @@ document.addEventListener("DOMContentLoaded", () => { // // 1. Hide the quiz view (div#quizView) quizView.style.display = "none"; - + // 2. Show the end view (div#endView) endView.style.display = "flex"; - + // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions - resultContainer.innerText = `You scored 1 out of 1 correct answers!`; // This value is hardcoded as a placeholder + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder + + restartButton.style.display = "flex" } + + restartButton.addEventListener('click', () => { + quiz.currentQuestionIndex = 0 + endView.style.display = "none"; + quizView.style.display = "flex"; + quiz.correctAnswers = 0 + quiz.shuffleQuestions() + showQuestion() + }) }); + From 682ebc56d5244b7cab6e50c74ca9375c6048c98e Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Thu, 16 Oct 2025 15:51:26 +0200 Subject: [PATCH 10/11] done --- src/index.js | 169 +++++++++++++++++++++++++++++---------------------- 1 file changed, 98 insertions(+), 71 deletions(-) diff --git a/src/index.js b/src/index.js index 5b9f4631..fab3f5a0 100644 --- a/src/index.js +++ b/src/index.js @@ -9,9 +9,7 @@ document.addEventListener("DOMContentLoaded", () => { const questionContainer = document.querySelector("#question"); const choiceContainer = document.querySelector("#choices"); const nextButton = document.querySelector("#nextButton"); - - - + // End view elements const resultContainer = document.querySelector("#result"); const restartButton = document.querySelector("#restartButton"); @@ -35,6 +33,7 @@ document.addEventListener("DOMContentLoaded", () => { new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), // Add more questions here ]; + const quizDuration = 120; // 120 seconds (2 minutes) @@ -47,77 +46,97 @@ document.addEventListener("DOMContentLoaded", () => { /************ SHOW INITIAL CONTENT ************/ - + + // Convert the time remaining in seconds to minutes and seconds, and pad the numbers with zeros if needed + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - + // Display the time remaining in the time remaining container const timeRemainingContainer = document.getElementById("timeRemaining"); timeRemainingContainer.innerText = `${minutes}:${seconds}`; - + + + /************ TIMER ************/ + + let timer = () => { + setInterval(() => { + if(quiz.timeRemaining === 0){ + showResults(); + clearInterval(timer) + return; + } + + quiz.timeRemaining-- + // console.log(quiz.timeRemaining) + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; + }, 1000) + } + + timer() + + // Show first question showQuestion(); - - - /************ TIMER ************/ - - let timer; - - + /************ EVENT LISTENERS ************/ - + nextButton.addEventListener("click", nextButtonHandler); - - - + + + /************ FUNCTIONS ************/ - + // showQuestion() - Displays the current question and its choices // nextButtonHandler() - Handles the click on the next button // showResults() - Displays the end view and the quiz results - - - + + + function showQuestion() { // If the quiz has ended, show the results if (quiz.hasEnded()) { showResults(); return; } - + + // timer() + + // Clear the previous question text and question choices questionContainer.innerText = ""; choiceContainer.innerHTML = ""; - + // Get the current question from the quiz by calling the Quiz class method `getQuestion()` const question = quiz.getQuestion(); // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - - - + + // YOUR CODE HERE: // // 1. Show the question // Update the inner text of the question container element and show the question text questionContainer.innerText = question.text - + // 2. Update the green progress bar // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered - + progressBar.style.width = `${((quiz.currentQuestionIndex / questions.length) * 100)}%`; // This value is hardcoded as a placeholder - - - + + + // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - + questionCount.innerText = `${quiz.currentQuestionIndex + 1} of ${questions.length}`; // This value is hardcoded as a placeholder - + question.choices.forEach((choice) => { // choiceContainer.innerHTML += `
    • ` - + //Longest way const liNode = document.createElement("li") const inputNode = document.createElement("input") @@ -126,60 +145,60 @@ document.addEventListener("DOMContentLoaded", () => { inputNode.value = `${choice}` const labelNode = document.createElement("label") labelNode.innerHTML = `${choice}` - + liNode.appendChild(inputNode) liNode.appendChild(labelNode) choiceContainer.appendChild(liNode) }) - - + + // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. // For each choice create a new radio input with a label, and append it to the choice container. // Each choice should be displayed as a radio input element with a label: /* - - -
    + + +
    */ - // Hint 1: You can use the `document.createElement()` method to create a new element. - // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. - // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. - // Hint 4: You can use the `element.innerText` property to set the inner text of an element. - + // Hint 1: You can use the `document.createElement()` method to create a new element. + // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. + // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. + // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + } - - - + + + function nextButtonHandler() { - + const radiosNode = document.querySelectorAll('#choices li input') // console.log(radiosNode) let selectedAnswer; - + radiosNode.forEach(radioInput => { if (radioInput.checked === true) { selectedAnswer = radioInput.value } }) - + // console.log(selectedAnswer) - + // console.log('just a test: ', quiz.questions) - + // console.log('just a test 2: ', questions) - + // console.log('just a test 3: ', quiz.currentQuestionIndex) if (selectedAnswer === quiz.questions[quiz.currentQuestionIndex].answer) { console.log("answer is correct!") - quiz.correctAnswers ++ + quiz.correctAnswers++ console.log("correct answers total: ", quiz.correctAnswers) quiz.moveToNextQuestion() showQuestion() - } else if(selectedAnswer === undefined){ + } else if (selectedAnswer === undefined) { console.log("user have not choosen any answer!!!") selectedAnswer = null quiz.moveToNextQuestion() @@ -191,34 +210,34 @@ document.addEventListener("DOMContentLoaded", () => { } console.log('the correct answer was:" ', quiz.questions[quiz.currentQuestionIndex - 1].answer) - - - - - - + + + + + + // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - - + + // 2. Loop through all the choice elements and check which one is selected // Hint: Radio input elements have a property `.checked` (e.g., `element.checked`). // When a radio input gets selected the `.checked` property will be set to true. // You can use check which choice was selected by checking if the `.checked` property is true. - - + + // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question // Check if selected answer is correct by calling the quiz method `checkAnswer()` with the selected answer. // Move to the next question by calling the quiz method `moveToNextQuestion()`. // Show the next question by calling the function `showQuestion()`. } - + nextButton.addEventListener('click', nextButtonHandler) - - + + function showResults() { - + // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -234,13 +253,21 @@ document.addEventListener("DOMContentLoaded", () => { } restartButton.addEventListener('click', () => { + + clearInterval(timer) + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${minutes}:${seconds}`; quiz.currentQuestionIndex = 0 endView.style.display = "none"; quizView.style.display = "flex"; quiz.correctAnswers = 0 + // console.log("before restart: ",quiz.timeRemaining) + quiz.timeRemaining = quizDuration + // console.log("after restart: ",quiz.timeRemaining) quiz.shuffleQuestions() showQuestion() }) - + }); From 92498fcf87a159d53b0423c5978782c40fafe6da Mon Sep 17 00:00:00 2001 From: naimyasirozcan Date: Thu, 16 Oct 2025 16:17:19 +0200 Subject: [PATCH 11/11] FIRST MINI PROJECT HAS DONE!!! w/igor --- src/index.js | 183 ++++++++++++++++++++++++++++----------------------- 1 file changed, 102 insertions(+), 81 deletions(-) diff --git a/src/index.js b/src/index.js index fab3f5a0..4fd65c4f 100644 --- a/src/index.js +++ b/src/index.js @@ -26,12 +26,32 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ DATA ************/ // Array with the quiz questions + const questions = [ - new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), //object (instance of question) structure: question, choices (array), answer, difficulty - new Question("What is the capital of France?", ["Miami", "Paris", "Oslo", "Rome"], "Paris", 1), - new Question("Who created JavaScript?", ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], "Brendan Eich", 2), - new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), - // Add more questions here + // new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), //object (instance of question) structure: question, choices (array), answer, difficulty + // new Question("What is the capital of France?", ["Miami", "Paris", "Oslo", "Rome"], "Paris", 1), + // new Question("Who created JavaScript?", ["Plato", "Brendan Eich", "Lea Verou", "Bill Gates"], "Brendan Eich", 2), + // new Question("What is the mass–energy equivalence equation?", ["E = mc^2", "E = m*c^2", "E = m*c^3", "E = m*c"], "E = mc^2", 3), + new Question("Which one is not a type of pair programming?", ["Spoon", "Hand to hand", "Eye to eye", "Being sirious & Focused"], "Being sirious & Focused = mc^2", 3), + new Question("Which one is not a valid way to learn programming?", ["Practice", "Read docs", "Watch tutorials", "Pray to StackOverflow"], "Pray to StackOverflow", 3), + + new Question("Which keyword is used to declare variables in JavaScript?", ["let", "var", "const", "plsWork"], "plsWork", 3), + + new Question("Why do programmers prefer dark mode?", ["Because light attracts bugs", "Because it looks cooler", "Because their eyes evolved", "Because it saves battery"], "Because light attracts bugs", 1), + + new Question("Why did the function break up with the variable?", ["It had too many arguments", "They had no scope", "They weren’t compatible", "It was undefined"], "They had no scope", 2), + + new Question("What does CSS stand for?", ["Cool Style Syntax", "Cascading Style Sheets", "Crazy Style Stuff", "Colorful Sheet Styling"], "Cascading Style Sheets", 2), + + new Question("What’s the best way to comfort a JavaScript bug?", ["Console it", "Debug it", "Ignore it", "Restart the PC"], "Console it", 1), + + new Question("What’s the best way to debug code?", ["console.log", "rubber duck", "cry", "sacrifice to compiler"], "sacrifice to compiler", 3), + + new Question("What does HTML stand for?", ["HyperText Markup Language", "How To Meet Ladies", "Hot Mail", "High Tech Modern Language"], "How To Meet Ladies", 3), + + new Question("What’s a programmer’s favorite hangout place?", ["The bar()", "The loop()", "The stack()", "The cloud()"], "The bar()", 1), + + new Question("What is the main purpose of Node.js?", ["Backend development", "Cooking noodles", "Running JavaScript on server", "Handling async I/O"], "Cooking noodles", 3) ]; const quizDuration = 120; // 120 seconds (2 minutes) @@ -46,28 +66,28 @@ document.addEventListener("DOMContentLoaded", () => { /************ SHOW INITIAL CONTENT ************/ - - + + // Convert the time remaining in seconds to minutes and seconds, and pad the numbers with zeros if needed - + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); - + // Display the time remaining in the time remaining container const timeRemainingContainer = document.getElementById("timeRemaining"); timeRemainingContainer.innerText = `${minutes}:${seconds}`; - - + + /************ TIMER ************/ - + let timer = () => { setInterval(() => { - if(quiz.timeRemaining === 0){ + if (quiz.timeRemaining === 0) { showResults(); clearInterval(timer) return; } - + quiz.timeRemaining-- // console.log(quiz.timeRemaining) const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); @@ -75,68 +95,68 @@ document.addEventListener("DOMContentLoaded", () => { timeRemainingContainer.innerText = `${minutes}:${seconds}`; }, 1000) } - + timer() - - + + // Show first question showQuestion(); - + /************ EVENT LISTENERS ************/ - + nextButton.addEventListener("click", nextButtonHandler); - - - + + + /************ FUNCTIONS ************/ - + // showQuestion() - Displays the current question and its choices // nextButtonHandler() - Handles the click on the next button // showResults() - Displays the end view and the quiz results - - - + + + function showQuestion() { // If the quiz has ended, show the results if (quiz.hasEnded()) { showResults(); return; } - + // timer() - - + + // Clear the previous question text and question choices questionContainer.innerText = ""; choiceContainer.innerHTML = ""; - + // Get the current question from the quiz by calling the Quiz class method `getQuestion()` const question = quiz.getQuestion(); // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - - + + // YOUR CODE HERE: // // 1. Show the question // Update the inner text of the question container element and show the question text questionContainer.innerText = question.text - + // 2. Update the green progress bar // Update the green progress bar (div#progressBar) width so that it shows the percentage of questions answered - + progressBar.style.width = `${((quiz.currentQuestionIndex / questions.length) * 100)}%`; // This value is hardcoded as a placeholder - - - + + + // 3. Update the question count text // Update the question count (div#questionCount) show the current question out of total questions - + questionCount.innerText = `${quiz.currentQuestionIndex + 1} of ${questions.length}`; // This value is hardcoded as a placeholder - + question.choices.forEach((choice) => { // choiceContainer.innerHTML += `
    • ` - + //Longest way const liNode = document.createElement("li") const inputNode = document.createElement("input") @@ -145,13 +165,13 @@ document.addEventListener("DOMContentLoaded", () => { inputNode.value = `${choice}` const labelNode = document.createElement("label") labelNode.innerHTML = `${choice}` - + liNode.appendChild(inputNode) liNode.appendChild(labelNode) choiceContainer.appendChild(liNode) }) - - + + // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. // For each choice create a new radio input with a label, and append it to the choice container. @@ -161,43 +181,43 @@ document.addEventListener("DOMContentLoaded", () => {
    */ - // Hint 1: You can use the `document.createElement()` method to create a new element. - // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. - // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. - // Hint 4: You can use the `element.innerText` property to set the inner text of an element. - + // Hint 1: You can use the `document.createElement()` method to create a new element. + // Hint 2: You can use the `element.type`, `element.name`, and `element.value` properties to set the type, name, and value of an element. + // Hint 3: You can use the `element.appendChild()` method to append an element to the choices container. + // Hint 4: You can use the `element.innerText` property to set the inner text of an element. + } - - - + + + function nextButtonHandler() { - + const radiosNode = document.querySelectorAll('#choices li input') // console.log(radiosNode) let selectedAnswer; - + radiosNode.forEach(radioInput => { if (radioInput.checked === true) { selectedAnswer = radioInput.value } }) - + // console.log(selectedAnswer) - + // console.log('just a test: ', quiz.questions) - + // console.log('just a test 2: ', questions) - + // console.log('just a test 3: ', quiz.currentQuestionIndex) - - + + if (selectedAnswer === quiz.questions[quiz.currentQuestionIndex].answer) { console.log("answer is correct!") quiz.correctAnswers++ console.log("correct answers total: ", quiz.correctAnswers) quiz.moveToNextQuestion() showQuestion() - + } else if (selectedAnswer === undefined) { console.log("user have not choosen any answer!!!") selectedAnswer = null @@ -208,52 +228,51 @@ document.addEventListener("DOMContentLoaded", () => { quiz.moveToNextQuestion() showQuestion() } - + console.log('the correct answer was:" ', quiz.questions[quiz.currentQuestionIndex - 1].answer) - - - - - - + + + + + + // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - - + + // 2. Loop through all the choice elements and check which one is selected // Hint: Radio input elements have a property `.checked` (e.g., `element.checked`). // When a radio input gets selected the `.checked` property will be set to true. // You can use check which choice was selected by checking if the `.checked` property is true. - - + + // 3. If an answer is selected (`selectedAnswer`), check if it is correct and move to the next question // Check if selected answer is correct by calling the quiz method `checkAnswer()` with the selected answer. // Move to the next question by calling the quiz method `moveToNextQuestion()`. // Show the next question by calling the function `showQuestion()`. } - + nextButton.addEventListener('click', nextButtonHandler) - - + + function showResults() { - + // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) quizView.style.display = "none"; - + // 2. Show the end view (div#endView) endView.style.display = "flex"; - + // 3. Update the result container (div#result) inner text to show the number of correct answers out of total questions resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; // This value is hardcoded as a placeholder - + restartButton.style.display = "flex" } - + restartButton.addEventListener('click', () => { - clearInterval(timer) const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); @@ -268,6 +287,8 @@ document.addEventListener("DOMContentLoaded", () => { quiz.shuffleQuestions() showQuestion() }) - + }); + +