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>