Field for typedAnswer on answer card

Anki Development
2

If you just want to get the text, which is typed into an input box, on the back side, you can do it with javascript without add-ons. Here is a card template example:

Front template 
{{Front}}
<div>
    <input id="input-box" type="text" autofocus placeholder="Type your answer here...">
</div>
<script>
    var isAnkiPc21 = typeof pycmd !== 'undefined';
    var typedAnswer = '';
    var inputBox = document.getElementById('input-box');
    inputBox.addEventListener('input', (event) => {
        typedAnswer = event.currentTarget.value;
        if (!isAnkiPc21) {
            // AnkiDroid, AnkiMobile, AnkiWeb
            try {
                sessionStorage.setItem('typedAnswer', JSON.stringify(typedAnswer));
            } catch (error) {
                console.log(`${error.name}: ${error.message}`);
            }
        }
    });
    if (isAnkiPc21) {
        setTimeout(() => inputBox.focus(), 0);
        // aqt_data/web/js/reviewer.js > function _typeAnsPress()
        inputBox.addEventListener('keypress', _typeAnsPress)
    }
</script>
Back template 
{{Front}}
<hr id=answer>
{{Back}}
<div id="typed-answer"></div>
<script>
    var output = '';
    if (typeof typedAnswer !== 'undefined') {
        // Anki 2.1(PC)
        output = typedAnswer;
    } else {
        // AnkiDroid, AnkiMobile, AnkiWeb
        try {
            output = JSON.parse(sessionStorage.getItem('typedAnswer'));
            sessionStorage.removeItem('typedAnswer');
        } catch (error) {
            output = `${error.name}: ${error.message}`;
        }
    }
    document.getElementById('typed-answer').textContent = `Your answer: ${output}`;
</script>

I have tested the card template on Anki PC(2.1.38), AnkiDroid, and AnkiWeb. FYI, it might be better to use anki-persistence for data persistence between front and back.

5 Likes