接了BOSS的一个开发任务,大概意思是说做一个类似驾考宝典这样的考试系统,有一个答题模板,展示全部题目,然后答过的题目变颜色,结果如下图。并且为了应付异常情况,比如手机突然关机电话拨入之类的。需要给保存下用户的考试情况。
大概考虑一下,首先应对异常情况,小程序提供了本地数据存储的功能,不论关机或者退出微信,除非数据内存紧张,不然数据是不会清除的,所以考虑将数据保存在本地数据中。
第二个数据存储结构,因为考试信息较多,所以我考虑首先将用户的答题情况保存为一个如下的json
其中对象中一个对象包含一种类型的题目信息总和,num代表题目数,score代表每道题目的分数,qid是题目id,rightAns是这道题目的正确答案,answer是用户的答案。
然后每次打开一道题就根据qid打开一道题目,将题目信息存在currentQuestion对象中,总之根据这个json对象可以获取很多信息。比如上一题,下一题,总之可以在打开题目的时候。
将这些信息查找出来放在currentQuestion对象中,方便使用。
其中几种类型中,填空的需求比较特别,记录一下,先上图,这个界面现在还是比较简单,后期再慢慢改,先实现功能。就是说答案几个字就显示几个空,让用户按这几个格子输入答案,
一个格子一个字。
我首先想到的是循环答案字数,一个字数展示一个输入框,但是稍微想一想,就发现不可能这么实现,首先一个输入框一个光标,一个萝卜一个坑,虽然可以让这几个输入框使用同一个输入方法。
控制同一个字符串,但是我们不知道用户是通过哪一个格子触发的输入事件,这个输入框的光标不能回到上一个输入框中,并且小程序目前不太支持改变光标颜色,就是说光标无法隐藏。反正不合理的地
方太多了。只能另外想办法,既然一个字一个空不可能,那只能将答案放在一个输入框中,然后把输入框藏起来,但是藏起来怎么触发输入事件呢,这里用到input的focus属性,这个属性为true时,这个
input会自动获取焦点,我根据答案的字数循环展示view,每个view通过answer[index]这样的方式映射答案的一个字,每个view绑定点击事件,将focus的值从false改成true,点击view就会触发输入事件,
然后通过逻辑修改样式就好啦。。。
插点代码。。。。
<!-- 循环体开始 --> <view wx:for="{{currentQuestion.answer.length}}" wx:for-item="item" wx:key="{{index}}" class="center7"> <view class="inputCloze center4 {{(currentQuestion.answer.length <= currentQuestion.currentAns.length && index == currentQuestion.answer.length - 1) | index == currentQuestion.currentAns.length?'inputClozeborder':''}}" bindtap="changeCanInput"> <text>{{currentQuestion.currentAns[index]}}</text> </view> <view style="width:10rpx;"></view> </view> <!-- 循环体结束 --> <input data-type="{{currentQuestion.type}}" focus="{{caninput}}" data-qid="{{currentQuestion.qid}}" class="{{inputShow?'inputCloze1':'inputClozeHidden'}}" bindinput="inputCloze" value="{{currentQuestion.currentAns}}"></input>