0

单击提交后,我希望将分数和正确答案打印在新页面上。现在分数会弹出一个警告框。如何在 HTML/JavaScript 中做到这一点?

我的测验应用程序的代码是:

<html>

<head>
    <title>Quizzer</title>
    <style type="text/css">
        body {
            background:#E3E1DC;
            font-size:16px;
            font-family:Helvetica, Arial;
            line-height:1.2em;
            color:#222222;
        }

        pre {
            font-family:Consolas, Courier;
            font-size: 12px;
            color:#444444;
            line-height:12px;
            margin-left:30px;
            margin-top:-28px;
        }

        .instructions {
            margin-left:25px;
        }

        .button {
            margin-left:10px;
            margin-bottom:120px;
            width:200px;
            height:50px;
        }

        .question {
            background:#F1E6D4;
            padding:15px;
            margin:10px;
        }

        .odd {
            background:#9F9694;
        }

        .wrong {
            border-left:#BA3D49 5px solid;
            padding-left:10px;
        }
    </style>

    <script langauge="JavaScript">
        // number of questions in the quiz, this must be set exactly
        var totalQuestions = 5;

        // arrays to store answers, and user submited answers.
        var answers = new Array;
        var userAnswers = new Array;

        // quiz answers
        answers[1] = "B";
        answers[2] = "C";
        answers[3] = "D";
        answers[4] = "D";
        answers[5] = "B";

        // sets the users answer selection to the appropriate array element
        // in the userAnswers array.
        // questionNumber is the question div id as well as the userAnswers
        // array element index to store the answer in.
        // answerSelection is the value of the selected answer from a question
        function SetAnswer(questionNumber, answerSelection) {
            userAnswers[questionNumber] = answerSelection;
        }

        // applies the .wrong class styling to any question div that is incorrect
        function MarkIncorrectQuestions() {
            for(i = 1; i <= totalQuestions; i++) {
                if(answers[i] != userAnswers[i]) {
                    document.getElementById(i).className += " wrong";
                }
            }
        }

        // counts the number of correct answers
        // returns the number of correct answers
        function GetScore() {
            var score = 0;
            for(i = 1; i <= totalQuestions; i++) {
                if(userAnswers[i] == answers[i])
                    score++;
            }
            return score;
        }

        // sets classes for each question div to its default styling.
        function ApplyDefaultQuestionStyles() {
            for(i = 1; i <= totalQuestions; i++) {
                if(i % 2 == 0) {
                    document.getElementById(i).className = "question";
                }
                else {
                    document.getElementById(i).className = "question odd";
                }
            }
        }

        // calls all appropriate functions in order to check answers and mark
        // incorrect questions.
        function CheckQuiz() {
            ApplyDefaultQuestionStyles();
            var totalQuestions = '5';
            var score = GetScore();
            MarkIncorrectQuestions();
            alert("You scored: " + score + " out of " + totalQuestions + ".");
            //document.write("<h1>hello</h1>");
        }

    function result(score,totalQuestions){
              document.write("Score" +score);
            }

    </script>
</head>

<body onLoad="ApplyDefaultQuestionStyles()">
    <div class="instructions">
        <h1>The Movie Quiz</h1>

    </div>

    <form>
        <div id="1">
            <p><strong>Question 1</strong></p>
            <p>Where does “It’s a Wonderful Life” take place?</p>
            <p><input type="radio" value="A" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Hills</p>
            <p><input type="radio" value="B" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Falls</p>
            <p><input type="radio" value="C" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford Lake</p>
            <p><input type="radio" value="D" onClick="SetAnswer(1, this.value)" name="radiobutton2">Bedford City</p>
        </div>

        <div id="2">
            <p><strong>Question 2</strong></p>
            <p>In “The Godfather,” who was murdered in the causeway?</p>
            <p><input type="radio" value="A" onClick="SetAnswer(2, this.value)" name="radiobutton2">Luca Brasi</p>
            <p><input type="radio" value="B" onClick="SetAnswer(2, this.value)" name="radiobutton2">Moe Greene</p>
            <p><input type="radio" value="C" onClick="SetAnswer(2, this.value)" name="radiobutton2">Sonny</p>
            <p><input type="radio" value="D" onClick="SetAnswer(2, this.value)" name="radiobutton2">Paulie</p>
        </div>

        <div id="3">
            <p><strong>Question 3</strong></p>
            <p>Where did Princess Leia hide the stolen plans for the Death Star?</p>
            <p><input type="radio" value="A" onClick="SetAnswer(3, this.value)" name="radiobutton2">In C-3PO</p>
            <p><input type="radio" value="B" onClick="SetAnswer(3, this.value)" name="radiobutton2">In a pocket in the hem of her white gown</p>
            <p><input type="radio" value="C" onClick="SetAnswer(3, this.value)" name="radiobutton2">In the Millennium Falcon</p>
            <p><input type="radio" value="D" onClick="SetAnswer(3, this.value)" name="radiobutton2">In R2-D2</p>
        </div>

        <div id="4">
            <p><strong>Question 4</strong></p>
            <p>In which of the following films did Robert Duvall NOT appear?</p>
            <p><input type="radio" value="A" onClick="SetAnswer(4, this.value)" name="radiobutton2">To Kill a Mockingbird</p>
            <p><input type="radio" value="B" onClick="SetAnswer(4, this.value)" name="radiobutton2">The Godfather</p>
            <p><input type="radio" value="C" onClick="SetAnswer(4, this.value)" name="radiobutton2">Tender Mercies</p>
            <p><input type="radio" value="D" onClick="SetAnswer(4, this.value)" name="radiobutton2">One Flew Over the Cuckoo’s Nest</p>
        </div>

        <div id="5">
            <p><strong>Question 5</strong></p>
            <p>Who was Scarlett O’Hara’s second husband?</p>
            <p><input type="radio" value="A" onClick="SetAnswer(5, this.value)" name="radiobutton2">Frank Kennedy</p>
            <p><input type="radio" value="B" onClick="SetAnswer(5, this.value)" name="radiobutton2">Rhett Butler</p>
            <p><input type="radio" value="C" onClick="SetAnswer(5, this.value)" name="radiobutton2">Ashley Wilkes</p>
            <p><input type="radio" value="D" onClick="SetAnswer(5, this.value)" name="radiobutton2">Charles Hamilton</p>
        </div>
        <p>



        <input type="submit" class="ui-button" onClick="CheckQuiz()" value="Submit Answers" name="submitButton" class="button"></p>


    </form>
</body>

4

1 回答 1

0

您有两个选择,而不是使用警报...

1) 创建一个在所有页面内容前面弹出的分层弹出窗口(您可以像大多数模态一样使 BG 变暗)。这将允许您在同一页面中弹出消息,而不需要用户打开另一个窗口。

2)您的另一个选择是弹出一个新窗口并使用javascript将信息写入该窗口。有关更多信息,请参见以下链接:http ://www.electrictoolbox.com/write-content-dynamic-javascript-popup/

我个人会选择第一个,因为它保证即使用户有弹出窗口阻止程序也能正常工作。

于 2013-05-25T06:00:56.537 回答