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