how to make quiz questions appear one at a time in javascript

Question

JavaScript noob here. I\'m trying to make a quiz app I\'m working on, but I really don\'t know how to proceed. I\'ve written out all the questions with html.

Here\'s th

Answer 1

Welcome to Stackoverflow! SO will help you when you hit a dead end, but you have to exhaust all possibilities and be genuinely stuck. There are a ton of resources online about javascript & jQuery, google is your friend :)

To answer the question of "how to make quiz questions appear one at a time in javascript", there are a hundred ways to merengue a purple flamingo. One solution would be to get the total amount of questions and keep track of the current question being displayed. Then when a user clicks next, hide the current question and display the next.http://jsfiddle.net/3kpFV/

//Store the total number of questions
var totalQuestions = $('.questions').size();

//Set the current question to display to 1
var currentQuestion = 0;

//Store the selector in a variable.
//It is good practice to prefix jQuery selector variables with a $
$questions = $('.questions');

//Hide all the questions
$questions.hide();

//Show the first question
$($questions.get(currentQuestion)).fadeIn();

//attach a click listener to the HTML element with the id of 'next'
$('#next').click(function () {

     //fade out the current question,
     //putting a function inside of fadeOut calls that function 
     //immediately after fadeOut is completed, 
     //this is for a smoother transition animation
     $($questions.get(currentQuestion)).fadeOut(function () {

        //increment the current question by one
        currentQuestion = currentQuestion + 1;

        //if there are no more questions do stuff
        if (currentQuestion == totalQuestions) {

            var result = sum_values()

            //do stuff with the result
            alert(result);

        } else {

            //otherwise show the next question
            $($questions.get(currentQuestion)).fadeIn();

        }
    });

});