Workshop とステーション
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
複数ペインのオーサリング空間でライブの Web 部品を作ります — 一緒に構築する段階、パラメトリック変数、TeachForge の外でページが必要なときのスタンドアロン HTML 書き出し付き。
AIが下書きできます。クラスに見せる内容はあなたが決めます。
HTML / CSS / JS とは
HTML / CSS / JS は複数ペインの Web オーサリング・ステーションです。マークアップ、スタイル、スクリプトを並べて書き、サンドボックスの iframe でページをプレビューし — 必要なときは — TeachForge の外で使えるスタンドアロン HTML ファイルを書き出します。
学習者が結果をすぐ見ると Web スキルが意味を持つからです。スタイルを変え、一緒に構築する段階を進め、小さなインタラクティブページを見せます — 何もデプロイせずにライブで。
教師が HTML / CSS / JS を使う理由
ライブWebデモ
HTML、CSS、JavaScript がリアルタイムで一緒に動く様子を見せます。
一緒に構築する授業
段階を取り込み、一歩ずつ Present して、クラスが構築を追えるようにします。
パラメトリックテーマ
CSS 値を一つずつ手で探す代わりに、操作で色と変数を動かします。
スタンドアロンの配布物
ステーションの外で使う一つの HTML ファイルを書き出します。
TeachForge では HTML / CSS / JS は Workshop ステーションです — 素早いコードスニペットだけでなく、指導用ページのために作られています。
HTML / CSS / JS Station の中
Workshop の他と同様、馴染みのオーサリングリズムがあります — 一つではなく三つのペインで。
- HTML、CSS、JS エディター 素早いペイン切替付き
- ライブまたは手動更新 サンドボックスの iframe プレビューへ
- 一緒に構築する段階 — 取り込み、ステップ、Present モード
- パラメトリック変数 再利用できるテーマと値の操作向け
- デバイスプレビュー枠、KaTeX などの任意ライブラリ
- スタンドアロン HTML 書き出し、高度な JSON、共有、埋め込み、Whiteboard 送信
ペインがページになる流れ
テンプレートから始めるか、三つのペインを編集する
授業が必要とするとき、段階とパラメトリック変数を加えます。
ライブまたは手動プレビューを実行
サンドボックスの iframe が、学習者が出会う形でページを見せます。
段階を Present するか、書き出すか、ライブに送る
結果をボードへ、質問へ、またはスタンドアロン HTML として外へ出します。
一つのページ。そのすべての版。
このステーションは次をサポートします：パラメトリック変数 と 一緒に構築する段階：ページ構造は保ち、テーマを変え、構築を順に見せます — わずかに違う HTML ファイルを十二個維持する代わりに。
教えながら変える
パラメトリック値を調整するか、Present モードで次の段階へ進みます。
構造は保ち、テーマを変える
同じページパッケージが、明日は違うアクセント、データセット、難度を見せられます。
完成だけでなく、構築を教える
段階があれば、クラスはページが組み上がる様子を見られます。
評価に近く保つ
ポータブルな JSON パッケージを保存し、後の授業やラボで再利用します。
代わりに素早い Run とコンソールのスニペットが必要ですか？Code Sandbox がその姉妹ステーションです。HTML / CSS / JS は、段階と書き出しのある著作者ページ向けです。
開始用のすぐ使えるページ
テンプレートを開き、授業向けに形を変えます：
| エリア | 開けるもの |
|---|---|
| 基礎 | 空白；プロフィールカード；Flexbox 遊び場 |
| 一緒に構築 | ボタン段階；カラーテーマ切替 |
| インタラクティブ | キャンバスアニメ；クイズ UI；データ表 |
あなたのやり方で AI ヘルプ
最初の下書きが必要ですか？AI を助手として使い — 学習者に届ける前に確認・編集・承認してください。
プロンプトをコピー
用意済みプロンプトを生成し、普段使うチャットツールに貼り付けます。
自分の GPU を使う
設定でローカルモデルのエンドポイントを接続し、自分で管理するハードウェアで生成します。
自分の API キーを使う
設定でプロバイダーキーを追加し、モデルを選んで自分のアカウントで生成します。
AIは間違えることがあります。だからこそ教師がループの中に残ります。
ページを指導が行われる場所へ
- Whiteboard — ライブボードに置き、クラスの前で調整します
- Quest Ladder — 質問と説明に入れます
- Virtual Lab — インタラクティブな実験作業の中で再利用します
- コミュニティ — 作ったものを共有し、他の教育者が共有したものの上に築きます