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'}`
-          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 = `<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))