2017-02-11 18 views
1

correct[]wrong[]という2つの関数からのフィードバックをユーザーが質問に応じて表示しようとしています。私は、jQuery ready関数を追加して、プロンプトの前に表示したいがすべて成功させるようにしようとしましたが、成功しませんでした。私は準備関数を自分のコードに何度も書いたことがあります。誰でも助けることができますか?ページがレンダリングされた後のJavascript/Jqueryスクリプトの実行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Simple Math Quiz</title> 
 
<script> 
 
     $("document").ready(function() { 
 
     $("body").css("background-color", "green"); 
 
     }); 
 
</script> 
 
</head> 
 
<body> 
 
    <br><br> 
 
    <p><em><strong>Feedback</strong></em></p><p><br><br> 
 
     <script> 
 
//Question array \t \t \t 
 
\t \t \t var question = ["1. What is 1+1?", 
 
         "2. What is 2+2?", 
 
         "3. What is 3+3?", 
 
         "4. What is 4+4?", 
 
\t \t \t \t \t \t \t \t "5. What is 5+5?" 
 
         ]; 
 
//Other Variables 
 
\t \t \t var qlength = question.length; 
 
\t \t \t var counter = 0; 
 
     var answer = ["2", "4", "6", "8", "10"]; 
 
//First box to tell the viewer whats going on 
 
\t \t \t alert('Answer the following 5 questions to determine if you are 1st grade smart.'); 
 
//Loop that asks the questions 
 
      \t for (var i = 0; i < qlength; i++) 
 
\t \t \t \t { 
 
\t \t \t \t \t var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer 
 
\t \t \t \t \t \t //Actions for correct answer 
 
\t \t \t \t \t \t if (userAnswer == answer[i]) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t alert('Correct'); \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t correct(i); 
 
\t \t \t \t \t \t \t var counter = counter + 1;  //Adds one to the counter for correct answers   
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t //Actions for wrong answer 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t { \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t alert('Wrong'); 
 
\t \t \t \t \t \t \t wrong(i); 
 
\t \t \t \t \t \t }    
 
\t \t \t \t } 
 
//Functions 
 
\t \t \t function correct(i) 
 
\t \t \t { 
 
\t \t \t \t document.write(i + 1, ". Correct" + "<br>"); 
 
\t \t \t } \t   
 
\t \t \t function wrong(i) 
 
\t \t \t { 
 
\t \t \t \t document.write(i + 1, ". Wrong, correct answer = ", answer[i], "<br>"); 
 
\t \t \t } 
 
//Calculates the results based on the counter 
 
\t \t \t document.write("<br>You got " + counter + " answers out of 5 correct.");  
 
\t \t </script> 
 
\t </p> 
 
</body> 
 

 
</html>

+0

を追加するために使用するjQueryを使用しています。代わりに、一部のタグのinnerHTMLまたは.html() – mplungjan

+0

コードをクリーンアップしてください。 [を使用してリンクします。 –

+0

また、jQueryスクリプトを入力しないでください。 –

答えて

1

負荷後のdocument.writeを使用しないでください。それはページとスクリプトを消去します。 は、代わりにタグを更新 - ここで私はあなたがすでにロードした後にdocument.writeを使用しないでください答え

// These needed to be and STAY global 
 
// Question array \t \t \t 
 
var question = ["1. What is 1+1?", 
 
    "2. What is 2+2?", 
 
    "3. What is 3+3?", 
 
    "4. What is 4+4?", 
 
    "5. What is 5+5?" 
 
]; 
 
//Other Variables 
 
var qlength = question.length; 
 
var counter = 0; 
 
var answer = ["2", "4", "6", "8", "10"]; 
 

 

 
$("document").ready(function() { 
 
    $("body").css("background-color", "green"); 
 
    ask(); 
 
    $("#result").append("<br>You got " + counter + " answer"+(counter==1?"":"s")+" out of 5 correct."); 
 

 
}); 
 

 

 
function ask() { 
 
    //First box to tell the viewer whats going on 
 
    alert('Answer the following 5 questions to determine if you are 1st grade smart.'); 
 
    //Loop that asks the questions 
 
    for (var i = 0; i < qlength; i++) { 
 
    var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer 
 
    //Actions for correct answer 
 
    if (userAnswer == answer[i]) { 
 
     alert('Correct'); 
 
     correct(i); 
 
     counter++; //Adds one to the counter for correct answers   
 
    } 
 
    //Actions for wrong answer 
 
    else { 
 
     alert('Wrong'); 
 
     wrong(i); 
 
    } 
 
    } 
 
} 
 

 

 
function correct(i) { 
 
    $("#result").append(i + 1, ". Correct" + "<br>"); 
 
} 
 

 
function wrong(i) { 
 
    $("#result").append(i + 1, ". Wrong, correct answer = ", answer[i], "<br>"); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><em> <strong> Feedback </strong></em> 
 
</p> 
 
<p id="result"></p>

+0

助けてくれてありがとう! – Erik

+0

ようこそ。 [回答を受け入れる方法を読む](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – mplungjan

関連する問題