{ "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}] } ]}

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

.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; }

(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);