表单过期,并在时间结束后显示结果


Form expires and shows the result after the time is up

我是一个PHP初学者。所以我正在做一个小任务,我想做一个表格,里面有MCQS,上面有一个10分钟的倒计时计时器。当倒数计时器上升时,表单应该过期,并应该自动显示结果。我已经使表单编码如下,但我不知道该怎么做,这样我就可以在这个代码中添加定时器,使表单过期,并显示正确选择的答案的结果。

<html>
    <head>
        <title>PHP Quiz</title>
        </head>
    <body>
        <div id="page-wrap">
            <h1>Final Quiz for Lip building</h1>
            <form action="quiz.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>

                </ol>
                <input type="submit" value="Submit Quiz" />
            </form>
        </div>
    </body>
    </html>

您需要JavaScript来实现这种行为,假设您使用以下JS:

window.setTimeout(function() {
    document.forms['form_name'].submit();
}, 2000);

form_name应该是表单的名称。即

<form name = "form_name" ... >
</form>

这将以毫秒(2秒)为单位延迟发布,然后它应该带你到另一个可以显示正确答案的页面。

小提琴