0

私は三目並べゲームを書いており、Ajax と Php を実装していますが、どちらも私にとっては初めてです。私は他のいくつかの議論を見てきましたが、私の答えを見つけることができないようです. 私のjsファイルはphpを呼び出しています。これは、データベースを呼び出して質問と回答を引き出しています。ユーザーは質問に答えて自分の番をプレイする必要があります。ただし、私のプログラムは、現在の質問ではなく、次に尋ねられた質問に対する回答を返します。

これが私のphpです：

$con = mysql_connect('localhost', '412ygutstei', '412ygutstei');
if ($con)
if (!$con) {
    die('Could not connect: ' . mysql_error());
}
$questionNum = $_POST['q_id'];  
mysql_select_db("ygutstei_db", $con);

$result = mysql_query("SELECT q_id, question_type, text,description, answer FROM questions,questiontype WHERE q_id=".$questionNum."");
$row = mysql_fetch_array($result);
$question = $row['description']." ".$row['text']."?|".$row['answer'];
echo($question);

mysql_close($con);

phpを呼び出す私のjs関数： 

function countDown() {
var element = document.getElementById(elem);

element.innerHTML = secs;
if(secs == 15){
    document.getElementById('playerDisplay').innerHTML= printEquation();
}
if(secs == 0){
    clearInterval(clock);
    turn++; 
    startTimer();       
    document.getElementById(answer).value = "";     
}
else{
    secs--;                     
}

} 

var expect = ""; var randomQNumber; var correctAnswer; var askQuestion = "";

function printEquation(){
    randomQNumber = randNumber(1,8);

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
    } 
    else {// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
            var elements = xmlhttp.responseText.split("|");
            //elements[0] = document.getElementById("question")
            correctAnswer = elements[1];
            expect = correctAnswer;
            askQuestion = elements[0];
            //alert(correctAnswer); 
        }
    } 
    xmlhttp.open("POST","G_TicTacToe.php",true); 
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlhttp.send("q_id="+randomQNumber);            

    if(turn % 2 == 0){
        return "X Plays: " + askQuestion + " = "; 
    }
    else{
        return "O Plays: " + askQuestion + " = ";
    }
}

function matchAnswer(a) {
var b = document.getElementById(a).value;
document.getElementById(a).innerHTML = b;
if(expect.toUpperCase() == b.toUpperCase()){
    clearInterval(clock);
    answeredQuestion = true;
    window.alert("Correct! ");
    document.getElementById(a).value = "";
    click();    
}
else{
    clearInterval(clock);
    window.alert("Incorrect! The correct answer was: " + expect);
    document.getElementById(a).value = "";
    playerTurn();
    startTimer();
}

matchAnswer() を呼び出す HTML コード:

<input type="text" id="answer">
            <button id="equals" onclick="matchAnswer('answer');";>Answer</button>
        </div>
        <div class="playerAnswer">      

        </div>

例: 出力の場合: X Plays: State1 の名前は? - Illinois と答えると、次の質問の答えが返されます。「私の好きな動物は何ですか? - ペンギンです。

どんな提案でも大歓迎です。さらにコードが必要な場合は、お知らせください。

4

1 に答える 1

1

私はあなたのコードを調べて、いくつかのコメントを残します (いくつかはかなり明白ですが、我慢してください)。多分あなたはそれらが役に立つと思うでしょう.

これらの変数はグローバルです。いつでもどの機能からでも変更できます。

var expect = ""; var randomQNumber; var correctAnswer; var askQuestion = "";

次の部分は、単純な xhr 初期化です。

function printEquation(){
    randomQNumber = randNumber(1,8);

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
    } 
    else {// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    }

ajax を行うときは、(非同期) イベントとコールバックについて知っておく必要があります。この部分では、コールバック関数をイベントにアタッチしています。コールバックは非同期で実行されるため、いつ実行されるか正確にはわかりません。残りのコード (または他のコード) の後または前に実行される可能性があります。

    xmlhttp.onreadystatechange=function() { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
            var elements = xmlhttp.responseText.split("|");
            //elements[0] = document.getElementById("question")
            correctAnswer = elements[1];
            expect = correctAnswer;
            askQuestion = elements[0];
            //alert(correctAnswer); 
        }
    }

サーバーにリクエストをまだ送信していないため、次のコードは上記のコールバックの前に確実に実行されます。

    xmlhttp.open("POST","G_TicTacToe.php",true); 
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlhttp.send("q_id="+randomQNumber);

この部分は、askQuestionの現在の値を出力します。コードのどこで回答を確認するのかわかりませんが、サーバーからの ajax 応答が来て、上記のコールバックが実行されると、correctAnswer変数は、この質問ではなく、次の質問の値を保持します。

    if(turn % 2 == 0){
        return "X Plays: " + askQuestion + " = "; 
    }
    else{
        return "O Plays: " + askQuestion + " = ";
    }
}

これが役立つかどうかはわかりません。残りのコードを質問に追加していただければ、適切な回答を差し上げます。

アップデート

あなたはそれをすべて間違っているように私には思えます。最初に質問を読み込んでから、タイマーを設定する必要があります。

この行は、既存のaskQuestionを返しますが、次の質問と回答をロードします。

document.getElementById('playerDisplay').innerHTML= printEquation();

Ajax 呼び出しは期待どおりに機能しません。結果を返す関数ではありません。代わりに、リクエストを送信すると、準備ができたときにコールバックされます。これはすべて間違っています。

これはあなたがすべきことです：

  1. ajax 呼び出しを送信して質問を取得します (xmlhttp.send)
  2. サーバーが質問 (onreadystatechange イベント) で応答したら、タイマーを開始して質問を表示します。
  3. ユーザーは質問を見て、ボタンをクリックできるようになりました
  4. ユーザーが応答するか、時計がタイムアウトします
  5. 1に戻る
于 2012-11-14T12:35:40.400 に答える