微信小程序做问卷——前端部分(回答问卷)

最新推荐文章于 2024-07-26 21:12:43 发布

yaoxh6

最新推荐文章于 2024-07-26 21:12:43 发布

阅读量6.8k

点赞数 7

分类专栏：微信小程序文章标签：微信小程序问卷前端

本文链接：https://blog.csdn.net/yaoxh6/article/details/89741182

版权

本文介绍了如何在微信小程序中实现问卷回答功能，包括单选题、多选题和问答题的界面展示及数据处理。通过WXML、WXSS和JS文件的配合，实现了用户交互并确保数据正确同步。

摘要由CSDN通过智能技术生成

文章目录

实现效果
- 实现
全部代码

生成问卷的部分参考微信小程序做问卷——前端部分(生成问卷)

实现效果

界面如下，分别展示了三种题型，单选题，多选题，简答题。

单选只可以选择一个，多选可以选择多个，问答题写在<textarea>中，点击完成会打印出整个表的数据。

比如下面是默认的数据
默认数据
现在勾选单选和多选，以及改变回答部分再看一下数据
在这里插入图片描述
可以看到数据是匹配的，所以最后只要把生成好的数据提交到后端，那么一份问卷就算是完成了。

实现

因为是先写的微信小程序做问卷——前端部分(生成问卷),所以重复的部分不再赘述了，建议先看生成问卷部分，回答问卷比生成问卷的逻辑简单一些。
数据结构还是一样的，先是生成问卷，然后再填写生成好的问卷，所以两者的数据结构是一致的。

questionnaireArray: [
      {
        "type": "SCQ",
        "content": {
          "description": "Which fruit do you like best?",
          "options":
            [
              { "id": 1, "name": "Lua", "isSelected": false },
              { "id": 2, "name": "Java", "isSelected": false },
              { "id": 3, "name": "C++", "isSelected": false }
            ]
        }
      },
      {
        "type": "MCQ",
        "content": {
          "description": "Which fruit do you like?",
          "options":
            [
              { "id": 1, "name": "OK", "isSelected": false },
              { "id": 2, "name": "Java", "isSelected": false },
              { "id": 3, "name": "C++", "isSelected": false }
            ]
        }
      },
      {
        "type": "SAQ",
        "content": {
          "description": "What's your name?",
          "answer": "i dont know"
        }
      }
    ],

单选部分

<block wx:if="{
  {item.type === 'SCQ'}}">
    <view class = 'SCQ' data-id='{
  {fatherIndex}}'>
      <view class='SCQTitle'>
        <view class='SCQQ'>Q</view>
        <view class='SCQindex'>{
  {fatherIndex+1}}</view>
        <view class='SCQquto'>:</view>
        <text class='SCQDiscription' data-id='{
  {fatherIndex}}'>{
  {item.content.description}}</text>
      </view>
      <radio-group class="SCQOption" bindchange="radioChangeSCQ">
        <label class="SCQText" wx:for="{
  {item.content.options}}" wx:key="SCQID" data-id='{
  {fatherIndex}}' bindtouchstart='getTempFatherIndex'>
          <radio value="{
  {item.name}}" checked="{
  {item.isSelected}}"/>{
  {item.name}}
        </label>
      </radio-group>
    </view>
  </block>

用的结构还是和之前的一样，不一样的是用的<radio-group>,在这个里面申明<radio>会自动生成单选按钮，以及实现逻辑，即在众多选项中只可以有一个处于被勾选的状态。
但是他并不能改变js中的数据，所以还是要在radioChangeSCQ里面自己写逻辑（这部分可能有API会直接得到，但是由于我是先写生成部分，所以逻辑可以直接拿来用）

  radioChangeSCQ:function(input){
    var tempFatherIndex = this.data.currentFatherIndex;
    var tempArray = this.data.questionnaireArray;
    for (var i in tempArray[tempFatherIndex].content.options){
      if (tempArray[tempFatherIndex].content.options[i].name == input.detail.value){
        tem