I would like to have a card template which combines a custom field filter with the type functionality.
Example
Suppose I have a filter, bracketed, which returns the bracketed portion of some text. Currently I have:
Field = Part of [this sentence] is bracketed.
{{Field}} = Part of [this sentence] is bracketed.
{{bracketed:Field}} = this sentence
{{type:Field}} = text box asking the user to type the sentence
I want to be able to write something {{type:bracketed:Field}} to ask the user to type ‘this sentence’, but this will ask the user to type the entire field not just the bracketed part. Is there a good way to accomplish my goal?
Though this is not the ideal way, I think what you want to achieve (or something similar) can be done with the built-in “typing in the answer” feature and Javascript. Here is an example:
Front template:
<div id="sentence">{{Front}}</div>
{{type:Front}}
<script>
var bracketedRegex = /\[.*?\]/;
var [pre, post] = `{{Front}}`.split(bracketedRegex);
var sentence = document.querySelector('#sentence');
var repl = '<span class="bracketed">[...]</span>';
sentence.innerHTML = sentence.innerHTML.replace(bracketedRegex, repl);
var typeans = document.querySelector('#typeans');
typeans.style.display = 'none';
var newInputBox = document.createElement('input');
newInputBox.type = 'text';
typeans.after(newInputBox);
newInputBox.addEventListener('input', (event) => {
const val = event.target.value;
typeans.value = `${pre}[${val}]${post}`;
});
// See aqt_data/web/reviewer.js > _typeAnsPress()
newInputBox.addEventListener('keypress', _typeAnsPress);
newInputBox.focus();
</script>
Back template:
<div id="sentence">{{Front}}</div>
{{type:Front}}
<hr id=answer>
{{Back}}
<script>
var bracketedRegex = /\[(.*?)\]/;
var [pre, _, post] = `{{Front}}`.split(bracketedRegex);
var sentence = document.querySelector('#sentence');
var repl = `<span class="bracketed">$1</span>`;
sentence.innerHTML = sentence.innerHTML.replace(bracketedRegex, repl);
var typeans = document.querySelector('#typeans');
document.querySelectorAll('.typeGood, .typeMissed').forEach((ele) => {
ele.innerHTML = ele.innerHTML.replace(`${pre}[`, '').replace(`]${post}`, '');
});
</script>
