javascript HTML5 JS Quiz help

[Thunderfist]

I'm trying to make a quiz that sends you to a different page based on your answers, and I was wondering if it's possible to use conditionals to decide which page you'll be sent to. Is it?

[Taz]

You could set window.location.href to the new page like this:

if (something) {
    window.location.href = "page1.html";
} 
else {
    window.location.href = "page2.html";
}

 

[Thunderfist]

Really? I didn't think of that. But I'm guessing that there's gonna be more to this if there's eighty results, ten questions with four choices, and one question asking if someone's male or female.

I made it so that each answer has a value from 1 to 4, except for the male or female one. I'm not sure how I'm gonna make this work properly. I've tried using a variable totalValue which is 0 until the Submit button is clicked.

I tested the code, and it didn't do anything really. Is there something wrong with this code?

var totalValue;
var submit;

if (submit.totalValue = 110) {
    window.location.href = "result1.html";
} else if (submit.totalValue = 210) {
    window.location.href = "result2.html";
} else if (submit.totalValue = 120) {
    window.location.href = "result3.html";
} else if (submit.totalValue = 220) {
    window.location.href = "result4.html";
} else if (submit.totalValue = 130) {
    window.location.href = "result5.html";
} else if (submit.totalValue = 230) {
    window.location.href = "result6.html";
} else if (submit.totalValue = 140) {
    window.location.href = "result7.html";
} else if (submit.totalValue = 240) {
    window.location.href = "result8.html";
} else if (submit.totalValue = 111) {
    window.location.href = "result9.html";
} else if (submit.totalValue = 211) {
    window.location.href = "result10.html";
} else if (submit.totalValue = 112) {
    window.location.href = "result11.html";
} else if (submit.totalValue = 212) {
    window.location.href = "result12.html";
} else if (submit.totalValue = 113) {
    window.location.href = "result13.html";
} else {
    window.location.href = "result14.html";
}

 

I'm not done just yet, but this is how far I got with coding.

 

[Taz]

There's a problem with your conditions. Change "=" to "===". Or use a switch statement since you're always comparing against the same value. Maybe not in this case so much, but sometimes you can name the page after the result (totalValue) and avoid the branching altogether.

Also, submit.totalValue will be undefined unless submit is assigned an object that has the property totalValue.

[Thunderfist]

Okay. I'll try it.

[Thunderfist]

18 hours ago, Jinz said:

submit.totalValue will be undefined unless submit is assigned an object that has the property totalValue.

I don't understand. Submit needs to be assigned an object with a property totalValue? what object?

 

Did I mess up with my code?

This code might be messed up but I used it multiple times with slight alterations.

<form>

<input type="radio" name="q1" value="1" >

<input type="radio" name="q2" value="2" >

<input type="radio" name="q3" value="3" >

<input type="radio" name="q1" value="4" >

</form>

[Taz]

The problem is that you declare the variables submit and totalValue, but don't initialize them and never assign them values. I would expect to see an error on the JavaScript console, something like "Can't access property totalVaue of undefined". It seems like your submit handler should sum the values of the chosen answers and then load the next page based on that sum, but I don't see you actually computing the sum, or even assigning values to your variables at all.

[Thunderfist]

So I forgot to compute the sum and assign values to the variables? Or is there more to this than that?

[Taz]

32 minutes ago, Thunderfist said:

So I forgot to compute the sum and assign values to the variables? Or is there more to this than that?

Just that you only need the one variable totalValue to store the sum. Then do (totalValue === 110) for example as the first if condition, or use switch (totalValue). FYI submit.totalValue won't work because that's the syntax for accessing the property totalValue of an object that's been assigned to the variable submit.

[Thunderfist]

Really? I changed the submit.totalValue to totalValue, and set the totalValue variable to store the sum, but my submit button in the HTML isn't working. 

here's the code for the submit button.

<input type="submit" onClick="totalValue" value="Submit">

 

--EDIT--

I was supposed to put the code for the submit button in the <form>, wasn't I?

--EDIT--

I got it working! kind of. It's not calculating the totalValue. Any idea why?

[Taz]

I think you need to manually get each value and add them all together. IDK how else you'd get the sum..

[Thunderfist]

Oh. Okay. I'll try that.

--EDIT--

I'm trying to manually get the values and add them, but I don't understand. I found that I went and set the values of each input was made as a string. I fixed that, but I still can't make it add the values. 

[Taz]

Even without the quotes the values will still be strings. You can convert a string named string to a number like this for example: var number = Number(string);

Here's a little demo that shows one way to use a for loop to get the values and add them:

<!DOCTYPE html>
<html>
<body>

<script>
   function formHandler() {
      var NUM_QUESTIONS = 2;
      var totalValue = 0;

      for (var i = 0; i < NUM_QUESTIONS; ++i) {
         var value = document.querySelector('input[name = "q' + i +'"]:checked').value;
         totalValue += Number(value);
      }
      
      console.log(totalValue);
   }
</script>

