From e6c19114522ad2d9457247abfdc38a5e32b95f1c Mon Sep 17 00:00:00 2001 From: Anderson Valencia Date: Wed, 19 Nov 2025 00:06:48 +0100 Subject: [PATCH 1/2] Solved lab --- src/question.js | 19 +++++++++++-- src/quiz.js | 75 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 87 insertions(+), 7 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..c8866fff 100644 --- a/src/question.js +++ b/src/question.js @@ -2,6 +2,21 @@ 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; + } // 2. shuffleChoices() -} \ No newline at end of file + + shuffleChoices(){ + let array = this.choices; + let randomIdex; + for (let i =array.length -1; i > 0; i--){ + randomIdex = Math.floor(Math.random()*(i+1)); + [array[i], array[randomIdex]] = [array[randomIdex], array[i]]; + } + } +} + diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..78893df6 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,15 +1,80 @@ class Quiz { // YOUR CODE HERE: - // + //Dia 1 17-11-2025 // 1. constructor (questions, timeLimit, timeRemaining) - + constructor(questions, timeLimit, timeRemaining){ + this.questions = questions; + this.timeLimit = timeLimit; + this.timeRemaining = timeRemaining; + this.correctAnswers = 0; + this.currentQuestionIndex = 0; + } // 2. getQuestion() - + getQuestion(){ + return this.questions[this.currentQuestionIndex] + } // 3. moveToNextQuestion() + moveToNextQuestion(){ + this.currentQuestionIndex++; + } // 4. shuffleQuestions() - + shuffleQuestions(){ + let array = this.questions; + let randomIdex; + for (let i =array.length -1; i > 0; i--){ + randomIdex = Math.floor(Math.random()*(i+1)); + [array[i], array[randomIdex]] = [array[randomIdex], array[i]]; + } + } // 5. checkAnswer(answer) + checkAnswer(answer){ + const currentQuestion = this.getQuestion(); + if (currentQuestion.answer === answer) { + this.correctAnswers++; + } + } // 6. hasEnded() -} \ No newline at end of file + hasEnded(){ + return this.currentQuestionIndex === this.questions.length; + } + + //Dia 2 18-11-2025 + filterQuestionsByDifficulty(difficulty) { + // La dificultad debe ser un número entero entre 1 y 3. + if (typeof difficulty !== 'number' || difficulty < 1 || difficulty > 3) { + // Si la dificultad no es válida, no modificamos el array de preguntas. + return; + } + + // Usamos el método filter() para crear un nuevo array + // que solo contenga las preguntas con la dificultad especificada. + this.questions = this.questions.filter(question => { + // Asumimos que cada objeto de pregunta tiene una propiedad 'difficulty' (número) + return question.difficulty === difficulty; + }); + + // Opcional: Reiniciar el índice para empezar el quiz con el nuevo conjunto de preguntas + this.currentQuestionIndex = 0; + } + + averageDifficulty() { + // Si no hay preguntas, devolvemos 0 para evitar la división por cero + if (this.questions.length === 0) { + return 0; + } + + // 1. Usamos reduce() para sumar los valores de la propiedad 'difficulty' + const totalDifficulty = this.questions.reduce((accumulator, question) => { + // El acumulador se suma con la dificultad de la pregunta actual + return accumulator + question.difficulty; + }, 0); // El 0 es el valor inicial del acumulador + + // 2. Dividimos la suma total por el número de preguntas para obtener el promedio + const average = totalDifficulty / this.questions.length; + + // Devolvemos el promedio + return average; + } +} From c6f7287c0e69059a927879d1adb87c88a3c27c3b Mon Sep 17 00:00:00 2001 From: Anderson Valencia Date: Thu, 20 Nov 2025 20:24:10 +0100 Subject: [PATCH 2/2] Solved lab --- index.html | 4 +- src/index.js | 140 +++++++++++++++++++++++++++++++++++------------- src/question.js | 10 ++-- src/quiz.js | 138 +++++++++++++++++++++++++++++++---------------- 4 files changed, 203 insertions(+), 89 deletions(-) diff --git a/index.html b/index.html index 534cd886..0fadbd4a 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@

JavaScript Quiz

-
Remaining Time: 00:00
+
Remaining Time: 00:00
@@ -39,7 +39,7 @@

JavaScript Quiz

