theshafinahmed/sproutly

sproutly は何をしますか？

学習資料を、1つの自己完結型・オフライン対応のDuolingo風HTMLコースに変換します。あらかじめ構築されテストされたエンジンが、アプリ（タブ、戻るボタン、進捗状況、試験モード、数値判定、シミュレーター、マスコット）を処理します。あなたはコンテンツを書くだけで、その後2つのスクリプトでビルドと検証を行います。エンジンを再入力する必要はありません。

これは学習ツールであり、ゲームではありません。ハート、XP、連続記録、炎、リーダーボードはありません。進捗 = 完了したレッスンと理解した回答です。

ステップ0: エンジンを入手する（2秒）

SP="${SPROUTLY_HOME:-/tmp/sproutly}"
[ -f "$SP/scripts/build.js" ] || git clone --depth 1 https://github.com/theshafinahmed/sproutly "$SP"
ls "$SP/scripts"

このスキルがsproutlyリポジトリ内から読み込まれている場合は、代わりにそのフォルダをSPとして使用します。クローンがブロックされている場合（ネットワークなし）は、ユーザーにリポジトリをZIPファイルとして添付するよう依頼します。エンジンを手動で再構築しないでください。

ワークフロー

1. 取り込み. すべてのファイルを完全に読み取ります。ソースの順序で、すべてのトピック、定義、公式、例、演習をリストアップします。画像のみのスライドに注意します。重要なコンテンツが読めない場合は、その旨を伝え、スクリーンショットを依頼します。スライドの内容を決してでっち上げないでください。（ユーザーがトピックのみを指定した場合は、カリキュラムを計画し、表示し、承認を待ってから作成を開始します。）
2. ブロックされた場合のみ質問する（ファイルが読めない、無関係なコースが混在している、範囲が不明確など）。それ以外の場合は開始し、最後に1行で前提を述べます。
3. 計画. 6〜10ユニット、各2〜5レッスン、基礎を最初に、さらに自動的に最終ボスを含みます。カバレッジチェックリスト（すべてのソーストピックがレッスンに含まれていること）、図の計画、およびレッスンごとのシミュレーションプラン（または「なし、なぜなら...」）を作成します。
4. コンテンツファイルを書く ./content/ に（修正を小さく保つため、およびユーザーが高速化を要求した場合にサブエージェントが並行してユニットを書けるように、ファイルはユニットごとに1つ）。00-course.js は COURSE.title='...'; COURSE.slug='...'; のみを保持します。次に 01-unit.js、02-unit.js... それぞれが UNIT(...) を呼び出し、最後に 99-end.js で CHEAT(...) と COVERAGE(...) を呼び出します。
5. ビルド: node "$SP/scripts/build.js" Course-Name.html content/
6. 検証: node "$SP/scripts/verify.js" Course-Name.html --shots shots （生物学系の単語では --allow heart を追加）。構文、データ形状、独立した問題、数値判定、ref() 式に対するすべてのシミュレーション、図、すべてのレッスンの自動再生、戻るボタン、レイアウト、永続性、オフライン性、カバレッジをチェックします。FAIL と表示されたものだけを修正します（1つの小さなユニットファイルを編集し、再ビルドし、再実行します）。shots/*.png を一度確認し、明らかに壊れているものを修正して停止します。
7. 納品 SendUserFile を使用（display: 'attach'、1行のキャプション）。依頼がない限り、アーティファクトとして公開しないでください。

最終返信: 2〜3文、機知に富んだ友人のような口調で。何が含まれているか（ユニット、レッスン、問題、図、シミュレーション）、どんなブラウザでも開けること、オフラインでも動作すること、進捗がそのブラウザとデバイスに保存されることを述べます。前提や読めなかったものについて言及します。毎日使うよう、正直な後押しを1つ。手順を要約しないでください。

コンテンツAPI（すべてのヘルパーはすでにエンジンに存在します）

UNIT('ユニット名', '1行の説明', [ L('u1l1','レッスンタイトル',[ ...cards ], ['キーファクト1','キーファクト2']) ]);
T(タイトル, 本文, ビジュアライゼーション, {tip, mood, code})     // 説明カード。本文 = 文字列または短い文の配列。ビジュアライゼーション = svg文字列。mood: happy|think
WORK(タイトル, 問題, [[私たちがすること, 理由],..]) // 作業例、タップごとに1ステップ
Q(問題文, 正解, [間違い1, 間違い2,..], 理由, {viz, code, trap})  // 選択問題。正解を最初に書くこと。エンジンがシャッフルします。
TF(問題文, true|false, 理由, {viz, code, trap})
N(問題文, 答え, '単位', 理由, 許容誤差, {viz, code})  // 数値入力。許容誤差: 省略（1%）| {rel:0.02} | {abs:0.5} | {strict:true, rel:1e-6}
M(問題文, [[左,右],..], 理由)               // マッチング、右辺の値は一意である必要があります
SIM('slider'|'toggle'|'stepper', タイトル, テキスト, 設定)
RECAP(['プレーンバレット'], [['新しい単語','簡単な意味']])   // すべてのレッスンの最後のカード
CHEAT({formulas:[..], tables:[{title,head,rows}], glossary:[[用語,意味]], traps:[..]})
COVERAGE([['ソーストピック','レッスンID'],..])

テキストマークアップ: **太字**、`コード`、V_{D} 下付き文字、x^{2} 上付き文字、\n 改行。すべてHTMLエスケープされます。T/Q/N は code: を受け入れます（コードブロック、Cやプログラミングコースに最適）。Q(..., {trap:true}) は試験のトラップリストにも追加されます。

シミュレーション（常に task と notice を提供します。slider と toggle は ref を提供する必要があります）:

SIM('slider','オームの法則','テキスト',{
  inputs:[{id:'V',label:'電圧',min:1,max:24,step:1,def:12,unit:'V'}, ...],   // 1〜3個のスライダー。タイムラインスクラバーとしても使用可
  model:function(v){ if(!v.R) return {out:[],msg:'開回路: Rは0より大きくなければなりません'};
     var I=v.V/v.R; return {out:[{k:'I',label:'電流',val:I,unit:'A'}], fig:F.svg(...)} },
  ref:function(v){ return {I:v.V/v.R}; },   // 独立した再計算。verify.js が model() と比較します
  task:'Rを2倍にしてください。', notice:'電流は半分になります。' });
SIM('toggle', ..., {inputs:[{id:'A',label:'Aはオン',def:false}], model, ref, task, notice});
SIM('stepper', ..., {steps:[{caption:'...', fig:F.svg(...)}], task, notice});

SI単位（A, V, Ω, W, F, H, Hz, s...）は自動的に接頭辞（mA, kΩ）が付きます。すべてのエッジケース（ゼロ除算、負の数の平方根、0の対数）は、NaNではなく msg を返してガードします。

図形: F.svg(w,h,inner,label)、F.text、F.line、F.arrow、F.circle、F.dot、F.box、F.axes（{svg,X,Y} を返す）、F.plot(ax,fn,xmin,xmax)（曲線は実際の数式から来ます）、F.mem（C言語やコンピュータアーキテクチャ用のメモリセル）、F.centres、および回路: F.wire、F.res、F.src、F.gnd。さらに図形が必要ですか？ $SP/engine/js/figlib/ にファイルを追加してください（自動的にインライン化されます）。ヘルパーは汎用的に保ってください。

コンテンツルール: 5歳児に説明するように、しかし非常に詳細に

シンプルかつ完全で。一方を他方のために犠牲にしないでください。

• 好奇心旺盛な10〜12歳の子どもに向けて書いてください。短い文（約15語）。1枚のカードに1つのアイデア。最初に日常的な言葉、次に専門用語を入れ、その後はその用語を一貫して使用します。すべての専門用語は、最初に現れたらそのすぐ隣で説明します。「明らかに」「単純に」「自明に」「知っての通り」と決して書かないでください。
• 概念ごとの教授順序: なぜ存在するのか（問題）、1行での核となるアイデア、日常的な例え、次に正確なメカニズムまたは数式、最後に実数を使った小さな例。第一原理から、そして常に「なぜ」を。
• 完全: ソースにあるすべてのスライド、定義、公式、例、演習がどこかに現れます。複数のアイデアを1枚のカードに圧縮しないでください。レッスンは6〜14枚のカードで構成します。難しいアイデア = より多くの小さなカード。長くしないこと。
• 説明カード: 多くとも4つの短い文または1つの数式ブロック、およびオプションの図。説明カード2枚ごとに、多くとも1回は質問を入れてください。
• 数式カード: すべての記号を単位とともに名前を付け、各部分が増減したときに何が起こるかを平易な言葉で説明し、1つの小さな計算例を示します。
• すべてのレッスンは RECAP（3〜5つの箇条書きと新しい単語）で終わり、keys（1〜4つの1行の事実。リマインダーボタンで表示）を持ちます。
• 口調: 機知に富んだ親友。遊び心があり、少し皮肉で、正直で、根底には暖かさ。軽いジョーク。決して明瞭さを犠牲にしないでください。企業的な口調は避け、「素晴らしい質問ですね」とは言わないでください。
• アップロードされた資料が真実の情報源であり、その表記法も含みます。あなたが追加したものはすべて、例えば「補足、スライドにはありません」のようにラベル付けします。

すべての問題は単独で成立しなければならない

問題には必要なものがすべて含まれています: すべての値（単位付き）、条件、記号の意味、およびその図（{viz: ...}）。「上の回路」「前の例」「以前のように」「同じ値」「図」とは決して書かないでください。各問題をテストしてください: 「空白の画面で単独で、そのトピックを知っている学生が答えられるか？」（verify.js がこれらのフレーズをフラグします。）

数値はコードから生成する

ユニットファイルの先頭で定数を定義し、そこからテキスト、図、回答を導出します（examples/test-fixture/course.js を参照）。すべての数値回答はコードで計算し、手計算では行わないでください。入力された回答は、正しい四捨五入、カンマ区切りの小数、7.3e-3、22/3、末尾の単位を自動的に受け入れます。通常とは異なる処理が必要な場合にのみ tol を使用し、その場合は問題文でその旨を明記します（例：正確な四捨五入を要求する問題）。

図: 教える場所に描く

• 図が多い科目（電子電気工学、物理学、化学、生物学、幾何学、コンピュータアーキテクチャ、デジタル論理、データ構造、アルゴリズム、ネットワーク、C言語とメモリ）: 説明カードの約2枚に1枚、および多くの問題に図を入れます。
• 中程度の図が多い科目: 図が言葉に勝る場合（約3〜4枚に1枚）。
• 図が少ない科目（歴史、法律、文学、言語）: タイムラインや因果関係の流れを、レッスンごとに1〜2枚。言葉で十分な場合はなし。
• レイアウト変数から位置を計算します。ソースの記号標準を使用します。図が正しいか確信が持てない場合は、簡略化して「簡略化」とラベル付けします。シンプルで正しい図は、派手で間違った図に勝ります。

シミュレーション: 「感じる」ものがある場合のみ

変数を含む数式、段階のあるプロセス、タイムライン、波形、状態機械。定量的またはプロセス重視の科目では、ほとんどのユニットに少なくとも1つのシミュレーションを目指します。歴史や法律では不要です。合格する ref() チェックのないシミュレーションは、修正するか削除します。

問題の多様性

主に選択問題（信頼できる間違いの選択肢、1行の why を簡単な言葉で）、すべての計算問題に N、M でマッチング、よくある誤解に TF、そして資料が警告している混乱に対しては trap:true の問題。

固定済みの外観

視覚的な要素（パレット、丸みフォント、ユニットカラー、Pip（新芽ブロブのマスコット）、ずんぐりしたボタン、ダークモード、ズームなし、テキスト選択なし、下部タブ）はすべてエンジンに組み込まれています。Pipを変更したり、別のマスコットを考案したりしないでください。既存のブランド、キャラクター、ロゴを使用しないでください。コース名はその科目にちなんで命名してください。