显示带有单选按钮的对话框 onclick [关闭]答案

【问题标题】：show an dialog onclick with radiobuttons [closed]显示带有单选按钮的对话框 onclick [关闭]
【发布时间】：2014-09-10 12:23:43
【问题描述】：

我正在为我学校的一些学生创建一个模拟考试。我有很多多项选择题，我正试图让它发挥作用，但被困在这里。我是 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 时，告诉他们答案是否正确，如果不正确，添加反馈告诉他们为什么答案是错误的。我不使用警报给他们反馈的原因是因为我无法将图像添加到警报框中。

提前致谢

【问题讨论】：

figures1 不是有效的 HTML 元素。
应该把它放在代码中，figures1 指的是一个图形数组。它只是将图像加载到 html 页面，图中显示了问题。
顺便说一句，您的学生可以从源代码中看到正确的答案
这是一个练习考试，所以他们是否可以查看答案并不重要，这次考试的目标是让他们学习。
@olli.puljula 并非所有学生都很聪明 :)

标签： javascript jquery html

【解决方案1】：

给你的输入一个像“answer”这样的类。然后在你的 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

【讨论】：

好吧，有了这些#dialog 和.answer，您可能应该添加一个完整的示例，它应该如何工作。
@Regent true 让我编辑。
嗯，它看起来很棒，但问题是我想对问题有 4 种不同的反馈，比如如果他回答 a，则显示他对 a 的反馈，b 显示对 b 的反馈等。
@rickert 我会更新我的答案和 jsfiddle 以满足您的需求 :)
@Stijn Bernards 哇，非常感谢，太棒了。最后一个小问题：P 是否可以将图像放入反馈中？这是关于不同焊接机等的问题，如果他们回答错误，我想向他们展示他们选择的答案的图像。

【解决方案2】：

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

请参考这个小提琴的例子。

http://jsfiddle.net/u3csoave/

【讨论】：

【解决方案3】：

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

例如看这个链接：how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

JQueryUI 对话框..

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

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

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

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

【讨论】：