keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2024-09-16 10:10:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile and Firefox issues

Browse Source
This commit is contained in:
toxinu 2021-10-09 19:52:48 +00:00
parent 0c2a47dca1
commit d575700676
2 changed files with 49 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
conjugation/drill.css
View File

@ -25,11 +25,18 @@ body, input {
#question { #question {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
margin-right: 8px;
margin-left: 8px;
font-size: 16px; font-size: 16px;
text-shadow: 2px 2px 4px var(--neutral-dark); text-shadow: 2px 2px 4px var(--neutral-dark);
text-align: center;
color: white; color: white;
} }
#questionFirstHalf {
margin-bottom: 8px;
}
#questionFirstHalf, #questionFirstHalf,
#questionSecondHalf { #questionSecondHalf {
margin-left: auto; margin-left: auto;
@ -53,21 +60,35 @@ body, input {
font-size: 1.15rem; font-size: 1.15rem;
} }
} }
/* Small devices (landscape phones, below 576px) */
/* Small devices (landscape phones, 576px and up) */ @media (max-width: 576px) {
@media (min-width: 576px) {
#question { #question {
font-size: 24px; font-size: 24px;
} }
#answer, .correct, .incorrect { #answer, .correct, .incorrect {
font-size: 24px; font-size: 28px;
} }
#responseButton { #responseButton {
font-size: 24px; font-size: 28px;
line-height: 24px; line-height: 28px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#question {
font-size: 32px;
}
#answer, .correct, .incorrect {
font-size: 32px;
}
#responseButton {
font-size: 32px;
line-height: 32px;
} }
} }

71
conjugation/drill.html
View File

