TCannadySF TCannadySF - 1 year ago 50
Javascript Question

On button click, progress through questions and possible answers stored in one array

Hobbiest web dev here. I've been tasked with making my first quiz using HTML/CSS/JS/JQ. Each question and possible answer choice is stored in an array called allQuestions. The question is displayed to the user in a DIV, and the answer choices are multiple choice and setup as labels to three respective radio buttons.

When the button is clicked, the user’s answer is tallied (to be worked on later), and the question and answer choices update to the next respective options (working on this part now).

I can get the button to click once, updating to the first respective questions and answer choices. But I can’t get it to “progress” or “cycle” through the next. I’m not sure what I’m missing here.

Please forgive my code/approach which is likely unconventional.



<!DOCTYPE html>
<script type="text/javascript"
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="application.js"></script>
<title>Tim's JS Quizlet!</title>
<h2>JS and JQuery Quiz</h2>

<div class="intro">
Welcome! When the button at the bottom is clicked, the question and answers below will
progress to the next question and respective answer chioces. Good luck!


<div class="questions">Ready?</div>


<input type="radio" id="radio1" name="radios"><label id="r1"> Yes</label></br>
<input type="radio" id="radio2" name="radios"><label id="r2"> No</label></br>
<input type="radio" id="radio3" name="radios"><label id="r3"> Wat </label></br>




font-weight: bold;
width: 50%;

width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;


//store quetsions, answer options, and answerkey.
var allQuestions = {
question: ["Who is Prime Minister of the United Kingdom?", "Which of the \
following is not a breed of dog?"],
choices: [" David Cameron", " Gordon Brown", " Winston Churchill", "Retrie\
ver", "Poodle", "Tabby"],
answers: [0,2]

//set the first question and answer options.
var q = 0;
var rb1= 0;
var rb2=1;
var rb3=2;
var currentQuestion = (allQuestions.question[q]);
var currentRadio1 = (allQuestions.choices[rb1]);
var currentRadio2 = (allQuestions.choices[rb2]);
var currentRadio3 = (allQuestions.choices[rb3]);

//when button is clicked, update <.questions> to show the next question, and the \
//<#r's> to show the next answer options.
rb1 = rb1 + 3;
rb2 = rb2 + 3;
rb3 = rb3 + 3;

//Use a JS object to separately hold each group of: questions, choices and correct answers.
//Use a JS function so that when <button> is clicked, it:
//**removes the current text from the <.questions> DIV
//**clears the radio buttons
//**adds the next question's text from <allQuestions> to the <.questions> DIV
//**adds the next anwers the radio buttons
//Use a JS object to store each of the user's answers, which are determined by which
//radio button is selected when <button> is clicked.
//If user clicks <button> without first selecting a radio button, do not update the form, and
//do not store their answer. Instead, alert the user.
//On the final page, let the user know they are done. Tally and display the total
//amount of correct answers.

Answer Source

Well, you need to update your variables on each click, it doesn't update itself with only changing g. So put the lines in the click function:

        var currentQuestion = (allQuestions.question[q]);
        var currentRadio1 = (allQuestions.choices[rb1]);
        var currentRadio2 = (allQuestions.choices[rb2]);
        var currentRadio3 = (allQuestions.choices[rb3]);