用单选按钮单击时显示对话框

Question

我正在为学校的一些学生创建一个练习考试。我有很多选择题，我正在努力让它发挥作用，巴德被困在这里了。我是javascript的新手，不知道如何实现这一点。因此，每个问题都有4个选项，如下所示：

<tr>
    <td>
        <figures1></figures1>
    </td>
    <td class="questiona">
        <br>
        <input type="radio" name="q1" value="a"/>a<br>
        <input type="radio" name="q1" value="b"/>b<br>
        <input type="radio" name="q1" value="c"/>c<br>
        <input type="radio" name="q1" value="d"/>d<br>
    </td>
</tr>

问题只是一个图像，他们必须选择a、b、c或d。我已经成功地做到了这一点，巴德，我想添加的是，每当他们点击a、b、c或d时，都会添加一个对话框，告诉他们答案是否正确，如果没有，则添加一个反馈，告诉他们为什么答案是错误的。我之所以不使用提醒来给他们反馈，是因为我无法将图像添加到提醒框中。

提前感谢

Answer 1

给您的输入一个类似类的"答案"。然后在您的jquery代码中：

   $(document).ready(function(){
        $(".answer").click(function(){
            ValidateAnswerFunction(this); //sends the input element to the validate answer function
            $( "#dialog" ).css("display", "block"); // shows the dialog .hide(); to hide it!
        });
       $("#dialog").click(function(){
           $(this).hide();
       });
    });
   function ValidateAnswerFunction(input){
       switch($(input).val()){
           case "a":
               $("#dialog").html("correct");
               break;
           case "b":
               $("#dialog").html("close");
               break;
           case "c":
               $("#dialog").html("not even close <img src='http://www.w3schools.com/html/pic_mountain.jpg' style='width:100px;height:100px'>");
               break;
           case "d":
               $("#dialog").html("are you even trying m8?");
               break;
       }
   }

对话框的位置：

<div id="dialog"></div>

JS fiddle

Answer 2

您需要测试单击的元素的值，然后根据该答案给出反馈。这可以通过多种方式实现，但我想说，使用$("[name=q1]").click()将是最简单的，然后使用$(this).val()来检查答案。

请参考这把小提琴作为例子。

http://jsfiddle.net/u3csoave/

Answer 3

您可以使用confirmation alert来实现这一点。可用的jquery demo's太多了。

例如，请参阅以下链接：如何使用三个按钮显示确认警报'；是''；否'；和'；取消'；如在MS Word 中所示

Answer 4

我认为您可以使用确认警报来向用户显示正确答案，并在警报框中放置一个链接，允许他们更改答案。

Answer 5

JQueryUI对话框。。

function foobar() {
   $("#dialog").dialog();
}
<div id="dialog" title="Dialog title">
   <img src="foo.bar"/>
</div>

然后用单选按钮的onlick方法打开对话框。

也许你应该只制作一个通用对话框，并将所有需要的信息作为参数传递，这样你就不会得到一个包含多个对话框的页面。