在JavaScript中进行测验,可以通过使用条件语句和事件处理来实现隐藏一个问题并显示另一个问题的效果。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Quiz</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>JavaScript Quiz</h1>
<div id="question1">
<h2>Question 1:</h2>
<p>What is the capital of France?</p>
<button onclick="checkAnswer('Paris')">Submit Answer</button>
</div>
<div id="question2" style="display: none;">
<h2>Question 2:</h2>
<p>What is the result of 2 + 2?</p>
<button onclick="checkAnswer('4')">Submit Answer</button>
</div>
<div id="result" style="display: none;">
<h2>Result:</h2>
<p id="resultText"></p>
</div>
<script>
function checkAnswer(answer) {
if (answer === 'Paris') {
$('#question1').hide();
$('#question2').show();
} else if (answer === '4') {
$('#question2').hide();
$('#result').show();
$('#resultText').text('Congratulations! You answered both questions correctly.');
} else {
$('#result').show();
$('#resultText').text('Sorry, your answer is incorrect.');
}
}
</script>
</body>
</html>
在上述代码中,我们使用了jQuery库来简化DOM操作。首先,我们在HTML中定义了两个问题的容器,分别是question1
和question2
,并设置question2
的display
属性为none
,使其初始状态下隐藏。每个问题都有一个提交按钮,点击按钮会调用checkAnswer
函数来检查答案。
在checkAnswer
函数中,我们根据用户输入的答案进行判断。如果答案是正确的,我们隐藏当前问题并显示下一个问题;如果答案是错误的,我们显示结果页面,并显示相应的提示信息。
这个示例中只是简单的演示了如何在JavaScript中进行测验并隐藏/显示问题,实际应用中可以根据需求进行扩展和优化。
领取专属 10元无门槛券
手把手带您无忧上云