diff --git a/dyktando.js b/dyktando.js
index f394534..fdebdfc 100644
--- a/dyktando.js
+++ b/dyktando.js
@@ -121,9 +121,14 @@
span.id = `blank-${tok.id}`
if (tok.correct !== null) {
- // Already answered — always show the CORRECT letter, colored by result
- span.className = `dyk-blank dyk-blank--${tok.correct ? 'ok' : 'err'}`
- span.textContent = tok.answer
+ // Already answered
+ if (tok.correct) {
+ span.className = 'dyk-blank dyk-blank--ok'
+ span.textContent = tok.answer
+ } else {
+ span.className = 'dyk-blank dyk-blank--err'
+ span.innerHTML = `${esc(tok.userAnswer)}${esc(tok.answer)}`
+ }
} else if (tok.id === current) {
span.className = 'dyk-blank dyk-blank--active'
span.textContent = '__'
@@ -234,7 +239,11 @@
let inner = ''
word.blanks.forEach(blank => {
if (blank.start > wPos) inner += esc(origText.slice(wPos, blank.start))
- inner += `${esc(blank.answer)}`
+ if (blank.correct) {
+ inner += `${esc(blank.answer)}`
+ } else {
+ inner += `${esc(blank.userAnswer)}${esc(blank.answer)}`
+ }
wPos = blank.end
})
inner += esc(origText.slice(wPos, word.end))
diff --git a/styles.css b/styles.css
index 165ec7d..8a38c54 100644
--- a/styles.css
+++ b/styles.css
@@ -134,14 +134,16 @@ body{
.dyk-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.dyk-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
-.dyk-text{padding:20px;font-size:20px;line-height:1.9}
+.dyk-text{padding:20px;font-size:40px;line-height:1.8}
/* inline blank spans */
.dyk-blank{display:inline;font-weight:700}
.dyk-blank--pending{color:#dc2626;border-bottom:2px solid #dc2626}
.dyk-blank--active{color:#dc2626;background:#fee2e2;border-radius:4px;padding:0 2px;animation:dyk-pulse 1s ease-in-out infinite}
.dyk-blank--ok{color:#16a34a;font-weight:700}
-.dyk-blank--err{color:#dc2626;font-weight:700}
+.dyk-blank--err{font-weight:700}
+.dyk-blank--err s{color:#dc2626;text-decoration:line-through}
+.dyk-blank--err sup{color:#16a34a;font-size:.6em;font-weight:700;margin-left:1px}
@keyframes dyk-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* choice buttons */
@@ -152,7 +154,7 @@ body{
/* summary */
.dyk-summary{padding:20px}
-.dyk-summary-text{font-size:20px;line-height:1.9;margin-bottom:20px}
+.dyk-summary-text{font-size:40px;line-height:1.8;margin-bottom:20px}
.summary-score{font-size:18px;font-weight:700;text-align:center;color:#111;margin:0 0 20px}
.dyk-summary-back{display:block;width:100%;margin-bottom:32px}
.dyk-word--ok{color:#16a34a;font-weight:700}