Capitol Quiz

A little AngularJS demo.

by ChrisP

HTML

<h1>Capitol Quiz</h1>
<div ng-controller="Main" ng-app="app">
    <p>{{ questions[current_question].question }}</p>
    <p ng-hide="done">
        <button ng-click="next()">Next</button>&nbsp;
        <input type="text" size="30"
            ng-model="questions[current_question].answer.user"/>
        &nbsp;Time: {{ remaining_time }}
    </p>
    <hr/>
    <div ng-show="done">
    <h2>Your Answers</h2> 
    <p ng-repeat="q in questions">
        <strong>{{ q.question }}</strong><br/>
        {{ q.answer.user }}
    </p>
    </div>
</div>

CSS

* { font-size: 16pt; }
h1 { font-size: 24pt; }
h3 { font-size: 18pt; }

JavaScript

var app = angular.module('app', []);

app.controller('Main', function($scope) {
    $scope.questions = [{'question': 'What is the capitol of New York?', 'answer': {'user': '', 'correct': 'Albany'}},
                       {'question': 'What is the capitol of Montana?', 'answer': {'user': '', 'correct': 'Helena'}}];
    $scope.current_question = 0;
    $scope.remaining_time = 10;
    $scope.done = false;
    var clock = setInterval( function () {
        $scope.remaining_time--;
		// check if we are out of time
		if ($scope.remaining_time <= 0) {
            $scope.next();
	    }
        $scope.$apply();
	}, 1000);
    $scope.next = function () {
        $scope.current_question++;
        $scope.remaining_time = 10;
        if ($scope.current_question >= $scope.questions.length) {
            $scope.done = true;
            clearInterval(clock);
        }
    }
});