Ankiで整序問題カードを作る（2023年書き初め）

正月についったーをだらだら見てるとAnkiで整序問題を実現されてる方の記事が目に入った。 qiita.com

そういえばこのあたり英語学習で課題感があるんだよなということで、GUIでぽちぽち問題を解けるようにするJSコードを2023年の書き初めとして書いてみた。 リポジトリはこちら。 github.com

導入方法

  1. main.f7fb95f5.jsをここからダウンロードする
  2. Ankiのcollection.mediaフォルダ以下の適当なパスにstep1でダウンロードしたファイルを配置する
  3. 適当な名前でノートタイプを新規作成し、カードのテンプレートに次のような設定を行う

Front

<div id="front">
{{Front}}
</div>

Back

<div id="back">
{{Front}}
<p id="sentence">{{Back}}</p>
<div id="root"></div>
</div>
<script defer="defer" src="main.f7fb95f5.js"></script>

注1: 上記のscriptのsrcにはcollection.mediaフォルダ直下からの相対パスを記載してください。適当なフォルダの下にファイルを配置した場合はsrc="フォルダ名/main.f7fb95f5.js"のように適宜変更します。 注2: Ankiのメディアクリーンナップ機能を使うことがある方は、このようなカードに属さずにテンプレートに属するファイル名の先頭にアンダースコア（_）を追加し、Ankiに削除しないように伝えるのがよいとのことです。

It does not scan question or answer templates, which is why you can’t place media references to fields in the template. If you need a static image or sound on every card, name it with a leading _ (e.g., _dog.jpg) to tell Anki to ignore it when checking for media. https://docs.ankiweb.net/media.html#checking-media

Style

.card {
    font-family: arial;
    font-size: 12px;
}

#sentence {
  display: none;
}

#app {
  text-align: left;
  color: black;
}
#app span {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#preview,
#editor {
  padding-top: 2em;
  margin: 2em;
}
#preview::before,
#editor::before {
  content: "";
  display: inline-block;
}
#preview span,
#editor span {
  padding: 0.5em;
  margin: 0.5em;
  display: inline-block;
}
#preview span {
  border: 1px solid #90b9fd;
  background-color: #b3d1ff;
}
#editor {
  border-top: 1px solid #c2c2c2;
}
#editor span {
  border: 1px solid #969696;
  background-color: #d9d9d9;
}

#result span {
  padding: 0.5em;
  margin: 0.5em;
  background-color: #d9d9d9;
  display: inline-block;
}
#result #expected,
#result #actual {
  margin: 2em;
}
#result #actual {
  border-top: 1px solid #c2c2c2;
  padding-top: 2em;
}
#result #actual .good {
  background-color: #62e576;
}
#result #actual .bad {
  background-color: #ea5a5a;
}

.nightMode #app {
  color: white;
}
.nightMode #preview span {
  border: 1px solid #6986b9;
  background-color: #6679a2;
}
.nightMode #editor {
  border-top: 1px solid #808080;
}
.nightMode #editor span {
  border: 1px solid #696969;
  background-color: #3d3d3d;
}
.nightMode #result #expected span {
  border: 1px solid #7c7c7c;
  background-color: #3d3d3d;
}
.nightMode #result #actual {
  border-top: 1px solid #808080;
  padding-top: 2em;
}
.nightMode #result #actual .good {
  border: 1px solid #3b8646;
  background-color: #27572e;
}
.nightMode #result #actual .bad {
  border: 1px solid #9d3b3b;
  background-color: #702c2c;
}
  1. 既存カードのノートタイプを上で作成したノートタイプに変更したり、あるいは新規作成したりする 次のように動作してればOK。

感想

公園を散歩しながら設計20分、最初の動くところまでのプロトタイピング1時間、いくつかの課題を解決しながらWin/Android両対応にするのに3時間、デザイン調整に30分、この記事を書くのに10分。約5時間でできたのでコスパは良かった。 だんだん脳がReactに馴染んできて、React以外でこういうアプリを書くのはしんどいかもしれない。