多肢選択型の評定課題をScreen (Canvas）ではなく，Page（HTML）で作成します。Sreenと異なり，Pageの方が評定項目が多い場合にはプログラムを作成しやすいかと思います。ただし，一部，HTMLのコードを書く必要があります。可能なら，評定課題（多肢選択・Screen使用） を先にお読みください。
今回も果物の画像の美味しさを評定する課題を作成します。以下の手順で，まず，果物の画像の表示までを作成します。
ここまでの動画を用意してあるので，参考にしてください。作成できたら，一度，実行してみて下さい。画像が表示されたかと思います。右下の「Continue」ボタンを押すと終了します。
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e9df4c3f-a8f3-4f0c-941f-baa9fcb05f03/_2020-06-03_15.40.59.mov
次に評定用のボタンを作成します。今回はHTMLというマークアップ言語を直接記述することでボタンを作成します。HTMLとは，ウェブベージとしてテキストや画像を表示するための言語です。Imageの下の「+」をクリックしてください。そして，「Raw HTML」を追加して下さい。このRaw HTML（生のHTML）にHTML言語でボタンを追加します。以下のコードをコピーして貼り付けてみてください。このコードは1点から5点までのボタンを表示するためのコードです。
<button id ="btn1">1</button><button id ="btn2">2</button><button id ="btn3">3</button id ="btn4"><button>4</button><button id ="btn5">5</button>
一度，動かしてみてください。以下のような画面になるかと思います。ボタンのレイアウトはともかく，無事に5つのボタンが表示されていますね。
HTMLでは<button>と</button>という記述に囲まれた文字が1つのボタンとして表示されます。idは各ボタンを識別するために付与しています（反応の記録に必要です）。それぞれ，1，2，3，4，5から構成されたボタンになっています。もし，1点から7点までのボタンを作りたい場合は6と7のボタンを追加すればOKです（今回は5点のままで進みましょう）。
さて，ボタンが表示できたものの，ボタンが左に固まってしまっているので，このボタンを均等に配置したいと思います。lab.jsでは配置用にCSSのclassがすでにいくつか定義されているので，classを利用します。CSSとはCascading Style Sheetsの略で，HTMLと同じマークアップ言語の1つです。CSSは主にレイアウトや見た目を制御します。ここではlab.jsでは定義されているcontent-horizontal-space-betweenというclassを指定したいと思います。以下のようにコードを書き換えてください。