JavaScript实现答题评分功能页面

 
 
 
 
 
 



 

 
在线答题
 

  
测试已开始，请开始作答,请在30分钟内完成答题
  

 
 

 
 
提交
 
 
 
 
 

figure, figcaption {
 display: block;
}

.transition {
 -webkit-transition: top 400ms linear;
 -moz-transition: top 400ms linear;
 -ms-transition: top 400ms linear;
 -o-transition: top 400ms linear;
 transition: top 400ms linear;
}

.timeTo {
 font-family: Tahoma, Verdana, Aial, sans-serif;
 font-size: 28px;
 line-height: 108%;
 font-weight: bold;
 height: 32px;
}

.timeTo span {
 vertical-align: top;
}

.timeTo.timeTo-white div {
 color: black;
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(38%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* IE10+ */
 background: linear-gradient(to bottom, #ffffff 38%,#cccccc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.timeTo.timeTo-black div {
 color: white;
 background: #45484d; /* Old browsers */
 background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
 background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.timeTo.timeTo-black .timeTo-alert {
 background: #a74444; /* Old browsers */
 background: -moz-linear-gradient(top, #a74444 0%, #3f0000 67%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a74444), color-stop(67%,#3f0000)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a74444 0%,#3f0000 67%); /* IE10+ */
 background: linear-gradient(to bottom, #a74444 0%,#3f0000 67%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a74444', endColorstr='#3f0000',GradientType=0 ); /* IE6-9 */
}

.timeTo.timeTo-white .timeTo-alert {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 35%, #e17373 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#ffffff), color-stop(100%,#e17373)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 35%,#e17373 100%); /* IE10+ */
 background: linear-gradient(to bottom, #ffffff 35%,#e17373 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e17373',GradientType=0 ); /* IE6-9 */
}

.timeTo figure {
 display: inline-block;
 margin: 0;
 padding: 0;
}
.timeTo figcaption {
 text-align: center;
 /*font-size: 12px;*/
 line-height: 80%;
 font-weight: normal;
 color: #888;
}

.timeTo div {
 position: relative;
 display: inline-block;
 width: 25px;
 height: 30px;
 border-top: 1px solid silver;
 border-right: 1px solid silver;
 border-bottom: 1px solid silver;
 overflow: hidden;
}
.timeTo div.first {
 border-left: 1px solid silver;
}

.timeTo ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 position: absolute;
 left: 3px;
}

.timeTo ul li {
 margin: 0;
 padding: 0;
 list-style: none;
}

/**
 * Time-To jQuery plug-in
 * Show countdown timer or realtime clock
 *
 * @author Oleksii Teterin 
 * @version 1.3.0
 * @license MIT http://opensource.org/licenses/MIT
 * @date 2019-05-14
 * @host https://github.com/Lexxus/jq-timeTo
 */

(function (factory) {
 if (typeof define === 'function' && define.amd) {
 // AMD (RequireJS)
 define(['jquery'], factory);
 } else if (typeof exports === 'object') {
 // CommonJS (Node)
 /* eslint-disable import/no-unresolved */
 module.exports = factory(require('jquery'));
 } else {
 // globals
 factory(jQuery);
 }
}(function ($) {
 var SECONDS_PER_DAY = 86400;
 var SECONDS_PER_HOUR = 3600;

 /* eslint-disable no-multi-spaces */
 var defaults = {
 callback: null,  // callback function for exec when timer out
 step: null,  // callback function to exec every {stepCount} ticks
 stepCount: 1,  // number of ticks to increment before executing stepCount
 captionSize: 0,  // font-size by pixels for captions, if 0 then calculate automaticaly
 countdown: true,  // is countdown or real clock
 countdownAlertLimit: 10, // limit in seconds when display red background
 displayCaptions: false, // display captions under digit groups
 displayDays: 0,  // display day timer, count of days digits
 displayHours: true, // display hours
 fontFamily: 'Verdana, sans-serif',
 fontSize: 0,  // font-size of a digit by pixels (0 - use CSS instead)
 lang: 'en',  // language of caption
 languages: {},  // extra or overridden languages
 seconds: 0,  // timer's countdown value in seconds
 start: true,  // true to start timer immediately
 theme: 'white',  // 'white' or 'black' theme fo timer's view

 width: 25,  // width of a digit area
 height: 30,  // height of a digit area
 gap: 11,   // gap size between numbers
 vals: [0, 0, 0, 0, 0, 0, 0, 0, 0], // private, current value of each digit
 limits: [9, 9, 9, 2, 9, 5, 9, 5, 9], // private, max value of each digit
 iSec: 8,   // private, index of second digit
 iHour: 4,  // private, index of hour digit
 tickTimeout: 1000, // timeout betweet each timer tick in miliseconds
 intervalId: null, // private
 tickCount: 0  // private
 };

 var methods = {
 start: function (sec) {
  var intervalId;

  if (sec) {
  init.call(this, sec);
  intervalId = setTimeout(tick.bind(this), 1000);

  // save start time
  this.data('ttStartTime', $.now());
  this.data('intervalId', intervalId);
  }
 },

 stop: function () {
  var data = this.data();

  if (data.intervalId) {
  clearTimeout(data.intervalId);
  this.data('intervalId', null);
  }
  return data;
 },

 reset: function (sec) {
  var data = methods.stop.call(this);
  var secs = typeof sec === 'undefined' &＃63; data.seconds : sec;

  this.find('div').css({ backgroundPosition: 'left center' });
  this.find('ul').parent().removeClass('timeTo-alert');

  init.call(this, secs, true);
 }
 };

 var dictiOnary= {
 en: { days: 'days', hours: 'hours', min: 'minutes', sec: 'seconds' },
 ru: { days: 'дней', hours: 'часов', min: 'минут', sec: 'секунд' },
 ua: { days: 'днiв', hours: 'годин', min: 'хвилин', sec: 'секунд' },
 de: { days: 'Tag', hours: 'Uhr', min: 'Minuten', sec: 'Secunden' },
 fr: { days: 'jours', hours: 'heures', min: 'minutes', sec: 'secondes' },
 es: { days: 'días', hours: 'horas', min: 'minutos', sec: 'segundos' },
 sp: { days: 'días', hours: 'horas', min: 'minutos', sec: 'segundos' },
 it: { days: 'giorni', hours: 'ore', min: 'minuti', sec: 'secondi' },
 nl: { days: 'dagen', hours: 'uren', min: 'minuten', sec: 'seconden' },
 no: { days: 'dager', hours: 'timer', min: 'minutter', sec: 'sekunder' },
 pt: { days: 'dias', hours: 'horas', min: 'minutos', sec: 'segundos' },
 tr: { days: 'gün', hours: 'saat', min: 'dakika', sec: 'saniye' },
 pl: { days: 'dni', hours: 'godziny', min: 'minuty', sec: 'secundy' }
 };

 /* eslint-enable no-multi-spaces */

 if (typeof $.support.transition === 'undefined') {
 $.support.transition = (function () {
  var thisBody = document.body || document.documentElement;
  var thisStyle = thisBody.style;
  var support = thisStyle.transition !== undefined
  || thisStyle.WebkitTransition !== undefined
  || thisStyle.MozTransition !== undefined
  || thisStyle.MsTransition !== undefined
  || thisStyle.OTransition !== undefined;

  return support;
 }());
 }

 $.fn.timeTo = function () {
 var optiOns= {};
 var now = Date.now();
 var j, arg, num, method, time, days, tt, sec, m, t;

 for (j = 0; j  now) {
  options.secOnds= Math.floor((time - now) / 1000);
  } else {
  options.secOnds= 0;
  }
 } else if (options.time || !options.seconds) {
  time = options.time;

  if (!time) {
  time = new Date(now);
  }

  if (typeof time === 'object' && time.getTime) {
  options.secOnds= (time.getDate() * SECONDS_PER_DAY) + (time.getHours() * SECONDS_PER_HOUR) +
   (time.getMinutes() * 60) + time.getSeconds();
  options.countdown = false;
  } else if (typeof time === 'string') {
  tt = time.split(':');
  sec = 0;
  m = 1;

  while (tt.length) {
   t = tt.pop();
   sec += t * m;
   m *= 60;
  }
  options.secOnds= sec;
  options.countdown = false;
  }
 }

 if (options.countdown !== false
  && options.seconds > SECONDS_PER_DAY
  && typeof options.displayDays === 'undefined') {
  days = Math.floor(options.seconds / SECONDS_PER_DAY);
  options.displayDays = (days <10 && 1) || (days <100 && 2) || 3;
 } else if (options.displayDays === true) {
  options.displayDays = 3;
 } else if (options.displayDays) {
  options.displayDays = options.displayDays > 0 &＃63; Math.floor(options.displayDays) : 3;
 }

 return this.each(function () {
  var $this = $(this);
  var data = $this.data();
  var defs, opt, i, css, language, left, ulhtml, style, dhtml1, dhtml2, dot2, maxWidth,
  captionSize, fsStyleVal, fsStyle, thtml, marginRight, dhtml, $digits, dif, vals, limits;

  if (data.intervalId) {
  clearInterval(data.intervalId);
  data.intervalId = null;
  }

  if (!data.vals) {
  // new clock
  if (data.opt) {
   opt = data.options;
  } else {
   opt = options;
  }

  // clone the defaults object
  defs = Object.keys(defaults).reduce(function (obj, key) {
   if (Array.isArray(defaults[key])) {
   obj[key] = defaults[key].slice(0);
   } else {
   obj[key] = defaults[key];
   }
   return obj;
  }, {});

  data = $.extend(defs, opt);
  data.optiOns= opt;

  data.height = Math.round((data.fontSize * 100) / 93) || data.height;
  data.width = Math.round((data.fontSize * 0.8) + (data.height * 0.13)) || data.width;
  data.displayHours = !!(data.displayDays || data.displayHours);

  css = {
   fontFamily: data.fontFamily
  };
  if (data.fontSize > 0) {
   css.fOntSize= data.fontSize + 'px';
  }
  language = data.languages[data.lang] || dictionary[data.lang];

  $this
   .addClass('timeTo')
   .addClass('timeTo-' + data.theme)
   .css(css);

  left = Math.round(data.height / 10);
  ulhtml = '
0
0

var colorArr = ['rgb(255,235,205)', 'rgb(255,240,245)', 'rgb(255,211,155)'];
var problemList = [
 [
 ' 1.一个长方体形状的盒子长、宽、高分别为20厘米、8厘米和2厘米。现在要用一张纸将其六个面完全包裹起来，要求从纸上剪下的部分不得用作贴补。请问这张纸的大小可能是下列哪一个&＃63;( )？',
 [
 {
 'selectAnswer': '长25cm，宽17cm',
 'selectScore': '0',
 'name': 'Q1',
 'value': '1'
 },
 {
 'selectAnswer': '长26cm，宽14cm',
 'selectScore': '0',
 'name': 'Q1',
 'value': '2'
 },
 {
 'selectAnswer': '长24cm，宽21cm',
 'selectScore': '5',
 'name': 'Q1',
 'value': '3'
 },
 {
 'selectAnswer': '长24cm，宽14cm',
 'selectScore': '0',
 'name': 'Q1',
 'value': '4'
 }
 ]
 ],
 [
 '2.有A,B,C三个学生，一个出生在北京，一个出生在上海，一个出生在广州。他们中一个学物理专业，一个学数学专业，一个学计算机。其中（1）A不是学物理的，B不是学计算机的；（2）学物理的不出生在上海；（3）学计算机的出生在北京；（4）B不出生在广州。请根据上述条件，判断A的专业（）&＃63;',
 [
 {
 'selectAnswer': '物理',
 'selectScore': '0',
 'name': 'Q2',
 'value': '1'
 },
 {
 'selectAnswer': '数学',
 'selectScore': '0',
 'name': 'Q2',
 'value': '2'
 },
 {
 'selectAnswer': '计算机',
 'selectScore': '5',
 'name': 'Q2',
 'value': '3'
 },
 {
 'selectAnswer': '都有可能',
 'selectScore': '0',
 'name': 'Q2',
 'value': '4'
 }
 ]
 ],
 [
 '3.在某次税务检查后，四个工商管理人员各自做出了结论,甲说;”所有个体户都没纳税。”。乙说：”服装个体户陈老板没纳税。”丙说：”个体户不都没税”，丁说：”有的个体户没税”如果四个人中只有一个断定属实，那么以下哪项是真的？（）',
 [
 {
 'selectAnswer': '丁断定属实，但陈老板纳了税。',
 'selectScore': '0',
 'name': 'Q3',
 'value': '1'
 },
 {
 'selectAnswer': '甲断定属实，陈老板没有纳税',
 'selectScore': '0',
 'name': 'Q3',
 'value': '2'
 },
 {
 'selectAnswer': '乙断定属实，陈老板没有纳税。',
 'selectScore': '0',
 'name': 'Q3',
 'value': '3'
 },
 {
 'selectAnswer': '丙断定属实，但陈老板没有纳税。',
 'selectScore': '5',
 'name': 'Q3',
 'value': '4'
 }
 ]
 ],
 [
 '4.找规律 1, 32, 81, 64, 25, ( ), 1',
 [
 {
 'selectAnswer': '5',
 'selectScore': '0',
 'name': 'Q4',
 'value': '1'
 },
 {
 'selectAnswer': '6',
 'selectScore': '5',
 'name': 'Q4',
 'value': '2'
 },
 {
 'selectAnswer': '10',
 'selectScore': '0',
 'name': 'Q4',
 'value': '3'
 },
 {
 'selectAnswer': '12',
 'selectScore': '0',
 'name': 'Q4',
 'value': '4'
 }
 ]
 ]
]
var correctData = [3, 3, 4, 2];//正确题目的序号
var answerArr = [];//存储回答的答案
var scoreArr = [];//存储回答的分数数组
var score = null;//分数
//问题列表渲染
function renderProblem(problemList) {
 var template = '';
 for (var i = 0; i " + problemList[i][0] + "