Seperate входы радио, добавляющим в DIV с правильными

Question

Мой код:

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

У меня есть две проблемы, чтобы исправить.

Прежде всего, когда я добавляю свои входы, я пытаюсь выбрать один переключатель для каждого вопроса. Однако я могу выбрать только один переключатель для всех вопросов.

Во-вторых, я хочу получить значение выбранных переключателей и проверить, соответствует ли оно correctAnswer. Если это так, я хочу добавить к этому переключателю знак как V, чтобы клиент знал, что он ответил правильно.

вот мой полный код: http://jsfiddle.net/QPpMT/

Answer 1

Чтобы быстро ответить на часть вашего вопроса, причина ваших радио кнопки связаны, потому что они основаны от имени элемента на входе. Вы можете исправить это, добавив уникальное имя к своим объектам вопроса и установив это, когда вы перебираете их.

Изменение следующей строки должно дать вам желаемый результат:

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

Что касается второй части, если Вы желаете мгновенные результаты, что они щелкают, просто добавить функцию OnClick, которая проверяет правильное ответьте и добавьте соответствующий значок div/element /. Вам, вероятно, лучше всего будет использовать селектор: checked здесь, чтобы помочь найти значение соответствующего переключателя. Вам может потребоваться переместить вашу переменную вопросов в функцию типа get, чтобы она была легко доступна для других функций.

Если вам нужно более подробное объяснение с кодом, я был бы рад предоставить его.

Редактировать: Я вижу, что вы только что отправили скрипку, я посмотрю и отредактирую соответственно.

Сделанные изменения: http://jsfiddle.net/njgray/QPpMT/3/ Я добавил несколько комментариев, чтобы попытаться объяснить, что я сделал. Это всего лишь один метод и, вероятно, не самый эффективный, но этого достаточно.