javascript quiz and html

本文关键字：html and quiz javascript 更新时间：2023-09-26

你好，我是新的JavaScript，现在我的html网页显示所有的测验，问题是，我必须点击正确的答案，以显示下一个问题。问题必须一一显示，有什么帮助吗?我的演示:https://jsfiddle.net/ehrff0t4/

<!DocType html>
<html>
    <style>
        body {
            margin: 2% 2%;
            background-image: url(image/wallpaper4.jpg);
            font-size: 15px;
            font-family: "Lato", sans-serif;
            font-style: black;
            font-weight: bold;
            border-style: double;
            border-color: black;
            border-width: 9px;
        }
    </style>
    <head>
        <title>Spelling with me</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <script>
            function good() {
                alert("Right Answer");
            }
            function bad() {
                alert("Wrong Answer. Please try again");
            }
        </script>
        <center>
            <div id="quiz">
                <h3>Question 1</h3>
                <p> where is the banana?</p>
                <audio controls>
                    <source src="Audio/Q1.mp3" type="audio/mpeg">
                </audio>
                <br>
                <br>
                <img src="image/banana.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="good()">
                <img src="image/bag.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/ball.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <h3>Question 2</h3>
                <p> where is the baseball?</p>
                <audio controls>
                    <source src="Audio/Q1.mp3" type="audio/mpeg">
                </audio>
                <br>
                <br>
                <img src="image/bus.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/bull.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/baseball.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="good()">
                <h3>Question 3</h3>
                <p> where is the bee?</p>
                <audio controls>
                    <source src="Audio/Q1.mp3" type="audio/mpeg">
                </audio>
                <br>
                <br>
                <img src="image/balloon.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/bee.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="good()">
                <img src="image/bread.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <h3>Question 3</h3>
                <p> Show me the bear ?</p>
                <audio controls>
                    <source src="Audio/Q1.mp3" type="audio/mpeg">
                </audio>
                <br>
                <br>
                <img src="image/beach.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/bed.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/bear.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="good()">
                <h3>Question 4</h3>
                <p> Show me the bicycle?</p>
                <audio controls>
                    <source src="Audio/Q1.mp3" type="audio/mpeg">
                </audio>
                <br>
                <br>
                <img src="image/bicycle.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="good()">
                <img src="image/ball.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
                <img src="image/bell.gif" style="width: 350px; height: 250px;border:3px solid black;" onclick="bad()">
            </div>

    </body>
</html>

检查此提琴

<center>
  <div id="quiz">
    <div class="qstn">
      <h3>Question 1</h3>
      <p> where is the banana?</p>
      <audio controls>
          <source src="Audio/Q1.mp3" type="audio/mpeg">
      </audio>
      <br>
      <br>
        <img src="image/banana.gif" onclick="good(event)">
      <img src="image/bag.gif" onclick="bad()">
      <img src="image/ball.gif" onclick="bad()">
    </div>
    <div class="qstn">
      <h3>Question 2</h3>
      <p> where is the baseball?</p>
      <audio controls>
          <source src="Audio/Q1.mp3" type="audio/mpeg">
      </audio>
      <br>
      <br>
      <img src="image/bus.gif" onclick="bad()">
      <img src="image/bull.gif" onclick="bad()">
      <img src="image/baseball.gif" onclick="good(event)">
    </div>
    <div class="qstn">
      <h3>Question 3</h3>
      <p> where is the bee?</p>
      <audio controls>
          <source src="Audio/Q1.mp3" type="audio/mpeg">
      </audio>
      <br>
      <br>
      <img src="image/balloon.gif" onclick="bad()">
      <img src="image/bee.gif" onclick="good(event)">
      <img src="image/bread.gif" onclick="bad()">
    </div>
    <div class="qstn">
      <h3>Question 4</h3>
      <p> Show me the bear ?</p>
      <audio controls>
          <source src="Audio/Q1.mp3" type="audio/mpeg">
      </audio>
      <br>
      <br>
      <img src="image/beach.gif" onclick="bad()">
      <img src="image/bed.gif" onclick="bad()">
      <img src="image/bear.gif" onclick="good(event)">
    </div>
    <div class="qstn">
      <h3>Question 5</h3>
      <p> Show me the bicycle?</p>
      <audio controls>
          <source src="Audio/Q1.mp3" type="audio/mpeg">
      </audio>
      <br>
      <br>
      <img src="image/bicycle.gif" onclick="good(event)">
      <img src="image/ball.gif" onclick="bad()">
      <img src="image/bell.gif" onclick="bad()">
    </div>
    <div class="qstn">
      <p>
      Quiz Complete!!
      </p>
    </div>
  </div>
</center>
<script>
  function good(event) {
    var currentQstn = event.target.parentNode;
    var nextQstn = currentQstn.nextElementSibling;
    if(!nextQstn) return false;
    nextQstn.style.display = "block";
    currentQstn.style.display = "none";
  }
  function bad() {console.log('bad')}
</script>