javascriptクイズとhtml

-2

こんにちは私はJavaScriptを初めて使っています。現在、私のhtmlウェブページにすべてのクイズが表示されていますが、次の質問を表示するには正しい答えをクリックする必要があります。質問は1つずつ表示する必要があります、どのようにこれを行うにはどのような助け？私のデモ：https://jsfiddle.net/ehrff0t4/javascriptクイズとhtml

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

出典

2016-10-28 fairytale

は、最初に何かをしてみてください、とだけいくつかのエラーを発行する場合はお問い合わせください。しかし、あなたのためのコードを書いてはいけません。 – Justinas

そして、少なくともjsfiddleやstack sinippetsでデモを作成してください。 – paolobasso

https://jsfiddle.net/ehrff0t4/ – fairytale

チェックはこの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>

出典

2016-10-28 13:31:07 Venugopal

答えて

関連する問題