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

包含内容:JS封装表单,JS校验表单

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

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

一、设计思路

表单封装:

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

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

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

校验表单(显示结果)

【1】获取get传入的参数

【2】通过JS解析

【3】显示到相应位置

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

二、参考源码如下

request.html

考试系统

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

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你实现一个简单选择题测评页面。首先,你需要一个 HTML 页面和相应的 JavaScript 文件。 HTML 页面: ```html <!DOCTYPE html> <html> <head> <title>选择题测评</title> </head> <body> <h1>选择题测评</h1> <div id="questions"> <!-- 在这里添加选择题 --> <div> <p>1. 以下哪个不是 JavaScript 的数据类型?</p> <input type="radio" name="q1" value="a">a. number</input><br> <input type="radio" name="q1" value="b">b. boolean</input><br> <input type="radio" name="q1" value="c">c. function</input><br> <input type="radio" name="q1" value="d">d. object</input> </div> <div> <p>2. 下面哪个方法可以用于在数组末尾添加新元素?</p> <input type="radio" name="q2" value="a">a. push()</input><br> <input type="radio" name="q2" value="b">b. pop()</input><br> <input type="radio" name="q2" value="c">c. shift()</input><br> <input type="radio" name="q2" value="d">d. unshift()</input> </div> <!-- 在这里添加更多选择题 --> </div> <button onclick="submitAnswers()">提交</button> <div id="results"></div> <script src="script.js"></script> </body> </html> ``` JavaScript 文件: ```javascript function submitAnswers() { // 获取选择题的答案 var q1 = document.querySelector('input[name="q1"]:checked').value; var q2 = document.querySelector('input[name="q2"]:checked').value; // 获取结果显示的元素 var results = document.getElementById('results'); // 记录答对的数量 var score = 0; // 判断每道题的答案是否正确 if (q1 == 'c') { score++; } if (q2 == 'a') { score++; } // 显示结果 results.innerHTML = '你答对了 ' + score + ' 道题。'; } ``` 这个页面包含两道选择题和一个提交按钮。当用户点击提交按钮时,`submitAnswers` 函数会被调用。该函数获取用户选择的答案,判断每道题的答案是否正确,并记录答对的数量。最后,它将结果显示在页面上。 你可以在 `questions` 元素中添加更多的选择题,只需要按照上面的格式添加即可。希望这个例子能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值