Looping through array using a button

StackOverflow https://stackoverflow.com/questions/19602292

Question

Ok, in essence I want to create a short quiz that has a next and previous button. I want to loop through two arrays, questions and choices, and have a score at the end. I have read chapters on the DOM and Events and it is just not clicking apparently.

Really I need a little bit of code that shows a concrete example of how to manipulate the DOM. What I have so far are only the arrays, and a function declaring that x is in fact getting my element by id. haha.

Sorry I don't have more code to give. I tried to attach the id to a paragraph, and then get it by it's id and document.write the array, but that replaces the button. If you run the code below you'll see what I'm saying. 

<!DOCTYPE html>
<html>
<head>
    <title>Bom</title>
</head>
<body>
    <input type="button" value="Iterate" id="myButton" onclick="iter_onclick()">
    <p id="qArray">Some Text</p>

    <script>
        var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

        var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]];

        function iter_onclick () {
            var x = document.getElementById("qArray");
            document.write("Hello World");
        }        
     </script>
</body>
</html>`

Like I said, this is my first attempt at truly manipulating the DOM, and I know what I want to do. I just don't know how to do it. I am understanding all the syntax and events and objects and such. But, I'm not really sure how to apply it. Also, no Jquery. I want to know how to create applications with Javascript and then work my way into Jquery. Thanks people.

Était-ce utile?

La solution

This will loop through your questions, hope this helps you to proceed. 

var qArray = ["Who is my dog?", 
       "who is the prez?", 
       "Who is my girlfriend?", 
       "Who am I?"];

var cArray = [
    ["Bill", "Billy", "Arnold", "Tyler"],
    ["Oz", " Buffon", "Tupac", "Amy"],
    ["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"],
    ["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"]
];

var index = 0;

function iter_onclick() {
    //if this is the last question hide and displays quiz ends            
    if (index >= qArray.length) {
        document.getElementById('qArray').innerHTML = '<div>Quiz End, Thank you</div>'
        document.getElementById('myButton').style.visibility = 'hidden ';
        return false;
    }

    var html = ' <div> ' + qArray[index] + ' </div> <div>';
    for (var i = 0; i < cArray[index].length; i++) {
        html += '<label><input type="radio" name="ans" value="' 
             + cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>';
    }
    html += '</div > ';
    document.getElementById('qArray').innerHTML = html;

    index++;
}

Autres conseils

Here's a very basic example you can work from. This modifies the existing DOM items. You cannot use document.write() on a document that is already loaded or it will clear everything you have and start over and it's not the most efficient way to put content into the DOM.

This example has a number of fields on the page, it loads a question and then checks the answer when you press the next button.

HTML:

<div id="question"></div>
<input id="answer" type="text"><br><br>
<button id="next">Next</button>  <br><br><br>
Number Correct So Far: <span id="numCorrect">0</span>

Javascript (in script tag):

var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]];

var questionNum = -1;
var numCorrect = 0;

function loadQuestion() {
    ++questionNum;
    if (questionNum >= qArray.length) {
        alert("all questions are done");
    } else {
        document.getElementById("question").innerHTML = qArray[questionNum];
        document.getElementById("answer").value = "";
    }
}

loadQuestion();

function checkAnswer() {
    var answer = document.getElementById("answer").value.toLowerCase();
    var allowedAnswers = cArray[questionNum];
    for (var i = 0; i < allowedAnswers.length; i++) {
        if (allowedAnswers[i].toLowerCase() == answer) {
            return true;
        }
    }
    return false;
}

document.getElementById("next").addEventListener("click", function(e) {
    if (checkAnswer()) {
        ++numCorrect;
        document.getElementById("numCorrect").innerHTML = numCorrect;
        loadQuestion();
    } else {
        alert("Answer is not correct");
    }
});

Working demo: http://jsfiddle.net/jfriend00/gX2Rm/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top