Angularjs如何实现移动端在线测评效果
这篇文章主要介绍了Angularjs如何实现移动端在线测评效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都网站建设、网站建设介绍好的网站是理念、设计和技术的结合。创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设,用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础,将技术与创意整合到网站之中,以契合客户的方式做到创意性的视觉化效果。
注:此文所用的angular版本为 1.6
一、运行效果图
二、需求
1. 点击选项时,背景变为黄色(即选中状态),并且自动切换到下一题
2. 切换到下一题时,顶部进度随之改变
3. 选中时要把对应的分值记录下来(因为要根据分值算出最后的测评结果)
4. 通过向右滑动可以查看前面做过的题目
5. 当前题目没选,无法切换到下一题
6. 当选中最后一道题目时,切换到测评结果页
三、具体实现
题目json数据,总共10道题,这里为了节省篇幅,就只贴出3道了。 (Score是分数, OrderNo是答案序号)
{ "Questions": [ { "Question":"您的年龄范围:", "AnswerList":[ {"Text":"30岁以下","Score":5,"OrderNo":0}, {"Text":"30-39岁","Score":4,"OrderNo":1}, {"Text":"40-49岁","Score":3,"OrderNo":2}, {"Text":"50-59岁","Score":2,"OrderNo":3}, {"Text":"60岁以上","Score":1,"OrderNo":4}] }, { "Question":"您的婚姻状况为:", "AnswerList":[ {"Text":"未婚","Score":5,"OrderNo":1}, {"Text":"已婚","Score":4,"OrderNo":2}, {"Text":"单身有婚史","Score":3,"OrderNo":3}, {"Text":"丧偶","Score":2,"OrderNo":4}, {"Text":"不详","Score":1,"OrderNo":5}] }, { "Question":"您的收入需要用来供养其他人(如父母或子女)吗?", "AnswerList":[ {"Text":"不需供养其他人","Score":5,"OrderNo":1}, {"Text":"供养1人","Score":4,"OrderNo":2}, {"Text":"供养2人","Score":3,"OrderNo":3}, {"Text":"供养3人","Score":2,"OrderNo":4}, {"Text":"供养4人或以上","Score":1,"OrderNo":5}] } ] }
Html代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
已完成 {{vm.count}}/10
-
{{$index + 1}}. {{question.Question}}
- {{vm.letter[$index]}}. {{answer.Text}}