Angularjs 实现移动端在线测评效果(推荐)


Posted in Javascript onApril 05, 2017

注:此文所用的angular版本为 1.6

一、运行效果图

Angularjs 实现移动端在线测评效果(推荐)

二、需求

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代码

<div class="wrapper" ng-controller="RiskTestController as vm">
 <div class="process-box">
 <ul>
  <li class="page-icon"><span class="icon icon-txt">1</span></li>
  <li class="page-icon"><span class="icon icon-txt">2</span></li>
  <li class="page-icon"><span class="icon icon-txt">3</span></li>
  <li class="page-icon"><span class="icon icon-txt">4</span></li>
  <li class="page-icon"><span class="icon icon-txt">5</span></li>
  <li class="page-icon"><span class="icon icon-txt">6</span></li>
  <li class="page-icon"><span class="icon icon-txt">7</span></li>
  <li class="page-icon"><span class="icon icon-txt">8</span></li>
  <li class="page-icon"><span class="icon icon-txt">9</span></li>
  <li class="page-icon"><span class="icon icon-txt">10</span></li>
 </ul>
 <div class="page-info">
  已完成 {{vm.count}}/10
 </div>
 </div>
 <ul class="list-box" id="listBox">
 <li class="list-item" ng-repeat="question in vm.questionList track by $index" ng-class="{'first-li': $index == 0}">
  <div class="question-box">
  <div class="question">{{$index + 1}}. {{question.Question}}</div>
  <ul class="answer">
   <li class="answer-item" 
   ng-repeat="answer in question.AnswerList track by $index" 
   ng-click="vm.OnClickAnswer(answer, $parent.$index)"
   ng-class="{'selected': answer.Selected}">
   {{vm.letter[$index]}}. {{answer.Text}}
   </li>
  </ul>
  </div>
 </li>
 </ul>
 <div ng-show="vm.showResult">
 <span>{{vm.point}}</span>
 </div>
 </div>

核心CSS样式代码

.wrapper{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
 }
 .process-box{
  width: 17.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #FFF;
  margin: 1.5rem auto;
  border-radius: 0.2rem;
 }
 .page-icon{
  float: left;
  font-size: 0.4rem;
  color: #FFE7C9;
  width: 1.32rem;
  text-align: center;
 }
 .page-info{
  font-size: 0.65rem;
  color: #F3A84D;
 }
 .question-box{
  width: 17.25rem;
  background-color: #FFF;
  margin-left: 0.75rem;
  border-radius: 0.2rem;
 }
 .question{
  font-size: 0.8rem;
  color: #43689F;
  padding: 1.1rem 0 0.8rem 0.75rem;
 }
 .answer-item{
  font-size: 0.75rem;
  color: #80A1D0;
  border-top: 1px solid #EEE;
  padding: 1.1rem 0 1.1rem 1.0rem;
 }
 .icon-txt{
  background-color: orange;
  border-radius: 0.5rem;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  margin: 0.95rem auto;
 }
 .icon-txt-active{
  background-color: #FFE7C9;
  border-radius: 0.3rem;
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  line-height: 2.0rem;
  color: #FFF;
  margin: 1.25rem auto;
 }
 .list-item {
  width: 100%;
  position: absolute;
  transform: translate3d(100%,0,0);
  transition: transform 0.5s;
 }
 .first-li {
  transform: translate3d(0,0,0);
 }
 .selected {
  background-color: orange;
 }

控制器代码(Controller)

