-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
93 lines (84 loc) · 4.37 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Pairs</title>
<meta name="apple-mobile-web-app-status-bar" content="#3e3e3e" />
<meta name="theme-color" content="black" />
<link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="images/favicon.svg" type="image/svg+xml" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="data_voices.js"></script>
<script type="text/javascript" src="data_words.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script defer data-domain="lobau.io/pairs" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<div id="app">
<div v-if="idx < count && hasStarted">
<h1>{{idx + 1}} / {{count}}</h1>
<label class="answerButton" :class="{'answer_correct' : index == questions[idx]['correctAnswer'] && selectedAnswer != ''}, {'answer_wrong' : selectedAnswer == index && selectedAnswer != ''}, {'answer_play' : talkIndex == index && isReadingAnswers && selectedAnswer != ''}"
v-for="(answer, index) in questions[idx].answers" :key="index" :for="index">
<input :id="index" type="radio" class="hidden" :value="index" @change="answered($event)"
:disabled="selectedAnswer != ''" />
{{answer['word']}}
<small v-if="index == questions[idx]['correctAnswer'] && selectedAnswer != ''"><svg width="12" height="12"
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M1,5L5,9L11,2" fill="none" stroke="var(--color-correct)" stroke-width="2" stroke-linecap="round" />
</svg> Correct answer</small>
<small v-else-if="selectedAnswer == index && selectedAnswer != ''"><svg width="12" height="12"
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M2,2L10,10M2,10L10,2" fill="none" stroke="var(--color-incorrect)" stroke-width="2"
stroke-linecap="round" />
</svg> Incorrect!</small>
<small v-else>\'{{answer['phonetic']}}\</small>
</label>
<button class="cta" @click="speakCurrentQuestion()">
Replay audio
</button>
</div>
<div v-else-if="hasStarted">
<h1 v-if="correctAnswers >= count / 2">Well done!</h1>
<h1 v-else>Well…</h1>
<section>
<table class="resultTable">
<thead>
<th>Session</th>
<th>Correct</th>
<th>Incorrect</th>
</thead>
<tr v-for="object in history.slice().reverse()" :class="{'answer_correct' : currentSession == object['session']}">
<td>{{formatDate(object["session"])}}</td>
<td>{{object["correctAnswers"]}}</td>
<td>{{object["wrongAnswers"]}}</td>
</tr>
</table>
<button class="cta" @click="resetQuiz">New session</button>
<button class="cta" @click="clearHistory">Clear History</button>
</section>
<section>
<p>
You can learn more about the research behind this project, along with the source code, on <a href="https://github.com/lobau/pairs" target="_blank">Github</a>.
</p>
</section>
</div>
<div v-else>
<h1><img src="images/favicon.svg" width="20" height="20" alt="logo" /> {{name}}</h1>
<p>
{{name}} is an ear training app. No vocabulary, no lessons, just hearing reinforcement.
</p>
<div>
<button class="cta" @click="startQuizz">Start playing</button>
</div>
<section>
<p>
You can learn more about the research behind this project, along with the source code, on <a href="https://github.com/lobau/pairs" target="_blank">Github</a>.
</p>
</section>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>