1. //wxss
    3. <view class='quest_container' wx:for="{{quest}}" wx:key="id" wx:for-index="outterIndex">
    4.         <!-- {{item.type==1?'（单选）':'（多选）'}} -->
    5.         <text class="quest_containerName">{{item.question}}</text>
    6.         <view wx:for="{{item.answers}}" wx:key="content" bindtap="answerSelected" data-outidx='{{outterIndex}}' data-idx="{{index}}" class="item {{item.selected?'active':''}}">
    7.             <text>{{item.index}}.</text>
    8.             <text>{{item.content}}</text>
    9.         </view>
    10.         <view class="quest_containerImage" wx:if="{{item.image}}">
    11.             <image src="{{item.image}}" mode="" />
    12.         </view>
    13.     </view>
    14.     <view class="submit_btn" bindtap="submit">提交</view>
    1. //js
    2. const app = getApp()
    3. const {
    4.   $Toast
    5. } = require('../../dist/base/index');
    7. Page({
    9.   /**
    10.    * 页面的初始数据
    11.    */
    12.   data: {
    13.     Custom: {},
    14.     quest: [{
    15.       id: 1,
    16.       type: 1, //类型，1.单选，2.多选
    17.       question: "1.发现有人倒地无反应，你的反应是?",
    18.       answers: [{
    19.         index: 'A',
    20.         content: '不知道，没学过急救知识'
    21.       }, {
    22.         index: 'B',
    23.         content: '拨打120后等待医护人员到场'
    24.       },
    25.       {
    26.         index: 'C',
    27.         content: '拨打120后评估病情进行及时急救措施'
    28.       }],
    29.       correctAnswer: 'C',
    30.       scope: 10,
    31.     }, {
    32.       id: 2,
    33.       type: 1,
    34.       question: "2.如何判断一个倒地患者是否发生心跳骤停？",
    35.       answers: [{
    36.         index: 'A',
    37.         content: '不知道'
    38.       }, {
    39.         index: 'B',
    40.         content: '拍打肩膀、掐肩膀并大声询问无反应，确定有无意识、判断有无呼吸'
    41.       }, {
    42.         index: 'C',
    43.         content: '掐人中，如果没有反应就是心脏骤停'
    44.       }],
    45.       correctAnswer: 'B',
    46.       scope: 10,
    47.     }, {
    48.       id: 3,
    49.       type: 1,
    50.       question: "3.如图所示，您认为胸外按压的部位为?",
    51.       image: '/image/dati/xinzhangtu.png',
    52.       answers: [{
    53.         index: 'A',
    54.         content: '不知道'
    55.       }, {
    56.         index: 'B',
    57.         content: '两乳头连线中点(B)'
    58.       }, {
    59.         index: 'C',
    60.         content: '剑突上1/3(A)'
    61.       }],
    62.       correctAnswer: 'B',
    63.       scope: 10,
    64.     }, {
    65.       id: 4,
    66.       type: 1,
    67.       question: "4.胸外按压的频率是每分钟多少次?",
    68.       answers: [{
    69.         index: 'A',
    70.         content: '不知道'
    71.       }, {
    72.         index: 'B',
    73.         content: '100-120次'
    74.       }, {
    75.         index: 'C',
    76.         content: '100以下'
    77.       }],
    78.       correctAnswer: 'B',
    79.       scope: 10,
    80.     }, {
    81.       id: 5,
    82.       type: 1,
    83.       question: "5.成人心肺复苏时，胸外按压的深度为?",
    84.       answers: [{
    85.         index: 'A',
    86.         content: '不知道'
    87.       }, {
    88.         index: 'B',
    89.         content: '5~6cm'
    90.       }, {
    91.         index: 'C',
    92.         content: '＜5cm'
    93.       }],
    94.       correctAnswer: 'B',
    95.       scope: 10,
    96.     }, {
    97.       id: 6,
    98.       type: 1,
    99.       question: "6.心脏骤停的病人实施胸外按压与人工呼吸的比例为?",
    100.       answers: [{
    101.         index: 'A',
    102.         content: '不知道'
    103.       }, {
    104.         index: 'B',
    105.         content: '30次按压然后2次吹气'
    106.       }, {
    107.         index: 'C',
    108.         content: '15次按压然后1次吹气'
    109.       }],
    110.       correctAnswer: 'B',
    111.       scope: 10,
    112.     }, {
    113.       id: 7,
    114.       type: 1,
    115.       question: "7.你会使用自动除颤仪AED?",
    116.       image: '/image/dati/ti2.png',
    117.       answers: [{
    118.         index: 'A',
    119.         content: '没有见过，不知道怎么做'
    120.       }, {
    121.         index: 'B',
    122.         content: '已经学会使用'
    123.       }, {
    124.         index: 'C',
    125.         content: '有见过，不会使用'
    126.       }],
    127.       correctAnswer: 'B',
    128.       scope: 10,
    129.     }, {
    130.       id: 8,
    131.       type: 1,
    132.       question: "8.遇到面色苍白、大汗淋漓的胸痛病人，应该?",
    133.       answers: [{
    134.         index: 'A',
    135.         content: '不知道'
    136.       }, {
    137.         index: 'B',
    138.         content: '知道，立即卧床安静 、不随意搬动、迅速拨打“120”、含服硝酸甘油或者速效救心丸'
    139.       }, {
    140.         index: 'C',
    141.         content: '让他自己走路活动一下，看能否缓解'
    142.       }],
    143.       correctAnswer: 'B',
    144.       scope: 10,
    145.     },
    146.     {
    147.       id: 9,
    148.       type: 1,
    149.       question: "9.对于出现昏迷不醒的伤者，应该?",
    150.       answers: [{
    151.         index: 'A',
    152.         content: '不知道'
    153.       }, {
    154.         index: 'B',
    155.         content: '知道，立即卧床安静 、不随意搬动、迅速拨打“120”、含服硝酸甘油或者速效救心丸'
    156.       }, {
    157.         index: 'C',
    158.         content: '让他自己走路活动一下，看能否缓解'
    159.       }],
    160.       correctAnswer: 'B',
    161.       scope: 10,
    162.     },
    163.     {
    164.       id: 10,
    165.       type: 1,
    166.       question: "10.是否知道脑血管意外病人的FAST识别原则?",
    167.       answers: [{
    168.         index: 'A',
    169.         content: '不知道'
    170.       }, {
    171.         index: 'B',
    172.         content: '立即心肺复苏'
    173.       }, {
    174.         index: 'C',
    175.         content: '知道，Face/面瘫、Arm/偏瘫、Speech/言语不清、Time/尽快到医院'
    176.       }],
    177.       correctAnswer: 'C',
    178.       scope: 10,
    179.     }
    180.     ]
    181.   },
    183.   // 点击问题答案触发事件
    184.   answerSelected(e) {
    185.     console.log("我的选择", e)
    186.     let outidx = e.currentTarget.dataset.outidx;
    187.     let idx = e.currentTarget.dataset.idx;
    188.     let question = this.data.quest[outidx];
    189.     if (question.type == 1) {
    190.       //单选
    191.       for (let item of question.answers) {
    192.         item.selected = false;
    193.       }
    194.       question.answers[idx].selected = true;
    195.       console.log('数据:::', question)
    196.       this.setData({
    197.         quest: this.data.quest
    198.       });
    199.     } else if (question.type == 2) {
    200.       //多选
    201.       question.answers[idx].selected = !question.answers[idx].selected;
    202.       this.setData({
    203.         quest: this.data.quest
    204.       });
    205.     }
    206.   },
    207.   submit() {
    208.     let {
    209.       quest
    210.     } = this.data;
    211.     let totalScope = 0; //记录分数
    212.     //用来保存选中的答案
    213.     let answerSelected = [];
    214.     for (let questItem of quest) {
    215.       if (questItem.type == 1) { //处理单选题
    216.         let isSelected = false;
    217.         for (let answerItem of questItem.answers) {
    218.           if (answerItem.selected) {
    219.             //答案被选中
    220.             isSelected = true;
    221.             console.log('选中的答案', answerItem)
    222.             answerSelected.push(answerItem.index);
    223.           }
    224.         }
    225.         if (!isSelected) {
    226.           //如果一个都没选
    227.           answerSelected.push('');
    228.           console.log('测试', isSelected)
    229.           this.handleWarning('请检查题目是否做完')
    230.         }
    231.       } else { //处理多选题
    232.         let multiAnswer = [];
    233.         for (let answerItem of questItem.answers) {
    234.           if (answerItem.selected) {
    235.             //答案被选中
    236.             multiAnswer.push(answerItem.index);
    237.           }
    238.         }
    239.         answerSelected.push(multiAnswer.join(''));
    240.       }
    241.       totalScope += questItem.correctAnswer == answerSelected[answerSelected.length - 1] ? questItem.scope : 0;
    242.     }
    244.     console.log(answerSelected);
    245.     console.log(totalScope);
    246.   },
    247.   // 弹窗
    248.   handleWarning(text) {
    249.     $Toast({
    250.       content: text,
    251.       type: 'warning'
    252.     });
    253.   },
    254.   /**
    255.    * 生命周期函数--监听页面加载
    256.    */
    257.   onLoad: function (options) {
    258.     this.setData({
    259.       Custom: app.globalData.Custom
    260.     })
    261.   },
    263.   /**
    264.    * 生命周期函数--监听页面初次渲染完成
    265.    */
    266.   onReady: function () {
    268.   },
    270.   /**
    271.    * 生命周期函数--监听页面显示
    272.    */
    273.   onShow: function () {
    275.   },
    277.   /**
    278.    * 生命周期函数--监听页面隐藏
    279.    */
    280.   onHide: function () {
    282.   },
    284.   /**
    285.    * 生命周期函数--监听页面卸载
    286.    */
    287.   onUnload: function () {
    289.   },
    291.   /**
    292.    * 页面相关事件处理函数--监听用户下拉动作
    293.    */
    294.   onPullDownRefresh: function () {
    296.   },
    298.   /**
    299.    * 页面上拉触底事件的处理函数
    300.    */
    301.   onReachBottom: function () {
    303.   },
    305.   /**
    306.    * 用户点击右上角分享
    307.    */
    308.   onShareAppMessage: function () {
    310.   }
    311. })
    //less

.headeDemo {
    position: fixed;
    top: 0px;
    background: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
} 

.questions{
    width: 100%;
}

.quest_container {
    padding: 20rpx;
  }

  .quest_containerName{
    font-size: 32rpx;
    font-weight: bold;
  }

  .item {
    margin-top: 32rpx;
  }

  .active {
    color: red;
  }

  .submit_btn {
    background: #00a050;
    color: white;
    margin: 50rpx;
    padding: 25rpx;
    border-radius: 10rpx;
    text-align: center;
  }

  .quest_containerImage{
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20rpx;

    image{
        width: 560rpx;
    }
  }