How to add a pop up message to quiz web app

Question

How do I add a message that says "CORRECT" or "INCORRECT" DEPENDING on the answer chosen. I want it to pop up only when an option is clicked like thisexample appearing at the bottom of the options.

const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));

let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];


let questions = [{
    question: "Commonly used data types DO NOT include:",
    choice1: "1. strings",
    choice2: "2. booleans",
    choice3: "3. alerts",
    choice4: "4. numbers",
    answer: 3
  },
  {
    question: "Arrays in JavaScript can be used to store ______.",
    choice1: "1. numbers and strings",
    choice2: "2. other arrays",
    choice3: "3. booleans",
    choice4: "4. all of the above",

    answer: 4
  },
  {
    question: "String values must be enclosed within _____ when being assigned to variables.",
    choice1: "1. commas",
    choice2: "2. curly brackets",
    choice3: "3. quotes",
    choice4: "4. parentheses",
    answer: 3,
  },
  {
    question: "A very useful tool used during development and debugging for printing content to the debugger is:",
    choice1: "1. JavaScript",
    choice2: "2. terminal/bash",
    choice3: "3. for loops",
    choice4: "4. console.log",
    answer: 4
  },
  {
    question: "Which of the following is a statement that can be used to terminate a loop, switch or label statement?",
    choice1: "1. break",
    choice2: "2. stop",
    choice3: "3. halt",
    choice4: "4. exit",
    answer: 1
  },
];

const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 5;

startGame = () => {
  questionCounter = 0;
  score = 0;
  availableQuestions = [...questions];
  getNewQuestion();

};
getNewQuestion = () => {
  if (availableQuestions.length === 0 || questionCounter >= MAX_QUESTIONS) {
    //go to end page
    return window.location.assign('/finished.html');
  }
  questionCounter++;
  const questionIndex = Math.floor(Math.random() * availableQuestions.length);
  currentQuestion = availableQuestions[questionIndex];
  question.innerText = currentQuestion.question;

  choices.forEach(choice => {
    const number = choice.dataset['number'];
    choice.innerText = currentQuestion['choice' + number];
  })

  availableQuestions.splice(questionIndex, 1);

  acceptingAnswers = true;
};

choices.forEach(choice => {
  choice.addEventListener('click', e => {
    if (!acceptingAnswers) return;

    acceptingAnswers = false;
    const selectedChoice = e.target;
    const selectedAnswer = selectedChoice.dataset['number'];

    const classToApply =
      selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";

    selectedChoice.parentElement.classList.add(classToApply);

    setTimeout(() => {
      selectedChoice.parentElement.classList.remove(classToApply);
      getNewQuestion();

    }, 1000);
  });
});

startGame();

<section>
  <div class="container">
    <div class="header">
      <div>
        <p>View High scores<i class="fas fa-hand-point-left fa-lg"></i></p>
      </div>
      <div>Time</div>
    </div>
  </div>
  
  <div class="container">
    <div class="box rectangle-2">
      <h2 id="question">What is the answer to this question?</h2>
      <div class="main">
        <div class="questionWrap">
          <div class="options">
            <ul>
              <li class="choice-text" data-number="1">choice 1</li>
              <li class="choice-text" data-number="2">choice 2</li>
              <li class="choice-text" data-number="3">choice 3</li>
              <li class="choice-text" data-number="4">choice 4</li>
            </ul>
          </div>
        </div>
</section>
</div>
</div>
</div>
</section>

I just need it to appear when an option is clicked, I have the styling of the page set already.

https://stackoverflow.com/questions/2554149/how-can-i-change-div-content-with-javascript — Dave Pile, Apr 21 '23 at 15:38
The HTML in your snippet has issues at the end, as you can see from the odd formatting. — isherwood, Apr 21 '23 at 16:30

score 0 · Answer 1 · answered Apr 21 '23 at 16:23

0

You could use the alert() function that is built into javascript. This is a simple popup that can display any text that you want.

Example:

alert("Correct")

answered Apr 21 '23 at 16:23

Sammy

1
1

1

Alerts are a terrible UX. They require action from the user to dismiss and they can't be styled. Don't use them--not even for debugging. – isherwood Apr 21 '23 at 16:31
@isherwood What alternatives do you suggest? – Sammy Jul 27 '23 at 16:16
In-page messaging, custom modal dialog, toast, etc. Almost anything that you can style and make unobtrusive for the user in an accessible way. Console logs for debugging. – isherwood Jul 27 '23 at 16:21

How to add a pop up message to quiz web app

1 Answers1