소스 검색

ntp le timer

Brendan Abolivier 9 년 전
부모
커밋
446388fb18
3개의 변경된 파일108개의 추가작업 그리고 18개의 파일을 삭제
  1. 2
    1
      web/api/model/class.questset.php
  2. 9
    1
      web/index.htm
  3. 97
    16
      web/js/game.js

+ 2
- 1
web/api/model/class.questset.php 파일 보기

@@ -17,7 +17,8 @@ class Questset {
17 17
 					"where" => array(
18 18
 						array("reponse1", "=", $this->reponse1),
19 19
 						array("reponse2", "=", $this->reponse2)
20
-					)
20
+					),
21
+					"order by" => array("rand()")
21 22
 				);
22 23
 
23 24
 				$questions = $bdd->Select('*', 'questions', $options);

+ 9
- 1
web/index.htm 파일 보기

@@ -1,10 +1,18 @@
1 1
 <!doctype html>
2 2
 <html>
3 3
   <head>
4
-    <title>fqsdhgfqjlsghoesf</title>
4
+    <title>Burger Quizz - Jouer</title>
5 5
     <meta charset="utf-8" />
6 6
     <script src="jquery-2.1.4.min.js"></script>
7 7
     <script src="js/game.js"></script>
8
+    <style type="text/css">
9
+      .good-answer {
10
+        color:green;
11
+      }
12
+      .wrong-answer {
13
+        color:red;
14
+      }
15
+    </style>
8 16
   </head>
9 17
   <body>
10 18
     <div id="game"></div>

+ 97
- 16
web/js/game.js 파일 보기

@@ -1,4 +1,12 @@
1
-var json, cat, theme, i = 0;
1
+// IDs
2
+var id_cat = 0, id_theme = 0, id_quest = 0;
3
+// Shortcuts
4
+var json, category, theme;
5
+// Timer
6
+var timing = 5, secRestantes;
7
+
8
+var score = 0;
9
+var reponseUser = -1, bonneReponse;
2 10
 
3 11
 function apiReq() {
4 12
   $.ajax({
@@ -12,30 +20,103 @@ function apiReq() {
12 20
 }
13 21
 
14 22
 function loadCat(id) {
15
-  if(i === 0) cat = json.cat1;
16
-  if(i === 1) cat = json.cat2;
23
+  if(id === 0) category = json.cat1;
24
+  if(id === 1) category = json.cat2;
25
+  console.log(category);
17 26
   $("#game").html("<p id=\"category\">Catégorie : "+category.nom_cat+"</p>");
18
-  loadTheme(1);
27
+  $("#game").append("<div id=\"theme\"></div>");
28
+  loadTheme(id_theme);
19 29
 }
20 30
 
21 31
 function loadTheme(id) {
22
-  theme = category.theme[id];
23
-  $("#game").append("<ul id=\"answers\"><li id=\"rep1\">"+theme.reponse1+"</li><li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>");
24
-  $("#game").append("<p id=\"question\"></p>")
25
-  quest();
26
-}
27
-
28
-function quest() {
29
-  while(i < theme.questions.length) {
30
-    $("#question").html(theme.questions[i]);
31
-    $("#answers").click(function() {
32
-      
33
-    });
32
+  theme = category.themes[id];
33
+  $("#theme").html("<p id=\"question\"></p>");
34
+  $("#theme").append("<ul id=\"answers\"><li id=\"rep1\">"+theme.reponse1+"</li>"
35
+    +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>");
36
+  $("#theme").append("<div id=\"timer\" style=\"width:100%\"></p>");
37
+  quest(id_quest);
38
+}
39
+
40
+function quest(id) {
41
+  $("#question").html(theme.questions[id].intitule);
42
+  startTimer();
43
+  bonneReponse = parseInt(theme.questions[id].bonneReponse);
44
+  console.info('Question ' + (id_quest + 1) + '/' + theme.questions.length + ' : '
45
+    +theme.questions[id].intitule);
46
+  $("#rep1").off('click');
47
+  $("#rep1").on("click", function() { reponseUser = 1; checkAnswer(); });
48
+  $("#rep2").off('click');
49
+  $("#rep2").on("click", function() { reponseUser = 2; checkAnswer(); });
50
+  $("#both").off('click');
51
+  $("#both").on("click", function() { reponseUser = 0; checkAnswer(); });
52
+}
53
+
54
+function checkAnswer() {
55
+  stopTimer();
56
+  if(reponseUser == bonneReponse) {
57
+    score += secRestantes+1;
58
+  }
59
+  switch(bonneReponse) {
60
+    case 0:   $("#rep1").addClass("wrong-answer");
61
+              $("#rep2").addClass("wrong-answer");
62
+              $("#both").addClass("good-answer");
63
+              break;
64
+    case 1:   $("#rep1").addClass("good-answer");
65
+              $("#rep2").addClass("wrong-answer");
66
+              $("#both").addClass("wrong-answer");
67
+              break;
68
+    case 2:   $("#rep1").addClass("wrong-answer");
69
+              $("#rep2").addClass("good-answer");
70
+              $("#both").addClass("wrong-answer");
71
+              break;
72
+  }
73
+  window.setTimeout(nextQuestion, 2000);
74
+}
75
+
76
+function nextQuestion() {
77
+  $("#rep1").removeClass();
78
+  $("#rep2").removeClass();
79
+  $("#both").removeClass();
80
+  // Dernière question du thème en cours
81
+  if((id_quest+1) == theme.questions.length)  {
82
+    // Dernier thème de la catégorie en cours
83
+    if((id_theme+1) == category.themes.length) {
84
+      // Dernière catégorie
85
+      if((id_cat+1) == 2) {
86
+        endGame();
87
+      } else {
88
+        id_quest = 0;
89
+        id_theme = 0;
90
+        id_cat++;
91
+        loadCat(id_cat);
92
+      }
93
+    } else {
94
+      id_quest = 0;
95
+      id_theme++;
96
+      loadTheme(id_theme);
97
+    }
98
+  } else {
99
+    id_quest++;
100
+    quest(id_quest);
34 101
   }
35 102
 }
36 103
 
37 104
 function play() {
38 105
   $("#play").remove();
39 106
   apiReq();
107
+  loadCat(id_cat);
108
+}
109
+
110
+function startTimer() {
111
+  $("#timer").animate('{width : 0%}', timing*1000);
112
+  window.setTimeout(checkAnswer, timing*1000);
113
+}
114
+
115
+function stopTimer() {
116
+  secRestantes = Math.round($("#timer").width/100*timing);
117
+  console.log(secRestantes);
118
+}
40 119
 
120
+function endGame() {
121
+  $("#game").html("End of line. Score : "+score);
41 122
 }