Member Avatar for zacharysr

Hello, i am making a keyboarding site for my class, and i have a div with some text inside, when they type, i want to check if the text matches the text in the div, if it dosn't, i wan't to update a box with an "error count". How can i achive this?

  • 4 Contributors
  • 8 Replies
  • 305 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

For : two useful, different approaches depend on what should be measured. Count every mistyped keystroke as it happens (live counting), or evaluate the finished text against the target and count minimal edits (alignment). ’s question in post #9 is the practical fork: live counting needs keystroke history and backspace handling; alignment (edit-distance) avoids penalising later characters for an early insertion or deletion (the issue raised).

Live (per-keystroke) — simple, immediate feedback; treats each wrong keystroke as an error but can be adjusted to give credit if corrected. The basic idea is to keep a small history stack so a backspace can undo the last entry and decrement the error count if that last entry was erroneous:

// targetText = target string, inputEl = input/textarea element
let history = []; // {char, expected, wasError}
let errorCount = 0;

inputEl.addEventListener('input', () => {
  const typed = inputEl.value;
  if (typed.length > history.length) {
    const ch = typed[typed.length - 1];
    const exp = targetText[typed.length - 1] || '';
    const wasError = ch !== exp;
    history.push({char: ch, expected: exp, wasError});
    if (wasError) errorCount++;
  } else if (typed.length < history.length) {
    const removed = history.splice(typed.length);
    removed.forEach(r => { if (r.wasError) errorCount--; });
  } else {
    // same length: handle paste/replacement for last char
    /* update last history entry and adjust errorCount accordingly */
  }
  // update error display and highlightCurrent(typed.length)
});

Post-evaluation / alignment — compute minimal edits (insert/delete/replace) between typed and target and use that for the error count and highlighting. Levenshtein is a straightforward DP implementation that returns the minimal edit distance; backtracing the DP table yields per-character ops for highlighting:

function levenshtein(a, b) {
  const n = a.length, m = b.length;
  const dp = Array.from({length: n+1}, () => new Array(m+1).fill(0));
  for (let i=0;i<=n;i++) dp[i][0]=i;
  for (let j=0;j<=m;j++) dp[0][j]=j;
  for (let i=1;i<=n;i++) for (let j=1;j<=m;j++)
    dp[i][j] = Math.min(dp[i-1][j]+1, dp[i][j-1]+1, dp[i-1][j-1] + (a[i-1]===b[j-1]?0:1));
  return dp[n][m];
}

Practical tips: wrap each target character in a span and toggle a current class at index typed.length to indicate the next expected character. The live-history approach is best for immediate teaching and counting raw mistakes; the Levenshtein approach gives a fair final score and handles shifts caused by insertions/deletions (the problem described). Watch for paste/IME events, case sensitivity, trimming, and performance (DP is O(n*m) for long passages). Combining both—live history for UX plus a final alignment for scoring—often gives the best result.

Recommended Answers

All 8 Replies

Member Avatar for Airshow

Compare strings - true/false - easy.

Error count - unknown paradigm - difficult.

Member Avatar for Member #905211

for error count you could just simply loop through each character and compare to make sure they match. This has a problem though, if, for instance, the person types an extra space but doesn't correct for it, every character after the space will be wrong.

Member Avatar for Airshow

Exactly. Same happens for any omission or extra character. It's not a fair measure of fidelity as it penalises an early error far more than a late error.

I wonder if John Resig's Javascript Diff Algorithm might offer a way ahead? It won't give an error count but instead will generate a version of the typed string, highlighted on a word-by-word basis to indicate its differnece from the original. That's the best I can come up with.

DEMO

Edited by Airshow
Member Avatar for Troy III

Hello, i am making a keyboarding site for my class, and i have a div with some text inside, when they type, i want to check if the text matches the text in the div, if it dosn't, i wan't to update a box with an "error count". How can i achive this?

Is this a typing practice class?

commented: Yes this is for a class in my highschool. I am making it for my teacher +0
Member Avatar for Member #905211

Actually, it shouldn't be too hard to take that js file and have it output the number of errors as well. Good find Airshow.

Member Avatar for Airshow

Mmm, not so trivial Stb because the algorithm works on whole words rather than individual characters.

It helps to space-separate every character in the strings :

DEMO

But the behaviour is not perfect. Total errors should be the sum of "Errors" and "Omissions", however :

  • A single incorrect character results in an Error and and Omission.
  • It's hard to find a reliable way to suppress "omissions" for the as yet unattempted part of the text.
  • The algorithm isn't tollerant of gross errors; try typing "Pleeze retipe that."
Member Avatar for zacharysr

So how exactly would i do this? I'm more used to coding with php/html/css. And i'm more learning java. And this is confusing me,

I wan't it to count the errors. And show them which character they should be typing at the momment, so like highlet, or underscore the character there currently typing

Oh and by the way sorry it took a while to respond, it hasn't been letting me log into daniweb :(

Edited by zacharysr
Member Avatar for Troy III

And finally:
are you interested in counting all the typing errors as you go, or only the errors reflected at the final output?

The answer to this question is very important since it shapes the backbone of the algorithm.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.