jsPsychを利用する場合，２つの方法（ファイル構造）を選択することができます。それぞれにメリット/デメリットがあります。別の方法として，Rmarkdownを使って書く方法もあります。
具体的にそれぞれの例を示します。まず，1のhtmlファイルに直接，jsPsychのコードを書く場合です。質問紙のコードです。
<!DOCTYPE html>
<html xmlns="<http://www.w3.org/1999/xhtml>">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="MK lab" />
<title>Likert Demo</title>
<link href="jspsych/css/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 必要なプラグイン -->
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/plugins/jspsych-survey-likert.js"></script>
<!-- ここまで -->
<!-- 実験-->
<script type="text/javascript">
//選択肢を作成
const responseValues = [
'あてはまらない',
'あまりあてはまらない',
'どちらとも言えない',
'ややあてはまる',
'あてはまる'
]
//scale_widthの単位はpx
const askCatLiking = {
type: 'survey-likert',
questions: [{
prompt: 'わたしは猫が好きだ',
labels: responseValues,
required: true
}],
button_label: '次へ',
scale_width: 200
};
//実験を構成
let timeline = [];
timeline.push(askCatLiking);
jsPsych.init({
timeline: timeline,
});
</script>
<!--ここまで-->
</body>
</html>
つづいて，別のjavasriptfファイルとして実験部分を記述したものです。この場合は実験用のjavascriptファイル（main.js）と実験用html（index.html）に分かれます。なお，実験用htmlのファイル名は何でも大丈夫です。
//選択肢を作成
const responseValues = [
'あてはまらない',
'あまりあてはまらない',
'どちらとも言えない',
'ややあてはまる',
'あてはまる'
]
//scale_widthの単位はpx
const askCatLiking = {
type: 'survey-likert',
questions: [{
prompt: 'わたしは猫が好きだ',
labels: responseValues,
required: true
}],
button_label: '次へ',
scale_width: 200
};
//実験を構成
let timeline = [];
timeline.push(askCatLiking);
jsPsych.init({
timeline: timeline,
});
<!DOCTYPE html>
<html xmlns="<http://www.w3.org/1999/xhtml>">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="MK lab" />
<title>Likert Demo</title>
<link href="jspsych/css/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 必要なプラグイン -->
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/plugins/jspsych-survey-likert.js"></script>
<!-- 実験 -->
<script src="main.js"></script>
</body>
</html>
実験のjavascriptファイルをmain.jsとして保存しておき，実験用htmlの<!— 実験—>以下で読み込んでいます。実行時にはindex.htmlの方を開きます。
どちらの方法でも実験・調査の実施に問題はありませんが，実験用のコードが長くなる場合は別ファイルの方が書きやすいかも知れません。また，コードをエディタで書く際に言語に合った機能（例えば，コードのサジェスト機能）が使えるという利点もあります。なお，2の方法で自分で作成したjsPsychのコードを読み込む際には，実験のjavascriptファイルは一番最後に読み込むようにしましょう。
jsPsychで実験・調査用のコードを書く時，小林が調べた限り，2つのやり方が主流のようです。
1つ目はエディタを使い，html, javaScript（jsPsych）を書くという方法です。これはhtmlとjavascriptを別ファイルで書く方法です。専用のエディタを使うとJavascriptのコードのサジェスト，プラグインを読み込む際にもパス候補を出してくれるなどの支援機能が豊富ですので，JavascriptライブラリであるjsPsychのコードを書く際には便利です。小林はこちらの方法で書いています。
2つ目はRstudioとRmarkdownを用いて，RstudioでRmarkdownをhtmlで出力することでjavaScriptを含んだhtmlを作成する方法です。RstudioではRのコードは補完してくれますが，htmlやjavaScriptのコードは補完してくれないので，少し手間がかかります。ただし，Rのライブラリで刺激割り当てを行えたり，1つのファイルで完結するというメリットはあります。Rが得意な方はこちらがいいかもしれません。この方法については国里先生（専修大学）による説明が非常に参考になります。
jsPsychを用いた認知課題の作成1: jsPsychとJavaScript入門
1つ目のエディタでコードを書く際のには好きなエディタ（Atom, sublime text，Brackets，Visual Studio code（VScode）など）を使ってください。htmlのライブビューイング機能があると便利です。個人的なオススメは，adobe製BracketsやMicrosoft製のVScodeです。Bracketsはインストールするだけで日本語対応，htmlのライブビューイング機能があるので，拡張機能を探したりしなくても，そのままでも十分な機能をもっています。VScodeは拡張機能で日本語化，ライブビューイングなどを追加しないといけませんが，Gitとの連携が優れています。
A modern, open source code editor that understands web design