From b909d856927a7d96153c075212460d518ffb6d1f Mon Sep 17 00:00:00 2001 From: Patrizia Trammell Date: Tue, 8 Apr 2025 08:45:58 +0200 Subject: [PATCH 1/3] not quit done yet --- src/question.js | 17 ++++++++++++++++- src/quiz.js | 32 +++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/question.js b/src/question.js index 68f6631a..74e365b4 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(); { + for (let i = this.choices.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + let temp = this.choices[i]; + this.choices[i] = this.choices[j]; + this.choices[j] = temp; + } + } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index d94cfd14..08880e23 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -2,14 +2,44 @@ class Quiz { // YOUR CODE HERE: // // 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}`; + } + + // 3. moveToNextQuestion() + moveToNextQuestion() { + return this.currentQuestionIndex ++; + } + // 4. shuffleQuestions() + shuffleQuestions() { + + } // 5. checkAnswer(answer) + checkAnswer(answer){ + const currentQuestion = this.getQuestion(); + if(answer === currrentQuestion.answer){ + this.correctAnswers++; + + } + + } + // 6. hasEnded() + hasEnded() { + + } } \ No newline at end of file From 3408e2f35ed1bc859c0ac3ff891782926958fcf9 Mon Sep 17 00:00:00 2001 From: Patrizia Trammell Date: Tue, 8 Apr 2025 09:03:44 +0200 Subject: [PATCH 2/3] done day 1 --- src/question.js | 37 ++++++++++++++++----------------- src/quiz.js | 55 +++++++++++++++++++++++-------------------------- 2 files changed, 44 insertions(+), 48 deletions(-) diff --git a/src/question.js b/src/question.js index 74e365b4..eb477bc2 100644 --- a/src/question.js +++ b/src/question.js @@ -1,22 +1,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() - - - shuffleChoices(); { - for (let i = this.choices.length - 1; i > 0; i--) { - let j = Math.floor(Math.random() * (i + 1)); - let temp = this.choices[i]; - this.choices[i] = this.choices[j]; - this.choices[j] = temp; + // + // 1. constructor (text, choices, answer, difficulty) + constructor(text, choices, answer, difficulty) { + this.text = text; + this.choices = choices; + this.answer = answer; + this.difficulty = difficulty; } - } \ No newline at end of file + // 2. shuffleChoices() + shuffleChoices() { + for (let i = this.choices.length - 1; i > 0; i--) { + // Generate a random index between 0 and the current index `i` + const j = Math.floor(Math.random() * (i + 1)); + // Swap the elements at indices `i` and `j` + [this.choices[i], this.choices[j]] = [this.choices[j], this.choices[i]]; + } + return this.choices; + } + } \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index 08880e23..12409a95 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -2,44 +2,41 @@ class Quiz { // YOUR CODE HERE: // // 1. constructor (questions, timeLimit, timeRemaining) - constructor (questions, timeLimit, timeRemaining,) { - this.questions = questions; - this.timeLimit = timeLimit; - this.timeRemaining = timeRemaining; - this.correctAnswers = 0; - this.currentQuestionIndex = 0; + 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}`; - } - - + return this.questions[this.currentQuestionIndex]; + } + // 3. moveToNextQuestion() moveToNextQuestion() { - return this.currentQuestionIndex ++; - } - - + return this.currentQuestionIndex++; + } // 4. shuffleQuestions() shuffleQuestions() { - + for (let i = this.questions.length - 1; i > 0; i--) { + // Generate a random index between 0 and the current index `i` + const j = Math.floor(Math.random() * (i + 1)); + // Swap the elements at indices `i` and `j` + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; } - + return this.questions; + } // 5. checkAnswer(answer) - checkAnswer(answer){ - const currentQuestion = this.getQuestion(); - if(answer === currrentQuestion.answer){ - this.correctAnswers++; - - } - + checkAnswer(answer) { + const currentQuestion = this.questions[this.currentQuestionIndex]; + if (answer === currentQuestion.answer) { + this.correctAnswers++; } - - + } // 6. hasEnded() hasEnded() { - - } -} \ No newline at end of file + return this.currentQuestionIndex >= this.questions.length; + } + } \ No newline at end of file From de419bdc192a1f3b4fcbb34ece457c1f6a78503a Mon Sep 17 00:00:00 2001 From: Patrizia Trammell Date: Thu, 10 Apr 2025 20:30:36 +0200 Subject: [PATCH 3/3] Patrizia & Mohamed --- src/index.js | 238 ++++++++++++++++++++++++++++++++++++--------------- src/quiz.js | 50 ++++++++++- 2 files changed, 216 insertions(+), 72 deletions(-) diff --git a/src/index.js b/src/index.js index 03737ba3..03ca258e 100644 --- a/src/index.js +++ b/src/index.js @@ -14,39 +14,92 @@ document.addEventListener("DOMContentLoaded", () => { // End view elements const resultContainer = document.querySelector("#result"); - /************ SET VISIBILITY OF VIEWS ************/ // Show the quiz view (div#quizView) and hide the end view (div#endView) quizView.style.display = "block"; endView.style.display = "none"; - /************ 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 + new Question( + "Which hand ranks highest in Texas Hold'em?", + ["Flush", "Full House", "Straight", "Four of a Kind"], + "Four of a Kind", + 1 + ), + new Question( + "What is the weakest starting hand in NLH?", + ["7-2 offsuit", "9-4 suited", "Q-3 offsuit", "10-2 suited"], + "7-2 offsuit", + 1 + ), + new Question( + "Which position is considered the most profitable in NLH?", + ["Hijack", "Cutoff", "Button", "Big Blind"], + "Button", + 2 + ), + new Question( + "What does it mean to have 'the nuts'?", + ["A strong draw", "The best possible hand", "Middle pair", "Top pair with kicker"], + "The best possible hand", + 1 + ), + new Question( + "What are 'hole cards' in NLH?", + ["Community cards", "Face-up cards", "Your private cards", "Folded cards"], + "Your private cards", + 1 + ), + new Question( + "What is a C-bet in NLH?", + ["A bet on the river", "A continuation bet after raising preflop", "A check-raise", "A bluff with air"], + "A continuation bet after raising preflop", + 2 + ), + new Question( + "What do we call the last community card dealt?", + ["Flop", "Turn", "River", "Board"], + "River", + 1 + ), + new Question( + "If you have A♥ K♥ and the flop is Q♥ 9♥ 2♥, what do you have?", + ["Top pair", "Flush", "Backdoor flush draw", "Straight draw"], + "Flush", + 2 + ), + new Question( + "What does it mean to '3-bet' preflop?", + ["Call a raise", "Make the third bet (a re-raise)", "Go all-in", "Limp in"], + "Make the third bet (a re-raise)", + 3 + ), + new Question( + "You're in the Big Blind with 2♣ 7♦. Action folds to the Button who raises. What's your hand called?", + ["Premium", "Trash", "Suited connectors", "Middle pair"], + "Trash", + 1 + ) ]; 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 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 @@ -57,14 +110,41 @@ document.addEventListener("DOMContentLoaded", () => { showQuestion(); - /************ TIMER ************/ + // start timer let timer; + startTimer(); + + /************ TIMER ************/ + + const countDownElm = document.getElementById("timeRemaining"); + function startTimer() { + timer = setInterval(() => { + quiz.timeRemaining = quiz.timeRemaining -1; + if (quiz.timeRemaining <= 0) { + clearInterval(timer); + } + + const minutes = Math.floor(quiz.timeRemaining / 60); + const seconds = quiz.timeRemaining % 60; + countDownElm.innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + + }, 1000); + } + + + + + + + /************ EVENT LISTENERS ************/ nextButton.addEventListener("click", nextButtonHandler); + + @@ -74,8 +154,6 @@ document.addEventListener("DOMContentLoaded", () => { // 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()) { @@ -83,82 +161,101 @@ document.addEventListener("DOMContentLoaded", () => { return; } - // 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 + const currentQuestion = quiz.getQuestion(); + questionContainer.innerText = currentQuestion.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 percentage = 10; + progressBar.style.width = `${percentage}%`; // This value is hardcoded as a placeholder - // 3. Update the question count text + // 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 + const currentQuestionNumber = quiz.currentQuestionIndex + 1; + const totalQuestions = quiz.questions.length; + + // Update the question count dynamically + questionCount.innerText = `Question ${currentQuestionNumber} of ${totalQuestions}`; // This value is hardcoded as a placeholder - // 4. Create and display new radio input element with a label for each choice. + + currentQuestion.choices.forEach((choice) => { + // step 1: create dom element + const newInput = document.createElement("input"); + const newLabel = document.createElement("label"); + const newBr = document.createElement("br"); + + // step 2: modify + newInput.type = "radio"; + newInput.name = "answer"; + newInput.value = choice; + + newLabel.innerText = choice; + + // step 3: append + choiceContainer.appendChild(newInput); + choiceContainer.appendChild(newLabel); + choiceContainer.appendChild(newBr); + }); + // 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: - /* + // 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. } + // 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. + function nextButtonHandler() { + let selectedAnswer = null; // A variable to store the selected answer value + const choices = document.querySelectorAll('input[name="answer"]'); + choices.forEach((choice) => { + if (choice.checked) { + // Check if the current choice is selected + selectedAnswer = choice.value; // Store the value of the selected choice + + + } + }); - - function nextButtonHandler () { - let selectedAnswer; // A variable to store the selected answer value - - - - // 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()`. - } - + // 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 !== null) { + // Check if the selected answer is correct by calling the quiz method `checkAnswer()` + quiz.checkAnswer(selectedAnswer); + + // Move to the next question using the quiz method `moveToNextQuestion()` + quiz.moveToNextQuestion(); + + // Clear previous choices to prepare for displaying the next question + choiceContainer.innerHTML = ""; + // Show the next question by calling the function `showQuestion()` + showQuestion(); + } else { + // Alert the user to select an answer if no answer is selected + alert("Please select an answer before proceeding."); + } + } function showResults() { - // YOUR CODE HERE: // // 1. Hide the quiz view (div#quizView) @@ -166,9 +263,8 @@ 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 + resultContainer.innerText = `You scored ${quiz.correctAnswers} out of ${quiz.correctAnswers} correct answers!`; // This value is hardcoded as a placeholder } - }); \ No newline at end of file diff --git a/src/quiz.js b/src/quiz.js index 12409a95..23b17316 100644 --- a/src/quiz.js +++ b/src/quiz.js @@ -28,6 +28,8 @@ class Quiz { } return this.questions; } + + // 5. checkAnswer(answer) checkAnswer(answer) { const currentQuestion = this.questions[this.currentQuestionIndex]; @@ -39,4 +41,50 @@ class Quiz { hasEnded() { return this.currentQuestionIndex >= this.questions.length; } - } \ No newline at end of file + +//day2 filterQuestionsByDifficulty() + /*filterQuestionsByDifficulty(difficulty) { + return this.questions.filter(function(question) { + return question.difficulty === difficulty; + }); + } + */ + filterQuestionsByDifficulty(difficulty) { + const isNumber = typeof difficulty === "number"; + const isInRange = difficulty >= 1 && difficulty <= 3; + + if (!isNumber || !isInRange) { + return; // Stop if difficulty is invalid + } + + const filteredQuestions = this.questions.filter(function (question) { + return question.difficulty === difficulty; + }); + + this.questions = filteredQuestions; + + return this.questions; + } + + 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; + } +} + + + + + + + + + + + +