Seperate radio inputs, appending a div to the correct ones

Question

My code:

$(document).ready(function () {
    $("input").focus(function () {
        $(this).css('outline-color', '#559FFF');
        $(this).blur(function () {
            $(this).css("outline-color", "#FF0000");
        });
    });
    $("input").click(function () {
        var value = $(this).val(function () {
            $(this).html("");
        });
    });
    $(".awesome").click(function () {
        var toStore = $("input[name=name]").val();
        if (!/^[A-Za-z]+ [A-Za-z]+$/.test(toStore)) {
            alert("You Must Put a Valid Name");
        } else {
            $("#contain").children().fadeOut(1000);
            $("#contain").delay(1000).queue(function () {
                $("#contain").append("<p>Welcome to My Quiz : " + toStore + "</br>" +
                    "Youll Get 10 Questions To Answer </br> " +
                    "Here Is the First One:</p>");

                var allQuestions = {
                    outquestions:{
                        question1 : {    quest: "What number was Michel Jorden?",
                            choices: ["22","32","23","5"],
                            correctAnswer: "23"},
                    question2 : {    quest: "what contries are with the border of israel?",
                            choices: ["eygpt,iraq syria and lebanon","jordan iraq iran and lebanon","eygpt,iraq kuwiet and lebanon","eygpt lebanon jordan and syria"],
                            correctAnswer: "eygpt lebanon jordan and syria"},
                    question3 : {    quest: "who was the lead singer of queen?",
                            choices: ["jhon lenon","freddie mercury","neil young","bob dylan"],
                            correctAnswer: "freddie mercury"},
                    question4 : {    quest: "the island australia once was belong to?",
                            choices: ["UK","US","germany","UA"],
                            correctAnswer: "UK"},
                    question5 : {    quest: "What is the number of states in USA?",
                            choices: ["25","60","50","54"],
                            correctAnswer: "50"},
                    question6 : {    quest: "who was the first prime minister of israel?",
                            choices: ["David ben gurion","hertzel","rabin","beegin"],
                            correctAnswer: "david ben gurion"},
                    question7 : {    quest: "when was the ym kipur war?",
                            choices: ["79","73","71","69"],
                            correctAnswer: "73"},
                    question8 : {    quest: "when was the yaer of the anoncment israel?",
                            choices: ["45","50","44","48"],
                            correctAnswer: "48"},
                    question9 : {    quest: "Who is the prime minister of israel?",
                            choices: ["bibi","lapid","sheli","liberman"],
                            correctAnswer: "bibi"},
                    question10 : {    quest: "What is the first name of jobs from apple company?",
                            choices: ["steve","bob","jhon","dude"],
                            correctAnswer: "steve"}
                    },
                    correctAnswers: 0
                };

                var outquestions = allQuestions["outquestions"];
                for (var question in outquestions) {
                    $("#contain").append("<p>" + outquestions[question]['quest'] + "</p>");
                    for (var choice in outquestions[question]["choices"]) {
                        $("#contain").append("<p><input type='radio' name=question value=choice>" +outquestions[question]["choices"][choice] + "</p>");
                    }
                }
                $("#contain").append("<form><input type='button' id='test' value='test' name='SbBt'/></form>");
           $("#test").click(function(){
           var storeq = $("input[name=question]").val(function(){
           $(this).append("<div class='vi'></div><div class='vi2'></div>");
           });
           });
            });
        }
    });
});

I have two problems to fix.

First of all, when I'm appending my inputs, I'm trying to select one radio button for each question. However I can select only one radio button for all of the questions.

The second thing is that I want to get the value of the selected radio buttons and check if it matches the correctAnswer. If it is, I want to append to that radio button a sign like a V so the client will know that he answered correctly.

here is my full code: http://jsfiddle.net/QPpMT/

Answer 1

To quickly answer part of your question, the reason your radio buttons are linked is because they are based off of the name element in the input. You could fix this by adding a unique name to your question objects and setting that when you iterate through them.

Changing the following line should give you the desired result:

$("#contain").append("<p><input type='radio' name="+ question +" value="+ outquestions[question]['choices'][choice] +">" +outquestions[question]['choices'][choice] + "</p>");

As for the second part, if you're wanting instant results to what they click, simply add an onclick function that checks for the correct answer and appends the appropriate div/element/icon. You will probably be best served to use the :checked selector here to assist with finding the value of the appropriate radio button. You may need to move your questions variable to a get type function, so that it is easily accessible to other functions.

If you need a more detailed explanation with code I would be happy to provide one.

Edit: I see you just posted a fiddle, I'll take a look and edit accordingly.

Made some changes: http://jsfiddle.net/njgray/QPpMT/3/ I added some comments to try and explain what I did. This is just one method and probably not the most efficient, but it should suffice.