在html中利用js制作出考试页面,可判分
时间: 2023-11-17 15:08:19 浏览: 49
好的,你可以使用JS来编写一个考试页面,并使用JS来计算和显示分数。以下是一个简单的示例:
1. 首先,在HTML中创建一个包含题目和选项的表单:
```html
<form id="quiz-form">
<h3>问题1: 什么是 JavaScript?</h3>
<input type="radio" name="q1" value="a">一种编程语言<br>
<input type="radio" name="q1" value="b">一种数据库<br>
<input type="radio" name="q1" value="c">一种操作系统<br>
<h3>问题2: JavaScript 的创造者是谁?</h3>
<input type="radio" name="q2" value="a">Brendan Eich<br>
<input type="radio" name="q2" value="b">Tim Berners-Lee<br>
<input type="radio" name="q2" value="c">Bill Gates<br>
<h3>问题3: JavaScript 可以用来做什么?</h3>
<input type="checkbox" name="q3" value="a">创建动态网页<br>
<input type="checkbox" name="q3" value="b">编写后端服务器<br>
<input type="checkbox" name="q3" value="c">开发桌面应用程序<br>
<input type="checkbox" name="q3" value="d">创建移动应用程序<br>
<br><br>
<input type="button" value="提交" onclick="calculateScore()">
</form>
```
2. 在JS中编写一个函数来计算分数并显示结果:
```javascript
function calculateScore() {
var form = document.getElementById("quiz-form");
var score = 0;
// 计算第一题的分数
if (form.elements["q1"].value === "a") {
score += 1;
}
// 计算第二题的分数
if (form.elements["q2"].value === "a") {
score += 1;
}
// 计算第三题的分数
var q3 = form.elements["q3"];
if (q3[0].checked && q3[1].checked && !q3[2].checked && !q3[3].checked) {
score += 1;
}
// 显示分数
alert("您的得分是: " + score + " 分");
}
```
在这个示例中,我们使用了几种不同的表单元素来表示问题,包括单选按钮、复选框和提交按钮。当用户单击提交按钮时,我们调用 `calculateScore` 函数来计算分数。函数首先获取表单元素,然后遍历每个问题并计算得分。最后,它使用 `alert` 函数显示得分。你可以根据你的需求来修改这个代码示例。