Html - Cant Check Through All the Input Text Boxes for answers

Benxsu
August 25, 2023
371 views
1 vote
2 Answers

I’m not sure how to go about this to try and check the user input to the answers. I have the answers set in the <input id="">, it works for the first question but doesn’t work for the latter ones. I do plan on adding more questions to this. As you can tell I am very new to this so any help is appreciated.

/* First CSS file */
.header {
  padding: 50px;
  text-align: center;
  background: #20b2aa;
  color: white;
  font-size: 30px;
}

h1 {
  padding-top: 20px;
  font-size: 50px;
  font-family: 'Marker Felt', fantasy;
  text-align: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.section {
  padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
  background-color: #f5f5f5;
  transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

.imgContainer {
  text-align: center;
}

.imgButton {
  padding: 20px;
  text-align: center;
}

.bg-green {
  background-color: green;
}

.bg-red {
  background-color: red;
}

/* Second CSS file */
.header {
    padding: 50px;
    text-align: center;
    background: #c3b091;
    color: white;
    font-size: 30px;

}

.japanheader {
    padding: 70px;
    text-align: center;
    background: #BC212E;
    color: white;
    font-size: 30px;

}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 50px;
}

h2 {
    padding-top: 20px;
    font-size: 20px;
    text-align: left;
}

toptext {
    font-size: 70px;
    height: 600;
    width: 900;
}

.gameHeader {
    background: #808080;
    padding: 70px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-family: 'OCR A Std', monospace
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <link href="flagStyles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Games Quiz</title>
        <script>

            window.addEventListener('DOMContentLoaded', function() {
                document.querySelector('#Check').addEventListener('click', function(){
                    let input = document.querySelector('input');
                    if (input.value == input.id){
                        input.style.backgroundColor = 'green';
                        document.querySelector('#feedback2').innerHTML = 'Correct';
                    }else{
                        input.style.backgroundColor = 'red';
                        document.querySelector('#feedback2') = 'Incorrect';
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="gameHeader">
            <h1>Video Games Quiz!</h1>
        </div>

        <div class="container">
            <h2 style="font-size: 30px;">Welcome to the Video Game Quiz!</h2>
            <hr>
        <div class="section">
            <h3>What is the highest rated game on Steam?</h3>
            <p style="font-size: 20px;">1.</p>
            <div class="imgContainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/2048px-Steam_icon_logo.svg.png" width="40%" style="border: 2px solid #555;">
            </div>
            <div>
                <input id="Portal 2" type="text">
                <button id="Check">Submit</button>
                <p id="feedback2"></p>
            </div>
        </div>
            <div class="section">
            <h3>What is the highest rated game on Blizzard?</h3>
            <p style="font-size: 20px;">1.</p>
            <div class="imgContainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Blizzard_Entertainment_Logo_2015.svg/1200px-Blizzard_Entertainment_Logo_2015.svg.png" width="40%" style="border: 2px solid #555;">
            </div>
            <div>
                <input id="World of Warcraft" type="text">
                <button id="Check">Submit</button>
                <p id="feedback2"></p>
            </div>
        </div>
            <div>
                <ul>
                    <li><a href="https://benasurba-turbo-space-fiesta-5gq465wp6jq6fv555-8080.app.github.dev/japanese.html">Japanese Journey</a></li>

                    <li><a href="https://benasurba-turbo-space-fiesta-5gq465wp6jq6fv555-8080.app.github.dev/flagsquiz.html">Flags Quiz</a></li>
                </ul>
            </div>
        </div>
    </body>

</html>

These css files i also use for other html’s hence why only some tags are used.

Answers

You can make a form and for each question ,use label instead of h1
like this:
HTML

<div class="section">
    <form id="gameForm">
        <label for="gameAnswer">What is the highest rated game on Steam?</label>
        <input id="gameAnswer" type="text" placeholder="Your answer">
        <button id="checkButton" type="button">Submit</button>
        <p id="feedbackMessage"></p>
    </form>
</div>

JAVASCRIPT:

const correctAnswer = "Portal 2"; // Replace this with the actual correct answer

    const checkButton = document.getElementById("checkButton");
    const gameAnswerInput = document.getElementById("gameAnswer");
    const feedbackMessage = document.getElementById("feedbackMessage");

    checkButton.addEventListener("click", () => {
        const userAnswer = gameAnswerInput.value.trim();
        if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
            feedbackMessage.textContent = "Correct! Portal 2 is the highest rated game on Steam.";
            feedbackMessage.style.color = "green";
        } else {
            feedbackMessage.textContent = "Incorrect answer. Try again.";
            feedbackMessage.style.color = "red";
        }
    });

Like with or for the OP’s previous question … "How to properly check if the button pressed is correct in multiple choice quiz HTML/CSS/JavaScript" … the answer is event-delegation.

In addition the OP should start thinking about and also provide the markup as component like structures which can be re-used (thus, the scripting never ever relies on id attributes) and …

which should be written in a more semantic markup (which the next provided example code does not do either)
which should make more use of data-* global attributes and its element node’s counterpart, the dataset property

function unifyAnswerValue(value) {
  // - be more forgiving when going to compare
  //   the answer preset against the provided answer.
  return String(value)
    .toLowerCase()
    .trim()
    .replace(/s+/g, ' ');    
}
function handleSubmitedAnswer(evt) {
  // - prevent the form's submit.
  evt.preventDefault();

  const elmForm = evt.target;
  const elmSubmit = elmForm.querySelector('[type="submit"]');

  const elmInput = elmForm.querySelector('input[type="text"]');
  const elmOutput = elmForm.querySelector('output[data-valid-answer-feedback]');

  const { answer } = elmForm.dataset;
  const { validAnswerFeedback, invalidAnswerFeedback } = elmOutput.dataset;

  const isCorrectlyAnswered = (
    unifyAnswerValue(elmInput.value) === unifyAnswerValue(answer)
  );
  elmOutput.value = isCorrectlyAnswered
    && validAnswerFeedback
    || invalidAnswerFeedback;

  elmInput.classList.toggle('valid', isCorrectlyAnswered);
  elmInput.classList.toggle('invalid', !isCorrectlyAnswered);

  if (isCorrectlyAnswered) {
    elmInput.value = answer;
  }
  elmInput.disabled = true;
  elmSubmit.disabled = true;
}

document
  .body
  .addEventListener('submit', handleSubmitedAnswer)

form[data-answer] input[type="text"].valid { background-color: green; }
form[data-answer] input[type="text"].invalid { background-color: red; }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="gameHeader">
  <h1>Video Games Quiz!</h1>
</div>

<div class="container">
  <h2 style="font-size: 30px;">Welcome to the Video Game Quiz!</h2>
  <hr>

  <div class="section">
    <h3>What is the highest rated game on Steam?</h3>
    <p style="font-size: 20px;">1.</p>
    <div class="imgContainer">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/2048px-Steam_icon_logo.svg.png" width="40%" style="border: 2px solid #555;">
    </div>
    <form data-answer="Portal 2">
      <input type="text"/>
      <button type="submit">Submit</button>
      <output
              class="feedback"
              data-valid-answer-feedback="Correct"
              data-invalid-answer-feedback="Incorrect"></output>
    </form>
  </div>

  <div class="section">
    <h3>What is the highest rated game on Blizzard?</h3>
    <p style="font-size: 20px;">1.</p>
    <div class="imgContainer">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Blizzard_Entertainment_Logo_2015.svg/1200px-Blizzard_Entertainment_Logo_2015.svg.png" width="40%" style="border: 2px solid #555;">
    </div>
    <form data-answer="World of Warcraft">
      <input type="text" />
      <button type="submit">Submit</button>
      <output
              class="feedback"
              data-valid-answer-feedback="Correct"
              data-invalid-answer-feedback="Incorrect"></output>
    </form>
  </div>

  <div>
    <ul>
      <li><a href="https://benasurba-turbo-space-fiesta-5gq465wp6jq6fv555-8080.app.github.dev/japanese.html">Japanese Journey</a></li>
      <li><a href="https://benasurba-turbo-space-fiesta-5gq465wp6jq6fv555-8080.app.github.dev/flagsquiz.html">Flags Quiz</a></li>
    </ul>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Cant Check Through All the Input Text Boxes for answers

Answers