Use JavaScript to evaluate user response (compare two arrays)

Question

I am working on a script to evaluate user response by comparing two arrays. (This is a survey to understand how well they know the information to the word.) I already have the code that I need, for example, to make the user's response lowercase and break it. All I need to do is find the number of differences / errors. For instance:

var correctanswer = ["The","quick","brown","fox","jumped","over","the","lazy","dog"]; var useranswer = ["The","brown","fox","jumped","up","and","over","the","really","lazy","cat"]; alert(counterrors(correctanswer, useranswer)); 

In this particular example, executing the function I'm looking for will return that the user made 5 errors (they are omitted “fast”, added “up”, “and” and “really”, and “dog” is changed to “cat”). As you can see, two arrays can have different lengths.

Does anyone know how to approach this? I thought this would probably be a loop:

 for (x in correctanswer) { // compare correctanswer[x] to useranswer[x]... not sure how exactly. Seems tricky... } 

Thanks for watching this! I saw the John Resig diff solution ( http://ejohn.org/projects/javascript-diff-algorithm/ ) and other similar things, and even a few comparisons with arrays, but nothing worked, as I found, return all the differences, whereas I want to see how many differences there are. Thanks again for your attention and please let me know about any questions.

Update: Thank you so much Magnar for the answer! It worked great.

Answer 1

Why do you need a "Levenshtein distance" from two arrays.

This is an algorithm that calculates the number of additions, deletions and substitutions needed to convert one sequence to another.

The Wikipedia page I'm linked to has a pseudo code implementation. I made a line feed for JavaScript for you:

 var correctanswer = ["The","quick","brown","fox","jumped","over","the","lazy","dog"]; var useranswer = ["The","brown","fox","jumped","up","and","over","the","really","lazy","cat"]; console.log(calculate_levenshtein_distance(correctanswer, useranswer)); function calculate_levenshtein_distance(s, t) { var m = s.length + 1, n = t.length + 1; var i, j; // for all i and j, d[i,j] will hold the Levenshtein distance between // the first i words of s and the first j words of t; // note that d has (m+1)x(n+1) values var d = []; for (i = 0; i < m; i++) { d[i] = [i]; // the distance of any first array to an empty second array } for (j = 0; j < n; j++) { d[0][j] = j; // the distance of any second array to an empty first array } for (j = 1; j < n; j++) { for (i = 1; i < m; i++) { if (s[i - 1] === t[j - 1]) { d[i][j] = d[i-1][j-1]; // no operation required } else { d[i][j] = Math.min( d[i - 1][j] + 1, // a deletion d[i][j - 1] + 1, // an insertion d[i - 1][j - 1] + 1 // a substitution ); } } } return d[m - 1][n - 1]; } 

This will register 5 on the console. Which, as you will see, is the correct distance between the arrays. The student has not added lazy . Thus, this is 1 removal, 3 additions and 1 replacement.

Answer 2

I'm not sure if I fully understand what you want, but I think this is the solution.

 function counterrors(a, b) { var max = Math.max(a.length, b.length); var min = Math.min(a.length, b.length); var count = 0; for (var i = 0; i < min; i+=1) { if (a[i] !== b[i]) { count += 1; } } return count + max - min; // max - min for any extra things that don't match } var correctanswer = ["The", "quick", "brown", "fox", "jumped", "over", "the", "lazy", "dog"]; var useranswer = ["The", "brown", "fox", "jumped", "up", "and", "over", "the", "really", "lazy", "cat"]; alert(counterrors(correctanswer, useranswer));