Не запоминает состояние radio

226

05 марта 2017, 08:00

Здравствуйте! Есть тестирование из 5 вопросов - 5 "вкладок" с вопросами и кнопка "Завершить тест". В конце выдает результат сколько правильных ответов. Когда я на каком-то вопросе отмечаю радио с вариантом ответа и перехожу на следующий вопрос, то состояние отмеченного радио не запоминается и он становится неотмеченным. И так с любым вопросом. Запоминается только радио, которое было отмечено последним перед нажатием на кнопку "Завершить тест". Соотвественно, и результат выдает, что правильных ответов 1 из 5, потому что 4 остальных стали неотмеченные. Как можно решить эту проблему?

Ниже код. Правильные ответы на вопросы - все первые варианты. Спасибо!

<!DOCTYPE html>

Document var myTestApp = angular.module("myTest", []);

myTestApp.controller("myTestCtrl", function ($scope) {

$scope.quests = [{ ask: "HTML is ... ?", v1: "First1", v2: "Second1", v3: "Third1", v4: "Fourth1" }, { ask: "CSS is ... ?", v1: "First2", v2: "Second2", v3: "Third2", v4: "Fourth2" }, { ask: "JS is ... ?", v1: "First3", v2: "Second3", v3: "Third3", v4: "Fourth3" }, { ask: "LESS is... ?", v1: "First4", v2: "Second4", v3: "Third4", v4: "Fourth4" }, { ask: "Bootstrap is... ?", v1: "First5", v2: "Second5", v3: "Third5", v4: "Fourth5" }];

$scope.options =
    [{ display: "Вопрос 1", value: "q1" },
    { display: "Вопрос 2", value: "q2" },
    { display: "Вопрос 3", value: "q3" },
    { display: "Вопрос 4", value: "q4" },
    { display: "Вопрос 5", value: "q5" },
    { display: "", value: "showres" }];
$scope.mode = $scope.options[0];  
$scope.mychange = function (i) {
  $scope.mode = $scope.options[i]; 
} 
$scope.finishTest = function () {
  var r1 = ($("#ra1").is(":checked")) ? 1 : 0;
  var r2 = ($("#ra2").is(":checked")) ? 1 : 0;
  var r3 = ($("#ra3").is(":checked")) ? 1 : 0;
  var r4 = ($("#ra4").is(":checked")) ? 1 : 0;
  var r5 = ($("#ra5").is(":checked")) ? 1 : 0;
  $scope.res = r1 + r2 + r3 + r4 + r5;
  $scope.mode = $scope.options[5]; 
} 
});

.container { margin-top: 20px; } .panel { padding: 5px; } .panel span { margin-right: 5px; padding-right: 5px; border-right: 1px solid #ccc; }

 <div class="panel panel-default">
   <span ng-click="mychange(0)">{{options[0].display}}</span>
   <span ng-click="mychange(1)">{{options[1].display}}</span>
   <span ng-click="mychange(2)">{{options[2].display}}</span>
   <span ng-click="mychange(3)">{{options[3].display}}</span>
   <span ng-click="mychange(4)">{{options[4].display}}</span>&emsp;
    <span ng-click="finishTest()">Завершить тест</span>
 </div>
  <div ng-switch on="mode.value">
    <table class="table" ng-switch-when="q1">
       <tr><th>{{quests[0].ask}}</th></tr>
      <tr><td><input type="radio" id="ra1"/>&nbsp;{{quests[0].v1}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[0].v2}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[0].v3}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[0].v4}}</td></tr>
    </table>
    <table class="table" ng-switch-when="q2">
     <tr><th>{{quests[1].ask}}</th></tr>
      <tr><td><input type="radio" id="ra2"/>&nbsp;{{quests[1].v1}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[1].v2}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[1].v3}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[1].v4}}</td></tr>
    </table>
    <table class="table" ng-switch-when="q3">
     <tr><th>{{quests[2].ask}}</th></tr>
      <tr><td><input type="radio" id="ra3"/>&nbsp;{{quests[2].v1}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[2].v2}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[2].v3}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[2].v4}}</td></tr>
    </table>
    <table class="table" ng-switch-when="q4">
     <tr><th>{{quests[3].ask}}</th></tr>
      <tr><td><input type="radio" id="ra4"/>&nbsp;{{quests[3].v1}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[3].v2}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[3].v3}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[3].v4}}</td></tr>
    </table>
    <table class="table" ng-switch-when="q5">
     <tr><th>{{quests[4].ask}}</th></tr>
      <tr><td><input type="radio" id="ra5"/>&nbsp;{{quests[4].v1}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[4].v2}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[4].v3}}</td></tr>
      <tr><td><input type="radio" />&nbsp;{{quests[4].v4}}</td></tr>
    </table>
    <table class="table" ng-switch-when="showres">
     <tr><th>Ваш результат</th></tr>
      <tr><td>Вы ответили на {{res}} из 5 вопросов</td></tr>
    </table>
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Slick-слайдер: как отцентровать один слайд?

Установил на сайте slick-слайдер и адаптировал его через responsive под разные размеры экранаТак получается, что для экранов менее 460px показывать...

628

jQuery