show an dialog onclick with radiobuttons

Question

I am creating an practice exam for some students in my school. I have a lot of multiple choice questions and i'm trying to get it to work bud got stuck here. I am new to javascript and have no clue on how to get this working. So every question has 4 choices that look like this:

<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>

The question is just an image and they have to select either a, b, c or d. I've managed to get it working this far, bud what i want to add is an dialog whenever they click on a, b, c or d to tell them if the answer is correct or not and if not add a feedback to tell them why the answer is wrong. The reason why i am not using alert to give them a feedback is because i can't add images to an alert box.

Thanks in advance

shouldv'e put that in the code, figures1 referrs to an array of figures. It just loads an image to the html page, the figure displays the question. — rickert, Sep 10 '14 at 12:45
Btw, your students can see the right answers from the source code — Olli Puljula, Sep 10 '14 at 12:59
It is an exam for practice only so it doesn't matter if they can view the answers, the goal of this exam is for them to learn. — rickert, Sep 10 '14 at 13:09

Stijn Bernards · Accepted Answer · 2014-09-10T13:20:23.373

1

Give your input a class like "answer". Then in your jquery code:

   $(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;
       }
   }

Where #dialog is your dialog:

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

JS fiddle

edited Sep 10 '14 at 13:20

answered Sep 10 '14 at 12:29

Stijn Bernards

1,091
11
29

Well, having these `#dialog` and `.answer` you should probably add a full example how it is supposed to work. – Regent Sep 10 '14 at 12:30
@Regent true let me edit. – Stijn Bernards Sep 10 '14 at 12:32
hmm it looks great, bud the thing is i want to have 4 different feedbacks on the questions, like if he answers a show him feedback of a and b show feedback of b etc. – rickert Sep 10 '14 at 13:00
@rickert I'll update my answer and jsfiddle to suit your needs :) – Stijn Bernards Sep 10 '14 at 13:04
@Stijn Bernards wow thanks alot it's great. One last little question :P Is it possible to put images inside the feedback? It are questions about different welding machines etc. and if they answer it wrong i would like to show them an image of the answer they chose. – rickert Sep 10 '14 at 13:12
@rickert Yes Inside the .html('') just put a image tag like this: .html(''). I'll update my jsfiddle a little bit. – Stijn Bernards Sep 10 '14 at 13:15
@rickert Updated it don't forget to set the answer to accepted to help future users! – Stijn Bernards Sep 10 '14 at 13:21
@StijnBernards thank you so much, just did it :) – rickert Sep 10 '14 at 13:23
@rickert You're welcome feel free to ask anything else. – Stijn Bernards Sep 10 '14 at 13:24

score 0 · Answer 2 · answered Sep 10 '14 at 12:31

You'd need to test the value of the clicked element and then give feedback from that answer. This can be done i varity of ways, but I'd say that using $("[name=q1]").click() would be the easiest, and then use $(this).val() to check the answer.

Please refer to this fiddle for an example.

http://jsfiddle.net/u3csoave/

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

you can use confirmation alert to achieve this.there are too many jquery demo's available.

for example see this link:how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

edited May 23 '17 at 11:49

Community

1
1

answered Sep 10 '14 at 12:34

Suchit kumar

11,809
3
22
44

score 0 · Answer 4 · answered Sep 10 '14 at 12:42

0

i think you can use confirmation alert to show user correct answer and put a link in the alert box which allows them to change their answer.

answered Sep 10 '14 at 12:42

Kajal

1
1

score 0 · Answer 5 · answered Sep 10 '14 at 12:57

JQueryUI dialog..

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

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

Then open dialogs in radiobuttons' onlick method.

Maybe you should just make one generic dialog and pass all the information needed as parameters so you don't end up with a page containing multiple dialogs.

show an dialog onclick with radiobuttons

5 Answers5