實例展示JS實現簡單的選擇題測評系統
本文跟大家分享js實作簡單的選擇題評測系統實例程式碼，非常不錯，有參考借鏡價值，需要的朋友參考下吧
包含內容：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 id="学年期末测试题">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 id="一-单选题-每题-分-满分-分">一、单选题（每题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 id="二-多选题-每题-分-满分-分-错选-少选-多选不得分">二、多选题（每题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 id="考试结束">考试结束！</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實現簡單的選擇題測評系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
最簡單的硬碟序號查詢方式
Feb 26, 2024 pm 02:24 PM
硬碟序號是硬碟的一個重要標識，通常用於唯一標識硬碟以及進行硬體識別。在某些情況下，我們可能需要查詢硬碟序號，例如在安裝作業系統、尋找正確裝置驅動程式或進行硬碟維修等情況下。本文將介紹一些簡單的方法，幫助大家查詢硬碟序號。方法一：使用Windows命令提示字元開啟命令提示字元。在Windows系統中，按下Win+R鍵，輸入"cmd"並按下回車鍵即可開啟命
wallpaper engine能家庭共享嗎
Mar 18, 2024 pm 07:28 PM
請問Wallpaper是否支持家庭共享呢?很遺憾，不能支持哦。儘管如此，我們仍有解決方案。例如，可以用小號購買或先由大號下載好軟體和壁紙，然後再更換到小號。簡單啟動軟體是完全沒問題的。 wallpaperengine能家庭共享嗎答：Wallpaper暫不支援家庭共享功能。 1.據了解，WallpaperEngine似乎不適合家庭共享環境。 2.為了解決這個困擾，建議您考慮購買全新帳號;3、或先在主帳號下載所需軟體和桌布，再切到其他帳號。 4.只要輕觸開啟軟體，便無礙。 5、您可以在上述網頁上查看屬性“
iBatis和MyBatis：哪個比較適合你？
Feb 19, 2024 pm 04:38 PM
iBatis與MyBatis：你該選擇哪一個？簡介：隨著Java語言的快速發展，許多持久化框架也應運而生。 iBatis和MyBatis是兩個備受歡迎的持久化框架，它們都提供了一個簡單而高效的資料存取解決方案。本文將介紹iBatis和MyBatis的特點和優勢，並給出一些具體的程式碼範例，幫助你選擇合適的框架。 iBatis簡介：iBatis是一個開源的持久化框架
wallpaper engine怎麼設定鎖定螢幕桌布？ wallpaper engine使用方法
Mar 13, 2024 pm 08:07 PM
wallpaperengine是常用於設定桌面壁紙的軟體，使用者在wallpaperengine裡可以搜尋自己喜歡的圖片來產生桌面壁紙，也支援將電腦中的圖片加入到wallpaperengine中設定成電腦桌布。下面就來看看wallpaperengine設定鎖定螢幕桌布的方法吧。 wallpaperengine設定鎖定畫面壁紙教學 1、先進入軟體，然後選擇已安裝，點選「設定壁紙選項」。 2、單獨設定選擇完壁紙後需點選右下方的確定。 3、再去點選上方的設定選和預覽。 4、接下來
wallpaper engine看片有病毒嗎
Mar 18, 2024 pm 07:28 PM
使用者在使用wallpaperengine可以下載各種壁紙，也可以使用動態壁紙，有很多使用者不知道wallpaperengine看片有沒有病毒，只是影片檔是無法當作病毒的。 wallpaperengine看片有病毒嗎答：不會。 1、只是視訊檔案是無法作為病毒的。 2、只要確保從可信的來源下載視頻，並保持電腦的安全防護措施，就可以避免病毒感染的風險。 3.應用程式類壁紙是apk格式，apk可能會攜帶木馬病毒。 4.WallpaperEngine本身沒有病毒，但是創意工坊裡的一些應用程式類壁紙可能有病毒。
wallpaper engine的壁紙在哪個文件夾
Mar 19, 2024 am 08:16 AM
使用者在使用wallpaper時可以下載各種自己喜歡的桌布來使用，有許多使用者不知道wallpaper的桌佈在哪個資料夾，使用者下載的桌布存放在content資料夾裡。 wallpaper的壁紙在哪個文件夾答：content文件夾。 1、開啟檔案總管。 2、點選左側「此電腦」。 3、找到“STEAM”資料夾。 4、選擇“steamapps”。 5、點選“workshop”。 6.找尋「content」資料夾。
wallpaper engine耗電多嗎
Mar 18, 2024 pm 08:30 PM
使用者在使用wallpaperengine時可以更改自己的電腦桌布，有很多使用者不知道wallpaperengine耗電多嗎，動態桌布是會比靜態壁紙更耗電一點，但耗得不是很多。 wallpaperengine耗電多嗎答：不多。 1.動態壁紙是會比靜態壁紙更耗電一點，但耗得不是很多。 2.開啟動態桌布會增加電腦耗電量，並帶走一小小部分記憶體佔用。 3.用戶不需要擔心動態壁紙消耗電比較嚴重的。
Microsoft Edge瀏覽器怎麼更改字體大小-Microsoft Edge瀏覽器更改字體大小的方法
Mar 04, 2024 pm 05:58 PM
想必大家對MicrosoftEdge瀏覽器並不模式，不過你們知道MicrosoftEdge瀏覽器怎麼更改字體大小嗎?下面這篇文章就講述了MicrosoftEdge瀏覽器更改字體大小的方法，讓我們一起去下文好好學習學習吧。首先,找到MicrosoftEdge瀏覽器雙擊開啟。可在桌面快速鍵、開始功能表或工作列找到MicrosoftEdge瀏覽器，並雙擊開啟。其次，開啟【設定】介面開啟進入這個瀏覽器介面，點選左上角【...】標識;雙擊【設定】，開啟進入設定介面。再次，找到並開啟【外觀】介面滑鼠滾動下
