I am a beginner coder trying to write a quiz with HTML, CSS, JS only. I have my first question and buttons already in my HTML document and was planning to use replace() method to input the new questions/answers.
Currently: when user clicks a button, <h1> is replaced with the new question. But now I'm unable to replace answer buttons. How do I retrieve the value of the answers from the my nested array inside of an object? Or am I doing this completely wrong?
Expected: when the user clicks an answer button, then they are presented with a new question/answer set.
let questionsArray = [
{
question: "The condition in an if / else statement is enclosed within ____.",
choices: [
"quotes",
"curly brackets",
"parentheses",
"square brackets,"
],
answer: "parentheses"
},
{
question: "Arrays in JavaScript can be used to store ____.",
choices: [
"numbers and strings",
"other arrays",
"booleans",
"all of the above",
],
answer: "all of the above",
},
{
question: "String values must be enclosed within ____ when being assigned to variables.",
choices: [
"commas",
"curly brackets",
"quotes",
"parentheses",
],
answer: "quotes",
},
{
question: "A very useful tool used during development and debugging for printing content to the debugger is: ",
choices: [
"Javascript",
"terminal/bash",
"for loops",
"console.log",
],
answer: "console.log",
}
]
function getQuestion() {
//set currentQuestion from questionArray
let currentQuestion = questionsArray[questionsArrayIndex];
questionEl.textContent = currentQuestion.question;
//set choices from questionArray ??
}
//on button click, getQuestion function will run
btnContainerEl.addEventListener("click", function() {
getQuestion();
});