I have a total of ten questions, each with four options ABCD, and then different options plus different scores. In the end, different results are obtained based on different scores, but I don’t know how to implement it. The following is my code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- stylesheets -->
<link rel="stylesheet" href="css/swiper.min.css" type="text/css">
<link rel="stylesheet" href="css/spa.css" type="text/css">
</head>
<body>
<!-- 第一页 -->
<section class="page1">
<p class="swipers logo">
<p class="welcome">
<h3>主标题</h3>
<p>副标题</p>
</p>
<a href="#" class="start">开始测试</a>
</p>
</section>
<!-- 第二页 -->
<section class="page2">
<header class="head">
<p class="swiper-pagination swiper-pagination-bullets pagination">
</p>
</header>
<p class="swipers">
<p class="swiper-container swiper-container-horizontal">
<p class="swiper-wrapper">
<!-- 问题1 -->
<p class="swiper-slide">
<p class="quetion">
<h3>1</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="1">a
</label>
<label>
<input type="radio" class="b" name="1">b
</label>
<label>
<input type="radio" class="c" name="1">c
</label>
<label>
<input type="radio" class="d" name="1">d
</label>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="quetion">
<h3>2</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="2">a
</label>
<label>
<input type="radio" class="b" name="2">b
</label>
<label>
<input type="radio" class="c" name="2">c
</label>
<label>
<input type="radio" class="d" name="2">d
</label>
</p>
</p>
<!-- 问题3 -->
<p class="swiper-slide">
<p class="quetion">
<h3>3</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="3">a
</label>
<label>
<input type="radio" class="b" name="3">b
</label>
<label>
<input type="radio" class="c" name="3">c
</label>
<label>
<input type="radio" class="d" name="3">d
</label>
</p>
</p>
<!-- 问题4 -->
<p class="swiper-slide">
<p class="quetion">
<h3>4</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="4">a
</label>
<label>
<input type="radio" class="b" name="4">b
</label>
<label>
<input type="radio" class="c" name="4">c
</label>
<label>
<input type="radio" class="d" name="4">d
</label>
</p>
</p>
<!-- 问题5 -->
<p class="swiper-slide">
<p class="quetion">
<h3>5</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="5">a
</label>
<label>
<input type="radio" class="b" name="5">b
</label>
<label>
<input type="radio" class="c" name="5">c
</label>
<label>
<input type="radio" class="d" name="5">d
</label>
</p>
</p>
<!-- 问题6 -->
<p class="swiper-slide">
<p class="quetion">
<h3>6</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="6">a
</label>
<label>
<input type="radio" class="b" name="6">b
</label>
<label>
<input type="radio" class="c" name="6">c
</label>
<label>
<input type="radio" class="d" name="6">d
</label>
</p>
</p>
<!-- 问题7 -->
<p class="swiper-slide">
<p class="quetion">
<h3>7</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="7">a
</label>
<label>
<input type="radio" class="b" name="7">b
</label>
<label>
<input type="radio" class="c" name="7">c
</label>
<label>
<input type="radio" class="d" name="7">d
</label>
</p>
</p>
<!-- 问题8 -->
<p class="swiper-slide">
<p class="quetion">
<h3>8</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="8">a
</label>
<label>
<input type="radio" class="b" name="8">b
</label>
<label>
<input type="radio" class="c" name="8">c
</label>
<label>
<input type="radio" class="d" name="8">d
</label>
</p>
</p>
<!-- 问题9 -->
<p class="swiper-slide">
<p class="quetion">
<h3>9</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="9">a
</label>
<label>
<input type="radio" class="b" name="9">b
</label>
<label>
<input type="radio" class="c" name="9">c
</label>
<label>
<input type="radio" class="d" name="9">d
</label>
</p>
</p>
<!-- 问题10 -->
<p class="swiper-slide">
<p class="quetion">
<h3>10</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="10">a
</label>
<label>
<input type="radio" class="b" name="10">b
</label>
<label>
<input type="radio" class="c" name="10">c
</label>
<label>
<input type="radio" class="d" name="10">d
</label>
</p>
</p>
</p>
</p>
</p>
</section>
<!-- 第三页 -->
<section class="page3">
<p class="result">
<p id="result"></p>
</p>
</section>
<!-- third-party javascript -->
<script src="js/jq/jquery-3.1.1.min.js"></script>
<script src="js/siwper/swiper.min.js"></script>
<!-- our javascript -->
<script>
//记分设置
$(document).ready(function(){
var result = 0;
$('.a').click(function(){
result = result + 1;
console.log(result);
});
$('.b').click(function(){
result = result + 2;
console.log(result);
});
$('.c').click(function(){
result = result + 3;
console.log(result);
});
$('.d').click(function(){
result = result + 4;
console.log(result);
});
});
//swiper设置
var mySwiper = new Swiper (".swiper-container", {
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
loop: false,
onReachEnd: function(swiper){
$(".page2").hide();
$(".page3").show();
}
});
$(".page2 , .page3").hide();
$(".start").on("click",function(){
$(" .page1").hide();
$(" .page2").show();
});
$(".swiper-container label,.swiper-container input").click(function(){
var this_active = $(this).parents(".swiper-slide").index();
setTimeout(function(){
mySwiper.slideTo(this_active+1,500)
},500);
});
$('.swiper-button-next').click(function(){
if(mySwiper .isEnd){
$(" .page2").hide();
$(" .page3").show();
$("#result").value = result;
}
});
$('span:last').css("display","none");
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Similar to this kind of calculation without completing the action (for example: clicking to submit a questionnaire is a completed action, and you can calculate the total score at this time). You need to calculate the total score for each operation. If you use Vue, use Computed properties are very beautiful~
So the above click event needs to be changed: (The code has not been verified yet, but the idea is that)
When clicking, you need to add an identifier to determine whether the option has been changed - otherwise the person doing the question will keep switching between abcd and your results will be accumulated, which will be messy. The final output result must be based on each score segment - use Switch or a bunch of eles if are up to you