-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (59 loc) · 3.31 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html ng-app="myQuiz">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Your Knowledge: Saturn</title>
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz" ng-controller="QuizController" >
<h1>Test Your knowledge: <span>Saturn</span></h1>
<div class="progress">
<div class="
{{($index === activeQuestion) ? 'on' : 'off' }}
{{ (myQuestion.questionState === 'answered') ? 'answered' : 'unanswered' }}
{{(myQuestion.correctness === 'correct') ? 'correct' : 'incorrect' }}
"
ng-repeat="myQuestion in myQuestions"></div>
</div>
<div class="intro {{(activeQuestion > -1) ? 'inactive' : 'active'}}">
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn.</p>
<p class="btn" ng-click="activeQuestion = 0">Begin</p>
</div>
<div class="question
{{ $index === activeQuestion ? 'active' : 'inactive' }}
{{ myQuestion.questionState === 'answered' ? 'answered' : 'unanswered' }}
" ng-repeat="myQuestion in myQuestions">
<p class="txt">{{myQuestion.question}}</p>
<p class="ans"
ng-class="{
image:Answer.image,
selected:isSelected($parent.$index,$index),
correct:isCorrect($parent.$index,$index)
}"
ng-style="{ 'background-image':'url({{Answer.image}})' }"
ng-click="selectAnswer($parent.$index,$index)"
ng-repeat="Answer in myQuestions[$index].answers">
{{Answer.text}}
</p>
<div class="feedback">
<p ng-show="myQuestion.correctness === 'correct'">You are <strong>correct</strong>.</p>
<p ng-show="myQuestion.correctness === 'incorrect'">Oops! That is not correct.</p>
<p>{{myQuestion.feedback}}</p>
<p class="btn" ng-click="selectContinue()">Continue</p>
</div>
</div>
<div class="results {{(totalQuestions === activeQuestion) ? 'active' : 'inactive' }} ">
<h3>Results</h3>
<p>You scored {{percentage}}% by correctly answering {{score}} of the total {{totalQuestions}} questions.</p>
<p>Use th links below to challenge your friends.</p>
<div class="share" ng-bind-html="createShareLinks(percentage)">
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>