これまで，スマートフォンで動作するwebアプリFasgramを断片的に開発してきましたが，ここで開発してきた機能を一つのライブラリにまとめました。
https://mmsankosho.com/fasgram-v10/fasgram1.0.zip
こちらで動作確認できます。
https://mmsankosho.com/fasgram-v10/
zipファイルにはライブラリであるfasgram.jsや，サンプルコードを動かすためのindex.html，fasgram-main.js，効果音のmp3などのファイルが含まれています。
コードの動作については，以前の記事を参考にしてください。
ライブラリのメソッドにアクセスすることで，英文法を学習できるさまざまな機能を実現することができます。
本ライブラリはオープンソースです。著作権者の許諾なしに自由に改変・再配布できます。
サンプルコード
ライブラリを扱うためのサンプルコードを示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>fasgram 英文法トレーニングwebアプリ</title>
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--jquery UI-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Serif&display=swap" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!--Fasgram-->
<script src="fasgram-main.js"></script>
<script src="fasgram.js"></script>
<link rel="stylesheet" href="./fasgram.css">
</head>
<body>
<div class="container">
<header>
<p class="size-4">英文法トレーニングwebアプリ fasgram<span class="badge">動作サンプル</span></p>
<div id="control-panel"></div>
</header>
<article>
<div id="display"></div>
</article>
<footer></footer>
</div>
<script>
main();
</script>
</body>
</html>まずは，htmlです。動作にはjquery，jquery UI，Font Awesomeが必要です。また，ここではGoogle Fontsも使用しています。
<script src="fasgram-main.js"></script>
<script src="fasgram.js"></script>
<link rel="stylesheet" href="./fasgram.css">Fasgramを動作させる部分です。fasgram-main.jsはhtmlの最後で呼び出している関数main()を記述しています。
fasgram.jsがライブラリ本体です。また，fasgram.cssも読み込んでください。
Fasgramのインスタンス
次に，関数main()を記述したfasgram-main.jsを見てみましょう。
//全体のフローチャート
async function main() {
const obj = {
selector: '#display', //問題文などを格納するセレクタ
control_panel: '#control-panel', //コントロールパネルを格納するセレクタ
local_storage_key: 'fasgram', //LocalStorageのキー
session_goal: 20, //スコアがこの値に達したときにセッションを終了する
//トレーニングごとに加算されるスコア
score_description: 1, //項目の説明
score_read_aloud: 3, //音読
score_filling: 5, //語句入力
score_sorting: 5, //並べかえ
score_selecting: 5, //語句選択
score_fail: -5 //不正解の場合のスコアの減算値
};
const texts = await load_texts('./data/data.json'); //問題文の読み込み
fasgram = new Fasgram(obj, texts); //fasgramのインスタンス
//トレーニング実行のしきい値 スコアが[最小，最大]の間で表示
const filter = {
description: {min: 0, max: 5}, //項目の説明
read_aloud: {min: 0, max: 10}, //音読
filling: {min: 0, max: 15}, //語句入力
sorting: {min: 10, max: 30}, //並べかえ
selecting: {min: 20, max: 30}, //語句選択
id_goal: 30 //それぞれの項目がこの値に達したら学習を達成したとみなす
}
await fasgram.auto(filter); //自動でトレーニングを行う
location.reload(); //ページを読み直して最初に戻る
}
//問題文の読み込み
async function load_texts(URL) {
const data = await fetch(URL, {cache: "no-cache"});
const obj = await data.json();
const obj_json = JSON.stringify(obj); //json文字列に変換
const texts = JSON.parse(obj_json); //配列に格納
return texts;
}ライブラリのメソッドの多くは逐次的に動作させるためにawaitを用いています。したがって，関数main()の先頭にasyncを付けておく必要があります。
fasgram = new Fasgram(obj, texts); //fasgramのインスタンスまず，クラスのインスタンスを実行します。
インスタンスとは実体化とも訳されますが，Fasgramを動かすために初めに電源を入れるような動作だと解釈しても良いでしょう。
Fasgramには引数として初期設定を格納したオブジェクトobjと，問題文のデータを格納したオブジェクトtextsを渡します。
objの中身を見てみましょう。
selector: '#display', //問題文などを格納するセレクタ
問題文などを格納するセレクタを指定します。
htmlの中で<div id="display"></div>とされているブロック要素に問題文などが表示されます。
control_panel: '#control-panel', //コントロールパネルを格納するセレクタ同様にコントロールパネルを格納するセレクタを指定します。
画面上部のコントロールパネルにはセッションの進捗を示すプログレスバーやボタンが表示されます。
local_storage_key: 'fasgram', //LocalStorageのキーLocalStrageのキーを指定します。
現在のところ，Fasgramは学習の記録をLocalStorageに保存します。LocalStorageはブラウザ自体にデータを保存する仕組みで，キーと値 のセットでデータを保存します。ここでは保存に用いるキーを指定します。
fasgramはセッションの途中でも，その都度学習記録を保存します。したがって，セッションの途中でブラウザを閉じても，トレーニングを再開したときには，ブラウザを閉じた時点での学習状態から再開することになります。
session_goal: 20, //スコアがこの値に達したときにセッションを終了するセッションの終了点を指定します。画面上ではプログレスバーの右端の点を表します。セッションのスコアがこの値に達するとセッションを終了します。
//トレーニングごとに加算されるスコア
score_description: 1, //項目の説明
score_read_aloud: 3, //音読
score_filling: 5, //語句入力
score_sorting: 5, //並べかえ
score_selecting: 5, //語句選択トレーニングごとに加算されるスコアを指定します。
実行できるトレーニングは，項目の説明，音読，語句入力，並べ替え，語句選択の５種類です。項目の説明と音読ではトレーニングが表示された時点でスコアが加算されます。語句入力，並べかえ，語句選択では問題に正解した場合にこれらの得点が加算されます。
あとで説明しますが，これらのスコアは文法の各項目ごとに加算されます。したがって，fasgramの中ではセッションのスコアと，それぞれの項目ごとのスコアが存在します。
score_fail: -5 //不正解の場合のスコアの減算値不正解の場合のスコアの減算値を指定します。サンプルでは，問題に不正解の場合，その項目のスコアを５減らすことになります。
トレーニングデータ
また，Fasgramにはトレーニングのデータtextsを与えます。
data.json
[
{
"id": "不定詞の名詞的用法",
"description": ["<p class='size-4'>不定詞の名詞的用法</p><p class='size-1'>want to</p><p class='size-2'>～したい</p>"],
"en_sentence": "He wants to be independent of his parents.",
"ja_sentence": "彼は自分の親から自立したいと思っている。",
"fill_sentence": "He # be independent of his parents.",
"fill_answer": ["wants to"],
"sort_sentence": "He # his parents.",
"sort_option": ["wants","to","be","independent","of"],
"sort_answer": ["wants to be independent of"]
},
{
"id": "不定詞の形容詞的用法1",
"description": ["<p class='size-4'>不定詞の形容詞的用法</p><p class='size-1'>to ～</p><p class='size-2'>～するための</p><p class='size-3'>something to drink</p><p class='size-3'>飲むためのもの（飲み物）</p>"],
"en_sentence": "After a long walk in the fields I wanted something cold to drink.",
"ja_sentence": "野外での長い徒歩のあと，私は冷たい飲み物が欲しかった。",
"fill_sentence": "After a long walk in the fields I wanted something cold #.",
"fill_answer": ["to drink"],
"sort_sentence": "After a long walk in the fields I wanted #.",
"sort_option": ["something","cold","to","drink"],
"sort_answer": ["something cold to drink"]
},
{
"id": "不定詞の形容詞的用法2",
"description": ["<p class='size-4'>不定詞の形容詞的用法</p><p class='size-1'>to ～</p><p class='size-2'>～するための</p><p class='size-3'>a good way to lose weight</p><p class='size-3'>体重を減らすための良い方法</p>"],
"en_sentence": "The doctor explained to his patient that jogging is a good way to lose weight.",
"ja_sentence": "医者は患者にジョギングが体重を減らすのに良い方法であると説明した。",
"fill_sentence": "The doctor explained to his patient that jogging is a good way # weight.",
"fill_answer": ["to lose"],
"sort_sentence": "The doctor explained to his patient that #.",
"sort_option": ["jogging","is","a good","way","to","lose","weight"],
"sort_answer": ["jogging is a good way to lose weight"]
},
{
"id": "不定詞の否定not-to",
"description": ["<p class='size-4'>不定詞の否定</p><p class='size-1'>not to ～</p><p class='size-2'>～しないように</p><p class='size-3'>不定詞の否定の形は not to 動詞原形 となります。間違えて to not ～ としやすいので注意しましょう。</p>"],
"en_sentence": "My father told me not to work too hard.",
"ja_sentence": "私の父は私にあまりに働きすぎないように言った。",
"fill_sentence": "My father told me # work too hard.",
"fill_answer": ["not to"],
"select_sentence": "My father told me # work too hard.",
"select_option": ["not to","dont't","not","without"],
"select_answer": ["not to"],
"sort_sentence": "My father # too hard.",
"sort_option": ["told","me","not","to","work"],
"sort_answer": ["told me not to work"]
},
{
"id": "人の性質を表す語に用いるof",
"description": ["<p class='size-4'>人の性質を表す語に用いるof</p><p class='size-3'>It was careless <span class='color-blue'>of</span> you to leave the door unlocked.</p><p class='size-3'>ドアに鍵をかけないままにするとはあなたは不注意だ。</p><p class='size-3'>通常は It is ～ <span class='color-blue'>for</span> (人) to ・・・ ですが，kind，clever，careless など人の性質を表す語では <span class='color-blue'>of</span> が用いられます。</p>"],
"en_sentence": "It was careless of you to leave the door unlocked.",
"ja_sentence": "ドアに鍵をかけないままにするとはあなたは不注意だ。",
"fill_sentence": "It was careless # to leave the door unlocked.",
"fill_answer": ["of you"],
"sort_sentence": "It was # the door unlocked.",
"sort_option": ["careless","of","you","to","leave"],
"sort_answer": ["careless of you to leave"]
},
{
"id": "expect-to",
"description": ["<p class='size-1'>expect ～ to ・・・</p><p class='size-2'>～が・・・すると予想，期待する。</p>"],
"en_sentence": "I liked his new house, but I hadn't expected it to be so small.",
"ja_sentence": "私は彼の新しい家を気に入ったが，それがあれほど小さいとは予想していなかった。",
"fill_sentence": "I liked his new house, but I hadn't expected it # so small.",
"fill_answer": ["to be"],
"select_sentence": "I liked his new house, but I hadn't expected it # so small.",
"select_option": ["be","of being","to be","to being"],
"select_answer": ["to be"],
"sort_sentence": "I liked his new house, but I hadn't #.",
"sort_option": ["expected","it","to","be","so","small"],
"sort_answer": ["expected it to be so small"]
}
]サンプルとして上記のデータを用意しています。ここでは高校英文法の不定詞を学習するために６個の項目を用意しました。こうしたデータを独自に用意することで，オリジナルの問題でトレーニングを行うことができます。
id項目を識別する文字列
description項目の説明。サンプルにあるようにhtmlで記述します。
en_sentence英文。
ja_sentence日本文。
fill_sentence語句入力問題の英文。語句入力させたい部分を#で表す。#は文中に１か所だけ用いることができる。
fill_answer #に当てはまる解答。
select_sentence語句選択問題の英文。語句入力させたい部分を#で表す。#は文中に１か所だけ用いることができる。
select_option #に当てはめる選択肢。サンプルでは選択肢の数はすべて４個だが，実際には任意の数に対応する。それぞれの選択肢はその都度，ランダムな順番で表示される。
select_answer#に当てはまる解答。
sort_sentence並べ替え問題の英文。語句入力させたい部分を#で表す。#は文中に１か所だけ用いることができる。
sort_option #に当てはめる選択肢。それぞれの選択肢はその都度，ランダムな順番で表示される。
sort_answer 並べ替え問題の解答。
サンプルを見ると分かりますが，それぞれの項目は必須ではありません。学習項目によって並べかえ問題のみを実行する場合，並べかえと語句入力を実行する場合など，さまざまなパターンを用意することができます。
これらのデータをFasgramに与え，インスタンスを実行します。