CODEWITHSUNDEEP
javascriptjqueryjson
Cameron
Cameron

Reputation: 28783

Looping through JSON data one at a time

I have the following test app: http://dev.driz.co.uk/quiztest/

The idea is that a series of webpages will each have a div that has the section number of quiz page e.g. 1 and then pull out the questions from a JSON file for that section.

This part I have working thanks to help from the SO community, so for clarity I have created a new question to deal with these issues which are separate.

The problem I have is that I only want the FIRST question to appear from a section on page load, and then when the user clicks on either the A or B button it then needs to load in the next question, so show question 2, and then 3 and so on...

Only one question at a time will be in the #questions ul for the user to answer.

Once all the questions for a section have been displayed I then need to do a callback to the finished function so that I can do some extra logic.

How do I best go about doing this? I'm thinking I'd need to first count the number of questions in the section and then do an increment to find the end. Can anyone help?

Edit: I'm planning on doing something like: Question 3 / 10 so getting that number is quite important it would seem. But I'm confused about getting the next question after the first and so and so on until then end of the section...

Thanks

Upvotes: 0

Views: 343

Answers (2)

James Kleeh
James Kleeh

Reputation: 12228

I mocked what that website is in a fiddle. I don't know if this is exactly what you are looking for. Maybe with more explanation I could get it closer. Fiddle

Upvotes: 2

Anthony Grist
Anthony Grist

Reputation: 38345

Let's assume you have an array that contains your questions. Each question is an object, with a question key and an answers key. The question will always be a string that contains the text for the question. The answers will be an array with 0 or more elements of any type which signify the selectable answers to the question.

var questions = [
    {question : 'What is 2 + 2?', answers : [4, 5, 6]}, 
    {question : 'What is 6 * 4?', answers : [20, 24, 28]}
];

Now let's write a function to display a question. We'll use a global variable that stores the index of the question to be displayed (initialised to 0 to show the first question):

var currentQuestion = 0;

function displayQuestion() {
    if(currentQuestion < questions.length) { // if there's still questions to display
        var question = questions[currentQuestion]; // get the question to display
        var questionHtml = ...; // generate the HTML for the question here
        $('#questions').html(questionHtml);
        currentQuestion += 1; // increase tracking index
    }
    else {
        finished();
    }
}

Then all you need to do is bind click event handlers to your buttons to call that displayQuestion() function.

Upvotes: 1

Related Questions