2016-10-31 13 views
0

元気?Jqueryを使用してクイズの進捗状況を保存するには

私はクイズに取り組んでいますし、ユーザーのイベントを聞くと、後でJSONファイルに基づいてそれらを表示するためにそれを保存しようとしています。

見て、それぞれの質問は次のとおりです。

{ 
    "question": "How much is two plus two?", 
    "option1": "Four", 
    "option2": "Five", 
    "option3": "Two", 
    "feedback": "Good" 
} 

「フィードバック」、私は保存され、唯一のクイズの最後にユーザーに示されたことがしたいと思います。

基本的に、それは最後に、「フィードバック」JSON変数を示し、その後、背中に自分の正解を保存することです。ここで

//i'm retrieving the value here, but what should I do with it? 
var show = document.getElementById(this.id).innerHTML; 

//and appending the values on the words 

Check my fiddle

JS

$(document).ready(function() { 

var questionNumber = 0; 
var wordNumber = 0; 
var questionBank = new Array(); 
var wordsBank = new Array(); 
var stage = "#game1"; 
var stage2 = new Object; 
var questionLock = false; 
var numberOfQuestions; 
var score = 0; 

var data = { 
    "quizlist": [ 

     { 
      "question": "How much is two plus two?", 
      "option1": "Four", 
      "option2": "Five", 
      "option3": "Two", 
      "feedback": "Good" 
     }, { 
      "question": "Selecione a sentença correta", 
      "option1": "I am a person", 
      "option2": "I is a person", 
      "option3": "I are a person", 
      "feedback": "Bad" 

     }, { 
      "question": "Select the correct form in the interrogative", 
      "option1": "Are you a student?", 
      "option2": "Is you a student?", 
      "option3": "You are a student?", 
      "feedback": "Good" 

     }, { 
      "question": "How much is one minus one?", 
      "option1": "Zero", 
      "option2": "Two", 
      "option3": "Four", 
      "feedback": "Good" 
     }, { 
      "question": "He/She/It usam o verbo To Be ...", 
      "option1": "is", 
      "option2": "are", 
      "option3": "am", 
      "feedback": "Good" 
     }, { 
      "question": "Selecione a frase correta na afirmativa", 
      "option1": "We are here.", 
      "option2": "Are we here.", 
      "option3": "We are not here.", 
      "feedback": "Good" 
     }, { 
      "question": "Selecione a forma correta na negativa", 
      "option1": "He is not here.", 
      "option2": "He is not here?", 
      "option3": "He are not here.", 
      "feedback": "Bad" 
     }, { 
      "question": "You/We/They usam o Verbo To Be ...", 
      "option1": "are", 
      "option2": "am", 
      "option3": "is", 
      "feedback": "Good" 
     } 

    ] 
}; 
numberOfQuestions = data.quizlist.length; 
for (i = 0; i < numberOfQuestions; i++) { 
    questionBank[i] = []; 
    questionBank[i].push(data.quizlist[i].question); 
    questionBank[i].push(data.quizlist[i].option1); 
    questionBank[i].push(data.quizlist[i].option2); 
    questionBank[i].push(data.quizlist[i].option3); 

    questionBank[i].push(data.quizlist[i].feedback); 
} 



displayQuestion(); 
//gtjson 



//Display question and word, if correct 
function displayQuestion() { 
    var feedbackMSG = questionBank[questionNumber][4]; 

    var rnd = Math.random() * 3; 
    rnd = Math.ceil(rnd); 
    var q1; 
    var q2; 
    var q3; 
    var wordsShow = $('<li class= "center_txt"><p class="bluedark_txt big_txt">' + feedbackMSG + '</p></li>') 

    if (rnd == 1) { 
     q1 = questionBank[questionNumber][1]; 
     q2 = questionBank[questionNumber][2]; 
     q3 = questionBank[questionNumber][3]; 
    } 
    if (rnd == 2) { 
     q2 = questionBank[questionNumber][1]; 
     q3 = questionBank[questionNumber][2]; 
     q1 = questionBank[questionNumber][3]; 
    } 
    if (rnd == 3) { 
     q3 = questionBank[questionNumber][1]; 
     q1 = questionBank[questionNumber][2]; 
     q2 = questionBank[questionNumber][3]; 
    } 

    //show the options 
    $(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>'); 

    $('.option').click(function() { 
     if (questionLock == false) { 
      questionLock = true; 
      //correct answer 

      if (this.id == rnd) { 
       $(stage).append('<div class="feedback1">CORRECT</div>'); 
       var show = document.getElementById(this.id).innerHTML; 
       score++; 

      } 
      //wrong answer 
      if (this.id != rnd) { 
       $(stage).append('<div class="feedback2">WRONG</div>'); 
       $("#words").append(wordsShow); 
      } 
      setTimeout(function() { 
       changeQuestion() 
      }, 1000); 
     } 
    }) 
} //display question 




function changeQuestion() { 

    questionNumber++; 

    if (stage == "#game1") { 
     stage2 = "#game1"; 
     stage = "#game2"; 
    } else { 
     stage2 = "#game2"; 
     stage = "#game1"; 
    } 

    if (questionNumber < numberOfQuestions) { 
     displayQuestion(); 
    } else { 
     displayFinalSlide(); 
    } 

    $(stage2).animate({ 
     "right": "+=800px" 
    }, "slow", function() { 
     $(stage2).css('right', '-800px'); 
     $(stage2).empty(); 
    }); 
    $(stage).animate({ 
     "right": "+=800px" 
    }, "slow", function() { 
     questionLock = false; 
    }); 
} //change question 
}); 


function displayFinalSlide(){ 

    $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>'); 

}//display final slide 



//doc ready 

あなたは私を助けるだろうか?

申し訳ありませんが、私はそれをより良く書くように努めています!

ありがとうございます!

EDITが完全displayFinalSlideを忘れてしまいました()。申し訳ありません

+2

問題を[mcve]に絞り込み、サードパーティのサイトではなく、質問自体にすべての関連コードを含めるようにしてください。 –

答えて

0

まあそれを行う最も簡単な方法は、jQueryの$("#words").hide()と#wordsを非表示にすることであり、すべての質問はあなたが今、関数displayFinalSlideを定義していませんでした$("#words").show() と答えた後にそれを示し、私たちが言ったように、あなたは、それを定義して、最終的なスライドショーユーザーからのフィードバックにすることができます

function displayFinalSlide(){ 
$("#words").show() 
$(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>'); 

} 

上でコードをワーキング: https://jsfiddle.net/58rmaaru/1/

+0

ねえ、@ t_dom93、ごめんなさい。 ** displayFinalSlide()**を忘れました。今修正されました。 – spaceman

+0

私もフィドルを更新し、ユーザーがすべての質問を完了した後にフィードバックを表示します!それはあなたの質問でしたよね? –

+0

感謝します!あなたはロック!ちなみに、あなたは書き込む方法を知っているので、ユーザーはフィードバック+ 1(フィードバックが繰り返される場合)のみを見ますか? "Good [3]"、 "Bad [4]"のように – spaceman

0

一つのアプローチは、ユーザーの回答の配列を作成し、我々は彼らの答えが正しいか間違っているかどうかを決定したら、その中に新しいオブジェクトをプッシュすることです。あなたはあなたのフィドルでdisplayFinalSlide()のロジックを含んでいないので、私はその呼び出しを取り除き、それを見ることができるように配列をコンソールに記録しました。

$(document).ready(function() { 

       var questionNumber = 0; 
       var wordNumber = 0; 
       var questionBank = new Array(); 
       var wordsBank = new Array(); 
       var stage = "#game1"; 
       var stage2 = new Object; 
       var questionLock = false; 
       var numberOfQuestions; 
       var score = 0; 

       var feedbackBank = new Array(); 

       var data = { 
       "quizlist": [ 

        { 
        "question": "How much is two plus two?", 
        "option1": "Four", 
        "option2": "Five", 
        "option3": "Two", 
        "feedback": "Good" 
        }, { 
        "question": "Selecione a sentença correta", 
        "option1": "I am a person", 
        "option2": "I is a person", 
        "option3": "I are a person", 
        "feedback": "Bad" 

        }, { 
        "question": "Select the correct form in the interrogative", 
        "option1": "Are you a student?", 
        "option2": "Is you a student?", 
        "option3": "You are a student?", 
        "feedback": "Good" 

        }, { 
        "question": "How much is one minus one?", 
        "option1": "Zero", 
        "option2": "Two", 
        "option3": "Four", 
        "feedback": "Good" 
        }, { 
        "question": "He/She/It usam o verbo To Be ...", 
        "option1": "is", 
        "option2": "are", 
        "option3": "am", 
        "feedback": "Good" 
        }, { 
        "question": "Selecione a frase correta na afirmativa", 
        "option1": "We are here.", 
        "option2": "Are we here.", 
        "option3": "We are not here.", 
        "feedback": "Good" 
        }, { 
        "question": "Selecione a forma correta na negativa", 
        "option1": "He is not here.", 
        "option2": "He is not here?", 
        "option3": "He are not here.", 
        "feedback": "Bad" 
        }, { 
        "question": "You/We/They usam o Verbo To Be ...", 
        "option1": "are", 
        "option2": "am", 
        "option3": "is", 
        "feedback": "Good" 
        } 

       ] 
       }; 
       numberOfQuestions = data.quizlist.length; 
       for (i = 0; i < numberOfQuestions; i++) { 
       questionBank[i] = []; 
       questionBank[i].push(data.quizlist[i].question); 
       questionBank[i].push(data.quizlist[i].option1); 
       questionBank[i].push(data.quizlist[i].option2); 
       questionBank[i].push(data.quizlist[i].option3); 

       questionBank[i].push(data.quizlist[i].feedback); 
       } 



       displayQuestion(); 
       //gtjson 



       //Display question and word, if correct 
       function displayQuestion() { 

    var feedbackMSG = questionBank[questionNumber][4]; 

var rnd = Math.random() * 3; 
rnd = Math.ceil(rnd); 
var wordsShow = $('<li><p>'+feedbackMSG+'</p></li>'); 

var q1; 
var q2; 
var q3; 

       if (rnd == 1) { 
        q1 = questionBank[questionNumber][1]; 
        q2 = questionBank[questionNumber][2]; 
        q3 = questionBank[questionNumber][3]; 
       } 
       if (rnd == 2) { 
        q2 = questionBank[questionNumber][1]; 
        q3 = questionBank[questionNumber][2]; 
        q1 = questionBank[questionNumber][3]; 
       } 
       if (rnd == 3) { 
        q3 = questionBank[questionNumber][1]; 
        q1 = questionBank[questionNumber][2]; 
        q2 = questionBank[questionNumber][3]; 
       } 

       //show the options 
       $(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>'); 

       $('.option').click(function() { 
        if (questionLock == false) { 
        questionLock = true; 
        //correct answer 

        if (this.id == rnd) { 
         $(stage).append('<div class="feedback1">CORRECT</div>'); 
         var show = document.getElementById(this.id).innerHTML; 
         score++; 
         feedbackBank.push({ 
         question: questionNumber, 
         correct: true 
         }); 
        } 
        //wrong answer 
        if (this.id != rnd) { 
         $(stage).append('<div class="feedback2">WRONG</div>'); 
         $("#words").append(wordsShow); 
         feedbackBank.push({ 
         question: questionNumber, 
         correct: false 
         }); 
        } 
        setTimeout(function() { 
         changeQuestion() 
        }, 1000); 
        } 
       }) 
       } //display question 






       function changeQuestion() { 

       questionNumber++; 

       if (stage == "#game1") { 
        stage2 = "#game1"; 
        stage = "#game2"; 
       } else { 
        stage2 = "#game2"; 
        stage = "#game1"; 
       } 

       if (questionNumber < numberOfQuestions) { 
        displayQuestion(); 
       } else { 
        console.log(feedbackBank); 
       } 

       $(stage2).animate({ 
        "right": "+=800px" 
       }, "slow", function() { 
        $(stage2).css('right', '-800px'); 
        $(stage2).empty(); 
       }); 
       $(stage).animate({ 
        "right": "+=800px" 
       }, "slow", function() { 
        questionLock = false; 
       }); 
       } //change question 
      }); 

jsFiddle

+0

こんにちは@AlexYoungありがとう! ** displayFinalSlide()**を忘れてしまったので、修正しました。完了後、ユーザーにフィードバックのリストを表示する必要があります。 – spaceman

関連する問題