Tools

Anki: JavaScript を使って「解答を表示」ボタンを押す

投稿日:2021年10月19日 更新日:

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 コードを実装したい場合に役に立つでしょう。

4. 参考

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Anki

HTTP Status Codes の 共有Anki デッキを改造する

HTTP Status Codes の 共有Anki デッキを改造してみました。

Anki

News in Levels を Anki デッキにする

News in Levels の記事を Anki デッキにしてみましたので紹介します。

Git

Git で管理を始める時に実行するコマンド

あるディレクトリを Git でバージョン管理する場合に、最初に実行しているコマンドを紹介します。 (1) Git で管理するディレクトリに移動 $ cd path/to/dir (2) Git管理開始 …

Windows

WSL のシンプルな導入手順(2019年1月版)

WSL (Windows Subsystem for Linux) の基本的な導入手順について書きます。 ここで最低限必要な使い方を理解した上で、サードパーティ製のターミナルエミュレータ(Cmder …

Anki

「AnkiWebに問題が発生しました」というエラーについて

「AnkiWebに問題が発生しました」というエラーが発生したときの話です。