keb/japanese-conjugation-drill
1
0
Fork 0
mirror of https://github.com/ZetaKebab/japanese-conjugation-drill.git synced 2025-01-14 22:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start of Bootstrap template.

Browse Source
This commit is contained in:
doncr 2020-07-22 19:00:42 +01:00
parent e3d1481919
commit 2a3561eadc
3 changed files with 256 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
conjugation/drill.css
View File

@ -1,71 +1,92 @@
body {
margin: 0;
}
body, input { body, input {
font-family: Amaranth, sans-serif; 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 { #proceed svg {
display: inline-block; display: inline-block;
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
#proceed button { #proceed button {
color: var(--input-color);
outline-width: 0;
border: none; border: none;
padding: 12px; padding: 12px;
background: none; background: none;
} }
.questionOuter { .questionOuter {
background: #a0c0a0; background: var(--other);
width: 100%;
} }
#question { #question {
padding-top: 40px; padding-top: 40px;
font-size: 40px; font-size: 40px;
text-shadow: 2px 2px 4px #808080; text-shadow: 2px 2px 4px var(--neutral-dark);
padding-bottom: 40px; padding-bottom: 40px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: table; display: table;
color: white;
} }
/*
#explanation { #explanation {
width: 960px; width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
*/
#input { #inputArea {
background: #eee; background: var(--input-background);
width: 100%; }
#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 { #answer {
background: var(--input-background);
width: 100%; width: 100%;
height: 34px;
background: #eee;
border: 0; border: 0;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
font-size: 30px; font-size: 30px;
margin-left: auto;
margin-right: auto;
display: table;
text-align: center; text-align: center;
} }
#response { #answer, .correct, .incorrect {
width: 100%; height: 54px;
font-size: 30px;
height: 34px;
padding-top: 12px;
padding-bottom: 12px;
} }
#answer:focus {
outline-width: 0;
}
#response {
font-size: 30px;
}
/*
#message { #message {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
@ -77,23 +98,25 @@ body, input {
text-align: center; text-align: center;
} }
*/
.correct, .correct,
.incorrect { .incorrect {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
font-size: 30px; font-size: 30px;
width: 100%;
text-align: center; text-align: center;
color: var(--input-color);
} }
.correct { .correct {
background: #8f8; background: var(--correct);
} }
.incorrect { .incorrect {
background: #f88; background: var(--incorrect);
} }
/*
div#history, div#history,
div#explanation { div#explanation {
margin-left: auto; margin-left: auto;
@ -177,6 +200,7 @@ div#scoreSection > * {
display: table; display: table;
margin-bottom: 12px; margin-bottom: 12px;
} }
*/
input#numQuestions { input#numQuestions {
width: 60px; width: 60px;
@ -188,6 +212,10 @@ div.options ul {
padding-left: 16px; padding-left: 16px;
} }
/* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */ /* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */
[tooltip]:before { [tooltip]:before {
@ -225,14 +253,18 @@ div.options ul {
.tooltip-w2[tooltip]:hover:before, .tooltip-w2[tooltip]:hover:before,
.tooltip-w3[tooltip]:hover:before { margin-top: -10px; } .tooltip-w3[tooltip]:hover:before { margin-top: -10px; }
#question .tooltip-w1[tooltip]:before { font-size: 12px; margin-left: 14px; } #question .tooltip-w1[tooltip]:before { color: var(--question-furigana); font-size: 12px; margin-left: 14px; }
#question .tooltip-w2[tooltip]:before { font-size: 12px; margin-left: 8px; } #question .tooltip-w2[tooltip]:before { color: var(--question-furigana); font-size: 12px; margin-left: 8px; }
#question .tooltip-w3[tooltip]:before { font-size: 12px; margin-left: 2px; } #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-w1[tooltip]:hover:before, .furiganaAlways #question .tooltip-w1[tooltip]:before,
#question .tooltip-w2[tooltip]:hover:before, .furiganaAlways #question .tooltip-w2[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 { div#explanation p span {
} }
@ -357,6 +389,7 @@ div.horiz > * {
margin-right: 16px; margin-right: 16px;
} }
*/
.tag { .tag {
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
@ -366,17 +399,27 @@ div.horiz > * {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
} }
/*
.options li { .options li {
height: 24px; height: 24px;
} }
*/
.specials { .specials {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
h2, h4 {
font-weight: bold;
}
.options h4 {
}
/*
.explain-answer-as-list li { .explain-answer-as-list li {
list-style-type: none; list-style-type: none;
} }
@ -389,3 +432,13 @@ div.horiz > * {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
*/
@media (max-width: 420px) {
#splash h2 {
font-size: 1.3em;
margin-bottom: 1.0em
}
}

235
conjugation/drill.html
View File

@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head lang="en">
<meta charset="UTF-8"> <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 rel="stylesheet" href="drill.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet"> <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="//code.jquery.com/jquery-3.1.1.min.js"></script>
@ -12,83 +14,171 @@
</head> </head>
<body> <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> <div class="row justify-content-center">
<span>Number of Questions</span> <div class="form-inline">
<input id="numQuestions" value="10"> <label class="mb-2 mr-sm-2" for="numQuestions">Number of Questions</label>
<button id="go">Go</button> <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">
</div> <button class="btn btn-outline-secondary mb-2 mr-sm-2" type="button" id="go">Go</button>
<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> </div>
</div> </div>
<div> <div class="text-center mb-4">Question pool size: <span id="questionCount">...</span></div>
<div>
<label><input type="checkbox" id="trick" checked> Trick questions (answers may be the same as the given form)</label> <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>
<div> </div>
<label><input type="checkbox" id="kana"> Use hiragana throughout the test (no kanji)</label>
</div> <div class="row justify-content-center mt-3 ml-2 mr-2">
<div> <div class="form-group">
<label><input type="checkbox" id="furigana_always"> Always show furigana on questions</label> <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>
</div> </div>
<div id="scoreSection"> <div id="scoreSection" class="mt-4">
<div id="scoreSectionTitle"></div> <div id="scoreSectionTitle"></div>
<div id="history"> <div id="history">
</div> </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> </div>
@ -98,22 +188,18 @@
<div id="question"></div> <div id="question"></div>
</div> </div>
<div id="input"> <div id="inputArea" class="row">
<form action="javascript:processAnswer()"> <div class="col-12">
<input placeholder="答え" autocomplete="off" id="answer"> <form action="javascript:processAnswer()">
</form> <input placeholder="答え" autocomplete="off" id="answer">
</form>
</div>
</div> </div>
<div id="proceed"> <div id="proceed">
<form style="float: right" action="javascript:proceed()"> <form style="float: right" action="javascript:proceed()">
<button> <button>&gt;</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>
</form> </form>
<div id="response"> <div id="response">
@ -124,7 +210,7 @@
</div> </div>
<div style="display: none" id="explanation"> <div style="display: none" id="explanation" class="mt-4">
<h2>Explanation</h2> <h2>Explanation</h2>
@ -157,10 +243,13 @@
<ul class="explain-answer-as-list"></ul> <ul class="explain-answer-as-list"></ul>
</div> </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>
</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> </body>
</html> </html>

25
conjugation/drill.js
View File

@ -392,7 +392,7 @@ function generateQuestion() {
$('#proceed').hide(); $('#proceed').hide();
$('#explanation').hide(); $('#explanation').hide();
$('#input').show(); $('#inputArea').show();
$('#answer').focus(); $('#answer').focus();
$('#answer').on('input', processAnswerKey); $('#answer').on('input', processAnswerKey);
@ -425,10 +425,10 @@ function processAnswer() {
if (correct) { if (correct) {
$('#message').html(""); $('#message').html("");
} else { } 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(); $('#proceed').show();
$('#explanation').hide(); $('#explanation').hide();
$('#proceed button').focus(); $('#proceed button').focus();
@ -438,16 +438,16 @@ function processAnswer() {
function updateHistoryView(log) { function updateHistoryView(log) {
var review = $('<table>'); var review = $('<div>');
var total = 0; var total = 0;
var correct = 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($('<div class="col-md-6">Question</div>'));
header_tr.append($('<th>Answer</th>')); header_tr.append($('<div class="col-md-3">Answer</div>'));
header_tr.append($('<th>Response</th>')); header_tr.append($('<div class="col-md-3">Response</div>'));
review.append(header_tr); review.append(header_tr);
@ -459,11 +459,11 @@ function updateHistoryView(log) {
correct++; correct++;
} }
var tr = $('<tr>'); var tr = $('<div class="row">');
var td1 = $('<td>'); var td1 = $('<div class="col-md-6">');
var td2 = $('<td>'); var td2 = $('<div class="col-md-3">');
var td3 = $('<td>'); var td3 = $('<div class="col-md-3">');
td1.html(entry.question); td1.html(entry.question);
td2.html(commaList(entry.answer, "or")); td2.html(commaList(entry.answer, "or"));
@ -733,6 +733,7 @@ $('window').ready(function () {
$('div.options input').click(updateOptionSummary); $('div.options input').click(updateOptionSummary);
$('input#trick').click(updateOptionSummary); $('input#trick').click(updateOptionSummary);
$('input#focus_mode').click(updateOptionSummary);
updateOptionSummary(); updateOptionSummary();