JS implements multiple choice assessment system-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS implements multiple choice assessment system

php中世界最好的语言

Apr 18, 2018 pm 02:40 PM

javascript Evaluation system

This time I will bring you JS to implement a multiple-choice question assessment system. What are the precautions for JS to implement a multiple-choice question assessment system? The following is a practical case, let's take a look.

This article will introduce to you how to use JS to implement a simple multiple-choice assessment system. The following article will give you the implementation method and implementation code of the JS multiple-choice assessment system, let’s learn about it together.

Contents included: JS encapsulation form, JS verification form

It is said to be an evaluation system, but it feels like it can only be regarded as a small demo. It is very watery, has no database, and only uses JS to make a simple multiple-choice evaluation system

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

1. Design ideas

Form encapsulation:

【1】Since JS is used for encapsulation and submission, the form tag

is not required. 【2】Place multiple input tags as input items

【3】Write JS to obtain input items and submit them to another page through get method

Verification form (display results)

【1】Get the parameters passed in by get

【2】Parse through JS

【3】Display to the corresponding position

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

2. The reference source code is as follows

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] = $(&#39;input:radio[name=&#39; + radio_name + &#39;]:checked&#39;).val()
      }
      for (var i = 1; i <= 2; i++) {//获取checkbox的的输入
        var checkbox_name = new String("checkbox_" + i);
        var chk_value = [];
        $(&#39;input:checkbox[name=&#39; + checkbox_name + &#39;]:checked&#39;).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>
<p id="time" style="color:red;float: right;margin: 12px 20px 0 0;padding: 0 0 0 0;font-size: xx-large"></p>
<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>

Copy after login

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

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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1422

Laravel Tutorial

1316

PHP Tutorial

1267

C# Tutorial

1240

Related knowledge

CUDA's universal matrix multiplication: from entry to proficiency! Mar 25, 2024 pm 12:30 PM

General Matrix Multiplication (GEMM) is a vital part of many applications and algorithms, and is also one of the important indicators for evaluating computer hardware performance. In-depth research and optimization of the implementation of GEMM can help us better understand high-performance computing and the relationship between software and hardware systems. In computer science, effective optimization of GEMM can increase computing speed and save resources, which is crucial to improving the overall performance of a computer system. An in-depth understanding of the working principle and optimization method of GEMM will help us better utilize the potential of modern computing hardware and provide more efficient solutions for various complex computing tasks. By optimizing the performance of GEMM

Huawei's Qiankun ADS3.0 intelligent driving system will be launched in August and will be launched on Xiangjie S9 for the first time Jul 30, 2024 pm 02:17 PM

On July 29, at the roll-off ceremony of AITO Wenjie's 400,000th new car, Yu Chengdong, Huawei's Managing Director, Chairman of Terminal BG, and Chairman of Smart Car Solutions BU, attended and delivered a speech and announced that Wenjie series models will be launched this year In August, Huawei Qiankun ADS 3.0 version was launched, and it is planned to successively push upgrades from August to September. The Xiangjie S9, which will be released on August 6, will debut Huawei’s ADS3.0 intelligent driving system. With the assistance of lidar, Huawei Qiankun ADS3.0 version will greatly improve its intelligent driving capabilities, have end-to-end integrated capabilities, and adopt a new end-to-end architecture of GOD (general obstacle identification)/PDP (predictive decision-making and control) , providing the NCA function of smart driving from parking space to parking space, and upgrading CAS3.0

Always new! Huawei Mate60 series upgrades to HarmonyOS 4.2: AI cloud enhancement, Xiaoyi Dialect is so easy to use Jun 02, 2024 pm 02:58 PM

On April 11, Huawei officially announced the HarmonyOS 4.2 100-machine upgrade plan for the first time. This time, more than 180 devices will participate in the upgrade, covering mobile phones, tablets, watches, headphones, smart screens and other devices. In the past month, with the steady progress of the HarmonyOS4.2 100-machine upgrade plan, many popular models including Huawei Pocket2, Huawei MateX5 series, nova12 series, Huawei Pura series, etc. have also started to upgrade and adapt, which means that there will be More Huawei model users can enjoy the common and often new experience brought by HarmonyOS. Judging from user feedback, the experience of Huawei Mate60 series models has improved in all aspects after upgrading HarmonyOS4.2. Especially Huawei M

Which version of Apple 16 system is the best? Mar 08, 2024 pm 05:16 PM

The best version of the Apple 16 system is iOS16.1.4. The best version of the iOS16 system may vary from person to person. The additions and improvements in daily use experience have also been praised by many users. Which version of the Apple 16 system is the best? Answer: iOS16.1.4 The best version of the iOS 16 system may vary from person to person. According to public information, iOS16, launched in 2022, is considered a very stable and performant version, and users are quite satisfied with its overall experience. In addition, the addition of new features and improvements in daily use experience in iOS16 have also been well received by many users. Especially in terms of updated battery life, signal performance and heating control, user feedback has been relatively positive. However, considering iPhone14

What are the computer operating systems? Jan 12, 2024 pm 03:12 PM

A computer operating system is a system used to manage computer hardware and software programs. It is also an operating system program developed based on all software systems. Different operating systems have different users. So what are the computer systems? Below, the editor will share with you what computer operating systems are. The so-called operating system is to manage computer hardware and software programs. All software is developed based on operating system programs. In fact, there are many types of operating systems, including those for industrial use, commercial use, and personal use, covering a wide range of applications. Below, the editor will explain to you what computer operating systems are. What computer operating systems are Windows systems? The Windows system is an operating system developed by Microsoft Corporation of the United States. than the most

Differences and similarities of cmd commands in Linux and Windows systems Mar 15, 2024 am 08:12 AM

Linux and Windows are two common operating systems, representing the open source Linux system and the commercial Windows system respectively. In both operating systems, there is a command line interface for users to interact with the operating system. In Linux systems, users use the Shell command line, while in Windows systems, users use the cmd command line. The Shell command line in Linux system is a very powerful tool that can complete almost all system management tasks.

Detailed explanation of how to modify system date in Oracle database Mar 09, 2024 am 10:21 AM

Detailed explanation of the method of modifying the system date in the Oracle database. In the Oracle database, the method of modifying the system date mainly involves modifying the NLS_DATE_FORMAT parameter and using the SYSDATE function. This article will introduce these two methods and their specific code examples in detail to help readers better understand and master the operation of modifying the system date in the Oracle database. 1. Modify NLS_DATE_FORMAT parameter method NLS_DATE_FORMAT is Oracle data

Stable Diffusion 3 technical report leaked out, Sora architecture has made great achievements again! Is the open source community violently beating Midjourney and DALL·E 3? Mar 06, 2024 pm 04:22 PM

StabilityAI released a detailed technical report today after releasing StableDiffusion3. The paper provides an in-depth analysis of the core technology of StableDiffusion3 - an improved version of the Diffusion model and a new architecture of Vincentian graphs based on DiT! Report address: https://stabilityai-public-packages.s3.us-west-2.amazonaws.com/Stable+Diffusion+3+Paper.pdf Passed human evaluation test, StableDiffusion3 in terms of font design and accurate response to prompts ,exceeded

See all articles