夸托网站-为javascript按钮制作模板(“显示答案”)

5f0d552i  于 2023-05-04  发布在  Java
关注(0)|答案(1)|浏览(159)

我正在用夸托做网站。我可以在夸托文档(.qmd文件)中添加Javascript和HTML代码。我不是很精通Javascript,但发现了以下内容:

<button class="show-answer" onclick="showAnswer('answer1')"> Show answer</button>
<p id="answer1" style="display: none;">Secret answer 1</p>

<button class="show-answer" onclick="showAnswer('answer2')"> Show answer</button>
<p id="answer2" style="display: none;">Secret answer 2</p>

<script>
function showAnswer(answerId) {
  var answer = document.getElementById(answerId);
  if (answer.style.display === "none") {
    answer.style.display = "block";
  } else {
    answer.style.display = "none";
  }
}
</script>

这是可行的。然而,网页需要这个按钮很多次。有没有可能制作某种模板,这样我就可以在夸托文档中写作了(比如)

[answer] Secret answer [/answer]

JavaScript似乎也需要一些ID,例如。id="answer1" .如果我使用模板,是否可以自动生成此ID?

tsm1rwdh

tsm1rwdh1#

你可以编写一个JS函数,将div元素(用pandoc divs ::: {.class}创建)替换为答案,或者将span元素(用pandoc spans []{.class}创建)替换为具有以下结构的答案:

<button class="show-answer" onclick="showAnswer('answer1')"> Show answer</button>
<p id="answer1" style="display: none;">Secret answer 1</p>

全重传

add-answer-button.html

<script>
  
  function addAnswerWithButton(answerClass, buttonText, answerText) {
    
    const divElement = document.querySelector(`.${answerClass}`);
    const randomId = "answer-" + Math.floor(Math.random() * 1000000);
  
    // Create the new button element
    const buttonElement = document.createElement("button");
    buttonElement.className = "show-answer";
    buttonElement.textContent = buttonText;
    buttonElement.onclick = function() {
      showAnswer(randomId);
    };
  
    // Create the new answer element
    const answerElement = document.createElement("p");
    answerElement.id = randomId;
    answerElement.style.display = "none";
    answerElement.innerHTML = answerText;
  
    // Replace the div element with the new button and answer elements
    divElement.parentNode.replaceChild(buttonElement, divElement);
    buttonElement.insertAdjacentElement("afterend", answerElement);
  }
  
  function showAnswer(answerId) {
    var answer = document.getElementById(answerId);
    if (answer.style.display === "none") {
      answer.style.display = "block";
    } else {
      answer.style.display = "none";
    }
  }

  function addAnswerButton() {
    var answers = document.querySelectorAll(".answer")
    answers.forEach(e => {
      addAnswerWithButton("answer", " Show Answer", e.innerHTML);
    });
  }
  
  window.document.addEventListener("DOMContentLoaded", function (event) {
    addAnswerButton();
  });
</script>

test.qmd

---
title: Answer Button
format: html
include-in-header: add-answer-button.html
---

## Exercise

Question1: What is 1 + 1? [Answer: 2]{.answer}

Question2: Some question? 

[This is some answer to question 2]{.answer}

Question3: Some more question? 

::: {.answer}

This is some answer to question 3

:::

在这里,你可以将答案写在方括号内,然后将.answer类分配给它(例如:[some answer]{.answer},它将被替换为一个按钮(参见下面的渲染输出),你也可以将答案 Package 在:::中,并将类.answer分配给div。

相关问题