如何在html上添加頁碼

Question

如何將頁碼添加到我正在進行的測驗中，它需要全部位於同一個文件中？所以，在第一個x很多問題已經被回答後，你點擊下一步，進入下一頁，然後進入答案？但所有在相同的代碼？我怎樣才能做到這一點？我嘗試過在各種網站上查找，但我看不到如何！ 謝謝， 尼克

代碼：

<h1>Final Quiz for Lip building</h1> 

    <form action="grade.php" method="post" id="quiz"> 

     <ol> 

      <li> 

       <h3>CSS Stands for...</h3> 

       <div> 
        <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" /> 
        <label for="question-1-answers-A">A) Computer Styled Sections </label> 
       </div> 

       <div> 
        <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" /> 
        <label for="question-1-answers-B">B) Cascading Style Sheets</label> 
       </div> 

       <div> 
        <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" /> 
        <label for="question-1-answers-C">C) Crazy Solid Shapes</label> 
       </div> 

       <div> 
        <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" /> 
        <label for="question-1-answers-D">D) None of the above</label> 
       </div> 

      </li> 

      <li> 

       <h3>Internet Explorer 6 was released in...</h3> 

       <div> 
        <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" /> 
        <label for="question-2-answers-A">A) 2001</label> 
       </div> 

       <div> 
        <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" /> 
        <label for="question-2-answers-B">B) 1998</label> 
       </div> 

       <div> 
        <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" /> 
        <label for="question-2-answers-C">C) 2006</label> 
       </div> 

       <div> 
        <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" /> 
        <label for="question-2-answers-D">D) 2003</label> 
       </div> 

      </li> 

      <li> 

       <h3>SEO Stand for...</h3> 

       <div> 
        <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" /> 
        <label for="question-3-answers-A">A) Secret Enterprise Organizations</label> 
       </div> 

       <div> 
        <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" /> 
        <label for="question-3-answers-B">B) Special Endowment Opportunity</label> 
       </div> 

       <div> 
        <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" /> 
        <label for="question-3-answers-C">C) Search Engine Optimization</label> 
       </div> 

       <div> 
        <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" /> 
        <label for="question-3-answers-D">D) Seals End Olives</label> 
       </div> 

      </li> 

      <li> 

       <h3>A 404 Error...</h3> 

       <div> 
        <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" /> 
        <label for="question-4-answers-A">A) is an HTTP Status Code meaning Page Not Found</label> 
       </div> 

       <div> 
        <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" /> 
        <label for="question-4-answers-B">B) is a good excuse for a clever design</label> 
       </div> 

       <div> 
        <input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" /> 
        <label for="question-4-answers-C">C) should be monitored for in web analytics</label> 
       </div> 

       <div> 
        <input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" /> 
        <label for="question-4-answers-D">D) All of the above</label> 
       </div> 

      </li> 

      <li> 

       <h3>Your favorite website is</h3> 

       <div> 
        <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" /> 
        <label for="question-5-answers-A">A) CSS-Tricks</label> 
       </div> 

       <div> 
        <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" /> 
        <label for="question-5-answers-B">B) CSS-Tricks</label> 
       </div> 

       <div> 
        <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" /> 
        <label for="question-5-answers-C">C) CSS-Tricks</label> 
       </div> 

       <div> 
        <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" /> 
        <label for="question-5-answers-D">D) CSS-Tricks</label> 
       </div> 

      </li> 

     </ol> 

     <input type="submit" value="Submit Quiz" /> 

    </form> 
and 

PHP：`

<h1>Final Quiz for Lip building</h1> 

    <?php 

     $answer1 = $_POST['question-1-answers']; 
     $answer2 = $_POST['question-2-answers']; 
     $answer3 = $_POST['question-3-answers']; 
     $answer4 = $_POST['question-4-answers']; 
     $answer5 = $_POST['question-5-answers']; 

     $totalCorrect = 0; 

     if ($answer1 == "B") { $totalCorrect++; } 
     if ($answer2 == "A") { $totalCorrect++; } 
     if ($answer3 == "C") { $totalCorrect++; } 
     if ($answer4 == "D") { $totalCorrect++; } 
     if ($answer5) { $totalCorrect++; } 

     echo "<div id='results'>$totalCorrect/5 correct</div>"; 

    ?> 

</div>` 

編輯：下面的代碼，我添加WAS：

<div> 
        <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" /> 
        <label for="question-3-answers-D">D) Seals End Olives</label> 
       </div> 

      </li> 
      <script> 
     function getValue() 
      { 
       var x=document.getElementById("page_2"); 
       alert(x.innerHTML); 
      } 
     </script> 

<body> 

    <h1 id="page_2" onclick="getValue()">Click me to proceed!</h1> 

</body> 
     </div> 
     </div> 
     <div id="page_2"> 
     <div id="page-wrap"> 

      <li> 

       <h3>A 404 Error...</h3> 

Answer 1

使用特定<div>與ID爲每個部分&隱藏所有o其他<div>除了第一部分使用CSS。然後使用JavaScript函數按順序顯示每個部分。當顯示第二部分使用getElementById隱藏所有其他部分時，請將所有其他部分&存儲在一個靜態變量中，並在每個部分中依次增加它，希望它能起作用。檢查這個代碼 -

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
        <style> 
 
         
 
      
 
      #test2{display:none;} 
 
#test3{display:none;} 
 

 
        </style> 
 
        <script> 
 
         
 
         function test1(){ 
 
    
 
    document.getElementById('test2').style.display = 'block'; 
 
    document.getElementById('test1').style.display = 'none'; 
 
} 
 
        </script> 
 
    </head> 
 
    <body> 
 
     <div id="test1" onclick='test1();'>testing1</div> 
 
<div id="test2">testing2</div> 
 
<div id="test3">testing3</div> 
 
</html>