Recommended Posts

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?

Share this post


Link to post
Share on other sites

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";
}

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 by Thunderfist

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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);
    }
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.