单击正确答案时如何使div消失？

Question

好的，这是我第一次在平台上提问，大家好！

我想为医学生创建一个可以测试他们的解剖学知识的网站。 我想在页面上放置一张解剖图片，白色 div 覆盖图像上存在的所有结构名称。 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. 这就是我想要实现的目标：

1. 选择正确的 div(/answer) 时：使 div 消失并显示答案正确。
2. When the wrong div(/answer) is chosen: Don't hide the div and display a message that the answer is incorrect.
3. 每次重新加载/打开页面时，让问题以随机顺序提问（为了可重玩性）。
4. 播放时显示百分比（/分数）。

（例如，参见图像）。

我知道如何使用 HTML 和 CSS 制作一个 div，但我不知道如何根据上面列出的前两个选项使其消失/隐藏或保持可见。 我也不知道如何以随机顺序询问解剖学名称，也不知道如何跟踪分数。

<div id="vak_1" style="margin-top: 245.691px; margin-left: 110.101px; width: 91px; height: 21px;"></div>

图 1：两个选项

图片 2：当单击“manibrium sterni”的正确 div 时，div 会隐藏并询问下一个问题，同时显示一条消息，说明答案是正确的

图 3：单击错误的 div 时，问题要么被再次提出（在这种情况下），要么将提出下一个问题，稍后将再次随机提出错误的问题。 将显示一条消息，指出点击的答案不正确

图 4：HTML/CSS 代码。

是否可以仅使用 HTML 和 CSS（也许也可以使用 Javascript）来执行此操作？

Answer 1

我有两种方法可以帮助你

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

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

如果您在数组中有问题，您可以使用：（arr1 是选定的数组）；

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

Answer 2

只有 HTML/CSS 可能是不够的。 这些是用于提供没有太多逻辑的内容的语言。 当你想要更多东西时，你必须使用 JavaScript。但是不要担心，对于你的情况来说应该很容易。 你可以做一些 Flash 建议的事情 - 在按下按钮时你将删除覆盖 div 的不透明度。

通常情况会更好，如果将此“可见”行为保存在 CSS class 中，而不是删除 class。在 JS 中，您可以像这样删除 class：

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
  }
})

您还可以使用变量在 function 中关闭此操作，这样您就不会像这样为每个答案重复代码：

 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; }

 <div class="red"> <p>Some question</p> <div id="answer_1" class="answer hidden"> <p>First answer</p> </div> <div id="answer_2" class="answer hidden"> <p>Second answer</p> </div> <div id="answer_3" class="answer hidden"> <p>Third answer</p> </div> <div id="answer_4" class="answer hidden"> <p>Fourth answer</p> </div> </div>