Some of my cards have newlines in them; for example, for studying code, so there’s also spaces for indentation.
I use Anki’s native “type in the answer” feature, but it doesn’t allow me to enter newlines, so I have to type my answers as one big line. My phone’s keyboard’s return key submits answers rather than enters newlines. I don’t see a way to enter newlines.
It would be better if I could type my answers as I’ve written the cards (i.e., with newlines and with spaces for indentation).
Someone had created an add-on to solve the problem, but they no longer support it. Someone forked that add-on, but comments suggest that it doesn’t work on AnkiDroid.
Native support in AnkiDroid would be ideal.
1 Like
Do you have the link for this addon that broke? Maybe I can take a look if the code is small
1 Like
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(/ /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>
1 Like
I cloned one of my notes types, replaced the entire front template with your code, left the back template as is, put some text in the Front field, and put a code sample in the Back field.
On Desktop Linux (2.1.65), I can type in the textarea, but clicking the “Check” button doesn’t do anything.
On AnkiDroid (2.18.4), my phone’s keyboard doesn’t appear, so I’m unable to type in the textarea.
I tried both templates you provided.
I tested it on Windows 10 and Anki version 24.06.3, version 23.12.1 and version 2.1.65 and it worked normally on all of them.
I tested it on Ankidroid and it worked.
I don’t have Linux, so I can’t test it.
I forgot to say, you have to make a copy of the basic note type (type the answer), it only works on that one, it doesn’t work on the basic one.
When I replaced the code sample on the Back with simple text, the Check button now works on Desktop and AnkiDroid.
But AnkiDroid doesn’t show me a keyboard, so I can’t type.
in ankidroid click inside the text box to show the keyboard for you to type
When I touch the text area, the border gets highlighted in orange and a cursor appears, but no keyboard appears.
I don’t know what it could be, on my ankidroid the normal keyboard appears to type, see the images
Thanks, @sorata! That did the trick. I get a keyboard now.
@eroscard, I experimented with the content of the Back field to see what was causing the Check button to not do anything earlier and found that it’s the double quote. This test case fails:
"test"
1 Like
