cimcirimcim

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'}`
+          // 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 = `<s>${esc(tok.userAnswer)}</s><sup>${esc(tok.answer)}</sup>`
+          }
         } 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 += `<span class="dyk-blank--${blank.correct ? 'ok' : 'err'}">${esc(blank.answer)}</span>`
+        if (blank.correct) {
+          inner += `<span class="dyk-blank--ok">${esc(blank.answer)}</span>`
+        } else {
+          inner += `<span class="dyk-blank--err"><s>${esc(blank.userAnswer)}</s><sup>${esc(blank.answer)}</sup></span>`
+        }
         wPos = blank.end
       })
       inner += esc(origText.slice(wPos, word.end))

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}