@ -14,28 +14,20 @@
</head> </head>
<body> <body>
<div id="splash" class="container mt-4"> <div id="splash" class="container mt-4">
<h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2> <h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>
<div class="row"> <div class="row">
<dl class="questionOptions mx-auto mb-0"> <div class="questionOptions col-12 col-sm-8 mx-auto mb-0">
<div class="form-group"> <div class="form-group row">
<dt> <label for="numQuestions" class="col-sm-6 col-form-label">Number of Questions</label>
<label for="numQuestions" class="col-form-label mr-2">Number of Questions</label> <div class="col-sm-6">
</dt> <input class="form-control" type="number" placeholder="Questions"
<dd>
<input class="mb-2 form-control" type="number" placeholder="Questions"
aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10"> aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
</dd> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<dt> <label for="questionFocus" class="col-sm-6 col-form-label">Question Focus</label>
<label for="questionFocus" class="col-form-label mr-2">Question Focus</label> <div class="col-sm-6">
</dt>
<dd>
<select id="questionFocus" class="form-control" aria-label="Question Focus"> <select id="questionFocus" class="form-control" aria-label="Question Focus">
<option value="none">None</option> <option value="none">None</option>
<option value="politeness">Politeness</option> <option value="politeness">Politeness</option>
@ -51,16 +43,16 @@
<option value="causative">Causative</option> <option value="causative">Causative</option>
<option value="tetakei">Godan て / た form</option> <option value="tetakei">Godan て / た form</option>
</select> </select>
</dd> </div>
</div> </div>
</dl> </div>
</div> </div>
<div class="row justify-content-center mb-4 mt-4"> <div class="row justify-content-center mb-4 mt-4">
<div class="col-4"> <div class="col-6 col-sm-4">
<button class="btn btn-primary col-12" type="button" id="go">Go</button> <button class="btn btn-primary col-12" type="button" id="go">Go</button>
</div> </div>
<div class="col-4"> <div class="col-6 col-sm-4">
<button class="btn btn-secondary col-12" type="button" id="defaults">Reset</button> <button class="btn btn-secondary col-12" type="button" id="defaults">Reset</button>
</div> </div>
</div> </div>
@ -71,11 +63,9 @@
</div> </div>
</div> </div>
<div class="container options"> <div class="options">
<div class="row"> <div class="row">
<div class="col-12 col-sm-4 text-sm-center text-left">
<div class="col-4 text-center">
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Forms</h4> <h4 class="text-left mt-2 mb-4">Forms</h4>
@ -108,10 +98,8 @@
</div> </div>
<div class="col-8"> <div class="col-8">
<div class="row"> <div class="row">
<div class="col-12 col-sm-6 text-sm-center text-left">
<div class="col-md-6 text-center">
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4> <h4 class="text-left mt-2 mb-4">Verbs</h4>
@ -130,7 +118,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 text-center"> <div class="col-12 col-sm-6 text-sm-center text-left">
<div class="form-group"> <div class="form-group">
<div style="display: inline-block"> <div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Adjectives</h4> <h4 class="text-left mt-2 mb-4">Adjectives</h4>
@ -150,7 +138,7 @@
</div> </div>
<div id="politePlainError" style="display: none"> <div id="politePlainError" style="display: none">
<div class="text-center mb-2">You must select at least one of 'Plain' and 'Polite'.</div> <div class="text-center mb-2">You must select at least one of 'Plain' and 'Polite'.</div>
</div> </div>
<div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div> <div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
@ -182,9 +170,7 @@
</div> </div>
<div id="scoreSection" class="mt-4 ml-4 mr-4"> <div id="scoreSection" class="mt-4 ml-4 mr-4">
<div> <div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h1 class="text-center"> <h1 class="text-center">
@ -209,14 +195,10 @@
</div> </div>
</div> </div>
<div class="row col-12 mt-4 mx-auto"> <div class="row col-12 mt-4 mx-auto"></div>
</div>
</div> </div>
<div id="quizSection"> <div id="quizSection">
<div class="progressContainer"> <div class="progressContainer">
<div class="progressBar" style="width: 0%"> <div class="progressBar" style="width: 0%">
</div> </div>
@ -238,10 +220,7 @@
</div> </div>
<div id="proceed"> <div id="proceed">
<button id="responseButton" onclick="javascript:proceed()"></button>
<button id="responseButton" onclick="javascript:proceed()">
</button>
<div id="message"> <div id="message">
<div class="row mt-4"> <div class="row mt-4">
<div class="col-12 text-center" id="correction"></div> <div class="col-12 text-center" id="correction"></div>
@ -250,20 +229,15 @@
<button class="btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button> <button class="btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button>
</div> </div>
</div> </div>
</div> </div>
<div class="row ml-4 mr-4"> <div class="row ml-4 mr-4">
<div style="display: none" id="explanation" class="mt-4 col mx-auto"> <div style="display: none" id="explanation" class="mt-4 col mx-auto">
<h3>1. Recognise the given form</h3> <h3>1. Recognise the given form</h3>
<p><span id="explain-given"></span> is the <span id="explain-given-tags"></span> form of the <span <p><span id="explain-given"></span> is the <span id="explain-given-tags"></span> form of the <span
id="explain-group"></span> <span class="explain-given-dictionary"></span>.</p> id="explain-group"></span> <span class="explain-given-dictionary"></span>.</p>
<h3>2. Change the form</h3> <h3>2. Change the form</h3>
<div class="explain-answer-single"> <div class="explain-answer-single">
<p class="explain-no-trick">The answer is the <span class="explain-answer-tags"></span> form of the word <p class="explain-no-trick">The answer is the <span class="explain-answer-tags"></span> form of the word
because the question asked for the <span class="highlight"><span class="explain-transform"></span></span> because the question asked for the <span class="highlight"><span class="explain-transform"></span></span>
@ -283,7 +257,6 @@
</div> </div>
<h3>3. Produce the required form</h3> <h3>3. Produce the required form</h3>
<p class="explain-answer-single">The correct answer is the <p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span> <span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p> </p>
@ -299,14 +272,10 @@
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto" <button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto"
onclick="javascript:proceed()">OK, next question</button> onclick="javascript:proceed()">OK, next question</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="assets/bootstrap.min.js"></script> <script src="assets/bootstrap.min.js"></script>
</body> </body>
</html> </html>