显示带有单选按钮的对话框

时间:2014-09-10 12:23:44

标签: javascript jquery html

我正在为我学校的一些学生开设练习考试。我有很多选择题,我正试图让它工作芽被困在这里。我是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告诉他们答案是否正确如果没有添加反馈告诉他们为什么答案是错的。我没有使用警报给他们反馈的原因是因为我无法将图像添加到警报框中。

提前致谢

5 个答案:

答案 0 :(得分:1)

为您的输入提供类似&#34;回答&#34;的课程。 然后在你的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;
       }
   }

#dialog是你的对话框:

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

JS fiddle

答案 1 :(得分:0)

您需要测试点击元素的值,然后提供该答案的反馈。这可以通过多种方式完成,但我要说使用$("[name=q1]").click()最简单,然后使用$(this).val()来检查答案。

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

http://jsfiddle.net/u3csoave/

答案 2 :(得分:0)

您可以使用confirmation alert来实现此目标。jquery demo's可用的数量太多。

例如,请参阅此链接:how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

答案 3 :(得分:0)

我认为您可以使用确认提醒来向用户显示正确答案,并在警告框中输入一个链接,以便他们更改答案。

答案 4 :(得分:0)

JQueryUI对话框..

function foobar() {
   $("#dialog").dialog();
}

<div id="dialog" title="Dialog title">
   <img src="foo.bar"/>
</div>

然后在radiobuttons的onlick方法中打开对话框。

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