Skip to content

Use self-hosted static files also fix mobile and Firefox issues #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
toxinu wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Use self-hosted static files also fix mobile and Firefox issues #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3d0ffa
Use self hosted static files
toxinu Oct 9, 2021
8226107
Fix mobile and Firefox issues
toxinu Oct 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions conjugation/assets/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions conjugation/assets/bootstrap.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions conjugation/assets/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 25 additions & 4 deletions conjugation/drill.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,18 @@ body, input {
#question {
padding-top: 40px;
padding-bottom: 40px;
margin-right: 8px;
margin-left: 8px;
font-size: 16px;
text-shadow: 2px 2px 4px var(--neutral-dark);
text-align: center;
color: white;
}

#questionFirstHalf {
margin-bottom: 8px;
}

#questionFirstHalf,
#questionSecondHalf {
margin-left: auto;
Expand All @@ -53,21 +60,35 @@ body, input {
font-size: 1.15rem;
}
}
/* Small devices (landscape phones, below 576px) */
@media (max-width: 576px) {
#question {
font-size: 24px;
}

#answer, .correct, .incorrect {
font-size: 28px;
}

#responseButton {
font-size: 28px;
line-height: 28px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

#question {
font-size: 24px;
font-size: 32px;
}

#answer, .correct, .incorrect {
font-size: 24px;
font-size: 32px;
}

#responseButton {
font-size: 24px;
line-height: 24px;
font-size: 32px;
line-height: 32px;
}
}

Expand Down
83 changes: 24 additions & 59 deletions conjugation/drill.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,30 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" href="drill.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<script type="text/ecmascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="assets/jquery.min.js"></script>
<script type="text/ecmascript" src="rules.js"></script>
<script type="text/ecmascript" src="drill.js"></script>
<title>Don's Japanese Conjugation Drill</title>
</head>

<body>


<div id="splash" class="container mt-4">

<h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>

<div class="row">
<dl class="questionOptions mx-auto mb-0">
<div class="form-group">
<dt>
<label for="numQuestions" class="col-form-label mr-2">Number of Questions</label>
</dt>
<dd>
<input class="mb-2 form-control" type="number" placeholder="Questions"
<div class="questionOptions col-12 col-sm-8 mx-auto mb-0">
<div class="form-group row">
<label for="numQuestions" class="col-sm-6 col-form-label">Number of Questions</label>
<div class="col-sm-6">
<input class="form-control" type="number" placeholder="Questions"
aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
</dd>
</div>
</div>
<div class="form-group">
<dt>
<label for="questionFocus" class="col-form-label mr-2">Question Focus</label>
</dt>
<dd>
<div class="form-group row">
<label for="questionFocus" class="col-sm-6 col-form-label">Question Focus</label>
<div class="col-sm-6">
<select id="questionFocus" class="form-control" aria-label="Question Focus">
<option value="none">None</option>
<option value="politeness">Politeness</option>
Expand All @@ -52,16 +43,16 @@ <h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>
<option value="causative">Causative</option>
<option value="tetakei">Godan て / た form</option>
</select>
</dd>
</div>
</div>
</dl>
</div>
</div>

<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>
</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>
</div>
</div>
Expand All @@ -72,11 +63,9 @@ <h2 class="text-center mb-4">Don's Japanese Conjugation Drill</h2>
</div>
</div>

<div class="container options">

<div class="options">
<div class="row">

<div class="col-4 text-center">
<div class="col-12 col-sm-4 text-sm-center text-left">
<div class="form-group">
<div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Forms</h4>
Expand Down Expand Up @@ -109,10 +98,8 @@ <h4 class="text-left mt-2 mb-4">Forms</h4>
</div>

<div class="col-8">

<div class="row">

<div class="col-md-6 text-center">
<div class="col-12 col-sm-6 text-sm-center text-left">
<div class="form-group">
<div style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Verbs</h4>
Expand All @@ -131,7 +118,7 @@ <h4 class="text-left mt-2 mb-4">Verbs</h4>
</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 style="display: inline-block">
<h4 class="text-left mt-2 mb-4">Adjectives</h4>
Expand All @@ -151,7 +138,7 @@ <h4 class="text-left mt-2 mb-4">Adjectives</h4>
</div>

<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 class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
Expand Down Expand Up @@ -183,9 +170,7 @@ <h4 class="text-left mt-2 mb-4">Adjectives</h4>
</div>

<div id="scoreSection" class="mt-4 ml-4 mr-4">

<div>

<div class="row">
<div class="col-12">
<h1 class="text-center">
Expand All @@ -210,14 +195,10 @@ <h1 class="text-center">
</div>
</div>

<div class="row col-12 mt-4 mx-auto">

</div>

<div class="row col-12 mt-4 mx-auto"></div>
</div>

<div id="quizSection">

<div class="progressContainer">
<div class="progressBar" style="width: 0%">
</div>
Expand All @@ -239,10 +220,7 @@ <h1 class="text-center">
</div>

<div id="proceed">

<button id="responseButton" onclick="javascript:proceed()">
</button>

<button id="responseButton" onclick="javascript:proceed()"></button>
<div id="message">
<div class="row mt-4">
<div class="col-12 text-center" id="correction"></div>
Expand All @@ -251,20 +229,15 @@ <h1 class="text-center">
<button class="btn btn-primary mb-2 mx-auto" onclick="explain()">Explain</button>
</div>
</div>

</div>

<div class="row ml-4 mr-4">

<div style="display: none" id="explanation" class="mt-4 col mx-auto">

<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
id="explain-group"></span> <span class="explain-given-dictionary"></span>.</p>

<h3>2. Change the form</h3>

<div class="explain-answer-single">
<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>
Expand All @@ -284,7 +257,6 @@ <h3>2. Change the form</h3>
</div>

<h3>3. Produce the required form</h3>

<p class="explain-answer-single">The correct answer is the
<span class="explain-answer-tags2"></span> form: <span class="explain-answer"></span>
</p>
Expand All @@ -300,17 +272,10 @@ <h3>3. Produce the required form</h3>
<button id="explain-proceed-button" class="centre btn btn-primary mb-2 mx-auto"
onclick="javascript:proceed()">OK, next question</button>
</div>

</div>
</div>


</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

<script src="assets/bootstrap.min.js"></script>
</body>

</html>