如何从div数组中获取下一个对象？

Question

I am trying to cycle through a list of Div's that have all of my trivia questions inside. I know how to cycle through all of them with an iterator but i just want to know how to grab one Div, run some code, then cycle to the next object in the array after the user has clicked submit, then run the same code etc. I also have each div hidden so they can only see one Div at a time until they are done with the previous question. Very new to Java Script and trying to learn as fast as i can, any tips would greatly be appreciated

 <div class="row">
            <div class="col-12 questions">
                <form name="quiz" onsubmit="return false">
                    <div class="q1">

                        <h1>The 'Mountain' is the nickname for which character?</h1>
                        <input type="radio" name="q" value="wrong" id="q1a">a. &nbsp; Gerold Clegane
                        <br>
                        <input type="radio" name="q" value="wrong" id="q1b">b. &nbsp; Sandor clegane
                        <br>
                        <input type="radio" name="q" value="wrong" id="q1c">c. &nbsp; Oberyn Martell
                        <br>
                        <input type="radio" name="q" value="correct" id="q1d">d. &nbsp; Gregor Clegane
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>

                    <div class="q2">
                        <h2>Who is the youngest child of Lord Tywin Lannister?</h2>
                        <input type="radio" name="q" value="correct" id="q2a">a. &nbsp; Tyrion Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2b">b. &nbsp; Jaime Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2c">c. &nbsp; Cersei Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2d">d. &nbsp; Jon Snow
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>
                    <div class="q3">

                        <h3>Who is the King of the North?</h3>
                        <input type="radio" name="q" value="wrong" id="q3a">a. &nbsp; Bran Stark
                        <br>
                        <input type="radio" name="q" value="correct" id="q3b">b. &nbsp; Jon Snow
                        <br>
                        <input type="radio" name="q" value="wrong" id="q3c">c. &nbsp; Tommen Baratheon
                        <br>
                        <input type="radio" name="q" value="wrong" id="q3d">d. &nbsp; LittleFinger
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>
                    <div class="q4">

                        <h4>Who is the head of house Stark?</h4>
                        <input type="radio" name="q" value="wrong" id="q4a">a. &nbsp; Tyrion Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q4b">b. &nbsp; Jon Snow
                        <br>
                        <input type="radio" name="q" value="wrong" id="q4c">c. &nbsp; Bran Stark
                        <br>
                        <input type="radio" name="q" value="correct" id="q4d">d. &nbsp; Ned Stark
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>
                    <div class="q5">

                        <h5>Which persons are the 'Night's Watch' trying to stop by using a giant wall of ice?</h5>
                        <input type="radio" name="q" value="correct" id="q5a">a. &nbsp; White Walkers
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5b">b. &nbsp; Wildings
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5c">c. &nbsp; Mother of Dragons
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5d">d. &nbsp; Night walkers
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>
                </form>

Here is my Javascript

$(document).ready(function () {
console.log("ready!");

var question1 = $('.q1');
var question2 = $('.q2');
var question3 = $('.q3');
var question4 = $('.q4');
var question5 = $('.q5');

var correctAnswers = 0;
var wrongAnswers = 0;
var gameArr = [question1, question2, question3, question4, question5];

function nextGame() {
    for (i=0;i<gameArr.length;i++){
        //i dont want it to grab every object all at the same time
    }



}
nextGame();
console.log(nextGame());

//My startGame button
$('.b1').on("click", function () {
    console.log(gameArr[0]);
    gameArr[0].show();
});

//Setting up audio for the start screen, make it loop so it never stops running
var audio1 = new Audio("assets/music/startMusic.mp3");

audio1.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
}, false);
audio1.play();

//code to make my quiz responsive
function game() {

    var answer = $("input[name='q']:checked").val();
    if (answer === "correct") {
        alert("Correct!");
        correctAnswers = correctAnswers + 1

    } else {
        wrongAnswers = wrongAnswers + 1
        alert("Wrong!");

    }
}

//timer
function countdown() {
    seconds = 60;
    $('#timer').html('<h6>Time Remaining: ' + seconds + '</h6>');

    time = setInterval(showCountdown, 1000);
}

function showCountdown() {
    seconds--;
    $('#timer').html('<h3>Time Remaining: ' + seconds + '</h3>');
    if (seconds < 1) {
        clearInterval(time);


    }
}

//submit your answer
$('.submit').on("click", function () {
    //nextGame();
    game();

    console.log(gameArr);
});

Answer 1

You have to remember the last position.

So you have a variable, call it lastGame or something. This will be a variable at the same level as correctAnswers etc. Start with zero.

Whenever you want to navigate to the next gate, increment this and do a gameArr[lastGame].show(); .

Example:

var correctAnswers = 0;
var wrongAnswers = 0;
var gameArr = [question1, question2, question3, question4, question5];
var lastGame = 0;

function nextGame() {
    gameArr[lastGame].show();
    lastGame++;
}

And on timeout you call nextGame()

Answer 2

make a global iterator increase its value every time the user hits the answer , hide the old div display the new Div something like this

var question1 = $('.q1');
var question2 = $('.q2');
var question3 = $('.q3');
var question4 = $('.q4');
var question5 = $('.q5');

var correctAnswers = 0;
var wrongAnswers = 0;
var currentIndex = 0;
var gameArr = [question1, question2, question3, question4, question5];

then after the form is submitted

$('.submit').on("click", function () {
    //nextGame();
    game();

    if(currentIndex  < (gameArr.length -1 ))
    {
      // I am using the hide callback which is fired by jQUery after the object is completely hidden
      gameArr[currentIndex].hide(function(){

         currentIndex++;
         gameArr[currentIndex].show();
      });
    }
});

Answer 3

First off, you should never have more than one button of type submit per form. Move the submit button to just before the form's end tag.

You don't need variables for every question. With your jquery (haven't used jquery in awhile I'm all react now) you should be able to select your questions like this

var questions = $('form div')

Then you will need a current question variable. Maybe have all the divs with a hidden class. When the current question is selected remove that hidden class from the current div.

when the user submits the form you can check if they are at the end of the array of questions if not increment the current question and show the div for the next question. You could hide the previous question or keep it visible (up to you).