勉強会_作問ツール特化_エンジニア向け_石黒友季子_20260524

エンジニア勉強会 / 作問ツール特化 作問ツールのしくみと作り方 ～ 良い問題の設計 × 1枚HTMLの実装（入力→プレビュー→出力）～ 題材：うさうさ作問スタジオ（オフライン動作の単一HTMLツール） 面白きこともなき世を面白く 石黒友季子

ORIENTATION 今日のゴールと進め方 ゴール 進め方（90分） ① 設計編：良い問題とは（25分） • 「良い問題」の設計原則を説明できる • 作問ツールの仕組み(入力/プレビュー/出力)が分か ② 実装編：ツールの仕組み（30分） る • 自分でも作問ツールを設計できる ③ 演習：作問する（25分） ④ 振り返り（10分）

WHY なぜ「作問ツール」が要るのか 量産が大変 品質がブレる 再利用しにくい 研修・試験のたびに大量の問題が 必要 作る人・回ごとに難易度や形式が 揺れる 紙やバラバラの形式だと使い回せ ない ツール化＝「形式を固定」して、量産・品質・再利用をまとめて解決する。

設計① 良い問題は『測る力』を設計する 何を測りたいかでレベルを分ける（うさうさ式 Lv.1/3/5） Lv.1 記憶 Lv.3 説明 用語・コマンドを思い出せるか 業務の文脈で説明できるか Lv.5 応用 トラブルを切り分け・対処でき るか

設計② 選択肢（ディストラクタ）を設計する 良いディストラクタ ダメなディストラクタ • ありがちな誤解を反映している • 明らかに違う（消去法で解ける） • 正解と同じ粒度・長さ • 長さや形式で正解がバレる • なぜ間違いか説明できる • ひっかけすぎ（実力で差がつかない）

実装 ツールの全体像：入力 → プレビュー → 出力 入力 プレビュー 出力 memo / TSV / auto で素早く書く その場で 出題画面を確認 HTML / CSV / TSV / JSON 作問スタジオの実装も、この3段で構成されています（次から中身へ）。

仕組み① プレビューは iframe で“隔離”して描く 編集画面のCSS/JSと、出題画面の見た目を混ぜない 編集側（ツールUI） 入力フォーム・ボタン・ リスト表示など プレビュー側（iframe） 受講生が見る 『出題画面そのもの』を 独立した文書で描画 → 編集UIの装飾が出題画面に漏れない。出力HTMLと同じ見た目を即確認できる。

仕組み② データ構造：書きやすい入力を“構造化”する 入力（人が書きやすい形）→ パース → 内部データ（配列/オブジェクト） memo形式 : 問題文→選択肢→正解 を行で区切って書く（parseMemo） TSV形式 : 表計算からコピペ（parseTSV / splitTabOrCsv） auto : 入力を見て形式を推定（setFmt('auto')） → パース後は1問＝1オブジェクト（問題文・選択肢[]・正解・分類など）。 配列にして、出題・採点・出力すべてを同じデータから回す。

仕組み③ 1つのデータから 出題・採点・出力 出題 採点 出力 ランダム抽出・ 分類で絞り込み（pick） 選択を集計して 正誤判定（scoreData） HTML/CSV/TSV/JSON で書き出し 分類バー（setClass）で範囲を絞り、必要な問題だけ出題・出力できる。

設計の勘所 エンジニアとして外せない3点 エスケープ 問題文にHTML記号が来ても壊れない（esc） オフライン/保存 外部依存ゼロ・localStorageで作業を失わない バリデーション 正解の欠落・選択肢不足を入力時に検知

AI ACTIVATION AIで“たたき台”、人で“精査” 人が確かめる AIに任せる • 問題案・選択肢の量産 • 正解が本当に1つか • ありがちな誤答(ディストラクタ)出し • 測りたい力(Lv)に合っているか • memo/TSV形式での出力 • 事実誤認・古い情報がないか

PITFALLS 作問の典型的な落とし穴 曖昧な問題文 正解が複数 ひっかけ過多 解釈が割れ、複数正解になる 『最も適切なものを』等で限定す る 実力でなく注意力テストになる プレビューで“受験者の目”で読み直すと、これらに気づける。

演習1（15分） 1つのトピックを Lv.1/3/5 で作り分ける 好きな技術トピックを1つ選び、同じ題材で3段階の問題を作ってみよう。 Lv.1 記憶 ✎ Lv.3 説明 ✎ Lv.5 応用 ✎

演習2（10分） ディストラクタ（誤答）を設計する 演習1のLv.1問題に、正解1つ＋『ありがちな誤解』の誤答3つを足す。 正解 ✎ 誤答① ✎ 誤答② ✎ 誤答③ ✎

REFLECTION 振り返り 1 今日いちばんの学び 2 自分の現場で作問ツールを使う場面 3 次に検証したい設計

今日の核 • 良い問題は『測る力』から設計する（Lv.1/3/5） • ツールは 入力→プレビュー→出力。データは1本に保つ • AIで量産、人で精査（正解の一意性・事実） お疲れさまでした。面白きこともなき世を面白く