📌  相关文章
📜  如何在 p5 中创建测验 - Html (1)

📅  最后修改于: 2023-12-03 15:38:22.280000             🧑  作者: Mango

如何在 p5 中创建测验 - Html

如果你正在寻找一个能够简便地创建测验的解决方案，那么 p5 library 就是一个很好的选择。p5 是一个使用 HTML、CSS 和 JavaScript 创建交互式图形和动画的库，同时也提供了一些内置的功能来创建测验。以下是一个简单的教程，以帮助你在 p5 中创建测验。

步骤 1：创建 HTML 模板

要创建测验，需要先创建一个 HTML 模板。可以在其中包含一些关键信息，例如标题、问题和答案。下面是一个简单的 HTML 模板示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>测验标题</title>
</head>

<body>
  <form>
    <h2>问题 1：</h2>
    <p>问题 1 的描述。</p>
    <input type="radio" name="q1" value="a"> 答案 A<br>
    <input type="radio" name="q1" value="b"> 答案 B<br>
    <input type="radio" name="q1" value="c"> 答案 C<br>
    <br>
    <h2>问题 2：</h2>
    <p>问题 2 的描述。</p>
    <input type="radio" name="q2" value="a"> 答案 A<br>
    <input type="radio" name="q2" value="b"> 答案 B<br>
    <input type="radio" name="q2" value="c"> 答案 C<br>
    <br>
    <h2>问题 3：</h2>
    <p>问题 3 的描述。</p>
    <input type="radio" name="q3" value="a"> 答案 A<br>
    <input type="radio" name="q3" value="b"> 答案 B<br>
    <input type="radio" name="q3" value="c"> 答案 C<br>
  </form>
  <button type="submit">提交</button>
</body>

</html>

在这个模板中，有三个问题和每个问题的三个答案选项。可以根据需要修改问题和答案。值得注意的是，每个问题和答案都有一个 name 属性，这是为了正确处理用户的选择。

步骤 2：添加 JavaScript 代码

完成 HTML 模板后，需要添加一些 JavaScript 代码来处理测验。p5 library 提供了一些内置的函数，可以方便地处理 HTML 表单元素。下面是一个示例代码，用于检查用户答案并显示得分：

function checkAnswers() {
  let form = document.querySelector("form");
  let score = 0;

  // Check answer 1
  let answer1 = form.elements["q1"].value;
  if (answer1 === "b") {
    score++;
  }

  // Check answer 2
  let answer2 = form.elements["q2"].value;
  if (answer2 === "c") {
    score++;
  }

  // Check answer 3
  let answer3 = form.elements["q3"].value;
  if (answer3 === "a") {
    score++;
  }

  // Show score
  alert("你的得分是 " + score + "/3");
}

let submitButton = document.querySelector("button[type='submit']");
submitButton.addEventListener("click", checkAnswers);

这段代码定义了一个 checkAnswers 函数，该函数会在用户提交答案后调用。它首先获取表单元素，然后检查每个问题的答案。如果用户选择了正确的答案，它会将得分加 1。随后，它会显示用户得分的弹窗。

最后一行代码添加了一个事件监听器，该监听器会在用户提交测验时调用 checkAnswers 函数。

步骤 3：在 p5 中创建测验

最后一步是将 HTML 和 JavaScript 代码嵌入到 p5 sketch 中。可以使用 createDiv() 函数创建 DOM 元素，并使用 html() 函数将 HTML 代码插入该元素。下面是一个示例代码：

function setup() {
  createCanvas(400, 400);
  let html = `
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8" />
      <title>测验标题</title>
    </head>

    <body>
      <form>
        <h2>问题 1：</h2>
        <p>问题 1 的描述。</p>
        <input type="radio" name="q1" value="a"> 答案 A<br>
        <input type="radio" name="q1" value="b"> 答案 B<br>
        <input type="radio" name="q1" value="c"> 答案 C<br>
        <br>
        <h2>问题 2：</h2>
        <p>问题 2 的描述。</p>
        <input type="radio" name="q2" value="a"> 答案 A<br>
        <input type="radio" name="q2" value="b"> 答案 B<br>
        <input type="radio" name="q2" value="c"> 答案 C<br>
        <br>
        <h2>问题 3：</h2>
        <p>问题 3 的描述。</p>
        <input type="radio" name="q3" value="a"> 答案 A<br>
        <input type="radio" name="q3" value="b"> 答案 B<br>
        <input type="radio" name="q3" value="c"> 答案 C<br>
      </form>
      <button type="submit">提交</button>
    </body>

    </html>
  `;
  let div = createDiv(html);
  div.id("quiz");
  let submitButton = select("#quiz button[type='submit']");
  submitButton.mouseClicked(checkAnswers);
}

function checkAnswers() {
  let form = select("#quiz form").elt;
  let score = 0;

  // Check answer 1
  let answer1 = form.elements["q1"].value;
  if (answer1 === "b") {
    score++;
  }

  // Check answer 2
  let answer2 = form.elements["q2"].value;
  if (answer2 === "c") {
    score++;
  }

  // Check answer 3
  let answer3 = form.elements["q3"].value;
  if (answer3 === "a") {
    score++;
  }

  // Show score
  alert("你的得分是 " + score + "/3");
}

在这个示例代码中，使用 createDiv() 函数创建了一个 DIV，其包含上面步骤 1 中的 HTML 模板。然后，通过 select() 函数选择了提交按钮并添加了一个鼠标单击事件监听器，该监听器会在用户提交测验时调用 checkAnswers 函数。

总结

这篇文章中，我们介绍了如何使用 p5 library 创建测验。首先需要创建一个 HTML 模板，然后使用 JavaScript 添加逻辑来检查用户答案并显示得分。最后，在 p5 sketch 中使用 createDiv() 函数将 HTML 代码嵌入到页面中。通过这些简单的步骤，你就可以创建一个完整的测验系统。