mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2024-09-16 10:10:11 +00:00
Start of Bootstrap template.
This commit is contained in:
doncr
parent
e3d1481919
commit
2a3561eadc
@ -1,71 +1,92 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body, input {
|
||||
font-family: Amaranth, sans-serif;
|
||||
background: #eee;
|
||||
|
||||
--other: #4A2067;
|
||||
--neutral-dark: #441f00;
|
||||
--incorrect: #992a2a;
|
||||
--correct: #217b21;
|
||||
--neutral: #995c2a;
|
||||
--question-furigana: white;
|
||||
--input-background: white;
|
||||
--input-shadow: #888;
|
||||
--input-color: white;
|
||||
}
|
||||
|
||||
#proceed svg {
|
||||
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
#proceed button {
|
||||
color: var(--input-color);
|
||||
outline-width: 0;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.questionOuter {
|
||||
background: #a0c0a0;
|
||||
width: 100%;
|
||||
background: var(--other);
|
||||
}
|
||||
|
||||
#question {
|
||||
padding-top: 40px;
|
||||
font-size: 40px;
|
||||
text-shadow: 2px 2px 4px #808080;
|
||||
text-shadow: 2px 2px 4px var(--neutral-dark);
|
||||
padding-bottom: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: table;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*
|
||||
#explanation {
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
#input {
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
#inputArea {
|
||||
background: var(--input-background);
|
||||
}
|
||||
|
||||
#inputArea, .correct, .incorrect {
|
||||
box-shadow: 2px 2px 4px 0px var(--input-shadow);
|
||||
width: calc(100vw - 32px);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#answer {
|
||||
background: var(--input-background);
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background: #eee;
|
||||
border: 0;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: table;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#response {
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
height: 34px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
#answer, .correct, .incorrect {
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
#answer:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
#response {
|
||||
font-size: 30px;
|
||||
}
|
||||
/*
|
||||
|
||||
#message {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
@ -77,23 +98,25 @@ body, input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
*/
|
||||
.correct,
|
||||
.incorrect {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: var(--input-color);
|
||||
}
|
||||
|
||||
.correct {
|
||||
background: #8f8;
|
||||
background: var(--correct);
|
||||
}
|
||||
|
||||
.incorrect {
|
||||
background: #f88;
|
||||
background: var(--incorrect);
|
||||
}
|
||||
|
||||
/*
|
||||
div#history,
|
||||
div#explanation {
|
||||
margin-left: auto;
|
||||
@ -177,6 +200,7 @@ div#scoreSection > * {
|
||||
display: table;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
*/
|
||||
|
||||
input#numQuestions {
|
||||
width: 60px;
|
||||
@ -188,6 +212,10 @@ div.options ul {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */
|
||||
|
||||
[tooltip]:before {
|
||||
@ -225,14 +253,18 @@ div.options ul {
|
||||
.tooltip-w2[tooltip]:hover:before,
|
||||
.tooltip-w3[tooltip]:hover:before { margin-top: -10px; }
|
||||
|
||||
#question .tooltip-w1[tooltip]:before { font-size: 12px; margin-left: 14px; }
|
||||
#question .tooltip-w2[tooltip]:before { font-size: 12px; margin-left: 8px; }
|
||||
#question .tooltip-w3[tooltip]:before { font-size: 12px; margin-left: 2px; }
|
||||
#question .tooltip-w1[tooltip]:before { color: var(--question-furigana); font-size: 12px; margin-left: 14px; }
|
||||
#question .tooltip-w2[tooltip]:before { color: var(--question-furigana); font-size: 12px; margin-left: 8px; }
|
||||
#question .tooltip-w3[tooltip]:before { color: var(--question-furigana); font-size: 12px; margin-left: 2px; }
|
||||
|
||||
#question .tooltip-w1[tooltip]:hover:before, .furiganaAlways #question .tooltip-w1[tooltip]:before,
|
||||
#question .tooltip-w2[tooltip]:hover:before, .furiganaAlways #question .tooltip-w2[tooltip]:before,
|
||||
#question .tooltip-w3[tooltip]:hover:before, .furiganaAlways #question .tooltip-w3[tooltip]:before { margin-top: -12px; }
|
||||
#question .tooltip-w3[tooltip]:hover:before, .furiganaAlways #question .tooltip-w3[tooltip]:before {
|
||||
color: var(--question-furigana);
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
/*
|
||||
div#explanation p span {
|
||||
}
|
||||
|
||||
@ -357,6 +389,7 @@ div.horiz > * {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
*/
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
@ -366,17 +399,27 @@ div.horiz > * {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
/*
|
||||
|
||||
.options li {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
.specials {
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2, h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.options h4 {
|
||||
}
|
||||
/*
|
||||
.explain-answer-as-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
@ -389,3 +432,13 @@ div.horiz > * {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@media (max-width: 420px) {
|
||||
|
||||
#splash h2 {
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 1.0em
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head lang="en">
|
||||
<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="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>
|
||||
@ -12,83 +14,171 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="/conjugation/drill_bootstrap.html">Don's Japanese Conjugation Drill</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div id="splash">
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/conjugation/drill_bootstrap.html">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Verbs
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">Plain</a>
|
||||
<a class="dropdown-item" href="#">Polite</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Negative</a>
|
||||
<a class="dropdown-item" href="#">Past</a>
|
||||
<a class="dropdown-item" href="#">て form</a>
|
||||
<a class="dropdown-item" href="#">Progressive</a>
|
||||
<a class="dropdown-item" href="#">Desire</a>
|
||||
<a class="dropdown-item" href="#">Volitional</a>
|
||||
<a class="dropdown-item" href="#">Potential</a>
|
||||
<a class="dropdown-item" href="#">Imperative</a>
|
||||
<a class="dropdown-item" href="#">Passive</a>
|
||||
<a class="dropdown-item" href="#">Causative</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Tests
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">Godan stem drill</a>
|
||||
<a class="dropdown-item" href="#">来る drill</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Help
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">How the drill works</a>
|
||||
<a class="dropdown-item" href="#">Choice of verbs</a>
|
||||
<a class="dropdown-item" href="#">Map of conjugations</a>
|
||||
</div>
|
||||
</li>
|
||||
<!- -
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
- ->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
-->
|
||||
<div id="splash" class="container mt-4">
|
||||
|
||||
<h1>Don's Japanese Conjugation Drill</h1>
|
||||
<!-- <h2 class="text-center d-none d-sm-block">Don's Japanese Conjugation Drill</h2>-->
|
||||
<h2 class="text-center">Don's Japanese Conjugation Drill</h2>
|
||||
|
||||
<div>
|
||||
<span>Number of Questions</span>
|
||||
<input id="numQuestions" value="10">
|
||||
<button id="go">Go</button>
|
||||
</div>
|
||||
|
||||
<div>Question pool size: <span id="questionCount">...</span></div>
|
||||
|
||||
<div class="options">
|
||||
<div>
|
||||
<h2>Conjugation types</h2>
|
||||
<ul>
|
||||
<li><label><input type="checkbox" id="plain" checked> Plain</label></li>
|
||||
<li><label><input type="checkbox" id="polite" checked> Polite</label></li>
|
||||
<li><label><input type="checkbox" id="negative" checked> Negative</label></li>
|
||||
<li><label><input type="checkbox" id="past" checked> Past</label></li>
|
||||
<li><label><input type="checkbox" id="te-form"> て form</label></li>
|
||||
<li><label><input type="checkbox" id="progressive"> Progressive</label></li>
|
||||
<li><label><input type="checkbox" id="desire"> Desire</label></li>
|
||||
<li><label><input type="checkbox" id="volitional"> Volitional</label></li>
|
||||
<li><label><input type="checkbox" id="potential"> Potential</label></li>
|
||||
<li><label><input type="checkbox" id="imperative"> Imperative</label></li>
|
||||
<li><label><input type="checkbox" id="passive"> Passive</label></li>
|
||||
<li><label><input type="checkbox" id="causative"> Causative</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Verb classes</h2>
|
||||
<ul>
|
||||
<li><label><input type="checkbox" id="godan" checked> Group 1 verbs</label></li>
|
||||
<li><label><input type="checkbox" id="ichidan" checked> Group 2 verbs</label></li>
|
||||
<div class="specials">Special cases</div>
|
||||
<li><label><input type="checkbox" id="iku" checked> 行く verb</label></li>
|
||||
<li><label><input type="checkbox" id="kuru" checked> 来る verb</label></li>
|
||||
<li><label><input type="checkbox" id="suru" checked> する verbs</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Adjective classes</h2>
|
||||
<ul>
|
||||
<li><label><input type="checkbox" id="i-adjective"> い adjectives</label></li>
|
||||
<li><label><input type="checkbox" id="na-adjective"> な adjectives</label></li>
|
||||
<div class="specials">Special cases</div>
|
||||
<li><label><input type="checkbox" id="ii"> いい adjective</label></li>
|
||||
</ul>
|
||||
<div class="row justify-content-center">
|
||||
<div class="form-inline">
|
||||
<label class="mb-2 mr-sm-2" for="numQuestions">Number of Questions</label>
|
||||
<input class="mb-2 mr-sm-2 form-control" type="number" placeholder="Questions" aria-label="Number of Questions" aria-describedby="basic-addon2" id="numQuestions" value="10">
|
||||
<button class="btn btn-outline-secondary mb-2 mr-sm-2" type="button" id="go">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<label><input type="checkbox" id="trick" checked> Trick questions (answers may be the same as the given form)</label>
|
||||
<div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
|
||||
|
||||
<div class="container options">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm col-md-4 text-center">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="mt-2 mb-4">Word forms</h4>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="plain" checked><label for="plain" class="form-check-label">Plain</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="polite" checked><label for="polite" class="form-check-label">Polite</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="negative" checked><label for="negative" class="form-check-label">Negative</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="past" checked><label for="past" class="form-check-label">Past</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="te-form"><label for="te-form" class="form-check-label">て form</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="progressive"><label for="progressive" class="form-check-label">Progressive</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="desire"><label for="desire" class="form-check-label">Desire</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="volitional"><label for="volitional" class="form-check-label">Volitional</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="potential"><label for="potential" class="form-check-label">Potential</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="imperative"><label for="imperative" class="form-check-label">Imperative</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="passive"><label for="passive" class="form-check-label">Passive</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="causative"><label for="causative" class="form-check-label">Causative</label></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm col-md-8">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6 text-center">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="text-left mt-2 mb-4">Verbs</h4>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="godan" checked><label for="godan" class="form-check-label">Group 1 verbs</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="ichidan" checked><label for="ichidan" class="form-check-label">Group 2 verbs</label></div>
|
||||
<div class="text-left ml-3 specials">Special cases</div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="iku" checked><label for="iku" class="form-check-label">行く verb</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="kuru" checked><label for="kuru" class="form-check-label">来る verb</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="suru" checked><label for="suru" class="form-check-label">する verbs</label></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-center">
|
||||
<div class="form-group">
|
||||
<div style="display: inline-block">
|
||||
<h4 class="text-left mt-2 mb-4">Adjectives</h4>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="i-adjective"><label for="i-adjective" class="form-check-label">い adjectives</label></div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="na-adjective"><label for="na-adjective" class="form-check-label">な adjectives</label></div>
|
||||
<div class="text-left ml-3 specials">Special cases</div>
|
||||
<div class="text-left ml-3 form-check"><input class="form-check-input" type="checkbox" id="ii"><label for="ii" class="form-check-label">いい adjective</label></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label><input type="checkbox" id="kana"> Use hiragana throughout the test (no kanji)</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input type="checkbox" id="furigana_always"> Always show furigana on questions</label>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-3 ml-2 mr-2">
|
||||
<div class="form-group">
|
||||
<div class="form-check"><input class="form-check-input" type="checkbox" id="trick" checked><label class="form-check-label" for="trick">Trick questions (answers may be the same as the given form)</label></div>
|
||||
<div class="form-check"><input class="form-check-input" type="checkbox" id="kana"><label class="form-check-label" for="kana">Use hiragana throughout the test (no kanji)</label></div>
|
||||
<div class="form-check"><input class="form-check-input" type="checkbox" id="furigana_always"><label class="form-check-label" for="furigana_always">Always show furigana on questions</label></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="scoreSection">
|
||||
<div id="scoreSection" class="mt-4">
|
||||
|
||||
<div id="scoreSectionTitle"></div>
|
||||
|
||||
<div id="history">
|
||||
</div>
|
||||
|
||||
<button id="backToStart">Back to Start</button>
|
||||
<button class="btn btn-outline-secondary mb-2 mr-sm-2" id="backToStart">Back to Start</button>
|
||||
|
||||
</div>
|
||||
|
||||
@ -98,22 +188,18 @@
|
||||
<div id="question"></div>
|
||||
</div>
|
||||
|
||||
<div id="input">
|
||||
<form action="javascript:processAnswer()">
|
||||
<input placeholder="答え" autocomplete="off" id="answer">
|
||||
</form>
|
||||
<div id="inputArea" class="row">
|
||||
<div class="col-12">
|
||||
<form action="javascript:processAnswer()">
|
||||
<input placeholder="答え" autocomplete="off" id="answer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="proceed">
|
||||
|
||||
<form style="float: right" action="javascript:proceed()">
|
||||
<button>
|
||||
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48">
|
||||
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||
<g transform="scale(0.03)"><path d="M762.1,441.8L354.4,34.1C322.2,2,270.1,2,237.9,34.1c-32.2,32.2-32.2,84.3,0,116.5L587.4,500L237.9,849.4c-32.2,32.2-32.2,84.3,0,116.5s84.3,32.2,116.5,0l407.6-407.6c16.1-16.1,24.1-37.2,24.1-58.2S778.1,457.8,762.1,441.8z"></path></g>
|
||||
</svg>
|
||||
</button>
|
||||
<button>></button>
|
||||
</form>
|
||||
|
||||
<div id="response">
|
||||
@ -124,7 +210,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: none" id="explanation">
|
||||
<div style="display: none" id="explanation" class="mt-4">
|
||||
|
||||
<h2>Explanation</h2>
|
||||
|
||||
@ -157,10 +243,13 @@
|
||||
<ul class="explain-answer-as-list"></ul>
|
||||
</div>
|
||||
|
||||
<button id="explain-proceed-button" class="centre" onclick="javascript:proceed()">OK, next question</button>
|
||||
<button id="explain-proceed-button" class="centre btn btn-outline-secondary mb-2 mr-sm-2" onclick="javascript:proceed()">OK, next question</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -392,7 +392,7 @@ function generateQuestion() {
|
||||
|
||||
$('#proceed').hide();
|
||||
$('#explanation').hide();
|
||||
$('#input').show();
|
||||
$('#inputArea').show();
|
||||
$('#answer').focus();
|
||||
|
||||
$('#answer').on('input', processAnswerKey);
|
||||
@ -425,10 +425,10 @@ function processAnswer() {
|
||||
if (correct) {
|
||||
$('#message').html("");
|
||||
} else {
|
||||
$('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <input type='button' value='Explain' onclick='explain()'></div>");
|
||||
$('#message').html("<div>The correct answer was " + commaList(questionData.answerWithFurigana, "or") + " <button class='btn btn-outline-secondary mb-2 mr-sm-2' onclick='explain()'>Explain</button></div>");
|
||||
}
|
||||
|
||||
$('#input').hide();
|
||||
$('#inputArea').hide();
|
||||
$('#proceed').show();
|
||||
$('#explanation').hide();
|
||||
$('#proceed button').focus();
|
||||
@ -438,16 +438,16 @@ function processAnswer() {
|
||||
|
||||
function updateHistoryView(log) {
|
||||
|
||||
var review = $('<table>');
|
||||
var review = $('<div>');
|
||||
|
||||
var total = 0;
|
||||
var correct = 0;
|
||||
|
||||
var header_tr = $('<tr>');
|
||||
var header_tr = $('<div class="row d-none d-md-flex">');
|
||||
|
||||
header_tr.append($('<th>Question</th>'));
|
||||
header_tr.append($('<th>Answer</th>'));
|
||||
header_tr.append($('<th>Response</th>'));
|
||||
header_tr.append($('<div class="col-md-6">Question</div>'));
|
||||
header_tr.append($('<div class="col-md-3">Answer</div>'));
|
||||
header_tr.append($('<div class="col-md-3">Response</div>'));
|
||||
|
||||
review.append(header_tr);
|
||||
|
||||
@ -459,11 +459,11 @@ function updateHistoryView(log) {
|
||||
correct++;
|
||||
}
|
||||
|
||||
var tr = $('<tr>');
|
||||
var tr = $('<div class="row">');
|
||||
|
||||
var td1 = $('<td>');
|
||||
var td2 = $('<td>');
|
||||
var td3 = $('<td>');
|
||||
var td1 = $('<div class="col-md-6">');
|
||||
var td2 = $('<div class="col-md-3">');
|
||||
var td3 = $('<div class="col-md-3">');
|
||||
|
||||
td1.html(entry.question);
|
||||
td2.html(commaList(entry.answer, "or"));
|
||||
@ -733,6 +733,7 @@ $('window').ready(function () {
|
||||
|
||||
$('div.options input').click(updateOptionSummary);
|
||||
$('input#trick').click(updateOptionSummary);
|
||||
$('input#focus_mode').click(updateOptionSummary);
|
||||
|
||||
updateOptionSummary();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user