Taevas/kanaguessr
Taevas/kanaguessr
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add alphabet check

Browse source 
This should help people with using the right alphabet at the right time
This commit is contained in:
Taevas 2021-02-19 20:14:28 +01:00
parent 7c9b9af71a
commit 9d625689b7
2 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -20,7 +20,7 @@
</div>
<div class="row" id="user_answer">
<p class="col" style="color: green" id="positive">0</p>
<input type="text" class="col form-control form-control-sm" id="answer_field" placeholder="your answer" autofocus="autofocus" onfocus="this.select()">
<input type="text" class="col form-control form-control-sm" id="answer_field" placeholder="your answer" autofocus="autofocus" onfocus="this.select()" oninput="checkCharacters()">
<p class="col" style="color: red" id="negative">0</p>
</div>
<div class="row" id="submit_answer">

26
index.js
View file

@ -108,12 +108,36 @@ function shapeQuestion(allow) {
return [element_one, element_two]
}
function checkAnswer() { // Japanese characters are /[\u3040-\u30ff]/ make it so people DON'T try to answer with the wrong alphabet
function checkCharacters() {
let answer_field = document.getElementById("answer_field")
let equivalent = document.getElementById("equivalent")
const REGEX_JAPANESE = /[\u3040-\u30ff]/
const REGEX_OTHER = /[^\u3040-\u30ff]/
if (!answer_field.value) {
answer_field.style.backgroundColor = "black"
return
}
if (equivalent.innerHTML == "romaji") {
answer_field.value.match(REGEX_JAPANESE) ? answer_field.style.backgroundColor = "red" : answer_field.style.backgroundColor = "black"
} else {
answer_field.value.match(REGEX_OTHER) ? answer_field.style.backgroundColor = "red" : answer_field.style.backgroundColor = "black"
}
}
function checkAnswer() {
let answer_field = document.getElementById("answer_field")
let correct_answer_p = document.getElementById("correct_answer").getElementsByTagName('p')[0]
let positive = document.getElementById("positive")
let negative = document.getElementById("negative")
if (answer_field.style.backgroundColor == "red") {
document.getElementById("equivalent").style.fontSize = "23px"
$("#equivalent").animate({"fontSize": "20px"}, 500)
return
}
if (answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1)) {
positive.style.fontSize = "25px"
$("#positive").animate({"fontSize": "20px"}, 250)