【wx小程序】一个简单的答题小界面

---

前言

最近在写学校的项目，涉及做个答题界面，网上逛了一圈感觉都很复杂，我小小的项目也不大需要那些花活，所以自己半写半改整了个极简风的答题界面。咱大学牲写代码主打一个支离破碎，欢迎各位大佬指点。

1.wxml（前端界面渲染）

<block wx:for="{{questions}}">
  <view class='naire'>
    <view class='question'>{{index+1}}. {{item.question}}</view>
    <!--view class='border' /-->
    <radio-group class='radio-group' name='answer' bindchange='radioChange' data-question-id='{{item.id}}'>
      <label class='radio'>
        <radio value="A" color='#fcbe39' />{{item.answers.a}}
      </label>
      <label class='radio'>
        <radio value="B" color='#fcbe39' />{{item.answers.b}}
      </label>
      <label class='radio'>
        <radio value="C" color='#fcbe39' />{{item.answers.c}}
      </label>
      <label class='radio'>
        <radio value="D" color='#fcbe39' />{{item.answers.d}}
      </label>
    </radio-group>
  </view>
</block>

<button class='btns' hover-class='none' form-type='submit' bindtap='GoEnd'>提交</button>

2.题目.js

这是questions.js 在页面同级下自己创建一个就行 里面保存的是题目
其实right_answer是不需要的，但是后来也没删，就让它在那里吧。。。

var local_data = [
  {
    id:0,
    question: "垃圾分类中，以下哪种垃圾属于可回收垃圾？",
    answers: {"a":"塑料瓶", "b":"食品残渣", "c":"电池", "d":"纸巾"},
    right_answer: "A"
  },
  {
    id:1,
    question: "废纸张应该投放到垃圾桶的哪个分类？",
    answers: {"a":"可回收垃圾", "b":"有害垃圾", "c":"厨余垃圾", "d":"其他垃圾"},
    right_answer: "A"
  },
  {
    id:2,
    question: "废旧电池属于哪一类垃圾？",
    answers: {"a":"可回收垃圾", "b":"有害垃圾", "c":"厨余垃圾", "d":"其他垃圾"},
    right_answer: "B"
  },
  {
   //...
];


module.exports= {
  questions: local_data
}

3.核心.js

核心的js代码，主打思想是将选项计入数组，最后和正确答案的数组循环对比自动算分

var Data = require("../exm/questions.js")
var ans = new Array(20)  //答案数组初始化，会在onload函数中赋初值
Page({

  /**
   * 页面的初始数据
   */
  data: {
    questions: Data.questions,//题库
    answer: [] as (string | null)[],
  },

  //选项点击操作
  radioChange: function (e: { detail: { value: any; }; currentTarget: { dataset: { questionId: any; }; }; }
  ) {
    // 获取用户选择的答案
    var selectedAnswer = e.detail.value;

    // 获取当前题目的唯一标识符
    var questionId = e.currentTarget.dataset.questionId;

    // 获取当前的答案数组
    var currentAnswers = this.data.answer;

    // 将用户选择的答案与题目标识符关联存储到数组中
    currentAnswers[questionId] = selectedAnswer;

    // 更新小程序的数据，将答案数组设置为新的状态
    this.setData({
      answer: currentAnswers,
    });

    // 打印出更新后的答案数组
    console.log(this.data.answer);
  },





  //跳转结束页面
  GoEnd: function () {
    // 获取用户选择的答案数组
    var userAnswers = this.data.answer;
  
    // 获取正确的答案数组
    var correctAnswers = ["A", "A", "B", "C", "B", "D", "A", "B", "B", "A"];
  
    // 计算得分
    var score = 0;
    for (var i = 0; i < correctAnswers.length; i++) {
      // 检查用户的答案是否和正确答案相符，注意索引从 0 开始
      if (userAnswers[i] === correctAnswers[i]) {
        // 如果答案正确，加10分
        score += 10;
      }
    }
  
    // 可以在这里将得分传递到下一个页面，或者在当前页面展示得分
    console.log("得分：" + score);
  
    // 跳转到下一个页面
    wx.navigateTo({
      url: '../end/index?score=' + score, // 可以通过 query 参数传递得分
    });
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage(opts: { target: any; }): WechatMiniprogram.Page.ICustomShareContent {
    console.log(opts.target)
    return {}
  }
})

---

总结

人生的第一篇blog，只能说微信小程序害人不浅，资料虽然多，但真的赶不上官方更新的速度，最后导致写的时候一脚一个坑。
我的核心js已经是ts后缀了，所以不确定在js上会不会报错。。。
方法比较暴力，不适合需要导入大量的题目的情况，但另一方面可以省下服务器那边的接口，在不太重要的场合下还挺好用。。。