1. 首頁
  2. 問答
  3. javascript測驗和html

javascript測驗和html

2016-10-28 86 views
-2

你好我是JavaScript新手，現在我的html網頁顯示所有的測驗，問題是我必須點擊正確的答案才能顯示下一個問題。問題必須逐一顯示，如何做到這一點的幫助？我的演示：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

+7

請先試一下，如果發出一些錯誤只問。但不要要求爲你寫代碼。 – Justinas

+0

至少在jsfiddle或stack sinippets中構建演示 – paolobasso

+0

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

回答

2

入住這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

相關問題

 相關問題