首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现简单的选择题测评系统代码思路详解(demo)

Posted in Javascript onSeptember 03, 2017

包含内容：JS封装表单，JS校验表单

说是测评系统，感觉只能算是一个小小的Demo，很水，，没有数据库库，，仅使用JS做简单的选择题测评系统

--------------------------------------------------------------------------------

一、设计思路

表单封装：

【1】由于采用JS封装提交所以，不需要form标签

【2】放置多个input标签，作为输入项

【3】编写JS获取输入项，并通过get方式提交到另一个页面

校验表单（显示结果）

【1】获取get传入的参数

【2】通过JS解析

【3】显示到相应位置

--------------------------------------------------------------------------------

二、参考源码如下

request.html

<html>
<head>
  <title>考试系统</title>
  <meta http-equiv="accept-charset" charset="utf-8">
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
    function getjson() {
      var radio = new Array();
      for (var i = 1; i <= 5; i++) {//获取radio的值
        var radio_name = new String("radio_" + i);
        radio[i - 1] = $('input:radio[name=' + radio_name + ']:checked').val()
      }
      for (var i = 1; i <= 2; i++) {//获取checkbox的的输入
        var checkbox_name = new String("checkbox_" + i);
        var chk_value = [];
        $('input:checkbox[name=' + checkbox_name + ']:checked').each(function () {
          chk_value.push($(this).val());
        });
        radio[i + 4] = "";//置为空
        for (var j = 0; j < chk_value.length; j++) {
          radio[i + 4] = radio[i + 4] + chk_value[j];
        }
      }
      //数组转json串
      var json = JSON.stringify(radio);
      return json;
    }
    function my_confirm() {
      var json = getjson();
      var msg = "您真的答案是：" + json + ",是否确认提交";
      if (confirm(msg) == true) {
        window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + json;
      } else {
        return false;
      }
    }
    $(function () {
      var m = 1;
      var s = 10;
      setInterval(function () {
        if (m >= 0) {
          if (s < 10) {
            $('#time').html("剩余时间：" + m + ':0' + s);
          } else {
            $('#time').html("剩余时间：" + m + ':' + s);
          }
          s--;
          if (s < 0) {
            s = 59;
            m--;
          }
          if (m == 0 && s < 1) {
            window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + getjson();
          }
        }
      }, 1000)
    })
  </script>
</head>
<body>
<h3 style="float: left">2016--2017学年期末测试题</h3>
<div id="time" style="color:red;float: right;margin: 12px 20px 0 0;padding: 0 0 0 0;font-size: xx-large"></div>
<br/><br/><br/>
<hr/>
<h4>一、单选题（每题12分，满分60分）</h4>
1.当方法遇到异常又不知如何处理时，下列（） 做法是正确的。<br>
<input type="radio" name="radio_1" value="A">A、捕获异常<br>
<input type="radio" name="radio_1" value="B">B、抛出异常<br>
<input type="radio" name="radio_1" value="C">C、声明异常<br>
<input type="radio" name="radio_1" value="D">D、嵌套异常<br>
2.下列说法错误的是() <br>
<input type="radio" name="radio_2" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="radio" name="radio_2" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="radio" name="radio_2" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="radio" name="radio_2" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
3.下列创建数组的方法哪个是错误的? <br>
<input type="radio" name="radio_3" value="A">A、Date[] arr = new Date[5];<br>
<input type="radio" name="radio_3" value="B">B、Date arr[] = new Date[];<br>
<input type="radio" name="radio_3" value="C">C、Date arr[][] = new Date[4][5];<br>
<input type="radio" name="radio_3" value="D">D、Date arr[][] = new Date[4][];<br>
4.在读文件Employee.txt 时，可以直接使用该文件作为参数的类是() <br>
<input type="radio" name="radio_4" value="A">A、BufferedReader<br>
<input type="radio" name="radio_4" value="B">B、FileInputStream<br>
<input type="radio" name="radio_4" value="C">C、DataOutputStream<br>
<input type="radio" name="radio_4" value="D">D、DataInputStream<br>
5.下列关于线程的说法中，错误的是？ <br>
<input type="radio" name="radio_5" value="A">A、线程必须通过方法start() 来启动。<br>
<input type="radio" name="radio_5" value="B">B、线程创建后，其优先级是可以改变的。<br>
<input type="radio" name="radio_5" value="C">C、实现Runnable接口或者从Thread类派生的线程类没有区别。<br>
<input type="radio" name="radio_5" value="D">D、当对象用synchronized 修饰时，表明该对象在任一时刻只能由一个线程访问。<br>
<br/>
<h4>二、多选题（每题20分，满分40分，错选、少选、多选不得分）</h4>
6.下列说法正确的是() <br>
<input type="checkbox" name="checkbox_1" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="checkbox" name="checkbox_1" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="checkbox" name="checkbox_1" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="checkbox" name="checkbox_1" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
7.当方法遇到异常又不知如何处理时，下列（） 做法是不正确的。<br>
<input type="checkbox" name="checkbox_2" value="A">A、捕获异常<br>
<input type="checkbox" name="checkbox_2" value="B">B、抛出异常<br>
<input type="checkbox" name="checkbox_2" value="C">C、声明异常<br>
<input type="checkbox" name="checkbox_2" value="D">D、嵌套异常<br>
<hr/>
<input type="button" onclick="my_confirm()" value="考试完成">
</body>
</html>

