jsPsychのプログラムをChatGPTに書いてもらう(もう少し頑張った編) #jsPsych7

前回

https://qiita.com/temochiz/items/806f7fd302b94db0c4bb
では、ChatGPTの書いてくれるコードが2021年以前ということで、現行のVer7系では動きませんでした。
残念。

まだできる事はある？

惜しいなーと思っていたんですが、 ChatGPT って、生成物に対してさらに細かいオーダーを出すと修正してもらえるんですね。
ならば、ver6のコードを書いてもらった後に、ver7の変更点を伝えてみたらどうだろう？

ということでやってみました。

ver6 のプログラムを書いてから

jsPsychでhello worldを書いてください。

この指示で ver6 のプログラムを書いてくれます。

hello.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, jsPsych!</title>
    <script src="https://unpkg.com/jspsych@7.3.1"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
    <link href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
    var timeline = [
      {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "Hello, world!",
        choices: jsPsych.NO_KEYS,
        trial_duration: 2000
      }
    ];

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.get().localSave('csv', 'data.csv');
        jsPsych.data.displayData();
      }
    });

    jsPsych.run(timeline);
  </script>
</html>

ver7 との違いを記述して、

そしてここからが本番で、ver7の文法を少しずつ確認して、最終的にこの指示にまとめました。

jsPsychはバージョンが上がっていて、一部の文法が変更されています。
プログラムには以下の内容を反映させてください。
-------------------------------------------------------------------------------------------------------
1.jsPsych本体とCSSの読み込みは以下に変更されています。
    <script src="https://unpkg.com/jspsych@7.3.1"></script>
    <link href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" rel="stylesheet" type="text/css" />
-------------------------------------------------------------------------------------------------------
2.使用するプラグインの  html-keyboard-response は、以下の書式になります。
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
-------------------------------------------------------------------------------------------------------
3.typeの記法は、
    type: 'プラグイン名',
から、
    type: jsPsychプラグイン名,
に、変更になりました。
    例) プラグイン  html-keyboard-response の場合は、
　  type: 'html-keyboard-response',
    ではなく、
    type: jsPsychHtmlKeyboardResponse,
と、記述してください。
-------------------------------------------------------------------------------------------------------
4.jsPsych.init()は廃止されたので削除してください。
その位置には
    var jsPsych = initJsPsych({
      on_finish: function() {
    //    jsPsych.data.get().localSave('csv', 'data.csv');
    //    jsPsych.data.displayData();
  }
});
と、書いてください。
-------------------------------------------------------------------------------------------------------
5.プログラムの最後に、
    jsPsych.run([トライアル変数名]);
で、実行します。
-------------------------------------------------------------------------------------------------------
6. choices: jsPsych.NO_KEYS は、
choices: "NO_KEYS" に、してください。
-------------------------------------------------------------------------------------------------------

プログラムをアップデートしてみる

その結果、修正したプログラムが生成されました。

hello.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <script src="https://unpkg.com/jspsych@7.3.1"></script>
  <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
  <link href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>

<body></body>

<script>
  var hello_trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: "Hello, World!",
    choices: "NO_KEYS"
  };

  var timeline = [hello_trial];

  var jsPsych = initJsPsych({
    on_finish: function() {
      // jsPsych.data.get().localSave('csv', 'data.csv');
      // jsPsych.data.displayData();
    }
  });

  jsPsych.run(timeline);
</script>
</html>

実行

これを保存して、起動してみると、、

できたーー！！!

一旦はここまでで満足。
次はもっと複雑なものにチャレンジです。