const btn_start = document.getElementById("start");
let container = document.getElementById("container");
let questionTag = document.getElementById("question");
let answerTag = document.getElementsByClassName("answer");
btn_start.addEventListener("click", startQuiz);
const myQuestions = [
{
question: "What's 2+2?",
answers: [
{ text: "4", correct: true },
{ text: "2", correct: false },
{ text: "10", correct: false },
{ text: "1", correct: false },
],
},
];
function startQuiz() {
container.style.visibility = "visible";
btn_start.style.visibility = "hidden";
showQuestion(myQuestions[0]);
}
function showQuestion(questionAndAnswers) {
const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
questionTag.innerText = questionAndAnswers.question;
shuffledAnswers.forEach((answer, idx) => {
});
}
<h3 id="question"></h3>
<div class="answers">
<button id="answer1" class="answer"></button>
<button id="answer2" class="answer"></button>
<button id="answer3" class="answer"></button>
<button id="answer4" class="answer"></button>
</div>
After putting my answers and question in an array object, I shuffled them with lodash and was able to display the question in its right tag, how do I display the Shuffled answers in the answerTag. I keep getting errors of trouble reading text in my .foreach function.
const myQuestions = [
{
question: "What's 2+2?",
answers: [
{ text: "4", correct: true }[0],
{ text: "2", correct: false }[1],
{ text: "10", correct: false }[2],
{ text: "1", correct: false }[3],
],
},
];
why you need a [number]?, i think the array should be
const myQuestions = [
{
question: "What's 2+2?",
answers: [
{ text: "4", correct: true },
{ text: "2", correct: false },
{ text: "10", correct: false },
{ text: "1", correct: false },
],
},
];
Why do you have [0] [1] [2] [3] at the end of your answers array objects?
Kindly remove them and try again. Coz this is incorrect.
First you have collect the buttons. Then you iterate the buttons and put the text to every single button. Like that:
const answers = [
{ text: "4", correct: true },
{ text: "2", correct: false },
{ text: "10", correct: false },
{ text: "1", correct: false },
];
const at = document.querySelectorAll('.answer');
for (let i = 1; i <= at.length; ++i) {
at[i-1].innerHTML = answers[i-1].text;
} <h3 id="question"></h3>
<div class="answers">
<button id="answer1" class="answer"></button>
<button id="answer2" class="answer"></button>
<button id="answer3" class="answer"></button>
<button id="answer4" class="answer"></button>
</div>