为青少年学生准备的多项选择题
我正在试着做一个有多个提交按钮的测验。我想要一张有十个按钮的图片。每次考生按下一个按钮，我想要张贴的值和改变的图片。到目前为止，我已经尝试了三种方法：
1.使用onclick和javascript，我可以完成所有的动画，但是值没有发布。从谷歌我得到的印象是，我必须使用更多的javascript来提交值？
2.使用php中的变量，第一个图片会显示，第一个值会post，但随后什么都没有发生，添加一个循环意味着所有图片都会出现在另一个图片的顶部，而不需要等待任何按钮被点击……
3.我尝试为每一张图片创建单独的html页面，然后将值发布到一个执行$score++的php文件中；然后转到下一个html文件，但是$score不正确。因为它是一个局部变量？这是否意味着我必须持有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';
?>任何帮助都将不胜感激:)
回答 3
Stack Overflow用户
发布于 2012-04-26 20:18:12
在您的案例中，优雅的解决方案是使用javascript (带有onClick)和AJAX (一个支持AJAX查询的库，如jQuery - http://api.jquery.com/category/ajax/).Every )。当用户点击选择一个按钮时，您应该更新javascript中的得分值，并请求新图像的url和正确答案。当用户单击最后一个按钮send it时，您应该发送最终分数。你可以在这里找到关于AJAX的更多细节：http://www.w3schools.com/ajax/default.asp希望它能有所帮助
Stack Overflow用户
发布于 2012-05-01 07:57:45
在这些方法中，第三种方法比其他方法更好。通常，在MCQ页面上，问题被保留或分开页面。如果使用会话，可以解决局部变量的问题吗
$_SESSSION['score'] += $score
echo $_SESSION['score'];Stack Overflow用户
发布于 2012-05-01 08:07:51
我会让每个按钮将它的值提交给一个函数(onclick="answered('pencil')")
然后我会有一个正确答案顺序的数组，以及用户在哪一轮的计数器整数。在回答函数中，我会将提交的值与答案数组中'round‘位置的项目进行比较(可能会减一，这取决于你想要如何计算)，并可能会增加猜测计数(如果这就是你的评分)
当两个值匹配时，递增计数器，并更改图像的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>https://stackoverflow.com/questions/10331971
复制相似问题
腾讯云开发者
