首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在javascript中进行测验,在jquery中隐藏一个问题并显示另一个问题

在JavaScript中进行测验,可以通过使用条件语句和事件处理来实现隐藏一个问题并显示另一个问题的效果。以下是一个示例代码:

代码语言:txt
复制
<!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中定义了两个问题的容器,分别是question1question2,并设置question2display属性为none,使其初始状态下隐藏。每个问题都有一个提交按钮,点击按钮会调用checkAnswer函数来检查答案。

checkAnswer函数中,我们根据用户输入的答案进行判断。如果答案是正确的,我们隐藏当前问题并显示下一个问题;如果答案是错误的,我们显示结果页面,并显示相应的提示信息。

这个示例中只是简单的演示了如何在JavaScript中进行测验并隐藏/显示问题,实际应用中可以根据需求进行扩展和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券