JavaScript写一个网页,功能是在线考试
时间: 2023-06-25 17:05:47 浏览: 53
好的,以下是一个简单的实现在线考试的网页:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线考试</title>
</head>
<body>
<h1>欢迎参加在线考试</h1>
<form id="exam-form">
<label for="name">请输入您的姓名:</label>
<input type="text" id="name" required>
<br><br>
<h2>请回答以下问题:</h2>
<ol>
<li>
<h3>问题 1:</h3>
<p>问题描述</p>
<label><input type="radio" name="question1" value="A">选项 A</label>
<br>
<label><input type="radio" name="question1" value="B">选项 B</label>
<br>
<label><input type="radio" name="question1" value="C">选项 C</label>
<br>
<label><input type="radio" name="question1" value="D">选项 D</label>
</li>
<li>
<h3>问题 2:</h3>
<p>问题描述</p>
<label><input type="radio" name="question2" value="A">选项 A</label>
<br>
<label><input type="radio" name="question2" value="B">选项 B</label>
<br>
<label><input type="radio" name="question2" value="C">选项 C</label>
<br>
<label><input type="radio" name="question2" value="D">选项 D</label>
</li>
<li>
<h3>问题 3:</h3>
<p>问题描述</p>
<label><input type="radio" name="question3" value="A">选项 A</label>
<br>
<label><input type="radio" name="question3" value="B">选项 B</label>
<br>
<label><input type="radio" name="question3" value="C">选项 C</label>
<br>
<label><input type="radio" name="question3" value="D">选项 D</label>
</li>
</ol>
<br>
<input type="submit" value="提交答案">
</form>
<script>
const form = document.getElementById('exam-form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const name = document.getElementById('name').value;
const answer1 = document.querySelector('input[name="question1"]:checked').value;
const answer2 = document.querySelector('input[name="question2"]:checked').value;
const answer3 = document.querySelector('input[name="question3"]:checked').value;
// TODO: 进行答案的评分和反馈,可以使用 alert 或者在页面中显示分数和答题情况
});
</script>
</body>
</html>
```
以上代码中,我们使用 HTML 构建了一个简单的表单,包含了考生姓名和三道选择题。当考生点击提交答案按钮时,我们使用 JavaScript 获取表单中的数据,计算得分并给出反馈。你需要在 TODO 部分填写相关代码。