青少年學生的多選題圖片測驗

我試圖用多個提交按鈕進行測驗。我想要一個圖片出現十個按鈕。每次測試者按下按鈕時，我都希望發佈該值並更改圖片。到目前爲止，我已經嘗試了三種方法： - 使用onclick和javascript我可以完成所有的動畫，但是數值沒有被公佈。從谷歌我得到的印象我不得不使用更多的JavaScript來提交的價值？青少年學生的多選題圖片測驗

2.在php中使用變量時，第一張圖片會顯示並顯示第一個值，但隨後什麼也沒有發生，添加一個循環意味着所有圖片都顯示在另一個上面，而不必等待任何按鈕被點擊。

3.我試圖爲每張圖片做單獨的html頁面，然後將值發佈到php文件中，該文件的值爲$ score ++;並轉到下一個html文件，但那麼$分數是不正確的。因爲它是一個局部變量？這是否意味着我不得不在MySQL中保留價值以獲取它？此外，這似乎是一個非常浪費的方式來編程整個事情...

這裏是代碼沒有。 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'; 

?>

任何幫助，將不勝感激:)

來源

2012-04-26 Sean

你能顯示第一個選項代碼嗎？ – 2012-04-26 11:03:24

您是否嘗試過使用'a'標籤代替輸入按鈕？ – karthik 2012-04-26 11:09:13

你的情況的解決方案是使用JavaScript（附有onClick）和AJAX（使AJAX查詢像jQuery庫 - http://api.jquery.com/category/ajax/).Every一次用戶點擊選擇一個按鈕，你應該更新javascript中的分數值，並請求新圖片的URL和正確的答案，當用戶點擊最後一個按鈕發送它時，你應該發送最後的分數關於AJAX的更多細節你可以在這裏找到：http://www.w3schools.com/ajax/default.asp 希望它有幫助

來源

2012-04-26 12:18:11 Mircea

其中，第三種方法比其他方法更好。通常在MCQ頁面上，問題是保留的或單獨的頁面。與局部變量的問題可以，如果你使用會議

$_SESSSION['score'] += $score 
echo $_SESSION['score'];

來源

2012-04-30 23:57:45 Starx

我會每個按鈕的值提交給函數你解決（的onclick =「回答（‘鉛筆’）」）

然後，我會得到一個正確答案的順序數組，以及一個用戶所在位置的計數器整數。在回答的函數中，我將比較提交的值與答案數組中位於'round'位置的項目（可能減1，取決於您想如何計數），並可能增加猜測計數（如果這就是您的得分）

當這兩個值匹配時，遞增計數器並更改圖像的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-01 00:07:51

青少年學生的多選題圖片測驗

回答

相關問題