単純再認1（刺激のcsvインポート） はCanvasコンポーネントを使って単純再認課題を作成しましたが，HTML Pageコンポーネントを使っても作成してみます。画面への描画速度が重要でない場合には，HTML Pageコンポーネントを使った方が後々の拡張性は高いと思うので，記憶実験の場合はこちらがよいかもしれません。ただし，HTMLを書かないといけないので難易度はやや高くなります。なお，刺激セットのランダム割り当ては省略しますので，単純再認4（刺激セットのランダム割り当て追加） を参照してください。
構成は単純再認1（刺激のcsvインポート） と同様に学習段階，妨害課題，再認テスト段階とします。以下のようなコンポーネントを組み合わせることにします。
では，まず，学習段階を作成します。サイドペインの「＋」をクリックし，Page（HTML）を選んでください。続いて，「Page」という初期名を「item」に変更しましょう。
続いて，Contentに文字を配置しますが，最初に表示されているText/Instructionsは削除します（右側のゴミ箱をクリック）。消したら，Content内のグレーの「＋」をクリックして，「Raw HTML」を選んでください。「Raw HTML」はHTMLを直接記述するという書き方です。ここに以下のようなHTMLを書いてください。ボタン表示を消す（「Show submit button」を「Hide submit button」に変更する）のもお願いします。
<div class = "content-horizontal-center content-vertical-center">
${this.parameters.item}
</div>
classについての細かい解説はボックスをご覧ください。ここでは，itemというパラメータに格納された値（${this.parameters.item}）を画面中央に表示するという記述になっています。後ほどLoopを作成し，Loopのparametersを読み込んで，呈示する単語を変化させるため，現時点ではitemパラメータの値は設定されていません。そのため，動かしても何も画面には表示されません。
<aside> 💡 lab.jsには画面配置のためのclassセレクタがいくつか用意してありますが，よく使うものは以下の4つです。space-betweenとspace-aroundは要素ごとなので，<span></span>などで均等に並べたい要素を分ける必要があります。
content-horizontal-center：水平方向に中央揃え content-vertical-center：垂直方向に中央揃え content-horizontal-space-between：中央方向に左右の余白も含めて均等配置 content-horizontal-space-around：中央方向に均等配置
</aside>
次に，単語を1秒呈示するため，「Behavior」を選び，「Timeout」に「1000」と入力してください。ついで，注視点とブランクもそれぞれHTMLで作成しましょう。注意点は単語と同様にHTML Pageコンポーネントを追加し，${this.parameters.item}の代わりに「+」と書いてください。注視点，単語，ブランクを1つにまとめるため，Sequenceを追加します。Sequenceは「learningTrial」に名前を変更しておきます。その中にfixation, word, blankを入れてください。以下のような構造です。
次に単語を切り替え表示するために，Loopコンポーネントを追加し，その下に「learningTrial」をネストさせます。名前は「learningPhase」としましょう。そして，「learningPhase」のContentに学習刺激をパラメータとして設定していきます。今回は学習刺激として「リンゴ」，「バッタ」を入れてください。
ここまでで以下の画像のようになります。