<form>
  Do you like hiking? <br>
  <input type="radio" name="q0" value="1"> No <br>
  <input type="radio" name="q0" value="2"> Sorta <br>
  <input type="radio" name="q0" value="3"> Yes <br>
  <input type="radio" name="q0" value="4"> Love it <br>
  <br>
  Do you like jogging? <br>
  <input type="radio" name="q1" value="1"> No <br>
  <input type="radio" name="q1" value="2"> Sorta <br>
  <input type="radio" name="q1" value="3"> Yes <br>
  <input type="radio" name="q1" value="4"> Love it <br>
  <br>
  <input type="button" onclick="formHandler()" value="Submit">
</form> 

</body>
</html>

 

[Thunderfist]

Okay. so I should use a function formHandler in the HTML code to make it give me the totalValue, and it can then go into the result page, right? or am I wrong and have to fix my .js file to get it to work with it?

--EDIT--

It's giving me an error in the console:

Uncaught TypeError: Cannot read property 'value' of null
    at formHandler (index.html:15)
    at HTMLInputElement.onclick (index.html:110)

 

Edited June 2, 2017 by Thunderfist

[Taz]

Your form handling function can still be in a JavaScript file instead of the HTML file, just make sure its script tag is before the form tag. Yeah then after the for loop computes the sum, you can use totalValue in your if/else conditions to decide which page to load.

[Thunderfist]

Just now, Jinz said:

Your form handling function can still be in a JavaScript file instead of the HTML file, just make sure its script tag is before the form tag. Yeah then after the for loop computes the sum, you can use totalValue in your if/else conditions to decide which page to load.

Really? Okay, I'll try that. 

[Thunderfist]

I just put the code into my .js, and i'm getting a message saying:

Move 'var' declarations to the top of the function.   for(var i = 0; i < NUM_QUESTIONS; ++i){

After that it just stops checking the rest of the code. Any idea why?

[Taz]

Sounds like a stupid tool   For loops like above are widely used and supported. I recommend that you change your tool's settings to not worry about moving variable declarations to the top of the function. You can move it to the top like in this code example, but that's a style convention IMO not a requirement.

function formHandler() {
    var NUM_QUESTIONS = 2;
    var totalValue = 0;
    var i = 0;

    for (; i < NUM_QUESTIONS; ++i) {
        var value = document.querySelector('input[name = "q' + i +'"]:checked').value;
        totalValue += Number(value);
    }
}

 

[Thunderfist]

I just tried that, and It's giving me even more problems. Maybe I should just use it in the HTML.

[Taz]

Yeah maybe try in the HTML and see if that's working.

P.S. - I just tried as two files and didn't work - that was surprising - I'm not sure how to have the button click handler in separate file then.

[Thunderfist]

Okay. i think I'm starting to get frustrated. I've only got until Tuesday to finish this and I just can't get it to work properly! No matter what I've tried, It just won't send me to a result page when I hit submit!

P.S. - I tried in the HTML first. It kept saying it couldn't read the property 'value' of null.

[Taz]

Here's a little example to build on - I just tested it myself:)  Hmm, I'm still not sure about putting the button's onclick handler in js file though - that's a mystsery to me too

index.html

<!DOCTYPE html>
<html>
<body>

<script>
    function formHandler() {
        var NUM_QUESTIONS = 2;
        var totalValue = 0;

        for (var i = 0; i < NUM_QUESTIONS; ++i) {
            var value = document.querySelector('input[name = "q' + i +'"]:checked').value;
            totalValue += Number(value);
        }

        if (totalValue < 5) {
            window.location.href = "result1.html";
        }
        else {
            window.location.href = "result2.html";
        }
    }
</script>

<form>
    Do you like hiking? <br>
    <input type="radio" name="q0" value="1"> No <br>
    <input type="radio" name="q0" value="2"> Sorta <br>
    <input type="radio" name="q0" value="3"> Yes <br>
    <input type="radio" name="q0" value="4"> Love it <br>
    <br>
    Do you like jogging? <br>
    <input type="radio" name="q1" value="1"> No <br>
    <input type="radio" name="q1" value="2"> Sorta <br>
    <input type="radio" name="q1" value="3"> Yes <br>
    <input type="radio" name="q1" value="4"> Love it <br>
    <br>
    <input type="button" onclick="formHandler()" value="Submit">
</form>

</body>
</html>

 

result1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Result 1</title>
</head>
<body>
RESULT 1 PAGE
</body>
</html>

 

result2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Result 2</title>
</head>
<body>
RESULT 2 PAGE
</body>
</html>

 

[Taz]

14 minutes ago, Thunderfist said:

P.S. - I tried in the HTML first. It kept saying it couldn't read the property 'value' of null.

If still getting this error I can try to help squash it, but would need more code/info

[Thunderfist]

Just now, Jinz said:

If still getting this error I can try to help squash it, but would need more code/info

It's the var value = document.querySelector('input[name = "q' + i +'"]:checked').value; that's giving me the problem, and I just don't understand why it's not working properly.

[Taz]

That for loop is designed to work with my form, as an example. It will only work if the questions that you want summed are named "q0", "q1", "q2", "q3" and so on and also NUM_QUESTIONS must be intialized to the number of questions that are being summed.

Here's how to get the value w/out the for loop if that helps:

var value = document.querySelector('input[name = "theNameOfTheInput"]:checked').value;