-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtravelQuiz.html
87 lines (81 loc) · 4.8 KB
/
travelQuiz.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/quiz.css" />
<!-- system javascript -->
<script src="js/system/jquery.min.js"> </script>
<script src="js/system/bootstrap.min.js"> </script>
<script src="js/system/angular.min.js"> </script>
<script src="js/system/angular-animate.min.js"> </script>
<script src="js/system/wow.min.js"> </script>
<script src="js/system/firebase.js"> </script>
<script src="js/system/angularfire.min.js"> </script>
<!-- custom javascript -->
<script src="js/main.js"> </script>
<script src="js/travel/quiz.js"> </script>
</head>
<body ng-app="Quiz" class="container-fluid">
<!-- Log in tab. Nếu mà đang làm test thoát ra thì kết quả không được chấp nhận( Lưu vào tài khoản ) -->
<div id="LoginTab" ng-controller="LoginForm" class="container-fluid wow fadeInDown">
<div class="row" ng-hide="loged">
<div class="col-lg-5 col-md-4 col-sm-12 col-xs-12">
<input type="email" class="form-control input-lg input-login" ng-model="username" placeholder="Email">
</div>
<div class="col-lg-5 col-md-4 col-sm-12 col-xs-12">
<input type="password" class="form-control input-lg input-login" ng-model="password" placeholder="Password">
</div>
<button type="button" class="btn btn-lg btn-login col-lg-1 col-md-2 col-sm-6 col-xs-12" ng-click="LogIn()">Log in</button>
<button type="submit" class="btn btn-lg btn-login col-lg-1 col-md-2 col-sm-6 col-xs-12" ng-click="Register()">Register</button>
</div>
<div class="row" ng-show="loged">
<div class="col-lg-10 col-md-8 col-sm-6 col-xs-6">
<p class="input-login"> Hi {{ user.name }} </p>
</div>
<a href="userProfile.html" class="btn btn-lg btn-login col-lg-1 col-md-2 col-sm-3 col-xs-3">Profile</a>
<button type="button" class="btn btn-lg btn-login col-lg-1 col-md-2 col-sm-3 col-xs-3" ng-click="LogOut()">Log Out</button>
</div>
</div>
<img class="img-responsive" src="img/header/travel.jpg">
<!-- Lưu các bài test và các trạng thái của nó
editDB = true: lựa chọn giữa việc edit ques DB hay take test. Người dùng bth có thể vào trang edit DB nhưng ko thể thêm hay xóa được
( Nên sẽ chỉ để xem list là chính ).
!editDB && loaded && publish: loaded là biến cho biết 10 câu hỏi đã được lựa chọn random chưa( bao gồm cả việc load từ server về ).
publish: cho biết người dùng đang ở câu 1 -> 9 hay là ở câu 10. Câu 1 -> 9 thì ấn submit sẽ ra câu tiếp. Câu 10 ấn submit
sẽ hiện lên các đáp án và thông báo điểm.
!editDB && loaded && !publish Hiện kết quả: Câu trả lời đúng sẽ có màu xanh lá cây. Màu xanh dương là lựa chọn của người dùng. Màu đỏ là kết quả sai.
Dùng angular khá bí ở khoản tái sử dụng code trong 1 vài trường hợp.
-->
<div ng-controller="QuestLibrary" class="container-fluid wow fadeInLeft" id="questionBoard" ng-show="loaded">
<div class="row" ng-show="editDB">
<a href="editTravelQuiz.html" class="btn btn-answer btn-lg col-lg-6 col-md-6 col-sm-12 col-xs-12">Edit question bank</a>
<div class="btn btn-answer btn-lg col-lg-6 col-md-6 col-sm-12 col-xs-12" ng-click="takeTest()">Take test</div>
</div>
<div ng-show="publish && !editDB && loaded">
<p class="question-style"> {{ currentQuestion.data }} </p>
<div class="row">
<div class="btn btn-answer col-lg-3 col-sm-6 col-xs-12" ng-repeat="ans in currentQuestion.answer" ng-click="select($index)" ng-class="{sel: $index == selected}">
{{ ans }}
</div>
</div>
<div class="btn btn-answer marginTop pull-left" ng-click="ReturnQuiz()"> Return </div>
<div class="btn btn-answer marginTop pull-right" ng-click="submitQuestion()"> Submit </div>
</div>
<div ng-show="!publish && !editDB && loaded">
<p class="question-style"> Your score is {{ score }} </p>
<div ng-repeat="question in list">
<p class="question-style"> {{ question.data }} </p>
<p class="btn-answer col-lg-3 col-xs-6 col-xs-12" ng-repeat="ans in question.answer"
ng-class="{sel: $index == getSel($parent.$index),right: $index == getRight($parent.$index),good:$index == getRight($parent.$index) && $index == getSel($parent.$index) }">
{{ ans }}
</p>
</div>
<div class="btn btn-login btn-lg col-lg-2 col-lg-offset-10 col-md-3 col-md-offset-9 col-sm-6 col-sm-offset-6 col-xs-12" ng-click="ReturnQuiz()"> Return </div>
</div>
</div>
</body>
</html>