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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

GitHub のプライベートリポジトリ作成が無料になりました

GitHub において、無料ユーザーでもプライベートリポジトリが作成できるようになりました。 実際に無料アカウントで試したところ、リポジトリの作成ページで「Private」を選択することができました。 …

Firefox

Firefox にローカルプロキシを指定して WebSocket通信を仲介する際の注意点

Firefox にローカルプロキシを指定して WebSocket通信を仲介する際の注意点について説明します。

Git

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

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

JavaScript

npm のパッケージを最新版に更新する

目次1. npm のパッケージを最新版に更新するには?2. npm-check-updates を使ってプロジェクト内のパッケージを最新版にする手順1. npm-check-updates をインスト …

英辞郎

英辞郎 on the WEB はどこに行った?

最近、株式会社アルクのURL https://www.alc.co.jp/ は完全にコーポレートサイトになったようです。英辞郎 on the WEB は全く表示されなくなり、英単語を調べることはできま …