- + diff --git a/src/index.js b/src/index.js index 03737ba3..73b22278 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), @@ -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 @@ -65,7 +65,7 @@ document.addEventListener("DOMContentLoaded", () => { /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); - + restartButton.addEventListener("click", restartQuiz); /************ FUNCTIONS ************/ @@ -74,7 +74,23 @@ document.addEventListener("DOMContentLoaded", () => { // nextButtonHandler() - Handles the click on the next button // showResults() - Displays the end view and the quiz results + function updateTimer() { + quiz.timeRemaining--; + const minutes = Math.floor(quiz.timeRemaining / 60).toString().padStart(2, "0"); + const seconds = (quiz.timeRemaining % 60).toString().padStart(2, "0"); +document.getElementById("timeRemaining").innerText = `${minutes}:${seconds}`; + + + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + showResults(); + } + } + + function startTimer() { + timer = setInterval(updateTimer, 1000); + } function showQuestion() { // If the quiz has ended, show the results @@ -91,48 +107,64 @@ 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.question; // 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 // 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 ${quiz.questions.length}`;// This value is hardcoded as a placeholder + - // 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. + // 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. + + question.choices.forEach(choice => { + const input = document.createElement("input"); + input.type = "radio"; + input.name = "choice"; + input.value = choice; + + const label = document.createElement("label"); + label.innerText = choice; + + choiceContainer.appendChild(input); + choiceContainer.appendChild(label); + choiceContainer.appendChild(document.createElement("br")); + }); } - - function nextButtonHandler () { + + function nextButtonHandler() { let selectedAnswer; // A variable to store the selected answer value @@ -140,35 +172,71 @@ document.addEventListener("DOMContentLoaded", () => { // YOUR CODE HERE: // // 1. Get all the choice elements. You can use the `document.querySelectorAll()` method. - + const choices = document.querySelectorAll('input[name="choice"]'); // 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. + choices.forEach(choice => { + if (choice.checked) { + selectedAnswer = choice.value; + } + }); + - // 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()`. - } + // 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()`. + if (selectedAnswer !== undefined) { + quiz.checkAnswer(selectedAnswer); + quiz.moveToNextQuestion(); + showQuestion(); + } + } function showResults() { // YOUR CODE HERE: // + // ✔️ DAY 4: DETENER EL TIMER + clearInterval(timer); // 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 } - + +function restartQuiz() { + endView.style.display = "none"; + quizView.style.display = "block"; + + quiz.currentQuestionIndex = 0; + quiz.correctAnswers = 0; + + quiz.shuffleQuestions(); + + // Reiniciar tiempo + quiz.timeRemaining = quiz.timeLimit; + startTimer(); + + showQuestion(); +} + + /*************************************************************** + * START QUIZ (BEGINNING) + ***************************************************************/ + showQuestion(); + startTimer(); // ✔️ DAY 4 — iniciar temporizador al comenzar + + }); \ No newline at end of file diff --git a/src/question.js b/src/question.js index c8866fff..1b8c0a45 100644 --- a/src/question.js +++ b/src/question.js @@ -2,11 +2,11 @@ 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; + constructor(question, choices, answer, difficulty) { + this.question = question; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; } // 2. shuffleChoices() diff --git a/src/quiz.js b/src/quiz.js index 78893df6..d087624e 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -1,80 +1,126 @@ class Quiz { - // YOUR CODE HERE: - //Dia 1 17-11-2025 - // 1. constructor (questions, timeLimit, timeRemaining) - constructor(questions, timeLimit, timeRemaining){ - this.questions = questions; - this.timeLimit = timeLimit; - this.timeRemaining = timeRemaining; - this.correctAnswers = 0; - this.currentQuestionIndex = 0; + + /* ============================================================ + Día 1 – 17/11/2025 + CONSTRUCTOR + - Recibe: array de preguntas, tiempo total y tiempo restante + - Inicializa contadores y el índice de preguntas + ============================================================ */ + constructor(questions, timeLimit, timeRemaining) { + this.questions = questions; // Lista de preguntas + this.timeLimit = timeLimit; // Tiempo total del quiz + this.timeRemaining = timeRemaining; // Tiempo restante + this.correctAnswers = 0; // Contador de aciertos + this.currentQuestionIndex = 0; // Índice de la pregunta actual } - // 2. getQuestion() - getQuestion(){ - return this.questions[this.currentQuestionIndex] + + + /* ============================================================ + Día 1 + getQuestion() + - Devuelve la pregunta actual según el índice + ============================================================ */ + getQuestion() { + return this.questions[this.currentQuestionIndex]; } - // 3. moveToNextQuestion() - moveToNextQuestion(){ + + + /* ============================================================ + Día 1 + moveToNextQuestion() + - Avanza el índice en +1 para pasar a la siguiente pregunta + ============================================================ */ + moveToNextQuestion() { this.currentQuestionIndex++; } - // 4. shuffleQuestions() - shuffleQuestions(){ + + /* ============================================================ + Día 1 + shuffleQuestions() + - Baraja las preguntas usando Fisher–Yates Shuffle + ============================================================ */ + shuffleQuestions() { let array = this.questions; - let randomIdex; - for (let i =array.length -1; i > 0; i--){ - randomIdex = Math.floor(Math.random()*(i+1)); - [array[i], array[randomIdex]] = [array[randomIdex], array[i]]; + let randomIndex; + + for (let i = array.length - 1; i > 0; i--) { + randomIndex = Math.floor(Math.random() * (i + 1)); + + // Intercambia posiciones + [array[i], array[randomIndex]] = [array[randomIndex], array[i]]; } } - // 5. checkAnswer(answer) - checkAnswer(answer){ + + + /* ============================================================ + Día 1 + checkAnswer(answer) + - Comprueba si la respuesta del usuario coincide + con la respuesta correcta de la pregunta actual + - Si es correcta, suma +1 al contador + ============================================================ */ + checkAnswer(answer) { const currentQuestion = this.getQuestion(); + if (currentQuestion.answer === answer) { this.correctAnswers++; } } - // 6. hasEnded() - hasEnded(){ + + /* ============================================================ + Día 1 + hasEnded() + - Retorna true si ya se han respondido todas las preguntas + ============================================================ */ + hasEnded() { return this.currentQuestionIndex === this.questions.length; } - //Dia 2 18-11-2025 + + /* ============================================================ + Día 2 – 18/11/2025 + filterQuestionsByDifficulty(difficulty) + - Filtra preguntas por nivel 1, 2 o 3 + - Reemplaza el array questions con solo las preguntas filtradas + - Reinicia el índice a 0 + ============================================================ */ filterQuestionsByDifficulty(difficulty) { - // La dificultad debe ser un número entero entre 1 y 3. - if (typeof difficulty !== 'number' || difficulty < 1 || difficulty > 3) { - // Si la dificultad no es válida, no modificamos el array de preguntas. - return; + + // Validación + if (typeof difficulty !== "number" || difficulty < 1 || difficulty > 3) { + return; // No modifica nada si el valor no es válido } - // Usamos el método filter() para crear un nuevo array - // que solo contenga las preguntas con la dificultad especificada. + // Filtra preguntas que coinciden con el nivel elegido this.questions = this.questions.filter(question => { - // Asumimos que cada objeto de pregunta tiene una propiedad 'difficulty' (número) return question.difficulty === difficulty; }); - // Opcional: Reiniciar el índice para empezar el quiz con el nuevo conjunto de preguntas + // Reiniciar el índice después de filtrar this.currentQuestionIndex = 0; } + + /* ============================================================ + Día 2 – 18/11/2025 + averageDifficulty() + - Calcula el promedio de dificultad de las preguntas + - Usa reduce para sumar todas y divide por la longitud + ============================================================ */ averageDifficulty() { - // Si no hay preguntas, devolvemos 0 para evitar la división por cero - if (this.questions.length === 0) { - return 0; - } - // 1. Usamos reduce() para sumar los valores de la propiedad 'difficulty' + // Evitar división entre cero + if (this.questions.length === 0) return 0; + const totalDifficulty = this.questions.reduce((accumulator, question) => { - // El acumulador se suma con la dificultad de la pregunta actual return accumulator + question.difficulty; - }, 0); // El 0 es el valor inicial del acumulador - - // 2. Dividimos la suma total por el número de preguntas para obtener el promedio - const average = totalDifficulty / this.questions.length; + }, 0); - // Devolvemos el promedio - return average; + // Promedio + return totalDifficulty / this.questions.length; } -} + +}// ← Fin de la clase Quiz +