I’m trying to filter out questions based on the difficulty that is set to the question in the array. So when I check the box at the beginning of the quiz it will display the question based on the difficulty it has been assigned. I think I have the filter right but I don’t know how to display the question. This is the code I have written.
let questionE1 = document.getElementById("question") let a_answer = document.getElementById("a-answer"); let b_answer = document.getElementById("b-answer"); let c_answer = document.getElementById("c-answer"); let d_answer = document.getElementById("d-answer"); let submitBtn = document.getElementById("submit"); let currentQuiz = 0; let easyDifficulty = document.getElementById("easy-diff"); let mediumDifficulty = document.getElementById("medium-diff"); let hardDifficulty = document.getElementById("hard-diff"); let difficulty = document.querySelectorAll('[name="difficulty"]'); let difficultyLevel = ""; let questionE1 = document.getElementById("question") let a_answer = document.getElementById("a-answer"); let b_answer = document.getElementById("b-answer"); let c_answer = document.getElementById("c-answer"); let d_answer = document.getElementById("d-answer"); let submitBtn = document.getElementById("submit"); let questions = [ { question: `What is the biggest city in the USA`, a: `Chicago`, b: `Los Angeles`, c: `Boston`, d: `New York`, answer: `d`, difficulty:`hard` }, { question: `What is the longest river on the earth`, a: `Amazon`, b: `Nile`, c: `Amur`, d: `Mississippi`, answer: `b`, difficulty:`medium` }, { question: `What is the highest mountain on earth`, a: `Everest`, b: `K2`, c: `Broad Peak`, d: `Manaslu`, answer: `a`, difficulty:`easy` }, ] let filteredQuestions = questions.filter(question => question.difficulty === difficultyLevel) let pickDifficulty = () => { if (easyDifficulty.checked){ difficultyLevel = "easy"; } else if (mediumDifficulty.checked){ difficultyLevel = "medium"; }else if (hardDifficulty.checked){ difficultyLevel = "hard"; } } function getQuestion() { if (pickDifficulty === "easy") { return filteredQuestions.value; } else if (pickDifficulty === "medium"){ return filteredQuestions.value; } else if (pickDifficulty === "hard"){ return filteredQuestions.value; } } displayQuestion () function displayQuestion () { let currentQuestion = questions[currentQuiz] questionE1.innerText = currentQuestion.question a_answer.innerText = currentQuestion.a b_answer.innerText = currentQuestion.b c_answer.innerText = currentQuestion.c d_answer.innerText = currentQuestion.d }
Advertisement
Answer
A few problems.
difficultyLevel
is not assigned a usable value before used in the declaration of filteredQuestions
. One solution is to make it function, to be called later.
Also, pickDifficulty
is declared as a function, but later referred to without execution:
if (pickDifficulty === "easy") {
(This may be a typo, and the intention was to compare it to the global variable difficultyLevel
.)
And, when referring to filteredQuestions
, a non-existent property, value
, is called:
return filteredQuestions.value;
Along with that, as the return value of the filter()
function it would be an array, not an object. So:
let filteredQuestions = questions.filter(...)
…assigns an array to filteredQuestions
.
//let currentQuiz = 0; let easyDifficulty = document.getElementById("easy-diff"); let mediumDifficulty = document.getElementById("medium-diff"); let hardDifficulty = document.getElementById("hard-diff"); let difficulty = document.querySelectorAll('[name="difficulty"]'); let difficultyLevel = ""; let questionE1 = document.getElementById("question") let a_answer = document.getElementById("a-answer"); let b_answer = document.getElementById("b-answer"); let c_answer = document.getElementById("c-answer"); let d_answer = document.getElementById("d-answer"); //let submitBtn = document.getElementById("submit"); let questions = [ { question: `What is the biggest city in the USA`, a: `Chicago`, b: `Los Angeles`, c: `Boston`, d: `New York`, answer: `d`, difficulty:`hard` }, { question: `What is the longest river on the earth`, a: `Amazon`, b: `Nile`, c: `Amur`, d: `Mississippi`, answer: `b`, difficulty:`medium` }, { question: `What is the highest mountain on earth`, a: `Everest`, b: `K2`, c: `Broad Peak`, d: `Manaslu`, answer: `a`, difficulty:`easy` }, ] let filteredQuestions = (difficultyLevel) => { return questions.filter(question => question.difficulty === difficultyLevel); } /* let pickDifficulty = () => { if (easyDifficulty.checked){ return "easy"; } else if (mediumDifficulty.checked){ return "medium"; } else if (hardDifficulty.checked){ return "hard"; } } */ function getQuestion (diff) { if (diff === "easy") { return filteredQuestions(diff); //.value; } else if (diff === "medium"){ return filteredQuestions(diff); //.value; } else if (diff === "hard"){ return filteredQuestions(diff); //.value; } return [{}]; } function displayQuestion ({target: diff}) { //let currentQuestion = questions[currentQuiz] let question = getQuestion(diff.value); questionE1.innerText = question[0].question a_answer.innerText = question[0].a b_answer.innerText = question[0].b c_answer.innerText = question[0].c d_answer.innerText = question[0].d } difficulty.forEach(diff => diff.addEventListener("change", displayQuestion));
<input type="radio" name="difficulty" id="easy-diff" value="easy"> easy<br> <input type="radio" name="difficulty" id="medium-diff" value="medium"> medium<br> <input type="radio" name="difficulty" id="hard-diff" value="hard"> hard<br> <div id="question"></div> <div id="a-answer"></div> <div id="b-answer"></div> <div id="c-answer"></div> <div id="d-answer"></div>