Question

工作： 最初，当测验在index.html内时，一切正常。我可以使用#quiz访问测验部分，如下所示：

<div data-role="content">   
<ul data-role="listview">
    <li><a href="#quiz">Quiz Page</a></li>
    <li><a href="#page3">Page Three</a></li>
</ul>

然后，我决定将测验作为一个独立的html页面。因此，我从index.html剪切了javascripts以获取评分和问题隐藏显示脚本，以及测验问题并将其粘贴到quiz.html页面中。为了访问此测验页面，我将index.html中的链接修改为

<div data-role="content">   
    <ul data-role="listview">
        <li><a href="quiz.html">Quiz Page</a></li>
        <li><a href="#page3">Page Three</a></li>
    </ul>       
</div>

评分脚本如下（简化）：

<script type="text/javascript"> //scoring script
function getScore(form){
  //score counting algorithm
  score = Math.round(score/AnswersAndObjects.length*100);
  form.percentage.value = score + "%";
}
</script>

问题隐藏显示脚本如下（简化）：

<script type="text/javascript"> //quiz question hide-show script
        $(document).ready(function () {

            var currentQuestion=0;
            var totalQuestions=$('.questions').length;

            $questions = $('.questions');
            //show the first question
            //when users click on the "Next question button...
            $('#next').click(function(){

                $($questions.get(currentQuestion)).fadeOut(function(){ //hide the current question
                    //go to next question
                    if(currentQuestion == totalQuestions){ //if no more question
                        //do hide and show div class                                    
                    }else{

                        //else display the current question
                    }
                });

            });

         });
</script>

有关您的信息，每个问题都包含在

中

<div class="questions">Question here</div>

问题： 当我从 index.html访问quiz.html 时，没有任何效果。分数无法计算，show（）hide（）不起作用。但是，如果我直接访问quiz.html ，一切正常。我怀疑从index.html访问quiz.html时没有加载javascript。但是，我已经包括

$(document).ready(function () {
在quiz.html中
。

我可以知道如何才能完成这项工作？

Answer 1

通过跟随Gajotres的例子，我能够使我的测验应用程序正常运行。骨架看起来像这样：

<body> <div data-role="page"> <div data-role="header"> <h1>Quiz</h1> </div> <div data-role="content"> <div class = "heading1"> <p> Answer the quiz</p> </div> <form name="quiz" method=""> <div data-role="fieldcontain" class="questions"> <fieldset data-role="controlgroup" data-mini="true"> <legend>Question 1 bla bla bla</legend> <input type="radio" name="question1" id="choice1" value="1"/> <label for="choice1">True</label> <input type="radio" name="question1" id="choice2" value="2"/> <label for="choice2">False</label> </fieldset> </div> //other n questions follow <div> <script> var currentQuestion=0; var totalQuestions=$('.questions').length; //hide and show elements statements here var AnswersAndObjects = new Array(); function getScore(form){ //score counting algorithm here. </script> </div>

至关重要的是，我将这两个脚本移动到<div>内的quiz.html的正文中。它有效。但是，我确实注意到脚本必须在 </form>之后放置，然后才能使脚本正常工作。我不知道为什么，但它以这种方式工作。另外，我删除了 $(document).ready(function () {}它也有效。

从index.html打开quiz.html页面时怀疑javascript没有加载

1 个答案: