-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
189 lines (167 loc) · 7.91 KB
/
app.js
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/*--------------------------------------
SCRIPT CREATED BY CAIKE LAURENTINO
CAIKELAURENTINO.COM.BR
--------------------------------------- */
class ConsonantClassification {
constructor(symbol, place, manner, voicing) {
this.symbol = symbol
this.place = place
this.manner = manner
this.voicing = voicing
}
}
let consonants = Array()
consonants.push(new ConsonantClassification('m', 'bilabial', 'nasal', 'voiced'))
consonants.push(new ConsonantClassification('p', 'bilabial', 'plosive', 'voiceless'))
consonants.push(new ConsonantClassification('b', 'bilabial', 'plosive', 'voiced'))
consonants.push(new ConsonantClassification('f', 'labio-dental', 'fricative', 'voiceless'))
consonants.push(new ConsonantClassification('v', 'labio-dental', 'fricative', 'voiced'))
consonants.push(new ConsonantClassification('θ', 'dental', 'fricative', 'voiceless'))
consonants.push(new ConsonantClassification('ð', 'dental', 'fricative', 'voiced'))
consonants.push(new ConsonantClassification('n', 'alveolar', 'nasal', 'voiced'))
consonants.push(new ConsonantClassification('t', 'alveolar', 'plosive', 'voiceless'))
consonants.push(new ConsonantClassification('d', 'alveolar', 'plosive', 'voiced'))
consonants.push(new ConsonantClassification('s', 'alveolar', 'fricative', 'voiceless'))
consonants.push(new ConsonantClassification('z', 'alveolar', 'fricative', 'voiced'))
consonants.push(new ConsonantClassification('l', 'alveolar', 'approximant', 'voiced'))
consonants.push(new ConsonantClassification('tʃ', 'post-alveolar', 'plosive', 'voiceless'))
consonants.push(new ConsonantClassification('dʒ', 'post-alveolar', 'plosive', 'voiced'))
consonants.push(new ConsonantClassification('ʃ', 'post-alveolar', 'fricative', 'voiceless'))
consonants.push(new ConsonantClassification('ʒ', 'post-alveolar', 'fricative', 'voiced'))
consonants.push(new ConsonantClassification('r', 'post-alveolar', 'approximant', 'voiced'))
consonants.push(new ConsonantClassification('j', 'palatal', 'approximant', 'voiced'))
consonants.push(new ConsonantClassification('ŋ', 'velar', 'nasal', 'voiced'))
consonants.push(new ConsonantClassification('k', 'velar', 'plosive', 'voiceless'))
consonants.push(new ConsonantClassification('g', 'velar', 'plosive', 'voiced'))
consonants.push(new ConsonantClassification('x', 'velar', 'fricative', 'voiceless'))
consonants.push(new ConsonantClassification('w', 'velar', 'approximant', 'voiced'))
consonants.push(new ConsonantClassification('h', 'glottal', 'fricative', 'voiceless'))
//redireciona url
function redirectToPlace() {
window.location.replace("/place.html?place")
}
function redirectToManner() {
window.location.replace("/manner.html?manner")
}
function redirectToVoicing() {
window.location.replace("/voicing.html?voicing")
}
function redirectToAll() {
window.location.replace("/all.html?all")
}
var mode = window.location.search
mode = mode.replace('?', '')
// limpa o campo de dialogo
function clearAnswer() {
document.getElementById('answer').innerHTML = ``
}
// gerando uma index aleatoria para que então seja selecionada uma consotante
var randomConsonant = ''
var generateConsonant = function () {
randomConsonant = (consonants[(Math.floor(Math.random() * 25))])
console.log(randomConsonant)
// coloca a consoante no span
if (mode === 'place') {
document.getElementById('symbol').innerHTML = `<div id="symbol-voicing" class="question">[${randomConsonant.symbol}]</div>`
clearAnswer()
document.getElementById(mode).value = ''
} else if (mode === 'voicing') {
document.getElementById('symbol').innerHTML = `<div id="symbol-voicing" class="question">[${randomConsonant.symbol}]</div>`
document.getElementById('voicing-btn').innerHTML = `<button class="button-voicing" id="voiced" onclick="isVoiced()">Voiced</button> <button class="button-voicing" id="voiceless" onclick="isVoiceless()">Voiceless</button>`
} else if (mode === 'manner') {
document.getElementById('symbol').innerHTML = `<div id="symbol-voicing" class="question">[${randomConsonant.symbol}]</div>`
clearAnswer()
document.getElementById(mode).value = ''
} else {
document.getElementById('symbol').innerHTML = `<div id="symbol-voicing" class="question">[${randomConsonant.symbol}]</div>`
document.getElementById('all-opt').innerHTML =
`
<span id="answer"></span><br />
<select class="option" id="voicing">
<option value="">Select its voicing</option>
<option value="voiced">Voiced</option>
<option value="voiceless">Voiceless</option>
</select>
<select class="option" id="place">
<option value="">Select its place</option>
<option value="alveolar">Alveolar</option>
<option value="bilabial">Bilabial</option>
<option value="dental">Dental</option>
<option value="glottal">Glottal</option>
<option value="labio-dental">Labio-dental</option>
<option value="post-alveolar">Post-alveolar</option>
<option value="palatal">Palatal</option>
<option value="velar">Velar</option>
</select>
<select class="option" id="manner">
<option value="">Select its manner</option>
<option value="approximant">Approximant</option>
<option value="fricative">Fricative</option>
<option value="nasal">Nasal</option>
<option value="plosive">Plosive</option>
</select>
`
document.getElementById('btn-chk').innerHTML = `<button id="checkQuestion" class="next-button" onclick="verifyOptionAll()">Check</button>`
document.getElementById('generateConsonant').innerText = 'Next'
clearAnswer()
}
}
var placeValue = document.getElementById(mode)
//pega opção escolhida pelo usuario
if (mode === 'place') {
function verifyOption() {
//PLACE OF ARTICULATION
if (placeValue.value === randomConsonant.place) {
document.getElementById('symbol-voicing').style.background = '#01A787'
} else if (randomConsonant.place === undefined) {
document.getElementById('answer').innerText = `Please, select a consonant first.`
} else if (placeValue.value === '') {
document.getElementById('answer').innerText = `Please, select an answer first.`
} else {
document.getElementById('symbol-voicing').style.background = '#FC6057'
}
}
} else if (mode === 'manner') {
function verifyOption() {
//MANNER OF ARTIULATION
if (placeValue.value === randomConsonant.manner) {
document.getElementById('symbol-voicing').style.background = '#01A787'
} else if (randomConsonant.manner === undefined) {
document.getElementById('answer').innerText = `Please, select a consonant first.`
} else if (placeValue.value === '') {
document.getElementById('answer').innerText = `Please, select an answer first.`
} else {
document.getElementById('symbol-voicing').style.background = '#FC6057'
}
}
} else if (mode === 'voicing') {
//VOICING
function isVoiced() {
if (randomConsonant.voicing === 'voiced') {
document.getElementById('voiced').style.background = '#01A787'
} else {
document.getElementById('voiced').style.background = '#FC6057'
}
}
function isVoiceless() {
if (randomConsonant.voicing === 'voiceless') {
document.getElementById('voiceless').style.background = '#01A787'
} else {
document.getElementById('voiceless').style.background = '#FC6057'
}
}
} else if (mode === 'all') {
//ALL
function verifyOptionAll() {
var voicingValue = document.getElementById('voicing').value
var mannerValue = document.getElementById('manner').value
var placeValue = document.getElementById('place').value
if (voicingValue == randomConsonant.voicing && mannerValue == randomConsonant.manner && placeValue == randomConsonant.place) {
document.getElementById('answer').innerText = 'Correct!'
document.getElementById('symbol-voicing').style.background = '#01A787'
} else {
document.getElementById('answer').innerText = 'Wrong! :C'
document.getElementById('symbol-voicing', 'answer').style.background = '#FC6057'
}
}
}