<!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;
}