ラボラジアン 1. はじめに
Anki のカードでは、[解答を表示] ボタンを押す操作を JavaScript のコードで実行することができます。
2. 実現方法
まず、カードの「表面のテンプレート」に、解答を入力するフィールド「{{type:○○○}}」を追記します。このフィールドは、CSS を使って非表示にしておきます（style="display:none"）。
<div style="display:none">
{{type:Answer}}
</div>
このフィールドは実際のカードでは、<input type="text" id="typeans" ...> というHTML要素に変換されますが、この HTML要素に対して Enter キーを押すと、[解答を表示] ボタンを押したのと同じ動作をさせることができます。
この操作を JavaScript コードで実現したのが以下の関数です。
これも「表面のテンプレート」に記述します。
function clickFunction(userAnswer){
// type:XXXX フィールドである input 要素を取得します
let input = document.getElementById("typeans");
// ユーザーの出した答えをinput 要素にセットします
input.value = userAnswer;
// インプットフィールドで Enter キーを押すイベントを生成します
let ev = new KeyboardEvent('keypress', {
key: 'Enter',
code: 'Enter',
keyCode: 13
});
// このイベントを実行します
input.dispatchEvent(ev);
}
typeansという Id を指定して、「解答を入力するフィールド」を表すHTML要素を取得しています。- 引数で受け取った値を、この要素の
valueプロパティにセットします。 - この要素に対して Enter キーを押すイベントオブジェクトを作成し、dispatchEvent メソッドを実行して発火させます。
あとは、JavaScript コード内の「カードの表面を終了させたいところ」で、この関数を実行してください。
3. おわりに
Anki で複雑な JavaScript コードを実装したい場合に役に立つでしょう。
