垃圾分类作为一项重要的环保措施，已经在我国得到了广泛的推广和实施。为了帮助更多人了解垃圾分类知识，许多小程序应运而生。本文将为您详细解析一款垃圾分类小程序的题库代码，帮助您轻松上手。

一、小程序概述

垃圾分类小程序通常包含以下几个功能模块：

  1. 首页：展示垃圾分类知识、最新动态等。
  2. 题库：提供垃圾分类知识测试，检验用户掌握程度。
  3. 结果展示：根据用户答题情况，展示正确率和知识点分析。
  4. 学习中心：提供垃圾分类知识详解，方便用户深入学习。

二、题库代码解析

1. 题库数据结构

题库数据通常以JSON格式存储，以下是一个简单的题库数据示例：

[
  {
    "question": "以下哪个不属于可回收垃圾？",
    "options": ["A. 玻璃瓶", "B. 电池", "C. 废纸", "D. 餐厨垃圾"],
    "answer": "B"
  },
  {
    "question": "废弃的塑料瓶属于哪种垃圾？",
    "options": ["A. 可回收垃圾", "B. 有害垃圾", "C. 湿垃圾", "D. 干垃圾"],
    "answer": "A"
  }
]

2. 题库展示与答题

以下是一个简单的题库展示与答题的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>垃圾分类题库</title>
</head>
<body>
  <div id="question"></div>
  <div id="options"></div>
  <button onclick="checkAnswer()">提交答案</button>
  <script>
    let questions = [
      {
        "question": "以下哪个不属于可回收垃圾？",
        "options": ["A. 玻璃瓶", "B. 电池", "C. 废纸", "D. 餐厨垃圾"],
        "answer": "B"
      },
      {
        "question": "废弃的塑料瓶属于哪种垃圾？",
        "options": ["A. 可回收垃圾", "B. 有害垃圾", "C. 湿垃圾", "D. 干垃圾"],
        "answer": "A"
      }
    ];
    let index = 0;
    function showQuestion() {
      let question = questions[index];
      document.getElementById("question").innerText = question.question;
      let options = question.options;
      let optionsDiv = document.getElementById("options");
      optionsDiv.innerHTML = "";
      options.forEach(function(option) {
        let input = document.createElement("input");
        input.type = "radio";
        input.name = "answer";
        input.value = option.split(". ")[1];
        let label = document.createElement("label");
        label.innerText = option;
        optionsDiv.appendChild(input);
        optionsDiv.appendChild(label);
        optionsDiv.appendChild(document.createElement("br"));
      });
    }
    function checkAnswer() {
      let selectedAnswer = document.querySelector('input[name="answer"]:checked').value;
      if (selectedAnswer === questions[index].answer) {
        alert("回答正确！");
      } else {
        alert("回答错误！");
      }
      index++;
      if (index < questions.length) {
        showQuestion();
      } else {
        alert("答题结束！");
      }
    }
    showQuestion();
  </script>
</body>
</html>

3. 结果展示

在用户提交答案后，可以根据用户的选择和题库中的答案进行比对，并展示正确率和知识点分析。以下是一个简单的结果展示代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>垃圾分类结果展示</title>
</head>
<body>
  <div id="result"></div>
  <script>
    let questions = [
      // ...（题库数据）
    ];
    let userAnswers = [];
    function checkAnswer() {
      let selectedAnswer = document.querySelector('input[name="answer"]:checked').value;
      userAnswers.push(selectedAnswer);
      // ...（其他代码）
    }
    function showResult() {
      let correctCount = 0;
      questions.forEach(function(question, index) {
        if (question.answer === userAnswers[index]) {
          correctCount++;
        }
      });
      let resultText = `您共答对${correctCount}题，正确率为${(correctCount / questions.length * 100).toFixed(2)}%。\n`;
      resultText += `以下是您的答题情况：\n`;
      questions.forEach(function(question, index) {
        resultText += `问题：${question.question}\n`;
        resultText += `您的答案：${userAnswers[index]}\n`;
        resultText += `正确答案：${question.answer}\n`;
        resultText += `-----------------------\n`;
      });
      document.getElementById("result").innerText = resultText;
    }
    // ...（其他代码）
  </script>
</body>
</html>

三、总结

通过以上解析，相信您已经对垃圾分类小程序的题库代码有了初步的了解。在实际开发过程中，可以根据需求对代码进行优化和扩展，例如添加更多题型、增加难度等级等。希望本文能对您的开发工作有所帮助。