Browse Source

Transférer les fichiers vers 'Hello3'

Bao-Anh Tran 1 year ago
parent
commit
8075a98888
3 changed files with 487 additions and 0 deletions
  1. 27
    0
      Hello3/NewProject.html
  2. 299
    0
      Hello3/NewProject.js
  3. 161
    0
      Hello3/style.css

+ 27
- 0
Hello3/NewProject.html View File

@@ -0,0 +1,27 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+
4
+<head>
5
+
6
+  <!--  Meta  -->
7
+  <meta charset="UTF-8" />
8
+  <title>My New Pen!</title>
9
+
10
+  <!--  Styles  -->
11
+  <link rel="stylesheet" href="lib/lib.css">
12
+  <link rel="stylesheet" href="style.css">
13
+</head>
14
+
15
+<body>
16
+  <div id="app-container">
17
+    <div id="score-container">Score: 0</div>
18
+    <h2 id="app-title">Quiz Application (Card edition)</h2>
19
+    <div id="questions-container"></div>
20
+  </div>
21
+
22
+  <!-- Scripts -->
23
+  <script src="lib/lib.js"></script>
24
+  <script src="NewProject.js"></script>
25
+</body>
26
+
27
+</html>

+ 299
- 0
Hello3/NewProject.js View File

@@ -0,0 +1,299 @@
1
+//
2
+// lib/lib.js
3
+//
4
+var Question = function (questionObj) {
5
+    this.value = {
6
+      text: "Question",
7
+      answers: []
8
+    };
9
+  
10
+    this.selectedAnswer = null;
11
+    this.html = null;
12
+    this.questionText = null;
13
+    this.questionAnswers = null;
14
+    this.questionFeedback = null;
15
+  
16
+    this.value = Object.assign(this.value, questionObj);
17
+  
18
+    this.onQuestionAnswered = ({ detail }) => {
19
+      this.selectedAnswer = {
20
+        value: detail.answer,
21
+        html: detail.answerHtml
22
+      };
23
+      this.update();
24
+  
25
+      document.dispatchEvent(
26
+        new CustomEvent("question-answered", {
27
+          detail: {
28
+            question: this,
29
+            answer: detail.answer
30
+          }
31
+        })
32
+      );
33
+    };
34
+  
35
+    this.create = function () {
36
+      this.html = document.createElement("div");
37
+      this.html.classList.add("question");
38
+  
39
+      this.questionText = document.createElement("h2");
40
+      this.questionText.textContent = this.value.text;
41
+  
42
+      this.questionAnswers = document.createElement("div");
43
+      this.questionAnswers.classList.add("answers");
44
+  
45
+      for (let i = 0; i < this.value.answers.length; i++) {
46
+        const ansObj = this.value.answers[i];
47
+        let answer = createAnswer(ansObj);
48
+  
49
+        answer.onclick = (ev) => {
50
+          if (this.selectedAnswer !== null) {
51
+            this.selectedAnswer.html.classList.remove("selected");
52
+          }
53
+  
54
+          answer.classList.add("selected");
55
+  
56
+          this.html.dispatchEvent(
57
+            new CustomEvent("question-answered", {
58
+              detail: {
59
+                answer: ansObj,
60
+                answerHtml: answer
61
+              }
62
+            })
63
+          );
64
+        };
65
+  
66
+        this.questionAnswers.appendChild(answer);
67
+      }
68
+  
69
+      this.questionFeedback = document.createElement("div");
70
+      this.questionFeedback.classList.add("question-feedback");
71
+  
72
+      this.html.appendChild(this.questionText);
73
+      this.html.appendChild(this.questionAnswers);
74
+      this.html.appendChild(this.questionFeedback);
75
+  
76
+      this.html.addEventListener("question-answered", this.onQuestionAnswered);
77
+  
78
+      return this.html;
79
+    };
80
+  
81
+    this.disable = function () {
82
+      this.html.classList.add("disabled");
83
+      this.html.onclick = (ev) => {
84
+        ev.stopPropagation();
85
+      };
86
+  
87
+      this.html.removeEventListener("question-answered", this.onQuestionAnswered);
88
+  
89
+      let answers = this.html.querySelectorAll(".answer");
90
+      for (let i = 0; i < answers.length; i++) {
91
+        let answer = answers[i];
92
+        answer.onclick = null;
93
+      }
94
+    };
95
+  
96
+    this.remove = function () {
97
+      let children = this.html.querySelectorAll("*");
98
+      for (let i = 0; i < children.length; i++) {
99
+        const child = children[i];
100
+        this.html.removeChild(child);
101
+      }
102
+  
103
+      this.html.removeEventListener("question-answered", this.onQuestionAnswered);
104
+  
105
+      this.html.parentNode.removeChild(this.html);
106
+      this.html = null;
107
+    };
108
+  
109
+    this.update = function () {
110
+      let correctFeedback, incorrectFeedback;
111
+      this.html = this.html || document.createElement("div");
112
+  
113
+      correctFeedback = "Nice! You got it right.";
114
+      incorrectFeedback = "Oh! Not the correct answer.";
115
+  
116
+      if (this.selectedAnswer !== null) {
117
+        if (this.selectedAnswer.value.isCorrect) {
118
+          this.html.classList.add("correct");
119
+          this.html.classList.remove("incorrect");
120
+          this.questionFeedback.innerHTML = correctFeedback;
121
+        } else {
122
+          this.html.classList.add("incorrect");
123
+          this.html.classList.remove("correct");
124
+          this.questionFeedback.innerHTML = incorrectFeedback;
125
+        }
126
+      }
127
+    };
128
+  
129
+    function createAnswer(obj) {
130
+      this.value = {
131
+        text: "Answer",
132
+        isCorrect: false
133
+      };
134
+  
135
+      this.value = Object.assign(this.value, obj);
136
+  
137
+      this.html = document.createElement("button");
138
+      this.html.classList.add("answer");
139
+  
140
+      this.html.textContent = this.value.text;
141
+  
142
+      return this.html;
143
+    }
144
+  };
145
+  
146
+  //
147
+  // main.js
148
+  //
149
+  
150
+  let questionsData = [
151
+    {
152
+      text: "Channel name",
153
+      answers: [
154
+        {
155
+          text: "Pewdipie",
156
+          isCorrect: false
157
+        },
158
+        {
159
+          text: "SmfCoder",
160
+          isCorrect: true
161
+        },
162
+        {
163
+          text: "Jack",
164
+          isCorrect: false
165
+        }
166
+      ]
167
+    },
168
+    {
169
+      text: "Channel goal",
170
+      answers: [
171
+        {
172
+          text: "Help you become a better developer",
173
+          isCorrect: true
174
+        },
175
+        {
176
+          text: "Help you cook amazing cookies",
177
+          isCorrect: false
178
+        },
179
+        {
180
+          text: "Becoming an artist",
181
+          isCorrect: false
182
+        },
183
+        {
184
+          text: "Don't know",
185
+          isCorrect: false
186
+        }
187
+      ]
188
+    },
189
+    {
190
+      text: "Subscribe and ...",
191
+      answers: [
192
+        {
193
+          text: "Watch all my videos",
194
+          isCorrect: false
195
+        },
196
+        {
197
+          text: 'Comment "I subscribed"',
198
+          isCorrect: false
199
+        },
200
+        {
201
+          text: "Active the notifications",
202
+          isCorrect: true
203
+        }
204
+      ]
205
+    },
206
+    {
207
+      text: "In witch year was the first version of c++ released",
208
+      answers: [
209
+        {
210
+          text: "1982",
211
+          isCorrect: true
212
+        },
213
+        {
214
+          text: "1995",
215
+          isCorrect: false
216
+        },
217
+        {
218
+          text: "1983",
219
+          isCorrect: false
220
+        },
221
+        {
222
+          text: "1985",
223
+          isCorrect: false
224
+        }
225
+      ]
226
+    },
227
+    {
228
+      text: "What is France capital",
229
+      answers: [
230
+        {
231
+          text: "Lyon",
232
+          isCorrect: true
233
+        },
234
+        {
235
+          text: "Marseille",
236
+          isCorrect: false
237
+        },
238
+        {
239
+          text: "Paris",
240
+          isCorrect: true
241
+        },
242
+        {
243
+          text: "Lille",
244
+          isCorrect: false
245
+        }
246
+      ]
247
+    }
248
+  ];
249
+  
250
+  // variables initialization
251
+  let questions = [];
252
+  let score = 0,
253
+    answeredQuestions = 0;
254
+  let appContainer = document.getElementById("questions-container");
255
+  let scoreContainer = document.getElementById("score-container");
256
+  scoreContainer.innerHTML = `Score: ${score}/${questionsData.length}`;
257
+  
258
+  /**
259
+   * Shuffles array in place. ES6 version
260
+   * @param {Array} arr items An array containing the items.
261
+   */
262
+  function shuffle(arr) {
263
+    for (let i = arr.length - 1; i > 0; i--) {
264
+      const j = Math.floor(Math.random() * (i + 1));
265
+      [arr[i], arr[j]] = [arr[j], arr[i]];
266
+    }
267
+  }
268
+  
269
+  shuffle(questionsData);
270
+  
271
+  // creating questions
272
+  for (var i = 0; i < questionsData.length; i++) {
273
+    let question = new Question({
274
+      text: questionsData[i].text,
275
+      answers: questionsData[i].answers
276
+    });
277
+  
278
+    appContainer.appendChild(question.create());
279
+    questions.push(question);
280
+  }
281
+  
282
+  document.addEventListener("question-answered", ({ detail }) => {
283
+    if (detail.answer.isCorrect) {
284
+      score++;
285
+    }
286
+  
287
+    answeredQuestions++;
288
+    scoreContainer.innerHTML = `Score: ${score}/${questions.length}`;
289
+    detail.question.disable();
290
+  
291
+    if (answeredQuestions == questions.length) {
292
+      setTimeout(function () {
293
+        alert(`Quiz completed! \nFinal score: ${score}/${questions.length}`);
294
+      }, 100);
295
+    }
296
+  });
297
+  
298
+  console.log(questions, questionsData);
299
+  

