JavaScript Quiz Validating with onClick Function?

Question

I am trying to create a JavaScript Quiz. The function will check the user's input value. If it is correct; it will change the question.

Exact Code See JSFiddle

There are probably many more efficient and conventional ways to achieve what I am trying to do. Current issue is the function runs from the top every time it runs(obviously)

function checkAnswer() {

  var question = document.getElementById("ques").innerHTML;

  var userAnswer = document.getElementById("answer").value;

  if (userAnswer === "New York City") {

    alert("correct!");
    question = "What is the best college football team?";

    if (userAnswer === "Alabama") {
      alert("Correct!");
      question = "Next question will go here and so on..."

    }
  }
}

Are there multiple questions on the page you need to validate? — David P
– David P, Commented Sep 23, 2015 at 17:24

001 · Accepted Answer · 2015-09-23 18:13:55Z

1

In no way would I suggest doing things this way, but here's how to get your jsfiddle to work:

function check() {
    var question = document.getElementById('question').innerHTML
    var userAnswer = document.getElementById("answer").value;

    //Makes answer lowercase
    userAnswer = userAnswer.toLowerCase();

    //question one
    if (question === "Write One, Two, Three..") {
        if (userAnswer === "one two three") {
            alert('correct');
        }
        else {
            alert('Sorry Wrong!');
        }

        //question two  
        document.getElementById('question').innerHTML = "Write 4, 5, 6";
    }
    else {
        if (userAnswer === "4 5 6") {
            alert("correct!");
        }
        else {
            alert('Sorry Wrong!');
        }   
    }
}

One simple way to do what you want is to put your questions in an array:

var QandA = [
    ["question1...", "answer1...."],
    ["question2...", "answer2...."],
    ["question3...", "answer3...."],
    ["question4...", "answer4...."]
];

function check()
{
    // No more questions?
    if (0 === QandA.length) return;

    // Check answer
    var userAnswer = document.getElementById("answer").value.toLowerCase();
    if (userAnswer === QandA[0][1]) {
        alert("Correct");
    }
    else {
        alert("Incorrect");
    }
    // Delete that question
    QandA.shift();
    // And move to next
    if (0 != QandA.length) {
        document.getElementById('question').innerHTML = QandA[0][0];
    }
}

edited Sep 23, 2015 at 18:13

answered Sep 23, 2015 at 17:40

001

13.6k5 gold badges38 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike Over a year ago

Thanks, this worked for me. But, now I am curious. How would you approach this? And, why is it that for the first question you grab "QandA [0] [1 ]" but for the second you call for the first item twice ( QandA [0] [0] )

001 Over a year ago

The biggest problem you have is that the user can view the source of the webpage and see all the answers. I would probably use Ajax to get the questions and answers from a server.

001 Over a year ago

QandA is a 2-dimensional array. So, QandA[n][0] is the question for any given n (index) and QandA[n][1] is the answer for any given n. An array of objects probably would have been better.

Mike Over a year ago

actually Johnny - I just figured it out. It is actually a quite genius solution if you really had to code it within one function like I did.

Andy · Accepted Answer · 2015-09-23 17:40:21Z

If you have a number of questions that you need validating I would take the following approach. It allows you as many questions as you like without repeating code.

First, store your questions in an array:

var arr = ["one two three", "4 5 6"];

Set a counter to zero, and a total (to measure the user performance):

var count = 0;
var total = 0;

Cache the elements:

var questionEl = document.getElementById('question');
var userAnswerEl = document.getElementById("answer");

Separate out the code that writes the question into a new function. It writes the question based on the counter:

function writeQuestion() {
    if (count < arr.length) {
      questionEl.innerHTML = "Write " + arr[count];
    } else {
      alert('No more questions. You have scored ' + total);
    }
}

function check() {
    userAnswer = userAnswerEl.value.toLowerCase();   
    if (userAnswer === arr[count]) {
        alert('correct');
        count++;
        total++;
        writeQuestion();
    } else {
        alert('Sorry Wrong!');
        count++;
        writeQuestion();
    }
}

DEMO

Dan Lowe · Accepted Answer · 2015-09-23 17:35:22Z

if (userAnswer === "New York City") {

  alert("correct!");
  question = "What is the best college football team?";

  if (userAnswer === "Alabama") {
    alert("Correct!");
    question = "Next question will go here and so on..."

  }
}

This block only runs if userAnswer is "New York City", but inside it, you test whether userAnswer is "Alabama" - that will never be true. You probably want to move the second if outside of the first if block.

You seem to be assigning to question but not using the value. If you think you are updating the question text by assigning a value to question that isn't going to work. I think you are trying to do this:

question = document.getElementById("ques");

// later on...
question.innerHTML = "this is another question";

// even later...
question.innerHTML = "and here is a new question";

That would update the page for you because question would point to a DOM node and you can set .innerHTML on that, but the way you wrote it, you're setting question to a string value initially, and then other string values later, but not using any of them in anyway.

Collectives™ on Stack Overflow

JavaScript Quiz Validating with onClick Function?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related