実験プログラムの作成に入る前に，jsPsychを使ったアンケートのプログラムがどのような構造を有しているのかを確認しておきましょう。
examplesフォルダの中のjspsych-survey-likert.htmlというファイルをテキストエディタから開いてください（ブラウザで開くとプログラムが実行されます）。
以上のようなコードが表示されるはずです（画像はVSCode）。
jsPsychによるブラウザ実験では，主に<script>タグ内でJavaScriptを使ってコンテンツを記述します。
一般的なHTMLファイルでは，<head>タグの中に文字コードやCSSファイルの指定など，ページ自体の情報を記述し，<body>タグの中にページに表示するコンテンツの内容を記述するようになっています（参考: HTML/CSSに関するガイド）。一方で，画像では，<body>タグが空で，代わりに<script>タグを使ってコンテンツの記述がされているのが分かると思います。<script>は，htmlファイルの中で，javascriptなどの他言語で書かれたファイルを読み込んだり，コードを埋め込んだりするためのタグです。
左のプログラムの構造を部分ごとに解説していきます。
<script src="../dist/jspsych.js"></script>
<script src="../dist/plugin-survey-likert.js"></script>"../dist/jspsych.js"のようにファイルのパスを指定しています。パスとはPC内のファイルの位置のことです。最初の../はこのファイルの位置を基準として1つ上の階層を指定するパスです。このファイル（jspsych-survey-likert.html）はjspsychフォルダの中のexamplesフォルダ内にあるので，ここではjspsychフォルダを指定していることになります。各ファイルの位置を変更する場合は，この記述も書き換える必要があります。<link rel="stylesheet" href="../dist/jspsych.css" />initJsPsych()を呼び出しています。initJsPsych()にはいくつかのオプションがあり，試行間の間隔や終了時の挙動などを設定することができます（参考: 公式サイト）。この例では，終了時に入力されたデータを表示する設定になっています。scaleという変数を定義しています。likert_trialという変数を定義しています。type: jsPsychSurveyLikertquestions: [
{prompt: ..., name: ..., labels: ..., required: ...}...]prompt・name・labels・requiredの4つのパラメータを指定しています。promptは表示される質問（"I like vegetables"）nameは回答データを保存する際の名前（Vegetables）labelsはリッカート尺度のラベル（scale; [C]で定義したものです）requiredは回答を必須とするか否か（true）likert_trial_random_orderという変数を定義しています。randomize_question_order というパラメータがtrueに，scale_width というパラメータが"500"に設定されています。これらはそれぞれ「質問項目の呈示順をランダム化するかどうか」と「表示されるリッカート尺度の幅」を意味しています。したがって，likert_trial_random_orderでは質問項目はランダム化されたうえで，500ピクセルの幅で表示されることになります。何も指定しない場合（[D]の状態），これらのパラメータはそれぞれfalseとnull（最大）になります。このようなパラメータのデフォルト値の設定も公式サイトに載っています。likert_trialとlikert_trial_random_orderというプログラムをこの順番で実行してください，と指示しています。
このプログラムをブラウザで開いて実行すると，上のように画面が表示されると思います。
1つ目と2つ目の画面が[F]の部分で指定したlikert_trialとlikert_trial_random_orderに当たります。
そして，initJsPsych()の中で終了時に結果を表示するように指定していたので，最後に結果が表示されました。
プログラムの中身と実際の見え方を突き合わせることで，コードがどのような意味を持っているのかを理解することができます。
さて，jsPsychを使ったプログラムの構造をざっと確認したところで，いよいよプログラムの作成に入ります。