"Responsive" update
Fix README.md GitHub Pages link Changed website design & animations Added Bootstrap 4
This commit is contained in:
Taevas
parent
674fffe3b3
commit
4e20f30dfc
8 changed files with 86 additions and 67 deletions
|
|
@ -4,4 +4,4 @@ KanaLearning is a webpage created to help people learn [Hiragana](https://en.wik
|
|||
|
||||
It may also be used to test out your way to [type in Japanese](https://www.coscom.co.jp/learnjapanese801/msime_win10_en1.html), by constantly switching through three different alphabets; Hiragana, Katakana & Romaji.
|
||||
|
||||
KanaLearning is currently available on [GitHub Pages](https://github.com/TTTaevas/KanaLearning).
|
||||
KanaLearning is currently available on [GitHub Pages](https://tttaevas.github.io/KanaLearning/).
|
||||
7
bootstrap.bundle.min.js
vendored
Normal file
7
bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
bootstrap.bundle.min.js.map
Normal file
1
bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
7
bootstrap.min.css
vendored
Normal file
7
bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
bootstrap.min.css.map
Normal file
1
bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
74
index.css
74
index.css
|
|
@ -5,17 +5,8 @@ body {
|
|||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: green;
|
||||
border: 1px solid grey;
|
||||
color: black;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#question {
|
||||
width: 100%;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#character {
|
||||
|
|
@ -28,7 +19,7 @@ button {
|
|||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
#equivalent {
|
||||
|
|
@ -41,10 +32,10 @@ button {
|
|||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#user_answer {
|
||||
#correct_answer {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
|
|
@ -53,25 +44,34 @@ button {
|
|||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-top: 2em;
|
||||
margin-top: 0em;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#correct_answer {
|
||||
#correct_answer p {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#user_answer * {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 0em;
|
||||
line-height: 2em;
|
||||
width: 15em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-top: 2em;
|
||||
margin-top: 0em;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#answer_btn, #next_btn {
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
#score {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
|
@ -83,8 +83,6 @@ button {
|
|||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 15em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -101,27 +99,25 @@ button {
|
|||
}
|
||||
|
||||
#allowed {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
font-size: 20px;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
border: 1px solid black;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#misc {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
border: 1px solid white;
|
||||
overflow: initial;
|
||||
line-height: 2em;
|
||||
width: 20em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
form * {
|
||||
margin: 3px;
|
||||
}
|
||||
#misc {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 20em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
|
|||
47
index.html
47
index.html
|
|
@ -3,34 +3,39 @@
|
|||
<head>
|
||||
<title>KanaLearning</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<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>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<script type="text/javascript" src="./index.js"></script>
|
||||
</head>
|
||||
<body onload="changeQuestion()">
|
||||
<div id="question">
|
||||
<p id="character"></p>
|
||||
<p id="equivalent"></p>
|
||||
<div class="container" id="main">
|
||||
<div id="question">
|
||||
<p id="character"></p>
|
||||
<p id="equivalent"></p>
|
||||
</div>
|
||||
<div class="row" id="correct_answer">
|
||||
<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()">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user_answer">
|
||||
<input type="text" id="answer_field" autofocus="autofocus" onfocus="this.select()">
|
||||
<button onclick="checkAnswer()" id="answer_btn">answer</button>
|
||||
<button onclick="changeQuestion()" id="next_btn">next</button>
|
||||
<div class="container" id="allowed">
|
||||
<div class="form-check-inline"><label for="h" class="form-check-label" style="color: red"><input type="checkbox" class="form-check-input" id="h" checked>hiragana</label></div>
|
||||
<div class="form-check-inline"><label for="k" class="form-check-label" style="color: green"><input type="checkbox" class="form-check-input" id="k" checked=>katakana</label></div>
|
||||
<div class="form-check-inline"><label for="r" class="form-check-label" style="color: blue"><input type="checkbox" class="form-check-input" id="r" checked>romaji</label></div>
|
||||
</div>
|
||||
<div id="correct_answer" style="visibility: hidden;">
|
||||
<p>Answer was</p>
|
||||
<div class="container" id="misc">
|
||||
<div class="form-check-inline"><label for="auto" class="form-check-label" style="color: white"><input type="checkbox" class="form-check-input" id="auto">automatically go to next after answer</label></div>
|
||||
</div>
|
||||
<div id="score">
|
||||
<p style="color: green" id="positive">0</p>
|
||||
<p style="color: red" id="negative">0</p>
|
||||
</div>
|
||||
<form id="allowed">
|
||||
<section><input type="checkbox" id="h" checked="true"> <label for="h" style="color: red">hiragana</label></section>
|
||||
<section><input type="checkbox" id="k" checked="true"> <label for="k" style="color: green">katakana</label></section>
|
||||
<section><input type="checkbox" id="r" checked="true"> <label for="r" style="color: blue">romaji</label></section>
|
||||
</form>
|
||||
<form id="misc">
|
||||
<input type="checkbox" id="auto"> <label for="auto" style="color: white">automatically go to next after answer</label>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
14
index.js
14
index.js
|
|
@ -14,8 +14,8 @@ function changeQuestion() {
|
|||
let p_two = document.getElementById("equivalent")
|
||||
let a = document.getElementById("correct_answer")
|
||||
|
||||
//p_one.style.fontSize = "102px"
|
||||
//$("#character").animate({fontSize: "100px"}, 100)
|
||||
//p_one.style.fontSize = "110px"
|
||||
//$("#character").animate({fontSize: "100px"}, 150)
|
||||
|
||||
let questionShape = shapeQuestion([document.getElementById('h').checked, document.getElementById('k').checked, document.getElementById('r').checked])
|
||||
if (!questionShape) {return false} // No question can be found if two boxes are left unchecked
|
||||
|
|
@ -24,6 +24,7 @@ function changeQuestion() {
|
|||
changeBackground(questionShape[0], p_two)
|
||||
|
||||
a.style.visibility = "hidden"
|
||||
$("#correct_answer").slideUp(10, function(){console.log("test")})
|
||||
|
||||
$.getJSON("characters.json", function(data) {
|
||||
const characters = data.items[Math.floor(Math.random() * data.items.length)]
|
||||
|
|
@ -117,16 +118,17 @@ function checkAnswer() { // Japanese characters are /[\u3040-\u30ff]/ make it so
|
|||
let negative = document.getElementById("negative")
|
||||
|
||||
if (answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1)) {
|
||||
positive.style.fontSize = "22px"
|
||||
$("#positive").animate({"fontSize": "20px"}, 300)
|
||||
positive.style.fontSize = "25px"
|
||||
$("#positive").animate({"fontSize": "20px"}, 250)
|
||||
positive.innerHTML = Number(positive.innerHTML) + 1
|
||||
} else {
|
||||
negative.style.fontSize = "22px"
|
||||
$("#negative").animate({"fontSize": "20px"}, 300)
|
||||
negative.style.fontSize = "25px"
|
||||
$("#negative").animate({"fontSize": "20px"}, 250)
|
||||
negative.innerHTML = Number(negative.innerHTML) + 1
|
||||
}
|
||||
|
||||
correct_answer.style.visibility = "visible"
|
||||
$("#correct_answer").slideDown(100, function(){console.log("test")})
|
||||
|
||||
if (document.getElementById('auto').checked) {changeQuestion()}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue