Skip to content

Commit dc713c1

Browse files
许君山许君山
authored andcommitted
feat: display romaji alongside kanji in Dojo mode
Closes #1 - Update /api/dojo-quiz endpoint to include romaji in the response - Update Dojo UI to display romaji below the Kanji and above the meaning - Add styling for the romaji text
1 parent f4c0f05 commit dc713c1

2 files changed

Lines changed: 10 additions & 0 deletions

File tree

backend/server.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -785,6 +785,7 @@ app.get('/api/dojo-quiz', (req, res) => {
785785
questions.push({
786786
verb: verbObj.kanji,
787787
kana: verbObj.kana,
788+
romaji: verbObj.romaji,
788789
meaning: verbObj.meaning,
789790
formKey: formObj.key,
790791
formLabel: formObj.label,

frontend/src/App.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@
243243
<div class="dojo-question">
244244
<div class="dojo-verb">
245245
<span class="dojo-kanji">{{ currentQuestion.verb }}</span>
246+
<span class="dojo-romaji" v-if="currentQuestion.romaji">{{ currentQuestion.romaji }}</span>
246247
<span class="dojo-meaning">{{ currentQuestion.meaning }}</span>
247248
</div>
248249
<div class="dojo-prompt">
@@ -1998,6 +1999,14 @@ ruby rt {
19981999
line-height: 1.2;
19992000
}
20002001
2002+
.dojo-romaji {
2003+
display: block;
2004+
font-size: 1.2em;
2005+
color: #64748b;
2006+
font-family: monospace;
2007+
margin-bottom: 8px;
2008+
}
2009+
20012010
.dojo-meaning {
20022011
display: block;
20032012
font-size: 1.1em;

0 commit comments

Comments
 (0)