我正在做一个测验。我不知道该怎么做:
用户仅在回答当前问题后才需要引导至下一个问题。 此时，您仍然可以按下一步。如果最后的提交按钮不起作用，则意味着您错过了回答问题。所以你必须回头搜索并找出你错过的问题。
我希望有人可以帮助我或给我一些提示!
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="header">
<h1>Which animal are you?</h1>
</div>
<form id="personalityQuiz" class="answers">
<div class="slide active-slide">
<h3> 1. First of all, how would you describe your height as...</h3>
<input type="radio" name="height" value="q011" required>Short<br>
<input type="radio" name="height" value="q012" required>Average<br>
<input type="radio" name="height" value="q013" required>Tall<br>
<input type="button" class="btnNext1" value="Next">
</div>
<div class="slide">
<h3> 2. Your eyes are...</h3>
<input type="radio" name="eyes" value="q021" required>Brown<br>
<input type="radio" name="eyes" value="q022" required>Hazel<br>
<input type="radio" name="eyes" value="q023" required>Green<br>
<input type="button" class="btnPrev1" value="Back">
<input type="button" class="btnNext1" value="Next">
</div>
<div class="slide">
<h3> 3. In my free time I like to... </h3>
<input type="radio" name="hobby" value="q031" required>play sports<br>
<input type="radio" name="hobby" value="q032" required>be outside<br>
<input type="radio" name="hobby" value="q033" required>hang out with friends<br>
<input type="button" class="btnPrev1" value="Back">
<input type="submit" value="Submit">
</div>
</form>
<div class="result" id=cat> you are a cat</div>
<div class="result" id=dog> you are a dog</div>
<div class="result" id=horse> you are a horse</div>
<div class="result" id=fish> you are a fish</div>
<div class="result" id=lion> you are a lion</div>
<script type='text/javascript' src='script.js'></script>
</div>
<div class="footer"></div>
</body>
</html>
Javascript:
$("#personalityQuiz").submit(function(event) {
var qalookup = {
"q011": ["cat", "dog"],
"q012": ["fish"],
"q013": ["lion", "horse"],
"q021": ["horse"],
"q022": ["lion"],
"q023": ["fish", "dog", "cat"],
"q031": ["fish"],
"q032": ["dog", "cat"],
"q033": ["lion", "horse"],
};
event.preventDefault();
var answers = $(this).serializeArray();
var scores = {
cat: 0,
dog: 0,
horse: 0,
fish: 0,
lion: 0
};
$(".result").hide();
for (var answer of answers) {
var ans = qalookup[answer.value];
ans.forEach(function(val) {
scores[val] += 1;
});
}
var maxAnimal = "cat";
for (var animal in scores) {
if (scores[animal] > scores[maxAnimal]) {
maxAnimal = animal;
}
}
$("#personalityQuiz").css('display', 'none');
$(".result#" + maxAnimal).css('display', 'block');
});
$('.btnNext1').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide');
});
});
$('.btnPrev1').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
});
});
最佳答案
有点像鸭子带状的答案，但是:有一个变量，无论什么名字，比如说分数。当您回答问题时，将此变量增加 1。
仅当分数大于或等于该问题分数时才允许输入/下一个问题。
如果您已完成第 5 题，您的分数为 5。您可以返回查看第 1、2、3、4 和 5 题，但由于输入被禁用，您无法在 6 上输入任何内容
关于javascript - 我如何编码才能使用户在输入上一个问题的答案后只能转到下一个问题？ HTML/JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60626468/