(function (agr) {
 //模块 - app
 var app = agr.module('app', []);
 //控制器 - 风险测评
 app.controller('RiskTestController', ['$scope', '$http', RiskTestController]);
 function RiskTestController($scope, $http) {
 var vm = this;
 vm.letter = ['A', 'B', 'C', 'D', 'E']; //答案编号
 vm.questionList = []; //题目
 vm.point = 0;  //得分
 vm.showResult = false; //是否显示结果页
 //加载数据 
 $http({
  method: 'GET',
  url: '/Service/RiskTest',
 }).then(function (resp) {  
  vm.questionList = resp.data.Questions;
 }, function (resp) {
  console.log("ERROR", resp);
 });
 var lis = document.querySelectorAll(".list-item"), //题目列表
  count = 0, //做了多少道题
  index = 0, //当前第几题
  BIG = 9; //最大索引值,因为总共10道题,所以是9(常量)
 //选择答案
 vm.OnClickAnswer = function (answer, $parentIndex) {

  var icons = document.querySelectorAll(".icon"),
  curr = $parentIndex; //当前题目索引
  next = $parentIndex + 1; //下一题索引
  nextQuestion = vm.questionList[next]; //下一道题
  //当前问题的答案列表
  var answerList = vm.questionList[$parentIndex].AnswerList;
  //为每个答案对象添加属性 Selected, 默认值为false
  for (var i = 0, len = answerList.length; i < len; i++) {
  answerList[i].Selected = false;
  }
  //将选中的答案设置为true (从而应用样式.selected 将背景色设置为黄色)
  answer.Selected = true;
  //判断是否为最后一道题
  if ($parentIndex < BIG) { //不是最后一题
  //改变顶部进度样式
  icons[curr].classList.remove("icon-txt");
  icons[curr].classList.add("icon-txt-active");
  //切换到下一题
  lis[curr].style.webkitTransform = 'Translate3d(-100%,0,0)';
  nextQuestion && (lis[next].style.webkitTransform = 'Translate3d(0,0,0)');
  } else { //是最后一题
  //改变顶部进度样式
  icons[curr].classList.remove("icon-txt");
  icons[curr].classList.add("icon-txt-active");
  //计算分数
  vm.point = CalcPoint();
  //显示测评结果
  vm.showResult = true;
  }
  //做了多少题
  count = CalcCount();

  //因为选中答案会自动切换到下一题,所以索引更新为next
  index = next;  
 }
 //计算分数
 var CalcPoint = function () {
  var point = 0;
  for (var i = 0, lenq = vm.questionList.length; i < lenq; i++) {
  for (var k = 0, lena = vm.questionList[i].AnswerList.length; k < lena; k++) {
   if (vm.questionList[i].AnswerList[k].Selected) {
   point += vm.questionList[i].AnswerList[k].Score;
   }
  }
  }
  return point;
 }
 //计算当前做了多少道题
 var CalcCount = function(){
  var count = 0;
  for (var i = 0, lenq = vm.questionList.length; i < lenq; i++) {
  for (var k = 0, lena = vm.questionList[i].AnswerList.length; k < lena; k++) {
   if (vm.questionList[i].AnswerList[k].Selected) {
   count++;
   }
  }
  }
  return count;
 }
 /** 触屏滑动效果处理 == 开始 == **/
 var offsetX = 0, //手指滑动偏移量
  startX,  //滑动开始时的X轴坐标点
  startTime; //手指滑动开始时间
 //触屏开始
 var startHandler = function (evt) {
  //每次触屏时将偏移量重置为0
  offsetX = 0;
  //记录X坐标
  startX = evt.touches[0].pageX;
  //取得时间戳
  startTime = new Date() * 1;
 };
 //触屏滑动
 var moveHandler = function (evt) {
  //阻止默认事件
  evt.preventDefault();
  //记录手指滑动的偏移量
  offsetX = evt.touches[0].pageX - startX;
  var curr = index,
  prev = index - 1,
  next = index + 1,
  prevQuestion = vm.questionList[prev],
  nextQuestion = vm.questionList[next],
  width = window.innerWidth; 
  //手指滑动时题卡跟着手指滑动(向右滑:[偏移量大于0,即正数,并且不是第一道题])
  if (offsetX > 0 && index > 0) {
  lis[curr].style.webkitTransform = 'Translate3d(' + offsetX + 'px, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(' + (offsetX - width) + 'px, 0, 0)');
  }
  //手指滑动时题卡跟着手指滑动(向左滑:[偏移量小于0,即负数,并且不是最后一题])
  if (offsetX < 0 && index < count) {
  lis[curr].style.webkitTransform = 'Translate3d(' + offsetX + 'px, 0, 0)';
  nextQuestion && (lis[next].style.webkitTransform = 'Translate3d(' + (offsetX + width) + 'px, 0, 0)');
  }
 };
 //触屏结束
 var endHandler = function (evt) {
  var boundary = window.innerWidth / 5, //当手指滑动的偏移量为屏幕的5分之一时才进行切换
  quickBoundary = 60,   //当手指快速滑动时,偏移量为60即可 
  endTime = new Date() * 1;   //获取结束时间戳
  //判断是否为快速滑动
  if (endTime - startTime > 1000) {
  //判断是向左滑还是向右滑
  if (offsetX > 0) {
   //判断是否达到切换偏移量
   if (offsetX >= boundary) {
   MoveToRight();
   } else {
   ResetMoveRight();
   }
  } else{
   if (offsetX < -boundary) {
   MoveToLeft();
   } else {
   ResetMoveLeft();
   }
  }
  } else {
  if (offsetX > 0) {
   if (offsetX >= quickBoundary) {
   MoveToRight();
   } else {
   ResetMoveRight();
   }
  } else {
   if (offsetX < -quickBoundary) {
   MoveToLeft();
   } else {
   ResetMoveLeft();
   }
  }
  }
 };
 //向右滑动事件
 var MoveToRight = function () {
  var curr = index,
  prev = index -1,
  prevQuestion = vm.questionList[prev];
  if (curr > 0) {
  lis[curr].style.webkitTransform = 'Translate3d(100%, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(0, 0, 0)');
  index--;
  }  
 }
 //右滑重置(当滑动距离没达到切换偏移量时,题卡回到原点)
 var ResetMoveRight = function () {
  var curr = index,
  prev = index -1,
  prevQuestion = vm.questionList[prev];
  lis[curr].style.webkitTransform = 'Translate3d(0, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(-100%, 0, 0)');
 }
 //向左滑动事件
 var MoveToLeft = function () {
  var curr = index,
  next = index + 1,
  nextQuestion = vm.questionList[next];
  if (curr < count) {
  lis[curr].style.webkitTransform = 'Translate3d(-100%, 0, 0)';
  nextQuestion && (lis[next].style.webkitTransform = 'Translate3d(0, 0, 0)');
  index++;
  } 
 }
 //左滑重置(当滑动距离没达到切换偏移量时,题卡回到原点)
 var ResetMoveLeft = function () {
  var curr = index,
  next = index + 1,
  nextQuestion = vm.questionList[next];
  lis[curr].style.webkitTransform = 'Translate3d(0, 0, 0)';
  nextQuestion && (lis[next].style.webkitTransform = 'Translate3d(100%, 0, 0)');
 }
 //监听滑动事件 
 var outer = document.getElementById("listBox");
 outer.addEventListener('touchstart', startHandler);
 outer.addEventListener('touchmove', moveHandler);
 outer.addEventListener('touchend', endHandler);
 

 /** 触屏滑动效果处理 == 结束 == **/
 }
})(angular);

Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
Javascript的比较汇总
Jul 25 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 #Javascript
微信小程序 页面跳转如何实现传值
Apr 05 #Javascript
微信小程序 数据遍历的实现
Apr 05 #Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 #Javascript
JS实现复选框的全选和批量删除功能
Apr 05 #Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 #Javascript
JS二叉树的简单实现方法示例
Apr 05 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
js 匿名调用实现代码
2009/06/19 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JS之相等操作符详解
2016/09/13 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
基于python 字符编码的理解
2017/09/02 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
详解Python中is和==的区别
2019/03/21 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript