你好，我需要一些帮助在开发使用HTML测验。这里是代码，如果你需要的图片，我可以提供他们，我需要一些帮助得到分数计数器计数大约10页，它保持正确的分数，所以一个正确的答案将是1，一个错误的答案将是-0.25。谢谢。
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>
您可以使用localStorage在客户端的web浏览器中存储数据。使用localStorage保存的数据没有过期日期。除非删除，否则它将保持原封不动。你可以在这里阅读localStorage
你可以这样做。
- 首先，计算第一页的分数
- 假设你有某种按钮点击或简单地点击一个元素来导航到下一页。您可以使用JavaScript向该元素添加事件侦听器。此事件侦听器将执行一个函数，该函数将首先在第一页上计算结果，然后使用
localStorage将其存储在web浏览器中，如localStorage.setItem("score", quizScore); - 导航到下一页后，您可以在页面完全加载时运行一个函数，使用此
var score = localStorage.getItem("score");检索此分数 - 然后您可以显示当前分数，继续进行测试，计算结果，将其添加到之前的分数中，更新键
score值，并再次对所有后续页面重复第一，第二，第三和第四步，直到计算出测试的最终分数。 - 最后，您可以检索最终值，以您喜欢的任何方式向客户端显示它，如果您愿意，可以使用
localStorage.removeItem("score");删除它。
localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js小提琴