ホームページ  >  記事  >  ウェブフロントエンド  >  JS は多肢選択評価システムを実装します

JS は多肢選択評価システムを実装します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-18 14:40:473380ブラウズ

今回は、多肢選択式質問評価システムを実装するための JS について説明します。JS が多肢選択式質問評価システムを実装するための 注意事項 とは何ですか。実際のケースを見てみましょう。

この記事では、JS を使用して簡単な多肢選択評価システムを実装する方法を紹介します。次の記事では、JS 多肢選択評価システムの実装方法と実装コードを説明します。一緒に学びましょう。

含まれる内容: JS カプセル化フォーム、JS 検証フォーム

評価システムと言われていますが、とても水っぽくてデータベースもなく、JSを使って単純な多肢選択式の評価システムを作っているだけです

。 -------------------------------------------------- ----------------------------------

1. デザインアイデア

フォームパッケージ:

【1】JSパッケージで送信するのでformタグは不要です

【2】入力項目として

入力タグを複数配置

【3】JSを書いて入力項目を取得し、getメソッドで別ページに送信します

認証フォーム(結果表示)

【1】get

で渡されたパラメータを取得する 【2】JSで解析する

【3】対応する位置に表示

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

2. 参考ソースコードは以下の通りです

request.html

りぃ

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

result.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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js 2.0はBaidu検索ボックスを実装します

jsは動的プロセス進行状況表示バーを実装します

bootstrap-tableはサーバーサイドのページング機能を実装します

以上がJS は多肢選択評価システムを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。