Rearrange question & answer stuff
This commit is contained in:
Taevas
parent
ca3d8840e0
commit
d798b68848
3 changed files with 65 additions and 50 deletions
63
index.css
63
index.css
|
|
@ -3,77 +3,91 @@ body {
|
|||
background-color: #1c1f22;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#question {
|
||||
margin-top: 10vh;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#question * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#answer {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#answer > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
#character {
|
||||
font-size: 100px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
#equivalent {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 10em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#correct_answer {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 15em;
|
||||
height: 2em;
|
||||
border: 1px solid;
|
||||
margin-left: auto;
|
||||
margin-top: 0em;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#correct_answer p {
|
||||
margin: auto;
|
||||
#user_answer {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#user_answer * {
|
||||
font-size: 20px;
|
||||
font-size: 4vh;
|
||||
color: white;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
min-width: 10vw;
|
||||
height: 2em;
|
||||
line-height: 10vh;
|
||||
border: 1px solid;
|
||||
margin-left: 0.5%;
|
||||
margin-top: 1em;
|
||||
margin-right: 0.5%;
|
||||
margin-bottom: 0px;
|
||||
width: 15vh;
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
#answer_field {
|
||||
min-width: 30vw;
|
||||
width: 25vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#answer_btn, #next_btn {
|
||||
margin: 2em;
|
||||
#submit_answer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#score {
|
||||
|
|
@ -85,7 +99,6 @@ body {
|
|||
#score p {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
border: 1px solid;
|
||||
margin-top: 0px;
|
||||
|
|
@ -95,7 +108,6 @@ body {
|
|||
#allowed {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 20em;
|
||||
height: 2em;
|
||||
|
|
@ -107,7 +119,6 @@ body {
|
|||
#misc {
|
||||
font-size: 20px;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
width: 20em;
|
||||
height: 2em;
|
||||
|
|
|
|||
48
index.html
48
index.html
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>KanaLearning</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
|
|
@ -11,31 +12,34 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="container" id="main">
|
||||
<div id="question">
|
||||
<p id="character"></p>
|
||||
<p id="equivalent"></p>
|
||||
<div class="row" style="margin-top: 25px;">
|
||||
<div class="col" id="question">
|
||||
<p id="character"></p>
|
||||
<p id="equivalent"></p>
|
||||
</div>
|
||||
<div class="col" id="answer">
|
||||
<div id="user_answer">
|
||||
<p style="color: green" id="positive">0</p>
|
||||
<input type="text" class="form-control form-control-sm" id="answer_field" placeholder="type..." autofocus="autofocus">
|
||||
<p style="color: red" id="negative">0</p>
|
||||
</div>
|
||||
<div class="row" id="submit_answer">
|
||||
<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 class="row" id="correct_answer" style="display: none;">
|
||||
<p id="answer_paragraph">Answer was</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="correct_answer" style="display: none;">
|
||||
<p id="answer_paragraph">Answer was</p>
|
||||
<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 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">
|
||||
<p class="col" style="color: red" id="negative">0</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 class="row" id="submit_answer">
|
||||
<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">
|
||||
<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 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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
4
index.js
4
index.js
|
|
@ -126,8 +126,8 @@ function checkAnswer() {
|
|||
|
||||
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.css("opacity", "0")
|
||||
element.animate({"opacity": "1"}, 200)
|
||||
element.html(Number(element.html()) + 1)
|
||||
|
||||
$("#correct_answer").css("visibility", "visible")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue