手元のHTMLを分野ごとのフォルダへ整理したら、ページ間のリンクがまとめて切れました。../別分野/index.html のように、今いるファイルからの位置でリンクを書いていたためです。

ファイルを移すと、リンクに必要な ../ の数も変わります。今後もフォルダ構成を直す前提だったので、置き場所を基準にするリンクをやめることにしました。

結論

HTML教材で誤答した学習項目から復習先を探すなら、学習項目同士の「先に理解する項目から、後で学ぶ項目へ」という関係をJSONで持ちます。誤答した項目のIDだけでは、その項目より先に理解しておくべき項目のどれでつまずいたかまでは分からないため、関係を逆向きにたどって復習候補を出します。

「HTML教材の採点結果は、問題文ではなく学習項目IDに結び付ける」では、問題の正誤と学習項目IDを一緒に残す設計を書きました。ただし、誤答したIDから分かるのは、その問題が扱う学習項目です。

そこで僕は、学習項目同士の直接の前提関係をJSONで表しました。たとえば「関数」の前提が「変数」、「変数」の前提が「値」なら、関数の問題で間違えたときに、関係を逆向きへたどって変数と値を復習候補として並べます。

このJSONが示すのは、教材内で決めた学習項目の前後関係です。復習候補を整理するために使い、学習効果を測った結果としては扱いません。

結論

ブラウザで問題を解くHTML教材を作るなら、採点結果には正誤だけでなく、問題が扱う学習項目の固定IDも残します。問題文を後から直しても同じ項目の誤答として追えるため、復習対象を文章の比較に頼らず選べます。

「HTML教材の必須構成を、目視チェックリストからスクリプト検査へ移した」では、僕が章ごとのHTML教材を作り、各章に理解を確かめる問題を置いていることを書きました。その問題の採点結果を後から復習へ使うため、問題文とは別に、その問題が扱う内容を表す学習項目IDを持たせました。

たとえば関数を扱う問題なら、採点結果へ正誤と concept-functions を一緒に残します。

これなら問題文を読みやすく書き直しても、同じIDの結果を同じ学習項目として扱えます。問題が扱う学習内容そのものを変えるときだけ、新しいIDに分けます。

正誤はその問題の結果、学習項目IDは復習する範囲を特定する手がかりとして、役割を分けて残します。

僕は、ソフトウェアアーキテクチャなどを学ぶための教材を、1章につき1つのHTMLページとして作っています。各章は、見出しで学ぶ内容を分け、図で関係を示し、問題で理解を確かめ、復習リンクから前の項目へ戻れる構成です。

章の中から必要な要素が1つ抜けても、HTMLページ自体はブラウザに表示されます。そのため、章を追加するたびに目で探すだけではなく、必要な要素が欠けていたらエラーにするスクリプトを書きました。

スクリプトへ章のHTMLを渡すと、見出し・図・問題・復習リンクを順に探します。どれかが欠けた章はエラーになり、すべて含む章だけが検査を通ります。

この検査で分かるのは、必要なHTML要素が存在するかどうかです。画面上のカード配置や図の読みやすさは、別に画面を見て確認します。