index.html (7608B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>동사마스터</title> 8 <link rel="stylesheet" href="minimal.css"> 9 <link rel="stylesheet" href="style.css"> 10 </head> 11 12 <body> 13 <header> 14 <h1 lang="ko">동사마스터</h1> 15 </header> 16 <main> 17 <section class="home-screen" x-cloak x-data x-show="$store.app.screen === 'home'"> 18 <div class="question-count"> 19 <label for="question-count">questions</label> 20 <input id="question-count" type="number" min="1" :value="$store.app.questionCount" 21 @input="$store.app.questionCount = +$event.target.value" /> 22 </div> 23 24 <div class="home-actions"> 25 <button class="-primary" @click="$store.app.start()">start</button> 26 <button @click="$store.app.reset()">reset</button> 27 </div> 28 <p class="alert-box -error" x-show="$store.app.error" x-text="$store.app.error"></p> 29 <hr class="config-divider"> 30 <div class="config-panels"> 31 <div> 32 <template x-for="group in $store.app.tenseGroups" :key="group.mood"> 33 <fieldset class="tense-group"> 34 <legend x-text="group.mood"></legend> 35 <table class="tense-grid"> 36 <thead> 37 <tr> 38 <td></td> 39 <template x-for="col in group.columns" :key="col"> 40 <th scope="col" x-text="col"></th> 41 </template> 42 </tr> 43 </thead> 44 <tbody> 45 <template x-for="row in group.rows" :key="row.time"> 46 <tr> 47 <th scope="row" x-text="row.time"></th> 48 <template x-for="cell in row.cells" :key="cell.key"> 49 <td> 50 <label class="tense-cell"> 51 <input type="checkbox" 52 :checked="$store.app.config.tenses[cell.key].enabled" 53 @change="$store.app.config.tenses[cell.key].enabled = $event.target.checked" /> 54 <span class="tense-example" 55 x-text="$store.app.config.tenses[cell.key].example"></span> 56 </label> 57 </td> 58 </template> 59 </tr> 60 </template> 61 </tbody> 62 </table> 63 </fieldset> 64 </template> 65 66 <fieldset class="tense-group"> 67 <legend>other</legend> 68 <div class="tense-specials"> 69 <template x-for="key in $store.app.tenseSpecials" :key="key"> 70 <label class="tense-cell"> 71 <input type="checkbox" :checked="$store.app.config.tenses[key].enabled" 72 @change="$store.app.config.tenses[key].enabled = $event.target.checked" /> 73 <span x-text="key"></span> 74 <span class="tense-example" x-text="$store.app.config.tenses[key].example"></span> 75 </label> 76 </template> 77 </div> 78 </fieldset> 79 </div> 80 <fieldset> 81 <legend>decks</legend> 82 <template x-for="(dataset, key) in $store.app.config.datasets" :key="key"> 83 <div class="deck-item"> 84 <label class="tense-cell"> 85 <input type="checkbox" :checked="dataset.enabled" 86 @change="$store.app.config.datasets[key].enabled = $event.target.checked" /> 87 <span x-text="dataset.name"></span> 88 </label> 89 <button class="deck-remove" x-show="dataset.isCustom" 90 @click="$store.app.removeDataset(key)">✗</button> 91 </div> 92 </template> 93 <div class="deck-upload"> 94 <label class="deck-upload-label" for="csv-upload">upload KimchiReader CSV</label> 95 <input id="csv-upload" type="file" accept=".csv" @change="$store.app.uploadCSV($event)" /> 96 </div> 97 </fieldset> 98 </div> 99 <div class="save-action"> 100 <button @click="$store.app.saveConfig()">save config</button> 101 <span class="alert-box -success" x-show="$store.app.configSaved">config saved</span> 102 </div> 103 </section> 104 105 <section class="question-screen" x-cloak x-data x-show="$store.app.screen === 'question'"> 106 <h2>question 107 <span x-text="$store.app.currentWordIndex + 1"></span> of 108 <span x-text="$store.app.questionCount"></span> 109 </h2> 110 111 <form class="question-form" @submit="$store.app.submit($event)"> 112 <label class="word-prompt"> 113 <span> 114 Make 115 <span lang="ko" x-text="$store.app.words[$store.app.currentWordIndex]?.word.text" :class="{ 116 'word-level -unknown': $store.app.words[$store.app.currentWordIndex]?.word.kimchiLevel === 0, 117 'word-level -seen': $store.app.words[$store.app.currentWordIndex]?.word.kimchiLevel === 1, 118 'word-level -known': $store.app.words[$store.app.currentWordIndex]?.word.kimchiLevel === 2 119 }"></span> 120 <span x-text="$store.app.words[$store.app.currentWordIndex]?.conjugation.tense"></span> 121 </span> 122 <br> 123 <input class="answer-input" id="input" type="text" :class="{ 124 '-correct': $store.app.questionState === 'correct', 125 '-incorrect': $store.app.questionState === 'incorrect' 126 }" /> 127 </label> 128 129 <div class="form-actions"> 130 <button class="-primary" type="submit" 131 x-text="$store.app.questionState === 'undecided' ? 'check' : 'continue'"></button> 132 <button :disabled="$store.app.questionState !== 'undecided'" class="-secondary" type="button" 133 @click="$store.app.skip()">skip</button> 134 <button class="-secondary" type="button" @click="$store.app.quit()">quit</button> 135 </div> 136 137 <div class="answer-reveal" x-show="$store.app.questionState !== 'undecided'" :class="{ 138 '-correct': $store.app.questionState === 'correct', 139 '-incorrect': $store.app.questionState === 'incorrect' 140 }"> 141 <p><span class="answer-label">Answer:</span> <span lang="ko" class="answer-value" 142 x-text="$store.app.words[$store.app.currentWordIndex]?.conjugation.conjugation"></span></p> 143 <ol> 144 <template x-for="reason in $store.app.words[$store.app.currentWordIndex]?.conjugation.reasons"> 145 <li x-text="reason"></li> 146 </template> 147 </ol> 148 </div> 149 </form> 150 </section> 151 152 <section class="result-screen" x-cloak x-data x-show="$store.app.screen === 'result'"> 153 <h2>result</h2> 154 <output class="result-score"> 155 <span x-text="$store.app.correctCount"></span> / <span x-text="$store.app.questionCount"></span> 156 </output> 157 <table class="result-table"> 158 <caption class="visually-hidden">Quiz results</caption> 159 <thead> 160 <tr> 161 <th scope="col" class="visually-hidden">Outcome</th> 162 <th scope="col" class="visually-hidden">Word</th> 163 <th scope="col" class="visually-hidden">Tense</th> 164 <th scope="col" class="visually-hidden">Conjugation</th> 165 </tr> 166 </thead> 167 <tbody> 168 <template x-for="result in $store.app.results"> 169 <tr> 170 <td class="outcome" :class="result.correct ? '-correct' : '-incorrect'" 171 x-text="result.correct ? '○' : '✗'"></td> 172 <td> 173 <span lang="ko" x-text="result.word.text" :class="{ 174 'word-level -unknown': result.word.kimchiLevel === 0, 175 'word-level -seen': result.word.kimchiLevel === 1, 176 'word-level -known': result.word.kimchiLevel === 2 177 }"></span> 178 </td> 179 <td class="tense-label" x-text="result.conjugation.tense"></td> 180 <td lang="ko" x-text="result.conjugation.conjugation"></td> 181 </tr> 182 </template> 183 </tbody> 184 </table> 185 <div class="result-actions"> 186 <button class="-primary" @click="$store.app.start()">again</button> 187 <button class="-secondary" @click="$store.app.quit()">home</button> 188 </div> 189 </section> 190 </main> 191 192 <footer> 193 <a href="index.html" lang="ko">동사마스터</a> 194 · 195 <a href="https://tangled.org/brookjeynes.dev/verb-master">source</a> 196 </footer> 197 198 <script type="module" src="src/main.js"></script> 199 </body> 200 201 </html>