答题小程序进阶：实现答题和云端提交

2023-12-20 03:44:52

在上一篇关于答题小程序的教程中，我们学习了如何使用云开发查询题库并动态更新到答题页面。今天，我们将进一步深入，实现答题功能，并把答卷提交到云端数据库。

答题功能

1. 绑定答题事件

在答题页面，我们需要给每个选项绑定答题事件。当用户点击选项时，触发对应事件，记录答案。

// 绑定答题事件
const options = document.querySelectorAll(".option");
options.forEach((option) => {
  option.addEventListener("click", handleAnswer);
});

2. 记录答案

点击选项后，handleAnswer 函数将被触发，它会记录用户的回答。

function handleAnswer(e) {
  const answer = e.target.dataset.answer;
  // 保存答案到本地变量或全局变量中
}

提交答卷到云数据库

答题完成后，我们需要把答卷提交到云端数据库。

1. 初始化云数据库

在小程序云开发控制台中，创建一个集合，用于存储答卷。

2. 组装答卷数据

将用户的回答和相关信息（如答题时间、小程序 ID 等）组装成一个对象。

const answerData = {
  answer: answer,
  timestamp: Date.now(),
  miniprogramId: "YOUR_MINI_PROGRAM_ID",
};

3. 调用云函数提交答卷

调用云函数，将答卷数据传入，并提交到云端数据库。

wx.cloud.callFunction({
  name: "submitAnswer",
  data: answerData,
  success: (res) => {
    // 处理提交成功的逻辑
  },
  fail: (err) => {
    // 处理提交失败的逻辑
  },
});

4. 云函数处理

云函数收到答卷数据后，将其保存到云端数据库的集合中。

exports.main = async (event, context) => {
  const db = cloud.database();
  await db.collection("answers").add({
    data: event.data,
  });
  return {
    success: true,
  };
};