+ 161
- 0
Hello3/style.css View File

@@ -0,0 +1,161 @@
1
+/*
2
+  lib/lib.css
3
+*/
4
+*,
5
+*::before,
6
+*::after {
7
+  box-sizing: border-box;
8
+}
9
+
10
+.question {
11
+  --correct-color: rgb(9, 187, 69);
12
+  --incorrect-color: rgb(245, 48, 48);
13
+  --selected-color: rgba(13, 110, 221, 0.712);
14
+  --disabled-color: rgb(219, 219, 219);
15
+  --disabled-correct-color: rgb(118, 212, 149);
16
+  --disabled-incorrect-color: rgb(221, 131, 131);
17
+
18
+  position: relative;
19
+  width: 500px;
20
+  height: 100%;
21
+  min-width: 500px;
22
+  min-height: max-content;
23
+  display: flex;
24
+  flex-direction: column;
25
+  padding: 1em;
26
+  border: 1px solid var(--selected-color);
27
+  border-radius: 10px;
28
+  font-family: consolas;
29
+}
30
+
31
+.question-text {
32
+  font-size: 18px;
33
+  font-weight: 600;
34
+  margin-bottom: 20px;
35
+  text-transform: capitalize;
36
+}
37
+
38
+.answers {
39
+  display: grid;
40
+  grid-template-columns: repeat(2, auto);
41
+  gap: 15px 20px;
42
+  margin-bottom: 20px;
43
+}
44
+
45
+.answer {
46
+  border: none;
47
+  font-size: 18px;
48
+  background: none;
49
+  padding: 10px 5px;
50
+  border: 1px solid rgba(13, 110, 221, 0.712);
51
+  outline: none;
52
+  border-radius: 10px;
53
+  cursor: pointer;
54
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
55
+}
56
+
57
+.question.correct {
58
+  border-color: var(--correct-color);
59
+}
60
+.question.incorrect {
61
+  border-color: var(--incorrect-color);
62
+}
63
+
64
+.question.correct .answer.selected {
65
+  --selected-color: var(--correct-color);
66
+}
67
+.question.incorrect .answer.selected {
68
+  --selected-color: var(--incorrect-color);
69
+}
70
+
71
+.answer:hover {
72
+  background: rgba(13, 110, 221, 0.712);
73
+  color: white;
74
+  transition: all 200ms ease-out;
75
+}
76
+
77
+.answer.selected {
78
+  background: var(--selected-color);
79
+  border-color: var(--selected-color);
80
+  color: white;
81
+}
82
+
83
+.question.disabled .answer,
84
+.question.disabled .answer:hover {
85
+  background-color: var(--disabled-color);
86
+  border-color: var(--disabled-color);
87
+}
88
+.question.disabled.correct .answer.selected {
89
+  background-color: var(--disabled-correct-color);
90
+  border-color: var(--disabled-correct-color);
91
+}
92
+.question.disabled.incorrect .answer.selected {
93
+  background-color: var(--disabled-incorrect-color);
94
+  border-color: var(--disabled-incorrect-color);
95
+}
96
+
97
+.question-feedback {
98
+  color: black;
99
+  font-family: consolas, Cambria, sans-serif;
100
+  font-size: 18px;
101
+  font-weight: 500;
102
+  display: none;
103
+}
104
+
105
+.question.correct .question-feedback,
106
+.question.incorrect .question-feedback {
107
+  display: inline-block;
108
+}
109
+
110
+.question.correct .question-feedback {
111
+  color: var(--correct-color);
112
+}
113
+.question.incorrect .question-feedback {
114
+  color: var(--incorrect-color);
115
+}
116
+
117
+/*
118
+  style.css
119
+*/
120
+
121
+#app-container {
122
+  position: absolute;
123
+  top: 0;
124
+  left: 0;
125
+  width: 100vw;
126
+  height: 100vh;
127
+  padding: 40px 20px;
128
+}
129
+
130
+#questions-container {
131
+  display: grid;
132
+  grid-template-columns: repeat(2, auto);
133
+  grid-template-rows: repeat(3, max-content);
134
+  justify-content: center;
135
+  align-items: center;
136
+  gap: 15px;
137
+}
138
+
139
+#score-container {
140
+  position: fixed;
141
+  right: 40px;
142
+  top: 40px;
143
+  display: flex;
144
+  justify-content: center;
145
+  align-items: center;
146
+  font-size: 18px;
147
+  font-weight: bold;
148
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
149
+  color: white;
150
+  background: rgb(13, 110, 221);
151
+  padding: 10px 15px;
152
+  min-width: 100px;
153
+  min-height: 45px;
154
+  border-radius: 10px;
155
+}
156
+
157
+#app-title {
158
+  margin-top: 0;
159
+  margin-bottom: 40px;
160
+  margin: 0 0 40px 20px;
161
+}

Loading…
Cancel
Save