JavaScript quiz app sample

[bettybarnes]

Hello! I want to ask your help so I could now continue developing my first Win 8 app using HTML5/JS. The current app I have, has 5 questions per set with 4 choices. But I want to have a customized choices for each question. For example,

1.) Capital city of America?
a. Los Angeles
b. Washington D.C.
c. Boston
d. New York

But what's happening is that it gives the other answers from the db, not what I want to happen in the example above that I've given.
Like this:

1.) Capital city of America?
a. Washington D.C.
b. Tokyo
c. Beijing
d. Manila

Please help me how to do exactly what I want to happen in the app.

Kindly check the template below:

//GLOBAL VARIABLES

var citiesDB = [
{ id: "1", question: "Capital city of America?", answer: "Einstein" },
{ id: "1", question: "Planck?", answer: "Planck" },
etc...
]; 



function loadScientists() {
    var tempIndex = [];
    for (var i = 0; i < scientistDB.length; i++) {
        tempIndex[i] = i;
    }

    var pick;
    for (var i = 0; i < (SCIENTISTS_PER_SET * SETS_PER_GAME) ; i++) {
        pick = Math.floor(Math.random() * tempIndex.length);
        gameScientists[i] = scientistDB[tempIndex[pick]];
        tempIndex.splice(pick, 1);
    }
}

function loadSet() {
    //INITIALIZE GAME VARIABLES
    points = 2;
    check.innerText = "Earn " + points + " points.";

    //CHECK IF GAME IS DONE (LAST SET)
    if (set == SETS_PER_GAME) {
        //sound effect: game finished
        playSound(sndFinished);

        //display message dialog
        var md = new Windows.UI.Popups.MessageDialog("THANKS FOR PLAYING! YOUR TOTAL SCORE IS " +
            score, "WhoIsThisScientist");
        md.commands.append(new Windows.UI.Popups.UICommand("PLAY AGAIN"));
        md.showAsync().then(function () {
            showStartScreen(true); //LAUNCH A NEW GAME
        });
        return;
    }

    //Clear scientists
    removeAllChildren(scientistsPanel);

    for (var i = 0; i < SCIENTISTS_PER_SET; i++) {
        //DIV container for questions
        var divGameItem = document.createElement("div");
        divGameItem.id = "gameItem" + (i + 1);
        divGameItem.className = "gameItem";

        //Label for Scientist Person
        var h3ScientistPerson = document.createElement("h3");
        h3ScientistPerson.id = "scientistPerson" + (i + 1);
        h3ScientistPerson.className = "scientistPerson";
        h3ScientistPerson.innerText = gameScientists[i + (set * SCIENTISTS_PER_SET)].person;

        //IMG of scientist
        var imgScientist = document.createElement("img");
        imgScientist.id = "scientist" + (i + 1);
        imgScientist.className = "scientist";
        imgScientist.src = gameScientists[i + (set * SCIENTISTS_PER_SET)].scientist;

        //Additional property for scientistCheck
        imgScientist.count = i + 1; //used to retrieve other elements in the DIV

        imgScientist.addEventListener("click", scientistCheck, false);
        addClass(imgScientist, SCIENTISTSTATES.ACTIVE);
        addClass(h3ScientistPerson, SCIENTISTSTATES.ACTIVE);
        addClass(divGameItem, SCIENTISTSTATES.ACTIVE);

        divGameItem.appendChild(imgScientist);
        divGameItem.appendChild(h3ScientistPerson);
        scientistsPanel.appendChild(divGameItem);
    }

    //Pick the chosen scientist per set
    var pick = Math.floor(Math.random() * SCIENTISTS_PER_SET) + (set * SCIENTISTS_PER_SET);

    answer = gameScientists[pick];
    person.innerText = answer.person;

    //ANIMATE SCIENTISTS PANEL (SHOW)
    animatePanel(scientistsPanel);
}

function scientistCheck(e) {
    //Get a reference to the event source element
    var trigger = e.target;
    var count = trigger.count;
    var triggerDiv = document.getElementById("gameItem" + count);
    var triggerLbl = document.getElementById("scientistPerson" + count);

    removeClass(trigger, SCIENTISTSTATES.ACTIVE);
    removeClass(triggerLbl, SCIENTISTSTATES.ACTIVE);
    removeClass(triggerDiv, SCIENTISTSTATES.ACTIVE);


    //check if answer clicked is correct
    if (answer.person == triggerLbl.innerText) {
        //sound effect: right answer
        playSound(sndRightScientist);

        check.innerText = "CORRECT"; //for debugging
        addClass(trigger, SCIENTISTSTATES.CORRECT);
        addClass(triggerLbl, SCIENTISTSTATES.CORRECT);
        addClass(triggerDiv, SCIENTISTSTATES.CORRECT);
        score += points;
        scoreDisp.innerText = "Your score: " + score;
        set++;
        loadSet();
    } else {
        //sound effect: wrong scientist
        playSound(sndWrongScientist);
        points--;
        check.innerText = "Earn " + points + " points.";
        addClass(trigger, SCIENTISTSTATES.INCORRECT);
        addClass(triggerLbl, SCIENTISTSTATES.INCORRECT);
        addClass(triggerDiv, SCIENTISTSTATES.INCORRECT);
        trigger.removeEventListener("click", scientistCheck, false);
    }
}

Any help is truly appreciated! Thanks.

[AleMonteiro]

Where do you store the answers to each question?

In the example shown the citiesDB has only the questions and not the answers.

You could use something like:

var citiesDB = [
{ id: "1", question: "Capital city of America?", answer: "Einstein", options: [ 'Einstein', 'Option 2', 'Option 3...] },
{ id: "1", question: "Planck?", answer: "Planck", options: [ 'Option 1', 'Planck', 'Option 3...] },