How to make div disappear when correct answer is clicked?

Question

Okay this is my first time asking a question on the platform so hello everyone!

I want to make a site for medical students where their anatomical knowledge can be tested. I want to place an anatomical picture on the page with white divs covering all the names of the structures present on the image. My idea is to ask for an anatomical structure (let's say the 'manibrium sterni') and when the correct white div covering the word is selected, this div would then disappear. This is what I want to achieve:

When the correct div(/answer) is chosen: Make the div disappear and show that the answer is correct.
When the wrong div(/answer) is chosen: Don't hide the div and display a message that the answer is incorrect.
Let the questions be asked in a random order each time the page is reloaded/opened (for replayability).
Show a percentage(/score) whilst playing.

(see images for example).

I know how to make a div with HTML and CSS, but I do not know how to make it disappear/be hidden or stay visible based on the first two options that I listed above. I also do not know how to make the anatomical names be asked in a random order nor how to keep track of the score.

Image 1: The two options

Image 2: When the correct div for 'manibrium sterni' is clicked, the div hides and the next question is asked whilst showing a message stating the answer is correct

Image 3: When the wrong div is clicked, the question either is asked again (in this case) or the next question will be asked and the wrong question will be asked randomly again later. A message stating that the answer clicked is incorrect will be shown

Image 4: The HTML/CSS code.

Is it possible to do this with only HTML and CSS (perhaps also with Javascript)?

user_14882072 · Answer

i have 2 ways that can help you i think.First you can select your element,put it inside a variable like in this photo https://ibb.co/GQ31F5k , or you can use the variable with the following command : example

const question = document.getElementById('ID');

 question.addEventListener('click', () => {
    question.style.opacity = 0; // this will hide your element(100 it's the default)
})

If you have your questions in an array you can use: (arr1 is the selected array);

var random = arr1[Math.floor(Math.random() * arr1.length)]);

user_7167572 · Answer

Only HTML/CSS will probably won't be enought. Those are languages used for providing content without much logic. When you want something more, you must use JavaScript. But don't be worried, for your case it should be really easy. You can do something that Flash suggest - on Button press you will remove the opacity of overlaying div.

Generally it is better, you if save this "visible" behaviour in CSS class and instead remove the class. In JS, you can remove class like this:

const a1 = document.getElementById("answer_1");    //Gets reference to the DIV element

a1.addEventListener("click", () => {               //Adds "Click" handling 
  if (a1.classList.contains("hidden")) {           //Check if DIV has class named "hidden"
    a1.classList.remove("hidden");                 //Remove the class from list
  }
})

You can also close this action in function with variables, which allows you to not repeating the code for each answer like this:

const a1 = document.getElementById("answer_1");
const a2 = document.getElementById("answer_2");
const a3 = document.getElementById("answer_3");
const a4 = document.getElementById("answer_4");

function addHideAction(answerDiv) {   
  answerDiv.addEventListener("click", () => {
    if (answerDiv.classList.contains("hidden")) {
      answerDiv.classList.remove("hidden");
    }
  })
}

addHideAction(a1);
addHideAction(a2);
addHideAction(a3);
//addHideAction(a4);
addHideAction(document.getElementById("answer_4")); //You can even do this.

.red {
  background-color: #FF0000;
}

.answer {
  background-color: #a88532;
}

.hidden {
  opacity: 0;
}


  Some question
  
  
      First answer
    
  
      Second answer
    
  
      Third answer
  
  
      Fourth answer

How to make div disappear when correct answer is clicked?

2 Answers