<!doctype html>
<html ng-app="quiz" >
<head>
  <meta charset="utf-8">
  <title>Quiz Engine</title>
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" /> 
  <link rel="stylesheet" href="style.css">
  <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>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="QuizController">
    <ul class="unstyled">
      <li ng-repeat="question in questions">
       <strong class="question">{{ question.questionText }}</strong>
       <ul class="unstyled" id="quest_{{$parent.$index}}"">
        <li ng-repeat="answer in question.answers">
          <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="{{ answer.answerText }}"  name="quest_{{$parent.$index}}_answers" />{{ answer.answerText }}</label>
        </li>
       </ul>
      </li>
    </ul>
    <button class="btn" type="submit" ng:click="showResult()">Submit</button>
  <div class="well">
    <p>you got {{ correctCount }} out of {{questions.length}} right</p>
    
  </div>
    
  </div>
  
 </body>
</html>
angular.module('quiz.service', []);
angular.module('quiz.directive', []);
angular.module('quiz.filter', []);

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

var QuizController = function($scope){
 
  "use strict";
  $scope.questions = [
    {"questionText": "Why is the sky blue?", "answers": [
      {"answerText":"blah blah 1", "correct": true},
      {"answerText":"blah blah 2", "correct": false},
      {"answerText":"blah blah 3", "correct": false}
      ]},
    {"questionText": "Why is the meaning of life?", "answers": [
      {"answerText":"blah blah 1", "correct": true},
      {"answerText":"blah blah 2", "correct": false},
      {"answerText":"blah blah 3", "correct": false}
      ]},
    {"questionText": "How many pennies are in $10.00?", "answers": [
      {"answerText":"1,000.", "correct": true},
      {"answerText":"10,000.", "correct": false},
      {"answerText":"A lot", "correct": false}
      ]},
    {"questionText": "What is the default program?", "answers": [
      {"answerText":"Hello World.", "correct": true},
      {"answerText":"Hello Sunshine.", "correct": false},
      {"answerText":"Hello my ragtime gal.", "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 = "donno";
        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";
        }
      }
    }
    
    //console.log($scope.answers);
    
  };
};
/* Put your css in here */


.isCorrect_true{
  background-color: green;
}

.isCorrect_false{
  background-color: red;
}