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

Update jQuery & Bootstrap

Browse source
This commit is contained in:
Taevas 2023-03-04 16:02:54 +01:00
parent 634a63dcf4
commit 22dffb7755
7 changed files with 24 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

7
bootstrap.bundle.min.js vendored
View file

File diff suppressed because one or more lines are too long

1
bootstrap.bundle.min.js.map
View file

File diff suppressed because one or more lines are too long

7
bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
bootstrap.min.css.map
View file

File diff suppressed because one or more lines are too long

16
index.html
View file

@ -3,29 +3,29 @@
<head>
<title>KanaLearning</title>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
<script type="text/javascript" src="./bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./index.css">
<script type="text/javascript" src="./index.js"></script>
</head>
<body onload="changeQuestion()">
<body>
<div class="container" id="main">
<div id="question">
<p id="character"></p>
<p id="equivalent"></p>
</div>
<div class="row" id="correct_answer">
<div class="row" id="correct_answer" style="display: none;">
<p>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()" oninput="checkCharacters()">
<input type="text" class="col form-control form-control-sm" id="answer_field" placeholder="your answer" autofocus="autofocus" onfocus="this.select()">
<p class="col" style="color: red" id="negative">0</p>
</div>
<div class="row" id="submit_answer">
<button onclick="checkAnswer()" class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
<button onclick="changeQuestion()" class="col btn btn-lg btn-outline-info" id="next_btn">next</button>
<button class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
<button class="col btn btn-lg btn-outline-info" id="next_btn">next</button>
</div>
</div>
<div class="container" id="allowed">

36
index.js
View file

@ -3,6 +3,11 @@ $(function() {
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()
})
changeQuestion()
$("#answer_field").on("input", ":text", checkCharacters)
$("#answer_btn").click(checkAnswer)
$("#next_btn").click(changeQuestion)
})
function changeQuestion() {
@ -20,7 +25,7 @@ function changeQuestion() {
changeBackground(questionShape[0], document.getElementById("equivalent"))
document.getElementById("correct_answer").style.visibility = "hidden"
$("#correct_answer").slideUp(10)
$("#correct_answer").slideUp(100)
$.getJSON("characters.json", function(data) {
const characters = data.items[Math.floor(Math.random() * data.items.length)]
@ -116,19 +121,15 @@ function checkCharacters() {
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"
}
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_p = document.getElementById("correct_answer").getElementsByTagName('p')[0]
let positive = document.getElementById("positive")
let negative = document.getElementById("negative")
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"
@ -136,18 +137,13 @@ function checkAnswer() {
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)
positive.innerHTML = Number(positive.innerHTML) + 1
} else {
negative.style.fontSize = "25px"
$("#negative").animate({"fontSize": "20px"}, 250)
negative.innerHTML = Number(negative.innerHTML) + 1
}
let element = answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.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").slideDown(100)
if (document.getElementById('auto').checked) {changeQuestion()}
}

2
jquery-3.5.1.min.js vendored
View file

File diff suppressed because one or more lines are too long