[Dúvida] erro na alteração de bordas

Oi, Luanna, tudo bem?

Desculpe a demora em te responder!

O problema que você relatou ocorre, pois a variável comparavel está sendo definida como uma substring da variável frase que possui o mesmo comprimento que a variável digitado, mas isso não significa que as duas strings são iguais. A condição if(digitado == comparavel) só será verdadeira se o usuário digitar a sequência exata de caracteres na mesma ordem que aparece na variável frase, o que é muito improvável em virtude da quebra de linha que você mencionou.

Podemos corrigir esse problema realizando algumas alterações na função inicializaMarcadores(). Utilizamos o operador de igualdade estrita (===), que leva em consideração tanto o valor quanto o tipo das variáveis. Além disso, podemos aplicar também a propriedade trim() para remover os espaços em branco extras que estão presentes no início e no final da string.

Dessa forma o código seria escrito da seguinte maneira:

function inicializaMarcadores() {
    var frase = $(".frase").text().trim();
    campo.on("input", function() {
        var digitado = campo.val().trim();
        var comparavel = frase.substr(0 , digitado.length);

        if(digitado === comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });
}

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!