Imprecision in correction when the user types an unexpected sequence of words.

[CaioHVectorA]

No exemplo acima, nota-se que ainda que eu tenha acertado uma palavra, ela não foi colorida em verde.

Por que isso Acontece?

const compareAnswer = (inputValue: string, correctAnswer: string[]) => {
  const inputWords = inputValue.toLowerCase().split(" ");
  const correctWords = correctAnswer.map((word) => word.toLowerCase());
  console.log({correctWords, inputWords})
  return correctAnswer.map((word, index) => {
    if (correctWords[index] !== inputWords[index]) {
    return (
      <span key={index} className="text-red-500 ml-1">
      {word}
      </span>
    );
    } else {
    return (
      <span key={index} className="text-green-500 ml-1">
      {word}
      </span>
    );
    }
  });
  };

O código da função recebe uma string(que depois é transformada em array) e outra array, que depois são comparadas em conjunto utilizando o mesmo índice. Desta forma, se ocorre uma descrepância de lengths, a função já funciona incorretamente. É certo que na maioria das vezes isso não acontece, mas por exemplo, no texto: "Ensuring cross-browser compatibility" o usuário pode errar e utilizar sem o hífen, o que já provoca esse bug.

[digzom]

No exemplo acima, nota-se que ainda que eu tenha acertado uma palavra, ela não foi colorida em verde.

Por que isso Acontece?

const compareAnswer = (inputValue: string, correctAnswer: string[]) => {
  const inputWords = inputValue.toLowerCase().split(" ");
  const correctWords = correctAnswer.map((word) => word.toLowerCase());
  console.log({correctWords, inputWords})
  return correctAnswer.map((word, index) => {
    if (correctWords[index] !== inputWords[index]) {
    return (
      <span key={index} className="text-red-500 ml-1">
      {word}
      </span>
    );
    } else {
    return (
      <span key={index} className="text-green-500 ml-1">
      {word}
      </span>
    );
    }
  });
  };

O código da função recebe uma string(que depois é transformada em array) e outra array, que depois são comparadas em conjunto utilizando o mesmo índice. Desta forma, se ocorre uma descrepância de lengths, a função já funciona incorretamente. É certo que na maioria das vezes isso não acontece, mas por exemplo, no texto: "Ensuring cross-browser compatibility" o usuário pode errar e utilizar sem o hífen, o que já provoca esse bug.

A solução me parece apenas não considerar caracteres especiais na hora de fazer a validação. Se olharmos somente as palavras para validar, para a frase "Ensuring cross-browser compatibility", ao digitar "cross-browser ensuring compatibility", vai ficar tudo verde. Acho que ainda dá pra checar por índice, só que ignorando o hífen.

Mas também há a opção de apenas criar um diff estilo "linked list" onde uma palavra aponta para a próxima e vai validando palavra à palavra, na ordem (pulando o hífen).