diff --git a/src/index.js b/src/index.js index 03737ba3..c96c948c 100644 --- a/src/index.js +++ b/src/index.js @@ -23,33 +23,27 @@ document.addEventListener("DOMContentLoaded", () => { /************ QUIZ DATA ************/ - - // Array with the quiz questions + const questions = [ new Question("What is 2 + 2?", ["3", "4", "5", "6"], "4", 1), 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 ]; const quizDuration = 120; // 120 seconds (2 minutes) /************ QUIZ INSTANCE ************/ - - // Create a new Quiz instance object + const quiz = new Quiz(questions, quizDuration, quizDuration); - // Shuffle the quiz questions quiz.shuffleQuestions(); /************ 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}`; @@ -59,7 +53,18 @@ document.addEventListener("DOMContentLoaded", () => { /************ TIMER ************/ - let timer; + let timer = setInterval(function() { + quiz.timeRemaining--; + + const mins = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const secs = (quiz.timeRemaining % 60).toString().padStart(2, "0"); + timeRemainingContainer.innerText = `${mins}:${secs}`; + + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + }, 1000); /************ EVENT LISTENERS ************/ @@ -67,18 +72,12 @@ document.addEventListener("DOMContentLoaded", () => { 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()) { + clearInterval(timer); showResults(); return; } @@ -87,32 +86,56 @@ document.addEventListener("DOMContentLoaded", () => { questionContainer.innerText = ""; choiceContainer.innerHTML = ""; - // Get the current question from the quiz by calling the Quiz class method `getQuestion()` + // Get the current question from the quiz const question = quiz.getQuestion(); - // Shuffle the choices of the current question by calling the method 'shuffleChoices()' on the question object question.shuffleChoices(); - - +<<<<<<< HEAD // 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 = `65%`; // This value is hardcoded as a placeholder - - - + const progress = (quiz.currentQuestionIndex / quiz.questions.length) * 100; +progressBar.style.width = `${progress}%`; + // This value is hardcoded as a placeholder +======= + // 1. Show the question text + questionContainer.innerText = question.text; + + // 2. Update the progress bar + const progressPercent = (quiz.currentQuestionIndex / quiz.questions.length) * 100; + progressBar.style.width = `${progressPercent}%`; +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a + + // 3. Update the question count + questionCount.innerText = `Question ${quiz.currentQuestionIndex + 1} of ${quiz.questions.length}`; + + // 4. Create radio inputs for each choice + for (let i = 0; i < question.choices.length; i++) { + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = question.choices[i]; + +<<<<<<< HEAD // 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 = `Question ${quiz.currentQuestionIndex + 1} of ${questions.length}`; + // This value is hardcoded as a placeholder +======= + const label = document.createElement("label"); + label.innerText = question.choices[i]; +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a + const br = document.createElement("br"); +<<<<<<< HEAD // 4. Create and display new radio input element with a label for each choice. // Loop through the current question `choices`. @@ -127,48 +150,101 @@ document.addEventListener("DOMContentLoaded", () => { // 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. - - } + question.choices.forEach(choice => { + // Create radio input + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choice; + input.id = choice; // para vincular el label + + // Create label + const label = document.createElement("label"); + label.innerText = choice; + label.htmlFor = choice; // hace clickeable el label + + // Line break + const br = document.createElement("br"); + + // Append to container + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(br); +}); + + } - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value + function nextButtonHandler() { + // 1. Get all radio inputs + const choices = document.querySelectorAll('input[name="choice"]'); + // 2. Find selected answer + let selectedChoice = null; + choices.forEach(choice => { + if (choice.checked) { + selectedChoice = choice.value; + } + }); + + // 3. If an answer is selected, check it and move on + if (selectedChoice) { + quiz.checkAnswer(selectedChoice); + quiz.moveToNextQuestion(); + showQuestion(); + } else { + alert("Please select an answer"); + } +} - // YOUR CODE HERE: - // - // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. +======= + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(br); + } + } - // 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. + function nextButtonHandler() { + let selectedAnswer; - - // 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()`. - } + // 1. Get all the choice elements + const allChoices = document.querySelectorAll("input[name='choice']"); + // 2. Loop through and find which one is selected + for (let i = 0; i < allChoices.length; i++) { + if (allChoices[i].checked) { + selectedAnswer = allChoices[i].value; + } + } + // 3. If an answer is selected, check it and move to next question + if (selectedAnswer) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } + } +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a function showResults() { - - // YOUR CODE HERE: - // - // 1. Hide the quiz view (div#quizView) + // 1. Hide the quiz view quizView.style.display = "none"; - // 2. Show the end view (div#endView) + // 2. Show the end view endView.style.display = "flex"; +<<<<<<< HEAD // 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 +======= + + // 3. Show the score + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.questions.length} correct answers!`; +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a } - -}); \ No newline at end of file + +}); diff --git a/src/question.js b/src/question.js index 68f6631a..fd82155f 100644 --- a/src/question.js +++ b/src/question.js @@ -1,7 +1,22 @@ class Question { - // YOUR CODE HERE: - // - // 1. constructor (text, choices, answer, difficulty) + constructor(text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; + } + shuffleChoices() { + for (let i = 0; i < this.choices.length; i++) { + const randomIndex = Math.floor(Math.random() * this.choices.length); + + // swap array[i] with array[randomIndex] + const temp = this.choices[i]; + this.choices[i] = this.choices[randomIndex]; + this.choices[randomIndex] = temp; + } + + return this.choices; + } + } + - // 2. shuffleChoices() -} \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..c15fb4d6 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,98 @@ class Quiz { - // YOUR CODE HERE: - // - // 1. constructor (questions, timeLimit, timeRemaining) - // 2. getQuestion() +<<<<<<< HEAD + // YOUR CODE HERE: - // 3. moveToNextQuestion() +======= +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a + 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]; + } + + moveToNextQuestion() { + this.currentQuestionIndex++; + } + + shuffleQuestions() { + for (let i = 0; i < this.questions.length; i++) { + const randomIndex = Math.floor(Math.random() * this.questions.length); + const temp = this.questions[i]; + this.questions[i] = this.questions[randomIndex]; + this.questions[randomIndex] = temp; + } + } + + checkAnswer(answer) { +<<<<<<< HEAD + const current = this.getQuestion(); + if (answer === current.answer) { + this.correctAnswers++; + } +} +======= + // get the current question and check if the answer matches + const currentQuestion = this.questions[this.currentQuestionIndex]; + if (currentQuestion.answer === answer) { + this.correctAnswers++; + } + } +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a + + hasEnded() { + if (this.currentQuestionIndex < this.questions.length) { + return false; + } else { + return true; + } + } +<<<<<<< HEAD + filterQuestionsByDifficulty(difficulty) { + if (difficulty !== 1 && difficulty !== 2 && difficulty !== 3) { + return; // do nothing + } + + this.questions = this.questions.filter(question => { + return question.difficulty === difficulty; + }); + } + + averageDifficulty(){ + if (this.questions.length === 0) return 0; + + const total = this.questions.reduce((sum, question) => { + return sum + question.difficulty; + }, 0); + + return total / this.questions.length; + }; +} - // 4. shuffleQuestions() +======= - // 5. checkAnswer(answer) + filterQuestionsByDifficulty(difficulty) { + // only filter if difficulty is a number between 1 and 3 + if (typeof difficulty !== "number" || difficulty < 1 || difficulty > 3) { + return; + } + this.questions = this.questions.filter(function(q) { + return q.difficulty === difficulty; + }); + } - // 6. hasEnded() -} \ No newline at end of file + averageDifficulty() { + let total = 0; + for (let i = 0; i < this.questions.length; i++) { + total += this.questions[i].difficulty; + } + return total / this.questions.length; + } +} +>>>>>>> 70f8848e590338394f56dd8d4714e0e861676f5a