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

How to put them all in the middle? How to make HTML automatically recognize whether the answer is right or wrong?

I want to move all four boxes and buttons to the middle to be centered.

I try to enter the correct answer, but when I submit, it shows that the verification fails, so I want to know how to let HTML automatically identify whether the answer is correct or wrong, and give different outputs.

This is the HTML code

<html>
  <head>
    <title>Verification Code</title>
     <link href='style.css' rel='stylesheet'>
    <script>
      // Generate a random linear equation in one variable
      function generateEquation() {
        var a = Math.floor(Math.random() * 10) + 1;
        var b = Math.floor(Math.random() * 10) + 1;
        var x = Math.floor(Math.random() * 10) + 1;
        var operator = Math.floor(Math.random() * 2);
        var equation = "";

        switch (operator) {
          case 0:
            equation = a + "x + " + b + " = " + (a*x+b);
            break;
          case 1:
            equation = a + "x - " + b + " = " + (a*x-b);
            break;
        }

        return equation;
      }

      // Check if the user's input is correct
      function checkAnswer() {
        var input1 = document.getElementById("input1").value;
        var input2 = document.getElementById("input2").value;
        var input3 = document.getElementById("input3").value;
        var input4 = document.getElementById("input4").value;
        var userInput = input1 + input2 + input3 + input4;
        var answer = equations[0] + equations[1] + equations[2] + equations[3];

        if (userInput === answer.toString()) {
          document.getElementById("result").innerHTML = "Verification succeeded!";
        } else {
          document.getElementById("result").innerHTML = "Verification failed. Please try again.";
        }
      }

      // Generate a new equation and display it on the screen
      function newEquation() {
        var equation = generateEquation();
        var answer = eval(equation.split('=')[1]);
        equations = answer.toString().split("");
        document.getElementById("equation").innerHTML = equation;
        document.getElementById("answer").innerHTML = answer;
        document.getElementById("input1").value = "";
        document.getElementById("input2").value = "";
        document.getElementById("input3").value = "";
        document.getElementById("input4").value = "";
        document.getElementById("result").innerHTML = "";
      }
    </script>
  </head>
  <body>
    <h1>Verification Code</h1>
    <p>Please solve the following equation:</p>
    <p id="equation"></p>
    <input type="text" id="input1" placeholder="X" size="2">
    <input type="text" id="input2" placeholder="X" size="2">
    <input type="text" id="input3" placeholder="X" size="2">
    <input type="text" id="input4" placeholder="X" size="2">
    <button onclick="checkAnswer()">Submit</button>
    <button onclick="newEquation()">New Equation</button>
    <p id="result"></p>
    <script>newEquation()</script>
  </body>
</html>

This is the CSS code

h1 {
  text-align: center;
}
p{
  text-align: center;
}
input {
  text-align: center;
}

button{
  text-align: center;
}
Tags:

2

Answers


  1. 0

    I made some changes to your code.

    Style fix using a div with a style to force middle centered.
    Im not sure about the 4 boxes, because your random generation only allow answers with range 1-10 then i only used 1one box. I made some variables global to allow easy check. I put style in the same html but you can easily move all that style stuff in your css file.

    <html>
  <head>
    <title>Verification Code</title>
     <link href='style.css' rel='stylesheet'>
    <script>

        var a = 0;
        var b = 0;
        var x = 0;
        var operator = 0;
        var answer = 0;

      // Generate a random linear equation in one variable
      function generateEquation() {
        a = Math.floor(Math.random() * 10) + 1;
        b = Math.floor(Math.random() * 10) + 1;
        x = Math.floor(Math.random() * 10) + 1;
        operator = Math.floor(Math.random() * 2);
        var equation = "";

        console.log("a: ", a);
        console.log("b: ", b);
        console.log("operator: ", operator);

        switch (operator) {
          case 0:
            equation = a + "x + " + b + " = " + (a*x+b);
            break;
          case 1:
            equation = a + "x - " + b + " = " + (a*x-b);
            break;
        }


        return equation;
      }

      // Check if the user's input is correct
      function checkAnswer() {
        var input1 = document.getElementById("input1").value;
/*         var input2 = document.getElementById("input2").value;
        var input3 = document.getElementById("input3").value;
        var input4 = document.getElementById("input4").value; */
        var userInput = input1;
        switch (operator) {
          case 0:
          answer = ((a*x+b) - b )/a;
            break;
          case 1:
          answer = ((a*x-b) + b )/a;
            break;
        }


        console.log("userInput: ", userInput)
        console.log("ANSWER: ", answer)

        if (userInput == answer) {
          document.getElementById("result").innerHTML = "Verification succeeded!";
        } else {
          document.getElementById("result").innerHTML = "Verification failed. Please try again.";
        }
      }

      // Generate a new equation and display it on the screen
      function newEquation() {
        var equation = generateEquation();
        var answer = eval(equation.split('=')[1]);
        equations = answer.toString().split("");
        document.getElementById("equation").innerHTML = equation;
        document.getElementById("answer").innerHTML = answer;
        document.getElementById("input1").value = "";
/*         document.getElementById("input2").value = "";
        document.getElementById("input3").value = "";
        document.getElementById("input4").value = ""; */
        document.getElementById("result").innerHTML = "";
      }
    </script>

    <style>
        h1 {
  text-align: center;
}
p{
  text-align: center;
}
input {
  text-align: center;
}

