Как добавить номера страниц на 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>` 

EDIT: СЛЕДУЮЩИЙ КОД Я Добавили:

<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> с идентификатором для каждая часть & скрыть все o ther <div> исключая первая часть используя css. Затем используйте функцию javascript для отображения каждой части последовательно. При показе 2-й части скрыть все остальные части с помощью 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>