動作: 最初は、クイズが 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 から採点用スクリプト、質問非表示スクリプト、クイズの質問用の JavaScript を切り取って 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 で。
どうすればこれを機能させることができますか?