生成问卷的部分参考 微信小程序做问卷——前端部分(生成问卷)
实现效果
界面如下,分别展示了三种题型,单选题,多选题,简答题。
单选只可以选择一个,多选可以选择多个,问答题写在<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