--------------------------------------------------------------------------------

result.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>考试结果</title>
  <script src="jquery.min.js"></script>
  <script>

    //获取url中的参数
    function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数
      if (r != null) return unescape(r[2]);
      return null; //返回参数值
    }
    function showResult() {
      var answer = ["B", "D", "B", "B", "D", "ABC", "ACD"];//标准答案
      var answer_score = [12, 12, 12, 12, 12, 20, 20];//答案的分数
      var user_answer = JSON.parse(getUrlParam("json"));//获取用户答案
      var radio_num = parseInt(getUrlParam("radio"));//获取单选个数
      var checkbox_num = parseInt(getUrlParam("checkbox"));//获取多选个数
      var radio_result = 0;//单选分数
      var checkbox_result = 0;//多选分数
      var radio_right_num = 0;//单选答对个数
      var checkbox_right_num = 0;//多选答对个数
      var result = 0;//总分数
      var user_answer_result = new Array();//用户没到题的答题情况
      for (var i = 0; i < user_answer.length; i++) {
        if (user_answer[i] == answer[i]) {
          if (i < radio_num) {
            radio_result = radio_result + answer_score[i];
            radio_right_num++;
          } else {
            checkbox_result = checkbox_result + answer_score[i];
            checkbox_right_num++;
          }
          user_answer_result[i] = "正确";
        } else {
          user_answer_result[i] = "错误";
        }
      }
      result = checkbox_result + radio_result;
      //结果展示
      var show_result1;
      var show_result2;
      var show_result3;
      var show_result4;
      var show_result5;
      var show_result6;
      show_result1 = "你的答案结果为：";
      for (var i = 0; i < user_answer.length; i++) {
        show_result1 = show_result1 + (i + 1) + "：" + user_answer_result[i] + "； ";
      }
      show_result2 = "总题目个数：" + user_answer.length;
      show_result3 = "答对单选题题目个数：" + radio_right_num + "； 得分：" + radio_result;
      show_result4 = "答对多选题题目个数：" + checkbox_right_num + "； 得分：" + checkbox_result;
      show_result5 = "答错题目个数：" + (user_answer.length - radio_right_num - checkbox_right_num);
      show_result6 = " 本次考试总成绩为：" + result;
      $("p#show_result1").html(show_result1);
      $("p#show_result2").html(show_result2);
      $("p#show_result3").html(show_result3);
      $("p#show_result4").html(show_result4);
      $("p#show_result5").html(show_result5);
      $("p#show_result6").html(show_result6);
    }
  </script>
</head>
<body>
<h2>考试结束！</h2>
<hr/>
<input type="button" onclick="showResult()" value="查看结果">
<p id="show_result1">
<p>
<hr/>
<p id="show_result2"></p>
<p id="show_result3"></p>
<p id="show_result4"></p>
<p id="show_result5"></p>
<hr/>
<p id="show_result6"></p>
</body>
</html>

结果如下图：

JS实现简单的选择题测评系统代码思路详解(demo)

总结

以上所述是小编给大家介绍的JS实现简单的选择题测评系统代码思路详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

JS实现简单的选择题测评系统代码思路详解(demo)

- Author -

Small_Mouse0

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
鼠标经过子元素触发mouseout，mouseover事件的解决方案
Jul 26 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
Angular4表单验证代码详解
Sep 03 #Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
新西兰购物网站(42) 菲律宾购物网站(13) 北美洲购物网站(1) 卡塔尔购物网站(3) 越南购物网站(9) 匈牙利购物网站(11) 巴基斯坦购物网站(2) 智利购物网站(5) 捷克购物网站(26) 秘鲁购物网站(1)
You might like
PHP脚本数据库功能详解（下）
2006/10/09 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS按字节截取字符长度实例
2013/11/20 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
JSON创建键值对（key是中文或者数字）方式详解
2017/08/24 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python实现键盘输入的实操方法
2019/07/16 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
曼城官方网上商店：Manchester City
2019/09/10 全球购物
迪士尼法国在线商店：shopDisney FR
2020/12/03 全球购物
护士辞职信范文
2014/01/19 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
文明单位汇报材料
2014/12/24 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
python 中的jieba分词库
2021/11/23 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS