-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-excerise.html
101 lines (95 loc) · 2.85 KB
/
1-excerise.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excersise 1</title>
<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">
<style type="text/css">
body {
font-family: monospace;
padding: 20px;
font-size: 2em;
}
.can {
color: green;
}
.cant {
color: red;
}
</style>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div id="app">
<div>
<!-- What needs to happen here? -->
{{areWeDone ? 'Your score: ' + score : 'Next question'}}
</div>
<div>
<!-- The question goes here -->
{{question}}
</div>
<div>
<!-- Connect the input? -->
<input v-model="answer" />
</div>
</div>
<script>
const { createApp, ref, computed } = Vue;
const App = {
setup() {
const questions = [
'How much is 2+2',
'How much is 3*5+1',
'What is the rest from 3/1'
];
const answers = [
'4',
'16',
'1'
];
const score = ref(0);
const current = ref(0);
const answer = ref(null);
const question = computed(
() => questions[current.value]
);
const rightAnswer = computed(
() => answers[current.value]
);
const areWeDone = computed(
() => questions.length === current.value
);
// This function does the actual check
// 1) Is the currently entered answer the expected one?
// 2) What needs to be happen with current question number?
// 3) What about the score, if the answer was right?
// 4) Remember, v-model uses two-way binding, what can you do here with the answer reactive property?
// 5) Should we check if the question was the last one? What needs to happen then?
const check = () => {
console.log('Check!');
// Checking if the answer is correct here?
if (answer.value === rightAnswer.value) {
score.value++;
}
answer.value = null; // What should happen with the currently entered answer?
current.value++; // What about current question?
// Should we check for something else, is this a last question maybe?
if (areWeDone.value) {
// What needs to happen here if that's the last question?
clearInterval(interval);
}
}
// Starting the interval
const interval = setInterval(check, 4000);
// What needs to be returned here? Remember, what needs to happen for the template to use a reactive or computed property?
return {
question, answer, areWeDone, score
}
},
};
createApp(App).mount('#app');
</script>
</body>
</html>