Js quiz creation help

JavaScript
1

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ninja Quiz</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

    <!-- top section -->
    <div class="intro py-3 bg-white text-center">
        <div class="container">
            <h2 class="text-primary display-3 my-4">Ninja Quiz</h2>
        </div>
    </div>

    <!-- quiz section -->
    <div class="quiz py-4 bg-primary">
        <div class="container">
            <h2 class="my-5 text-white">On with the questions...</h2>

            <form class="quiz-form text-light">
                <div class="my-5">
                    <p class="lead font-weight-normal">1. How do you give a ninja directions?</p>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q1" value="A" checked>
                        <label class="form-check-label">Show them a map</label>
                    </div>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q1" value="B">
                        <label class="form-check-label">Don't worry, the ninja will find you</label>
                    </div>
                </div>
                <div class="my-5">
                    <p class="lead font-weight-normal">2. If a ninja has 3 apples, then gives one to Mario & one to Yoshi, how many apples does the ninja have left?</p>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q2" value="A" checked>
                        <label class="form-check-label">1 apple</label>
                    </div>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q2" value="B">
                        <label class="form-check-label">3 apples, and two corpses</label>
                    </div>
                </div>
                <div class="my-5">
                    <p class="lead font-weight-normal">3. How do you know when you've met a ninja?</p>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q3" value="A" checked>
                        <label class="form-check-label">You'll recognize the outfit</label>
                    </div>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q3" value="B">
                        <label class="form-check-label">The grim reaper will tell you</label>
                    </div>
                </div>
                <div class="my-5">
                    <p class="lead font-weight-normal">4. What's a ninja's favourite array method?</p>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q4" value="A" checked>
                        <label class="form-check-label">forEach()</label>
                    </div>
                    <div class="form-check my-2 text-white-50">
                        <input type="radio" name="q4" value="B">
                        <label class="form-check-label">slice()</label>
                    </div>
                </div>
                <div class="text-center">
                    <input type="submit" class="btn btn-light">
                </div>
            </form>

        </div>
    </div>

    <script src="quiz.js"></script>
</body>
</html>

JS

form = document.querySelector('.quiz-form');
inputs = document.querySelectorAll("input[type=radio]");
console.log(inputs);

function checkAnswer() {
    let score = 0;
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].value === "B") {
            score += 25;
        }
        else {
            score += 0;
        }
        console.log(score);
    }
}

form.addEventListener('submit', checkAnswer());

I am trying to increment the score only if the user checks the second button , however its incrementing regardess. please help?

2

What you are doing here is going through all the inputs on the page and incrementing the score if the input’s value is “B” regardless of whether the input has been checked by the user. I think you only want to increment the score if the input’s value is “B” AND the input has been checked by the user, right?

3

  1. You have to use the function as a callback in the event listener. So no invocation () just checkAnswer.

  2. You have to use preventDefault inside the submit function to prevent the form from submitting (and refreshing the page).

function checkAnswer(event) {
  event.preventDefault();
  ...code
}
  1. As said, the value you have set on the input elements does not depend on which one was selected by the user. If you want to know which one is selected you can use the checked property (it will have a boolean value of true or false).
4

yesss thats what i wanna do

5

okay thanksss alottt!

6 
`form = document.querySelector('.quiz-form');
inputs = document.querySelectorAll("input[type=radio]:checked");
console.log(inputs);

function checkAnswer() {
    /*event.preventDefault();*/
    let score = 0;
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].value === "B") {
            
            score += 25;
        }
        
        console.log(score);
    }
    
}

form.addEventListener('submit', e => {
    e.preventDefault();

})

form.addEventListener('submit',checkAnswer(),false)`

I checkied the buttons but its still giving me o now not the right answer u know why

7

You’re close. First, you don’t need two event listeners for submit, so get rid of the first one. The second one is fine but as @lasjorg said above, no parens, just the function name (checkAnswer). The handler will automatically pass in the event to checkAnswer, so you need to add it as a parameter to the function and then you can call event.preventDefault() in the function.

One question for you. When do you think it would make sense to query for the checked inputs? Right now you are doing it once before the user has had a chance to select their answers. Don’t you think it might be a good idea to query after they have selected their answers and clicked the submit button?

8

yah but how would u do it after the button is clicked

9

The same way you check the score after the button is clicked, in the checkAnswer function.

11

i meant this

form = document.querySelector('.quiz-form');
inputs = document.querySelectorAll("input[type=radio]");


function checkAnswer() {
    /*event.preventDefault();*/

    let score = 0;
    for (let i = 0; i < inputs.length; i++) {
        if (inputs.checked == true) {
            if (inputs[i].value === "B") {
                score += 25;
            }

            
        }
        console.log(score);
    }
}

    form.addEventListener('submit', e => {
        e.preventDefault();
        checkAnswer

    })

what i an doing wrong not sure

12

So if you are going to do the event listener that way then you do need the parens after checkAnswer because now you are calling it as a function.

13

okay
its still not showing me score
do u know why?

14

I don’t know what you mean by that? Is it showing you a score, but not the score you want? Is it not showing you a score at all? You need to be very specific about what is not working.

Also, you haven’t implemented my suggestion about changing where you do the query for checked inputs. You will need to do that if you want to get the correct score.

15 
function checkAnswer() {
    /*event.preventDefault();*/

    let score = 0;
    for (let i = 0; i < inputs.length; i++) {
        if (inputs.checked == true) {      
            if (inputs[i].value === "B") {
                score += 25;
            }

            
        }
        
    }
    console.log(score);
}

    form.addEventListener('submit', e => {
        e.preventDefault();
        checkAnswer();

    })

i did check if the buttons were checked after my for statement
is that what u mean?
i want it to show score added of only the right answers not all

16

I GOT IT !
thank you soooo muchhhhh!!

17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.