コンテンツを表示するためにHTMLを使用します。教示画面や調査フォーム等で使われます。

1. html.Screen

html.Screen([options])

「html.Screen（）」は，実行時にページの要素を変化させる実験のコンポーネントです。 クラスhtml.Screen（[options]） html.Screen（）の引数は１つだけです。HTMLの文字列がここに入ります。以下に単純なテキストを表示する画面を示します。

const screen = new lab.html.Screen({
  content: '<p>Hello world!</p>',
})

screen.run()

実行すると，画面が表示されます。つまり，提供されたコンテンツ文字列がページに挿入されます。

2. placeholders を使う

「parameters」にアクセスし，content内にplaceholders（変数）を挿入します。画面の準備時に変数の値が取得されます。 placeholdersは「$ { }」で区切られます。「parameters. XXX」の形式で指定します。また，データセットには「state. XXX」の形式でアクセスすることができます。「state.correct」の値を用いて，反応の正誤をフィードバックを画面に表示することが出来ます。以下は例です。

const parameterScreen = new lab.html.Screen({
  content: '<p>Hello ${ parameters.place }!</p>',
  parameters: {
    place: 'World'
  },
})

「placeholders」には任意のJavaScript式を含めることができるため，論理演算式をそのままプレースホルダーに挿入できます。「state.correct」によって「Well done!」を表示するか「Please have another go!」を表示するかを変える条件式を埋め込むことができます。

const feedbackScreen = new lab.html.Screen({
  content: '<p>${ state.correct ? "Well done!" : "Please have another go!" }</p>',
})

注意 プレースホルダー構文は，JavaScriptのテンプレートリテラルと同等になるように意図的に選択されています。したがって，プレースホルダーを含むコンテンツオプションを引用符（ 'または "）ではなくバッククォート（`）に配置したくなるかもしれません。そうすると，微妙な違いが生じます。設定しているオプションは通常の文字列ではなくなり，ブラウザのJavaScriptエンジンは，プレースホルダ内のコンテンツを計算し，結果が見つかるとすぐにその場所に結果を挿入しようとします。テンプレートリテラルメカニズムは，プレースホルダにプロンプ​​トを表示してバイパスするため，通常の機能を実行しません。 つまり，プレースホルダーが想定どおりの動作をしていない場合は，確認する価値があります。

オプション

「html.Screen（）」で使用できるオプションは，「core.Component」と同じです。次の例のように反応を取得できます。

const screen = new lab.html.Screen({
  content: '<p>Please press <kbd>s</kbd> or <kbd>l</kbd></p>',
  responses: {
    'keypress(s)': 's',
    'keypress(l)': 'l'
  },
})

screen.run()

同様に，指定された時間（ミリ秒単位）だけ画面を表示することもできます。

const timedScreen = new lab.html.Screen({
  content: '<p>Please press space, fast!</p>',
  timeout: 500, // 500ms timeout
  responses: {
    'keypress(Space)': 'response'
  },
})

短時間の，より正確なタイミングで呈示する場合は，「canvas.Screen（）」を使用することをお勧めします。 「Screen」には， 2つの新しいオプションがあります。

html.Screen.options.content