私は自分のフラッシュカードシステムでこれと似たようなことをしています。現在のカードの「前面」と「背面」の div があります。ユーザーが回答すると、ajax、json、および php の魔法を介して次のカードが読み込まれます。
回答ページの関連セクションは次のとおりです。
<h2>Answer:</h2>
<div class="qna">
<p id="question2" class="qna">SomethingsNotWorking.</p>
<p id="answer2" class="qna">SomethingsNotWorking.</p>
</div>
<h2>Did you know it?</h2>
<a >Submit</a>
<BR><a href="#" onClick="javascript:sendCardInfo('Yes')" name="knewIt">Yes</a>
<BR><a href="#" onClick="javascript:sendCardInfo('No')" name="knewIt">No</a>
これは、ajax クエリを送信してユーザーの応答を処理する関数です。
function sendCardInfo(str){
//alert("sendCardInfo " + str);
$.ajax({
type: "POST",
url: "ajax.php",
data: "currentCard="+$(document).data('currentCard')+"¤tDeck="+$(document).data('currentDeck')+"&knewIt="+str,
dataType: "json",
success: function(data){
jQT.goTo('#home', 'swap');
// store the json response in the data object so it can be retrieved later.
$(document).data( "currentCard" , data.currentCard);
$(document).data( "currentDeck" , data.currentDeck);
$(document).data( "question" , data.question);
$(document).data( "answer" , data.answer);
// update the q and a divs with the current questions.
$('#question1').html( $(document).data( "question" ) );
$('#question2').html( $(document).data( "question" ) );
$('#answer2').html( $(document).data( "answer" ));
},
});
}
バックエンドには、次のカードを JSON として生成する ajax.php という PHP ページがあります。