Add support for typing multiple lines in answers

AnkiDroid (Android) Suggestions
4

Test this, put this code in cards > front template and save
Make sure the front field is called Front and the back field is called Back

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">

    <style>
        #feedback {
            margin-top: 10px;
            font-weight: bold;
        }
        .correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
    </style>
</head>
<body>


<div>
    <label for="front"> {{Front}} </label><br>
    <textarea id="front" rows="4" cols="50" placeholder="Type here..."></textarea>
</div>

<button id="checkButton">Check</button>

<div id="feedback"></div>

<script>
    const checkButton = document.getElementById('checkButton');
    const frontField = document.getElementById('front');
    const feedback = document.getElementById('feedback');


    const expectedText = "{{Back}}"; 

    checkButton.addEventListener('click', () => {
        const userInput = frontField.value.trim().replace(/<br\s*\/?>/gi, '\n').split('\n').map(line => line.trim());
        const actualExpectedText = expectedText.replace(/<br\s*\/?>/gi, '\n').split('\n').map(line => line.trim()); 

      
        const isCorrect = userInput.length === actualExpectedText.length && userInput.every((line, index) => line === actualExpectedText[index]);

        if (isCorrect) {
            feedback.textContent = "Correct!";
            feedback.className = "correct";
        } else {
            feedback.textContent = "Incorrect! Try again.";
            feedback.className = "incorrect";
        }
    });
</script>

</body>
</html>

If you are considering spaces or indents before and after the first word on the line, try this

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <style>
        #feedback {
            margin-top: 10px;
            font-weight: bold;
        }
        .correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
    </style>
</head>
<body>

<div>
    <label for="front"> {{Front}} </label><br>
    <textarea id="front" rows="4" cols="50" placeholder="Type here..."></textarea>
</div>

<button id="checkButton">Check</button>

<div id="feedback"></div>

<script>
    const checkButton = document.getElementById('checkButton');
    const frontField = document.getElementById('front');
    const feedback = document.getElementById('feedback');


    const expectedText = "{{Back}}"; 

    checkButton.addEventListener('click', () => {
        const userInput = frontField.value.trim().replace(/<br\s*\/?>/gi, '\n').split('\n').map(line => line.trim());
        const actualExpectedText = expectedText.replace(/<br\s*\/?>/gi, '\n').split('\n').map(line => line.replace(/&nbsp;/g, ' ').trim()); 

       
        const isCorrect = userInput.length === actualExpectedText.length && userInput.every((line, index) => line === actualExpectedText[index]);

        if (isCorrect) {
            feedback.textContent = "Correct!";
            feedback.className = "correct";
        } else {
            feedback.textContent = "Incorrect! Try again.";
            feedback.className = "incorrect";
        }
    });
</script>

</body>
</html>