jsPsychのプログラムをChatGPTに書いてもらう(悲しいお知らせ) #ChatGPT

最近話題の ChatGPT ですが、いろんなプログラム言語のコードを書いてくれます。
CでもPHPでもJavaScriptでも、ってところで、jsPsychの事を思い出して、入力してみました。

hello world

jsPsychでHelloWorldをして

結果

hello.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspsych/6.1.0/jspsych.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jspsych/6.1.0/css/jspsych.css">
</head>
<body>
  <script>
    var hello_world = {
      type: 'html-keyboard-response',
      stimulus: 'Hello World!'
    };

    jsPsych.init({
      timeline: [hello_world]
    });
  </script>
</body>
</html>

おおお！　これは、

もっと複雑なこともできるの？

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

jsPsychで画面中央に"+"を表示して、
次に画像を表示して、
キーボードで"f"か"j"を選択する。　画像は5枚でランダマイズする。
実験終了後はcsvで保存する。

結果

myexp.js

// Create an array of image paths
var images = [
  "path/to/image1.jpg",
  "path/to/image2.jpg",
  "path/to/image3.jpg",
  "path/to/image4.jpg",
  "path/to/image5.jpg"
];

// Shuffle the images array
images = jsPsych.randomization.shuffle(images);

// Define the trial for displaying a fixation cross
var fixation_cross_trial = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: [],
  response_ends_trial: false,
  trial_duration: 500
};

// Define the trial for displaying an image
var image_trial = {
  type: 'image-keyboard-response',
  stimulus: jsPsych.timelineVariable('image_path'),
  choices: ['f', 'j'],
  data: {
    image_path: jsPsych.timelineVariable('image_path'),
    response: jsPsych.data.getLastTrialData().key
  }
};

// Create the timeline
var timeline = [];
timeline.push(fixation_cross_trial);
timeline.push({
  timeline: images.map(function(path) {
    return {
      image_path: path,
      ...image_trial
    };
  }),
  timeline_variables: images.map(function(path) {
    return {
      image_path: path
    };
  })
});

// Start the experiment
jsPsych.init({
  timeline: timeline,
  on_finish: function() {
    // Save the data to a csv file
    var csv_data = jsPsych.

しゅごい、できてる..
その他でも

jsPsychで、被検者情報を入力する画面を作りたい。
入力するのは、
"被検者番号" (3桁)
"性別"(1:男、2:女、3:答えたくない)を、キー入力で選択
の2つで、1画面にまとめる。

なんて指示でもコードを書いてくれました。

もう毎度本家サイトでリファレンス読まなくてもできてしまうの！？

ところが

あら、これは、、、今となっては懐かしい jsPsych.init() ではないですか。
6.1.0 とか書いてあるし、今の7系にはしてもらえないの？

ということで追加で質問

chatGPTが学習したjsPsychのバージョンは何？

すると、

OpenAIは、2021年までのjsPsychのバージョンを学習しています。私たちは最新版のjsPsychには対応していませんので、ご注意ください。

うわあ、ちょうど後方互換性を捨てたあの頃に一致です。　がっくり。

結論

現在(2023年2月)の ChatGPT が生成してくれるプログラムはバージョン6です。
ですので、どうしてもプログラムを書きたくない場合は、自分でバージョン7にインポートするか
(参考) jsPsych6用のプログラムをjsPsych7用にインポートしてみた
バージョン6で実験する事になります。

そんなわけで、
・全くわかっていない人がChatGPTだけでjsPsychのプログラムを生成して実験するのは大変そう。
・今まである程度使い込んでいた人がChatGPTを使うと、開発効率は大きく改善される予感がする。
と考えます。

おまけ

データをローカルに保存するときに、ファイル名が被らないように時分秒を追加する関数も、調べるのが面倒だったのですが、

js で、指定した文字列に日付け時分秒(YYYYMMDDHHMMSS)を付加する関数を作って

で、さくっと書いてくれました。

sample.js

function addTimestamp(str) {
  var date = new Date();
  var year = date.getFullYear();
  var month = (date.getMonth() + 1).toString().padStart(2, '0');
  var day = date.getDate().toString().padStart(2, '0');
  var hour = date.getHours().toString().padStart(2, '0');
  var minute = date.getMinutes().toString().padStart(2, '0');
  var second = date.getSeconds().toString().padStart(2, '0');
  return str + year + month + day + hour + minute + second;
}

console.log(addTimestamp("Timestamp: "));

すごく便利ですね。
今後に期待です。

そして、、あきらめきれずに次回に続く
https://qiita.com/temochiz/items/950fd495e28e90f55147