Hunger Games Quiz

<!DOCTYPE html>
<html ng-app="quizApp">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Quiz</title>
  <link rel="stylesheet" href="style.css" />
         <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script.js"></script>
  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
</head>
 

  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
          <li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
          <li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>


    <body>
        <div class="container">
            <h1 class="title">Hunger Games Quiz </h1>
            <quiz/>
        </div>
    </body>
  <!-- Footer -->

  <footer class="footer">
    <div class="container">

      <span style="float:left;">©2015 Bryant Tunbutr</span>

      <span style="float:right;">
            <a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
            <a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
    </div>
    <!-- end Container-->
  </footer>

</html>

var app = angular.module('quizApp', []);
 
app.directive('quiz', function(quizFactory) {
	return {
		restrict: 'AE',
		scope: {},
		templateUrl: 'template.html',
		link: function(scope, elem, attrs) {
			scope.start = function() {
				scope.id = 0;
				scope.quizOver = false;
				scope.inProgress = true;
				scope.getQuestion();
			};
 
			scope.reset = function() {
				scope.inProgress = false;
				scope.score = 0;
			}
 
			scope.getQuestion = function() {
				var q = quizFactory.getQuestion(scope.id);
				if(q) {
					scope.question = q.question;
					scope.options = q.options;
					scope.answer = q.answer;
					scope.answerMode = true;
				} else {
					scope.quizOver = true;
				}
			};
 
			scope.checkAnswer = function() {
				if(!$('input[name=answer]:checked').length) return;
 
				var ans = $('input[name=answer]:checked').val();
 
				if(ans == scope.options[scope.answer]) {
					scope.score++;
					scope.correctAns = true;
				} else {
					scope.correctAns = false;
				}
 
				scope.answerMode = false;
			};
 
			scope.nextQuestion = function() {
				scope.id++;
				scope.getQuestion();
			}
 
			scope.reset();
		}
	}
});

app.factory('quizFactory', function() {
	var questions = [
		{
			question: "Which is Katniss Everdeen's weapon of choice?",
			options: ["Guns", "Words", "Bow and Arrow", "Knives"],
			answer: 2
		},
		{
			question: "What is Peeta Mellark's job?",
			options: ["Baker", "Banker", "Breaker", "Hater"],
			answer: 0
		},
		{
			question: "Which actress plays Katniss?",
			options: ["Jennifer Lopez", "Jennifer Aniston", "Jennifer Connelly", "Jennifer Lawrence"],
			answer: 3
		},
		{
			question: "Which word best describes Haymitch?",
			options: ["Victor", "Alcoholic", "Woody Harrelson", "All of the above"],
			answer: 3
		}
	];
 
	return {
		getQuestion: function(id) {
			if(id < questions.length) {
				return questions[id];
			} else {
				return false;
			}
		}
	};
});


ul {
  list-style: none;
}


 .categories {
   /* margin: 0 0 10px; */
   margin-left: auto;
   margin-right: auto;
 }
 
 .categories ul {
   /*   margin-left: auto;
margin-right: auto; */
   margin: 0 auto 0 auto;
   padding: 0;
   width: 100px;
   background: #f0f0f0;
   border: solid 1px #333;
   text-align: center;
list-style-type: none;
 }
 
 img {
   max-width: 250px;
 }
 
 .footer {
   height: 40px;
   background-color: transparent !important;
 }
 
 .plain-header {
   a {
     color: #428bca;
   }
   a:hover,
   a:focus {
     background-color: #FFF;
     color: #0085a1;
   }
   position: relative;
   padding: 30px 15px;
   text-align: center;
   font-size: 20px;
 }
 
 #home_link {
   font-size: 1.7em;
   color: white;
   text-transform: uppercase;
   letter-spacing: -1px;
   padding: 9px 15px;
   font-weight: bold;
 }
 
 #logo {
   color: #428bca;
   position: relative;
   text-align: center;
   font-size: 20px;
   padding: 30px 15px;
   text-align: left;
   :hover, :focus {
     background-color: #eeeeee;
     color: #0085a1;
   }
 }
 
 #logo:hover,
 #logo:focus {
   background-color: #eeeeee;
   color: #0085a1;
 }
 
 .footer {
   height: 40px;
   background-color: transparent;
 }
 
 h1,
 h3 {
   text-align: center;
 }
 
 .centering {
   text-align: center;
 }
 
 .center-block {
   float: none !important
 }

<!DOCTYPE html>
<div class="quiz-area" ng-show="inProgress">
</div>
 
<div class="intro" ng-show="!inProgress">
	<p>Welcome to the Quiz. May the Odds ever be in your favor!</p>
	<button id="startQuiz" ng-click="start()">Start the Quiz</button>
</div>

<div class="quiz-area" ng-show="inProgress">
	<div ng-show="!quizOver">
		<h2 id="question">{{question}}</h2>
		<ul id="options">
			<li ng-repeat="option in options">
				<label>
					<input type="radio" name="answer" value="{{option}}">
					{{option}}
				</label>
			</li>
		</ul>
		<button ng-click="checkAnswer()" ng-show="answerMode">Submit</button>
 
                <div ng-show="!answerMode">
			<button ng-click="nextQuestion()" class="next-question">Next</button>
			<span ng-show="correctAns">That is correct!</span>
			<span ng-show="!correctAns">Sorry, that is an incorrect answer.</span>
		</div>
	</div>
 
	<div ng-show="quizOver">
		<h2>Quiz is over</h2>
		<button ng-click="reset()">Play again</button>
	</div>
 
	<div id="score">
		Score: {{score}}
	</div>
</div>