Convert as much as possible to jQuery
This commit is contained in:
Taevas
parent
22dffb7755
commit
deeb4f1d67
2 changed files with 33 additions and 46 deletions
|
|
@ -16,11 +16,11 @@
|
|||
<p id="equivalent"></p>
|
||||
</div>
|
||||
<div class="row" id="correct_answer" style="display: none;">
|
||||
<p>Answer was</p>
|
||||
<p id="answer_paragraph">Answer was</p>
|
||||
</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">
|
||||
<p class="col" style="color: red" id="negative">0</p>
|
||||
</div>
|
||||
<div class="row" id="submit_answer">
|
||||
|
|
|
|||
75
index.js
75
index.js
|
|
@ -1,30 +1,31 @@
|
|||
$(function() {
|
||||
document.querySelector("#answer_field").addEventListener("keyup", event => {
|
||||
$("#answer_field").on("keyup", event => {
|
||||
if (event.key !== "Enter") {return} // The only key we care about is Enter
|
||||
document.getElementById("correct_answer").style.visibility == "visible" ? document.querySelector("#next_btn").click() : document.querySelector("#answer_btn").click()
|
||||
$("#correct_answer").css("visibility") === "visible" ? $("#next_btn").trigger("click") : $("#answer_btn").trigger("click")
|
||||
})
|
||||
|
||||
changeQuestion()
|
||||
$("#answer_field").on("input", ":text", checkCharacters)
|
||||
$("#answer_field").on("focus", () => {$("#answer_field").select()})
|
||||
$("#answer_btn").click(checkAnswer)
|
||||
$("#next_btn").click(changeQuestion)
|
||||
})
|
||||
|
||||
function changeQuestion() {
|
||||
document.getElementById("answer_field").value = "" // Empty field so user doesn't have to do it
|
||||
document.getElementById("answer_field").focus() // Focus on field so user doesn't have to do it
|
||||
$("#answer_field").val("") // Empty field so user doesn't have to do it
|
||||
$("#answer_field").focus() // Focus on field so user doesn't have to do it
|
||||
|
||||
let questionShape = shapeQuestion([document.getElementById('h').checked, document.getElementById('k').checked, document.getElementById('r').checked])
|
||||
let questionShape = shapeQuestion([$("#h:checked").length, $("#k:checked").length, $("#r:checked").length])
|
||||
if (!questionShape) { // No question can be found if two boxes are left unchecked
|
||||
document.getElementById("allowed").style.fontSize = "30px"
|
||||
$("#allowed").css("fontSize", "30px")
|
||||
$("#allowed").animate({"fontSize": "20px"}, 800)
|
||||
return
|
||||
}
|
||||
|
||||
changeBackground(questionShape[1], document.getElementById("character"))
|
||||
changeBackground(questionShape[0], document.getElementById("equivalent"))
|
||||
changeBackground(questionShape[1], $("#character"))
|
||||
changeBackground(questionShape[0], $("#equivalent"))
|
||||
|
||||
document.getElementById("correct_answer").style.visibility = "hidden"
|
||||
$("#correct_answer").css("visibility", "hidden")
|
||||
$("#correct_answer").slideUp(100)
|
||||
|
||||
$.getJSON("characters.json", function(data) {
|
||||
|
|
@ -64,32 +65,25 @@ function changeQuestion() {
|
|||
char_in_box = "???"
|
||||
}
|
||||
|
||||
document.getElementById("equivalent").innerHTML = equivalent_of_char
|
||||
document.getElementById("character").innerHTML = char_in_box
|
||||
document.getElementById("correct_answer").getElementsByTagName('p')[0].innerHTML = `the answer was ${answer}`
|
||||
$("#equivalent").html(equivalent_of_char)
|
||||
$("#character").html(char_in_box)
|
||||
$("#answer_paragraph").html(`the answer was ${answer}`)
|
||||
})
|
||||
}
|
||||
|
||||
function changeBackground(char, para) {
|
||||
switch (char) {
|
||||
case "h":
|
||||
para.style.backgroundColor = "red"
|
||||
break;
|
||||
case "k":
|
||||
para.style.backgroundColor = "green"
|
||||
break;
|
||||
case "r":
|
||||
para.style.backgroundColor = "blue"
|
||||
break;
|
||||
default:
|
||||
para.style.backgroundColor = "black"
|
||||
}
|
||||
let colour = "black"
|
||||
if (char === "h") {colour = "red"}
|
||||
else if (char === "k") {colour = "green"}
|
||||
else if (char === "r") {colour = "blue"}
|
||||
|
||||
para.css("backgroundColor", colour)
|
||||
}
|
||||
|
||||
function shapeQuestion(allow) {
|
||||
if (allow.filter(Boolean).length < 2) {return false} // No question can be found if two boxes are left unchecked
|
||||
|
||||
let possibilities = ['h', 'k', 'r']
|
||||
let possibilities = ["h", "k", "r"]
|
||||
var element_one
|
||||
var element_two
|
||||
|
||||
|
|
@ -112,38 +106,31 @@ function shapeQuestion(allow) {
|
|||
}
|
||||
|
||||
function checkCharacters() {
|
||||
let answer_field = document.getElementById("answer_field")
|
||||
let equivalent = document.getElementById("equivalent")
|
||||
const REGEX_JAPANESE = /[\u3040-\u30ff]/
|
||||
const REGEX_OTHER = /[^\u3040-\u30ff]/
|
||||
let regex = $("#equivalent").html() === "romaji" ? REGEX_JAPANESE : REGEX_OTHER
|
||||
|
||||
if (!answer_field.value) {
|
||||
answer_field.style.backgroundColor = "black"
|
||||
return
|
||||
if (!$("#answer_field").val() || !$("#answer_field").val().match(regex)) {
|
||||
$("#answer_field").css("backgroundColor", "black")
|
||||
} else {
|
||||
$("#answer_field").css("backgroundColor", "red")
|
||||
}
|
||||
|
||||
let regex = equivalent.innerHTML === "romaji" ? REGEX_JAPANESE : REGEX_OTHER
|
||||
answer_field.value.match(regex) ? answer_field.style.backgroundColor = "red" : answer_field.style.backgroundColor = "black"
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
let answer_field = document.getElementById("answer_field")
|
||||
let correct_answer = document.getElementById("correct_answer")
|
||||
let correct_answer_p = correct_answer.getElementsByTagName('p')[0]
|
||||
|
||||
if (answer_field.style.backgroundColor == "red") {
|
||||
document.getElementById("equivalent").style.fontSize = "23px"
|
||||
if ($("#answer_field.style").css("backgroundColor") === "red") {
|
||||
$("equivalent").css("fontSize", "23px")
|
||||
$("#equivalent").animate({"fontSize": "20px"}, 500)
|
||||
return
|
||||
}
|
||||
|
||||
let element = answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1) ?
|
||||
$("#positive") : $("#negative")
|
||||
let html = $("#answer_paragraph").html()
|
||||
let element = $("#answer_field").val().toLowerCase() === html.slice(html.lastIndexOf(" ") + 1) ? $("#positive") : $("#negative")
|
||||
element.css("fontSize", "24px")
|
||||
element.animate({fontSize: "20px"}, 250)
|
||||
element.html(Number(element.html()) + 1)
|
||||
|
||||
correct_answer.style.visibility = "visible"
|
||||
$("#correct_answer").css("visibility", "visible")
|
||||
$("#correct_answer").slideDown(100)
|
||||
if (document.getElementById('auto').checked) {changeQuestion()}
|
||||
if ($("#auto:checked").length){changeQuestion()}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue