Question

您好我是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>

Answer 1

选中此FIDDLE

<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>

javascript测验和HTML

1 个答案: