javascript 퀴즈 및 html

-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

먼저 뭔가를 시도하고 일부 오류를 발행 요청하시기 바랍니다. 그러나 코드를 작성하도록 요청하지 마십시오. – Justinas

적어도 jsfiddle 또는 스택 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

javascript 퀴즈 및 html

답변

관련 문제