Question 173908 in Html Question posted in
Some basic documentation can be found here.

Html – What is wrong with my program? When I click on a button it works, but it always says, “Incorrect answer!”

Python Quiz

Test your knowledge of Python with this quiz!

<script src="https://pytutorials.github.io/quiz.js"></script>
<h1>Python Quiz</h1>
<p>Test your knowledge of Python with this quiz!</p>
<div class="container">
    <div class="question-form">
        <h1>Question 1:</h1>
        <p>What is the output of this code?</p>
        <p>print(2+2+2)</p>
        <form id="answer" value="">
            <input type="checkbox" value="1">8</input>
                <input type="checkbox" value="2">4</input>
                    <input type="checkbox" value="3">2</input>
                        <input type="checkbox" value="4">6</input>  
                        <button id="submit" onclick="check_answer()">Submit Answer (this button may not work yet :)</button>
        </form>
         </div>
</div>

type here

function check_answer(){
  var ans = document.getElementById("answer");
  if(ans.value != 4){
    var h1 = document.createElement("h1");
    h1.innerText = "Try Again!";
    document.body.appendChild(h1);
  }
  if(ans.value == 4){
    var h1 = document.createElement("h1");
    h1.innerText = "Correct!";
    document.body.appendChild(h1);
  }  
}

  1. This html code is used to create the form, etc.
    The result is a form with 4 check boxes that say, “8”, “4”, “2”, “6”. Then there is a button that says, “submit answer” overall this is just the first question.
    The JavaScript code checks if the user has clicked the right answer and that is it.

  5. Thanks for the help!

Tags:

3

Answers


  1. 0

    the ans.value is undefined this is why you see "Try again" every time.

    This code works (you have to add a checkbox class to your checkboxes input):

    function check_answer() {

var checkedValue = document.querySelector('.checkbox:checked') !== null ? document.querySelector('.checkbox:checked').value : alert('select an answer');
console.log(checkedValue);
if(checkedValue != 4){
  var h1 = document.createElement("h1");
  h1.innerText = "Try Again!";
  document.body.appendChild(h1);
}
if(checkedValue == 4){
  var h1 = document.createElement("h1");
  h1.innerText = "Correct!";
  document.body.appendChild(h1);
}

    }

    But careful, in this situation, you have to use a radio buttons and not checkboxes because there is only one correct answer.

    Login or Signup to reply.
  2. 0
    1. Form have no value attribute so i changed your code so that you get only the checked checkbox and then check if correct
    2. inputs don’t have </input> closing tags so I removed that as well from your HTML
    3. Changed the form for a div (just to avoid that annoying redirect so you can see in your screen the correct or try again message)
    4. You were not comparing the value of the selected checkbox with your conditions, you were trying to compare the value of the form(which doesn’t have that attribute)
    5. You should use an input type radio instead of checkboxes to avoid having the user select multiple checkboxes at the same time.
    6. Instead of creating a new element every single time you press the button you should just use one <h1> and change the textContent of that element, depending on selection, clear that element with each button press before assigning it a new content
    function check_answer() {
    let ans = document.querySelector('input[name=radio]:checked');
  let h1 = document.querySelector("#h1");
  h1.innerText = "";
  
  if (ans.value != 4) {
    h1.innerText = "Try Again!";
  }
  if (ans.value == 4) {
    h1.innerText = "Correct!";
  }
}
    <script src="https://pytutorials.github.io/quiz.js"></script>
<h1>Python Quiz</h1>
<p>Test your knowledge of Python with this quiz!</p>
<div class="container">
  <div class="question-form">
    <h1>Question 1:</h1>
    <p>What is the output of this code?</p>
    <p>print(2+2+2)</p>
    <div id="form">
      <input type="radio" name="radio" value="1">8
      <input type="radio" name="radio" value="2">4
      <input type="radio" name="radio" value="3">2
      <input type="radio" name="radio" value="4">6
      <button id="submit" onclick="check_answer()">Submit Answer (this button may not work yet :)</button>
    </div>
  </div>
  <h1 id="h1"></h1>
</div>
    Login or Signup to reply.
  3. 0

    In this case it is better to use radio buttons. Skip all the IDs and just refer to the form using the name (and the same goes for input elements).

    document.forms.questions.addEventListener('submit', e => {
  e.preventDefault();
  var h1 = document.createElement("h1");
  h1.innerText = (e.target.q01.value == 4) ? "Correct!" : "Try Again!";
  document.body.appendChild(h1);
});
    <h1>Python Quiz</h1>
<p>Test your knowledge of Python with this quiz!</p>
<div class="container">
  <div class="question-form">
    <h1>Question 1:</h1>
    <p>What is the output of this code?</p>
    <p>print(2+2+2)</p>
    <form name="questions">
      <label><input type="radio" name="q01" value="1">8</label>
      <label><input type="radio" name="q01" value="2">4</label>
      <label><input type="radio" name="q01" value="3">2</label>
      <label><input type="radio" name="q01" value="4">6</label>
      <button>Submit Answer (this button may not work yet :)</button>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search