, it works for the first " /> , it works for the first " /> , it works for the first "/>

TechQA.

Cant Check Through All the Input Text Boxes for answers

58 views Asked by At

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.

javascript html event-handling dom-events event-delegation
Original Q&A
2

There are 2 answers

1
Charu Patel On

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";
        }
    });
0
Peter Seliger On

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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in EVENT-HANDLING

Related Questions in DOM-EVENTS

Related Questions in EVENT-DELEGATION

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions