能够在html利用js、css在线实现考试页面,并且有十个题目,交卷后可以显示得分,还有一段js代码可以强制页面刷新
时间: 2023-06-24 19:07:13 浏览: 130
javascript 强制刷新页面的实现代码
5星 · 资源好评率100%
是的,可以利用HTML、JS和CSS在线实现考试页面并显示得分。以下是一个简单的例子:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>考试页面</title>
<style>
.question {
margin-bottom: 20px;
}
.question h2 {
margin-bottom: 10px;
}
.answer {
margin-left: 20px;
}
.submit-button {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="question">
<h2>1. What is the capital of France?</h2>
<div class="answer">
<input type="radio" name="q1" value="a">a. London<br>
<input type="radio" name="q1" value="b">b. Paris<br>
<input type="radio" name="q1" value="c">c. Berlin<br>
<input type="radio" name="q1" value="d">d. Madrid<br>
</div>
</div>
<div class="question">
<h2>2. What is the currency of Japan?</h2>
<div class="answer">
<input type="radio" name="q2" value="a">a. Yen<br>
<input type="radio" name="q2" value="b">b. Euro<br>
<input type="radio" name="q2" value="c">c. Dollar<br>
<input type="radio" name="q2" value="d">d. Pound<br>
</div>
</div>
<!-- add more questions here -->
<button class="submit-button" onclick="submitAnswers()">提交答案</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
JS代码:
```js
function submitAnswers() {
var totalQuestions = 10;
var score = 0;
// check answer for question 1
var q1Answer = document.getElementsByName("q1");
if (q1Answer[1].checked) {
score++;
}
// check answer for question 2
var q2Answer = document.getElementsByName("q2");
if (q2Answer[0].checked) {
score++;
}
// add more questions here
var result = document.getElementById("result");
result.innerHTML = "你的得分是:" + (score / totalQuestions * 100) + "%";
}
function refreshPage() {
location.reload();
}
```
CSS代码:
```css
/* add your custom styles here */
```
在上面的代码中,每个问题都有四个选项,每个选项都是一个单选按钮。当用户单击“提交答案”按钮时,`submitAnswers()`函数将检查每个问题的答案,并计算用户的得分。最后,得分将显示在一个带有id为“result”的`<div>`元素中。
此外,有一个名为“refreshPage()”的函数,可以强制刷新页面。您可以将其添加到您的HTML中的任何按钮或链接上,以便用户可以在需要时刷新页面。
阅读全文