forked from covlllp/flash-cards
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
52 lines (51 loc) · 2.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title>Flash Cards</title>
<!-- We've provided some styles for you, aren't we nice? -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body ng-app="flashCards" >
<div ng-controller="StatsController" id="statistics">
<div id="scoreboard">
<h3>Correct: <span>{{ scores.correct }}</span></h3>
<h3>Incorrect: <span>{{ scores.incorrect }}</span></h3>
</div>
</div>
<div ng-controller="MainController">
<div id="buttons">
<button class="category-button" ng-click="getCategoryCards('MongoDB')" ng-class="{active: activeCat == 'MongoDB'}">MongoDB</button>
<button class="category-button" ng-click="getCategoryCards('Express')" ng-class="{active: activeCat == 'Express'}">Express</button>
<button class="category-button" ng-click="getCategoryCards('Angular')" ng-class="{active: activeCat == 'Angular'}">Angular</button>
<button class="category-button" ng-click="getCategoryCards('Node')" ng-class="{active: activeCat == 'Node'}">Node</button>
<button class="category-button" ng-click="getCategoryCards()" ng-class="{active: activeCat == ''}">Reset</button>
</div>
<div
ng-repeat="flashCard in flashCards | orderBy : 'question'"
class="flash-card">
<h1>{{ flashCard.question | uppercase }}</h1>
<h3>Category: {{ flashCard.category }}</h3>
<ul class="flash-card-answers">
<li
ng-repeat="answer in flashCard.answers"
class="flash-card-answer"
ng-click="answerQuestion(answer, flashCard)">{{ answer.text }}</li>
</ul>
<h2
class="answer-feedback"
ng-class="flashCard.answeredCorrectly ? 'correct' : 'incorrect'"
ng-show="flashCard.answered">
<span ng-show="flashCard.answeredCorrectly">Yeah, you got it right!</span>
<span ng-show="!flashCard.answeredCorrectly">Nope, you got it wrong.</span>
</h2>
</div>
<script src="js/lib/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StatsController.js"></script>
<script src="js/factories/FlashCardsFactory.js"></script>
<script src="js/factories/ScoreFactory.js"></script>
</div>
</body>
</html>