CODEWITHSUNDEEP
javascripthtml
Renay
Renay

Reputation: 147

Making a quiz with Javascript. Getting array values from and object.

Im trying to create a simple quiz with Javascript. I am struggling to grasp the concept of how to iterate over the values of an array from an object. I eventually want to display a radio button with its value as the choice of answers. If someone could point me in the right direction i would really appreciate it.

Fiddle: http://jsfiddle.net/Renay/eprxgxhu/

Here is my code:

HTML 

        <h1> General Knowledge Quiz </h1> 

        <h2 id='questionTitle'> </h2>
        <ul id ='selectionList'> </ul>
        <p> Click the next button to go to the next question! </p>

        <button type="button" id = nextButton> Next </button>
    </div>

Javascript 

var allQuestions = [{
    question: 'What is the capital city of Australia?',
    choices: ['Sydney', 'Melbourne', 'Canberra', 'London'],
    correctAnswer: 2
},
{
    question: 'Who won the 2014 FIFA World Cup?',
    choices: ['Brazil', 'England', 'Germany', 'Spain'],
    correctAnswer: 2
},
{
    question: 'What book series is authored by J.K Rowling?',
    choices: ['Game of Thrones', 'Hunger Games', 'Twilight', 'Harry Potter'],
    correctAnswer: 3
},
{   
    question: 'The Eiffel Tower is located in which following country?',
    choices: ['Italy', 'France', 'Iceland', 'Mexico'],
    correctAnswer: 1
}];

//Reference to tags
var questionTitle = document.getElementById('questionTitle');
var selectionList = document.getElementById('selectionList');
var nextButton = document.getElementById('nextButton');

//Initiating some variables
var i = 0;
var length1 = allQuestions.length;
var correctAnswer = 0;

function populateQuestion() {}

Upvotes: 2

Views: 3850

Answers (2)

Mazzu
Mazzu

Reputation: 2849

Firstly attach click event to next button and give call to populateQuestion() using counter to iterate through allQuestions array and use i as counter variable.

nextButton.onclick = function() {
    /*itterate through questions*/    
    if(i>allQuestions.length -1){/*go to first when reached last*/
       i=0;       
    }    
    populateQuestion(i);
    i++;
};

Iterate through allQuestions array for question title and choices as:

function populateQuestion(qNum) {
    var individualQuestion = allQuestions[i];
    questionTitle.innerText = individualQuestion.question;

    selectionList.innerHTML = ""; //reset choices list
    for(key in individualQuestion.choices){
        var radioBtnName = "question"+i+"_choice";
        var choiceText = individualQuestion.choices[key];
        selectionList.appendChild(createLi(radioBtnName,choiceText));
    }
}

Write dynamic li and radio button creation function as:

function createLi(name, choiceText) {
        var e = document.createElement('li');
        var radioHtml = '<input type="radio" name="' + name + '"';    
        radioHtml += '/>';
        radioHtml += choiceText;        
        e.innerHTML = radioHtml;        
        return e;
    }

Please refer to this fiddle for same.

Upvotes: 2

Rishi Dua
Rishi Dua

Reputation: 2334

You need to associate an onClick event with your button to call the relevant part of the JavaScript. Go through the example here

On another note, using JavaScript for a quiz might not be a good idea as one can see the answers using view-source. I would suggest using PHP to fetch results from a database.

Upvotes: 0

Related Questions