快活林资源网

JavaScript实现答题评分功能页面
网络编程 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

本文实例为大家分享了JavaScript实现答题评分功能的具体代码，供大家参考，具体内容如下

效果图

JavaScript实现答题评分功能页面

直接上代码

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./index.css" >
 <link rel="stylesheet" href="./timeTo.css" >
 <title>JavaScript实现一个在线做题测试网页</title>
</head>

<body>
 <div class="testContainer">
 <h3>在线答题</h3>
 <div class="testHeader">
  <div class="testLeft">测试已开始，请开始作答,请在30分钟内完成答题</div>
  <div class="testRight" id="countdown-11"></div>
 </div>
 <ul class="testContent">
 </ul>
 <div onclick="submitAnswer()" id="submitBtn">提交</div>
 </div>
 <script src="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">


CSS部分


index.css


timeTo.css





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





jquery.time-to.js部分





/**
 * Time-To jQuery plug-in
 * Show countdown timer or realtime clock
 *
 * @author Oleksii Teterin <altmoc@gmail.com>
 * @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' "left:' + left + 'px; top:-' + data.height + 'px"><li>0</li><li>0</li></ul></div>';
  style = data.fontSize
   "width:' + data.width + 'px; height:' + data.height + 'px;"'
   : ' style=""';
  dhtml1 = '<div class="first"' + style + '>' + ulhtml;
  dhtml2 = '<div' + style + '>' + ulhtml;
  dot2 = '<span>:</span>';
  maxWidth = Math.round((data.width * 2) + 3);
  captionSize = data.captionSize || (data.fontSize && Math.round(data.fontSize * 0.43));
  fsStyleVal = captionSize "' + fsStyleVal + '"' : '';

  thtml = (data.displayCaptions
   "max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>'
    + language.hours + '</figcaption></figure>' + dot2
   : '')
   + '<figure style="max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>' + language.min
   + '</figcaption></figure>' + dot2
   + '<figure style="max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>' + language.sec
   + '</figcaption></figure>'
   : (data.displayHours ">', 'margin-right:' + marginRight + 'px">')
    : dhtml2;
   }

   if (data.displayDays === 1) {
   dhtml = dhtml.replace('">', 'margin-right:' + marginRight + 'px">');
   }

   thtml = (data.displayCaptions
   "width:' + ((data.width * data.displayDays) + marginRight + 4) + 'px">$1'
    + '<figcaption style="' + fsStyleVal + 'padding-right:' + marginRight + 'px">'
    + language.days + '</figcaption></figure>'
   : '$1')
   .replace(/\$1/, dhtml) + thtml;
  }
  $this.html(thtml);
  } else if (method !== 'reset') {
  // exists clock
  $.extend(data, options);
  }

  $digits = $this.find('div');

  if ($digits.length < data.vals.length) {
  dif = data.vals.length - $digits.length;
  vals = data.vals;
  limits = data.limits;

  data.vals = [];
  data.limits = [];
  for (i = 0; i < $digits.length; i += 1) {
   data.vals[i] = vals[dif + i];
   data.limits[i] = limits[dif + i];
  }
  data.iSec = data.vals.length - 1;
  data.iHour = data.vals.length - 5;
  }
  data.sec = data.seconds;
  $this.data(data);

  if (method && methods[method]) {
  methods[method].call($this, data.seconds);
  } else if (data.start) {
  methods.start.call($this, data.seconds);
  } else {
  init.call($this, data.seconds);
  }
 });
 };


 function init(sec, force) {
 var data = this.data();
 var $digits = this.find('ul');
 var isInterval = false;
 var days, rest, hours, minutes, secs, str, i, j, val;

 if (!data.vals || $digits.length === 0) {
  return;
 }

 if (!sec) {
  sec = data.seconds;
 }

 if (data.intervalId) {
  isInterval = true;
  clearTimeout(data.intervalId);
 }


 days = Math.floor(sec / SECONDS_PER_DAY);
 rest = days * SECONDS_PER_DAY;
 hours = Math.floor((sec - rest) / SECONDS_PER_HOUR);

 rest += hours * SECONDS_PER_HOUR;

 minutes = Math.floor((sec - rest) / 60);

 rest += minutes * 60;

 secs = sec - rest;
 str = (days < 100 "htmlcode">



var colorArr = ['rgb(255,235,205)', 'rgb(255,240,245)', 'rgb(255,211,155)'];
var problemList = [
 [
 ' 1.一个长方体形状的盒子长、宽、高分别为20厘米、8厘米和2厘米。现在要用一张纸将其六个面完全包裹起来，要求从纸上剪下的部分不得用作贴补。请问这张纸的大小可能是下列哪一个" <li class='testItem'>" +
 "<div class='problem'>" + problemList[i][0] + "</div>" +
 "<div class='selectItem'>";
 for (var j = 0; j < problemList[i][1].length; j++) {
 template += " <div><input type='radio' name='" + problemList[i][1][j].name + "' value='" + problemList[i][1][j].value + "' data-score='" + problemList[i][1][j].selectScore + "'><span>" + problemList[i][1][j].selectAnswer + "</span></div>"
 }
 template += "</div></li>"
 }
 $('.testContent').append(template)
}
renderProblem(problemList);//渲染列表
var list_node = document.getElementsByTagName('li');
for (let i = 0; i < list_node.length; i++) {
 list_node[i].style.backgroundColor = colorArr[i % colorArr.length];
 list_node[i].onclick = function (e) {//点击选择答案
 if (e.target.tagName == 'INPUT') {
 answerArr = [];
 scoreArr = [];

 }
 }
}
//倒计时的插件
$('#countdown-11').timeTo({
 seconds: 1800,
 displayHours: false
});

$('#clock-w-step-cb').timeTo({
 step: function () {
 console.log('Executing every 3 ticks');
 },
 stepCount: 3
});
//提交执行的方法
function submitAnswer() {
 $("input[type='radio']:checked").each(function () {
 answerArr.push(Number($(this).val()));
 // scoreArr.push()
 scoreArr.push(Number($(this)[0].dataset.score))
 });
 for (var i = 0; i < scoreArr.length; i++) {
 score += scoreArr[i]
 }
 console.log(score)
 console.log(answerArr.length)
 if (answerArr.length == correctData.length) {
 if (JSON.stringify(answerArr) === JSON.stringify(correctData)) {
 alert('完全正确，得分为：' + score)
 } else {

 alert('继续努力，得分为：' + score)
 }
 location.reload();
 } else {
 alert('请提交完整的答题')
 }
}





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com