JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<!doctype html>
<html ng-app="lycaquiz">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> 
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
</head>

<div ng-controller="lycaquizctrl">
<ul class="unstyled">
<li ng-repeat="question in questions">
<strong>{{question.questionText}}</strong>
<ul id="quest_{{$parent.$index}}" class="unstyled">
<li ng-repeat="answer in question.answer">
<label class="isCorrect_{{answer.selected}}" for="quest_{{$parent.$index}}_answer_{{$index}}">
<input type="radio" id="quest_{{$parent.$index}}_answer_{{$index}}" ng-model="answers[$parent.$index]" value="{{answers.answerText}}" name="quest_{{$parent.$index}}_answers" />{{answers.answerText}}
</label>
</li>
</ul>
</li>

</ul>

<button class="btn" type="submit" ng:click="showResult()">Submit</button>
<p>You got {{correctCount}} out of {{questions.length}} right</p>


</div>
</html>

CSS

.isCorrect_true{
  background-color: green;
}

.isCorrect_false{
  background-color: red;
}

JavaScript

angular.module('lycaquiz.service', []);
angular.module('lycaquiz.directive', []);
angular.module('lycaquiz.filter', []);

angular.module('lycaquiz', ['lycaquiz.service', 'lycaquiz.directive', 'lycaquiz.filter']);

var lycaquizctrl = function($scope) {
  "use strict";
  $scope.questions = [{
      "questionText": "What Javascript Method Would Convert The String '20' To An Integer (on The Fly) So '20' + 20 = 40?",
      "answers": [{
          "answerText": "parseInt('20')+20",
          "correct": true
        },
        {
          "answerText": "parseInt(20)+20",
          "correct": false
        },
        {
          "answerText": "parseInt('20+20')",
          "correct": false
        }
      ]
    },
    {
      "questionText": "This is second question",
      "answers": [{
          "answerText": "This is answer",
          "correct": true
        },
        {
          "answerText": "This is not answer",
          "correct": false
        },
        {
          "answerText": "This is not answer",
          "correct": false
        }
      ]
    }
  ];

  $scope.answers = {};
  $scope.correctCount = 0;
  $scope.showResult = function() {

    $scope.correctCount = 0;
    var qLength = $scope.questions.length;
    for (var i = 0; i < qLength; i++) {
      var answers = $scope.questions[i].answers;
      $scope.questions[i].userAnswerCorrect = false;
      $scope.questions[i].userAnswer = $scope.answers[i];
      for (var j = 0; j < answers.length; j++) {
        answers[j].selected = "na";
        if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === true) {
          $scope.questions[i].userAnswerCorrect = true;
          answers[j].selected = "true";
          $scope.correctCount++;
        } else if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === false) {
          answers[j].selected = "false";

        }
      }
    }
  }
}