0

複数の送信ボタンでクイズを作ろうとしています。10 個のボタンで画像を表示したい。受験者がボタンを押すたびに、値が投稿され、画像が変化するようにします。これまでのところ、次の 3 つのアプローチを試しました。

1. onclick と javascript を使用して、すべてのアニメーションを実行できましたが、値が投稿されませんでした。Google から、値を送信するためにさらに JavaScript を使用する必要があるという印象を受けましたか?

2.PHPで変数を使用すると、最初の画像が表示され、最初の値が投稿されますが、何も起こりません.ループを追加すると、ボタンがクリックされるのを待たずにすべての画像が他の画像の上に表示されます...

3.画像ごとに個別の html ページを作成してみました。値は、$score++; を実行する php ファイルに投稿されます。次の html ファイルに移動しますが、$score が正しくありません。ローカル変数だから？これは、取得するために MySQL で値を保持する必要があることを意味しますか? また、これはすべてをプログラムするのに非常に無駄な方法のようです...

これがnoのコードです。2:

<?php
include 'header.php';

if ($round==1) {$ans='Banana';}
if ($round==2) {$ans='Book';}
if ($round==3) {$ans='Pencil';}
...and so on

if ($_POST['submit']==$ans) {$score++; echo "Right!"; $round++; }
else
{$round++;}
?>

<html>
<form action="index.php" method="post">

<input type="submit" class="button1"  name="submit" value="Banana">
<input type="submit" class="button2" name="submit" value="Balloon">
<input type="submit" class="button3" name="submit" value="Dog">
<input type="submit" class="button4" name="submit" value="Mouse">
<input type="submit" class="button5" name="submit" value="Chair">
<input type="submit" class="button6" name="submit" value="Twelve">
<input type="submit" class="button7" name="submit" value="Pen">
<input type="submit" class="button8" name="submit" value="Book">
<input type="submit" class="button9" name="submit" value="Ball">
<input type="submit" class="button10" name="submit" value="Elephant">
</form>
</html>

<?php

if($ans=="Banana")
{   
echo '<img src="Banana.png" id="picture" class="picture" height="600" width="600" alt="script.aculo.us" />';
}
if($ans=="Pencil")
{   
echo '<img src="Pencil.png" id="picture" class="picture" height="600" width="600" alt="script.aculo.us" />';
}
{   
echo '<img src="Book.png" id="picture" class="picture" height="500" width="500" alt="script.aculo.us" />';
}
...and so on

include 'footer.php';

?>

どんな助けでも大歓迎です:)

4

3 に答える 3

0

あなたの場合のエレガントなソリューションは、javascript (onClick を使用) と AJAX (jQuery などの AJAX クエリを有効にするライブラリ - http://api.jquery.com/category/ajax/ ) を使用することです。ユーザーがボタンをクリックするたびに、 JavaScript でスコア値を更新し、新しい画像の URL とその正しい答えを要求する必要があります。ユーザーが最後の送信ボタンをクリックしたときに、最終スコアを送信する必要があります。 ここで見つけることができるAJAXの詳細: http://www.w3schools.com/ajax/default.asp

于 2012-04-26T12:18:11.870 に答える
0

アプローチの中で、3 番目のアプローチが他のアプローチよりも優れています。通常、MCQ ページでは、質問は保持されるか、別のページに表示されます。セッションを使用すると、ローカル変数の問題を解決できますか

$_SESSSION['score'] += $score
echo $_SESSION['score'];
于 2012-04-30T23:57:45.293 に答える
0

各ボタンにその値を関数に送信させます (onclick="answered('pencil')")

次に、正しい答えの順序の配列と、ユーザーが現在どのラウンドにいるかを表すカウンター整数を取得します。回答された関数では、送信された値を「ラウンド」の位置にある回答配列の項目と比較し (カウント方法によってはマイナス 1 になる場合があります)、推測カウントを増やします (それがスコアリングの対象である場合)。

2 つの値が一致したら、カウンターをインクリメントし、画像の src 属性を変更します。そうでない場合は、「もう一度推測してください」というメッセージを表示します

最終ラウンドが完了したら、推測カウントをサーバーに投稿して保存することができます (それが意図されている場合)。

ここにいくつかのサンプルコードがあります:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="buttons">
<button onclick="answered('banana')">Banana</button>
<button onclick="answered('balloon')">Balloon</button>
<button onclick="answered('dog')">Dog</button>
<button onclick="answered('mouse')">Mouse</button>
<button onclick="answered('chair')">Chair</button>
<button onclick="answered('twelve')">Twelve</button>
<button onclick="answered('pen')">Pen</button>
<button onclick="answered('book')">Book</button>
<button onclick="answered('ball')">Ball</button>
<button onclick="answered('elephant')">Elephant</button>
</div>
<div id="msg"></div>
<img id="photo" />

</body>
<script type="text/javascript">
var turn=0;
var guess=0;
//this is the order of correct answers
var answers = ['banana','book','elephant','dog','pen','balloon','mouse','ball','chair','twelve'];
//these are the image urls (yours would be more like 'Pen.png'
var images= ['http://caloriesinbanana.net/wp-content/uploads/2012/01/Calories-in-Banana.jpeg','http://www.instructables.com/image/FZJO197FB11U3O8/Write-a-good-book.jpg','http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg','http://1.bp.blogspot.com/-pKym47-kmsk/Trj8aES5iRI/AAAAAAAADII/5tUPH7YZUnw/s1600/Dog.jpg','http://tacticalpens.net/wp-content/uploads/2011/05/surefire-tactical-pen.jpg','http://1.bp.blogspot.com/-zLp3E7kSKm4/TV6W5FNY44I/AAAAAAAAAy8/lvievPXdh68/s1600/red+balloon.jpg','http://kids.mdbc.gov.au/__data/page/735/Pilliga_Mouse.JPG','http://thelatesthiss.org/wp-content/uploads/2012/03/soccer-ball1.png','http://remodelista.com/img/sub/uimg//02-2011/ikea-olle-chair-red.jpg','http://ctmls.ctreal.com/wp-content/uploads/2011/12/twelvekillerblogposts.jpg'];

document.getElementById('photo').setAttribute('src',images[turn]);
function answered(a){
    guess++;
    if(a==answers[turn]){
        turn++;
        if(turn!=answers.length){
            document.getElementById('msg').innerHTML='<span style="color:#FFF;background-color:#0F0;">Great Job!!</span>';
            setTimeout(clr,1000);
            document.getElementById('photo').setAttribute('src',images[turn]);
        }
        else{
            alert('You finished the quiz. You were right '+answers.length+'/'+guess+' times for a score of '+Math.round(100*answers.length/guess)+'%');
        }
    }
    else{
        document.getElementById('msg').innerHTML='<span style="color:#FFF;background-color:#F00;">Guess Again</span>';
        setTimeout(clr,2000);
    }
}

function clr(){
    document.getElementById('msg').innerHTML='';
}

</script>
</html>
于 2012-05-01T00:07:51.147 に答える