button{
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

    </style>
  </head>
  <body>
    <h1>Verification Code</h1>
    <p>Please solve the following equation:</p>
    <p id="equation"></p>
    <div class="container">
        <input type="text" id="input1" placeholder="X" size="5">
<!--         <input type="text" id="input2" placeholder="X" size="2">
        <input type="text" id="input3" placeholder="X" size="2">
        <input type="text" id="input4" placeholder="X" size="2"> -->
        <button onclick="checkAnswer()">Submit</button>
        <button onclick="newEquation()">New Equation</button>
    </div>

    <p id="result"></p>
    <script>newEquation()</script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    I added a refreshed equation and changed the language you used in your javascript.

    if (userInput == answer) {
    newEquation();
    document.getElementById("result").innerHTML = "Correct, just one more equation.";
    setTimeout(function(){document.getElementById("result").innerHTML = ""}, 4000)
}

    In the same way as Claudio I centred your elements with CSS.

    Below is an example
    https://codepen.io/QuiteQuinn/pen/QWVvgzz?editors=1010

    var a = 0;
var b = 0;
var x = 0;
var operator = 0;
var answer = 0;

// Generate a random linear equation in one variable
function generateEquation() {
  a = Math.floor(Math.random() * 10) + 1;
  b = Math.floor(Math.random() * 10) + 1;
  x = Math.floor(Math.random() * 10) + 1;
  operator = Math.floor(Math.random() * 2);
  var equation = "";

  console.log("a: ", a);
  console.log("b: ", b);
  console.log("operator: ", operator);

  switch (operator) {
    case 0:
      equation = a + "x + " + b + " = " + (a * x + b);
      break;
    case 1:
      equation = a + "x - " + b + " = " + (a * x - b);
      break;
  }

  return equation;
}

// Check if the user's input is correct
function checkAnswer() {
  var input1 = document.getElementById("input1").value;
  var userInput = input1;
  switch (operator) {
    case 0:
      answer = (a * x + b - b) / a;
      break;
    case 1:
      answer = (a * x - b + b) / a;
      break;
  }

  console.log("userInput: ", userInput);
  console.log("ANSWER: ", answer);

  if (userInput == answer) {
    newEquation();
    document.getElementById("result").innerHTML = "Correct, just one more equation.";
    setTimeout(function(){document.getElementById("result").innerHTML = ""}, 4000)
  } else {
    document.getElementById("result").innerHTML = "Verification failed. Please try again.";
  }
}

// Generate a new equation and display it on the screen
function newEquation() {
  var equation = generateEquation();
  equations = answer.toString().split("");
  document.getElementById("equation").innerHTML = equation;
  document.getElementById("input1").value = "";
  document.getElementById("result").innerHTML = "";
}
newEquation();
    h1 {
  text-align: center;
}
p {
  text-align: center;
}
input {
  text-align: center;
}

button {
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
    <h1>Verification Code</h1>
<p>Please solve the following equation:</p>
<p id="equation"></p>
<div class="container">
  <input type="text" id="input1" placeholder="X" size="5">
  <button onclick="checkAnswer()">Submit</button>
  <button onclick="newEquation()">New Equation</button>
</div>

<p id="result"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search