Quiz project trouble

Creating a new project for my portfolio. It is a quiz that in theory would ask the user a certain amount of questions, then print the amount of questions they got right using the alert() method. the question answers are radio buttons (value=a is right and value=b is wrong ) and at the bottom there is submit button. The problem I’m having is that when i click the submit button nothing happens. How can I fix this?

html

<!DOCTYPE html>


<html>

<head>
<title>quiz</title>
</head>

<body>

<form class="quiz" action="index.html" method="post">


<h4>1. How many states are in the U.S.?</h4>
<input type="radio" name="q1" value="b" class= "wrong">48<br>
<input type="radio" name="q1" value="a" class="right">50<br>


<h4>2. How many wheels are in a car?</h4>
<input type="radio" name="q2" value="a" class= "right">4<br>
<input type="radio" name="q2" value="b" class="wrong">5<br>


<h4>3. What is the capital of the U.S.?</h4>
<input type="radio" name="q3" value="a" class= "right">Washington<br>
<input type="radio" name="q3" value="b" class="wrong">New York<br>


<h4>4. how many hours in a day?</h4>
<input type="radio" name="q4" value="b" class= "wrong">12<br>
<input type="radio" name="q4" value="a" class="right">24<br>


<h4>5. what does HTML stand for?</h4>
<input type="radio" name="q5" value="a" class= "right">Hyper Text Markup Language<br>
<input type="radio" name="q5" value="b" class="wrong">Hyper Test Marker Language<br>


<h4>6. How many paws does a dog have?</h4>
<input type="radio" name="q6" value="a" class= "right">4<br>
<input type="radio" name="q6" value="b" class="wrong">3<br>

<input type="button" name="submit" value="submit test" class="submit">
</form>




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

JavaScript

var correctAnswers = 0;


var submitTest = document.querySelector('input.submit')

submitTest.addEventListener('Click' , () => {

  var q1 = document.quiz.q1.value;
  var q2 = document.quiz.q2.value;
  var q3 = document.quiz.q3.value;
  var q4 = document.quiz.q4.value;
  var q5 = document.quiz.q5.value;
  var q6 = document.quiz.q6.value;

  if (q1 === a) {correctAnswers ++}

  if (q2 === a) {correctAnswers ++}

  if (q3 === a) {correctAnswers ++}

  if (q4 === a) {correctAnswers ++}

  if (q5 === a) {correctAnswers ++}

  if (q6 === a) {correctAnswers ++}

alert('you got' + correctAnswers + 'Question(s) right on the quiz.');

})


prompt('Javascript is linked correctly');
1 Like

Hi @paine8887

I’ve taken a look at the JS you’ve written. There were a couple of things I had to change to get it to work.

  1. document.quiz.q1.value doesn’t work. If I run your code as-is, I get an error that document.quiz is undefined.

  2. In your if statements, you’re using an undefined variable a on the RHS of your identity operator. If the code ever got this far, it would error and fail here (ReferenceError).

I’ve made some changes to your code, and it now works as I think you wanted. What I’ve changed is:

  • The variables to hold the quizzer’s answers now use querySelector. If the quizzer answered the question, then the variable - e.g. q1 - will be assigned the element corresponding to their chosen radio button. If they didn’t make a selection, it’s null.

  • As the variables hold the element the quizzer chose, we can verify that they both answered the question and got the answer right. I’ve adjusted your if statements to do this. (If we were just doing something like var q1 = document.querySelector('input[name="q1"]'), we’d get the first element that matched the query and we’d be able to score 4/6 on your quiz without doing anything except hitting the “submit test” button.)

  • The if statements I’ve changed to use the equality operator (rather than the identity operator) and corrected the RHS operand so it’s no longer an undeclared variable.

  • Also, I’ve split the declaration of correctAnswers and it’s initial assignment to 0 on to two lines. This variable now gets reset to 0 every time the quizzer clicks “submit test”, so that they can’t keep clicking and rack up an impressive score of 60/6 correct. :slight_smile:

var correctAnswers;

var submitTest = document.querySelector('input.submit');

submitTest.addEventListener("click", () => {
    correctAnswers = 0;

    var q1 = document.querySelector('input[name="q1"]:checked');
    var q2 = document.querySelector('input[name="q2"]:checked');
    var q3 = document.querySelector('input[name="q3"]:checked');
    var q4 = document.querySelector('input[name="q4"]:checked');
    var q5 = document.querySelector('input[name="q5"]:checked');
    var q6 = document.querySelector('input[name="q6"]:checked');

    if (q1 && q1.value == "a") {correctAnswers ++}

    if (q2 && q2.value == "a") {correctAnswers ++}
  
    if (q3 && q3.value == "a") {correctAnswers ++}
  
    if (q4 && q4.value == "a") {correctAnswers ++}
  
    if (q5 && q5.value == "a") {correctAnswers ++}
  
    if (q6 && q6.value == "a") {correctAnswers ++}

    alert('you got' + correctAnswers + 'Question(s) right on the quiz.');
});

alert('Javascript is linked correctly');

That works OK for me if I run it on my machine. Hope that helps. :slight_smile:

1 Like