如何在html上添加页码

时间:2014-10-12 09:26:28

标签: javascript php html

如何在我正在制作的测验中添加页码,但它需要全部在同一个文件中?那么,在第一个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>`

编辑:我添加的下一个代码:

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

1 个答案:

答案 0 :(得分:0)

对每个部分使用带有ID的特定<div>&amp;使用css隐藏除第一部分之外的所有其他<div>。然后使用javascript函数按顺序显示每个部分。当显示第二部分使用getElementById隐藏所有其他部分时,请执行所有其他部分&amp;将结果存储在静态变量中,按顺序增加每个部分,希望它能正常工作。检查此代码 -

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;