HTML、CSS、JavaScript の課題を出す

3つのペインとプレビュー

タブがそのままファイルです。プレビューは現在のページを分離されたフレームに表示したものなので、スクリプトが壊れてもプレビューが壊れるだけで、ほかには影響しません。

起動するサーバーも、デスクトップに保存するファイルもありません。そのため、Web 制作の単元のお決まりの最初の授業、つまり30人にファイルの保存先を教える時間が不要になります。

ページは生徒自身のブラウザー内で作られて実行されるので、Web の課題には「実行」ボタンも、待ち行列も、設定すべき実行時間もありません。プレビューが実行そのもので、入力に合わせて更新されます。HTML ペインに HTML ドキュメント全体を貼り付けた場合は、2つ目のページで包むのではなく、スタイルとスクリプトをその中に入れて、そのまま使われます。

教員が設定するものと生徒が提出するもの

最初の3つのファイルは教員が書き、そこに残した内容が各生徒の出発点になります。スタイルのないページ、ルールを書く場所にコメントだけがあるスタイルシート、あるいは3つとも空でも構いません。

Web の課題に4つ目のファイルは追加できません。3つのペインこそがこの課題の形だからです。これは意図的なもので、形が変わりうる課題は、採点者が推測しなければならない課題になります。

TypeScript 版の Web（TS）もあり、3つのペインは同じで、スクリプトが TypeScript になります。入力するそばからタブの中でコンパイルされ、止める側の「実行」がないため、型エラーでプレビューが止まることはありません。

レッスンの中で

レッスン内の Web または Web (TS) のコードブロックにも、同じ 3 つのタブと同じプレビューがあり、クラスはレッスンを離れずにページを変更できます。ブロックに書いた内容が各生徒の出発点になり、生徒の変更はそれぞれ自分のコピーに保存されます。先生のものが生徒の変更で動くことはありません。

ブロックの「生徒がこのページを編集して表示できるようにする」にチェックを入れます。ブロックを作った時点でオンになっています。オフにすると、これまでどおり読むためのコードとして表示されます。ページには実行ボタンも入力欄もありません。プレビューが実行そのものだからです。

よくある質問

フレームワークは使えますか？

素の HTML、CSS、JavaScript です。試験の科目仕様が求めているのもこれです。先に進んだクラスのために TypeScript 版も用意しています。

プレビューで生徒の JavaScript は実行されますか？

はい。サイトのクッキーや保存データを読めない分離されたフレームで実行されるため、無限ループがあってもプレビューが止まるだけで、ほかには影響しません。