Data is not saved, only empty csv documents in data folder

[imkri]

Hi everyone,
I am having some trouble saving data in my experiment and I am not sure why. For each completion of the experiment there is a new document in the data folder, but the document does not contain any of the responses, it's completely empty. I have tried to follow the instructions in the tutorial as closely as possible, and I have tried different variants like saving at the end of the experiement through the initjsPsych() function, and with the CallFunction plugin. I have tried this online and with a local server (xampp), but the problem persist.

I have created a simple mock experiment to illustrate the problem, as the same problem with empty save documents occurs here.

index.html

<title>My experiment</title> <script src="jspsych/jspsych.js"></script> <script src="jspsych/plugin-html-button-response.js"></script> <script src="jspsych/plugin-call-function.js"></script> <script> var jsPsych = initJsPsych({ on_finish: function() { jsPsych.data.displayData(); } });

var timeline = [];

var test = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `This is a test`,
    choices: ["Next"]
};
timeline.push(test)


var option = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `Choose one option`,
    choices: ["One", "two"]
};
timeline.push(option)


function saveData(name, data){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'write_data.php'); // 'write_data.php' is the path to the php file described above.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({filedata: data}));
}

var savedataNow = {
    type: jsPsychCallFunction,
    async: false,
    func: function() { saveData(jsPsych.data.get().csv()); }
    }
timeline.push(savedataNow)


var end = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `Now the data should be saved`,
    choices: ["End"],
}
timeline.push(end)

jsPsych.run(timeline);

</script>

write_data.php

Any input is greatly appreciated. Thanks in advance :)

[imkri]

My code has been deleted from my post, I would guess for security reasons. So I will add it again here. Sorry for the inconvenience:

index.html
`

<title>My experiment</title> <script src="jspsych/jspsych.js"></script> <script src="jspsych/plugin-html-button-response.js"></script> <script src="jspsych/plugin-call-function.js"></script> <script> var jsPsych = initJsPsych({ on_finish: function() { jsPsych.data.displayData(); } });

var timeline = [];

var test = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `This is a test`,
    choices: ["Next"]
};
timeline.push(test)


var option = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `Choose one option`,
    choices: ["One", "two"]
};
timeline.push(option)


function saveData(name, data){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'write_data.php'); // 'write_data.php' is the path to the php file described above.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({filedata: data}));
}

var savedataNow = {
    type: jsPsychCallFunction,
    async: false,
    func: function() { saveData(jsPsych.data.get().csv()); }
    }
timeline.push(savedataNow)


var end = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `Now the data should be saved`,
    choices: ["End"],
}
timeline.push(end)

jsPsych.run(timeline);

</script> `

write_data.php
<?php // get the data from the POST message $post_data = json_decode(file_get_contents('php://input'), true); $data = $post_data['filedata']; // generate a unique ID for the file, e.g., session-6feu833950202 $file = uniqid("session-"); // the directory "data" must be writable by the server $name = "data/{$file}.csv"; // write the file to disk file_put_contents($name, $data); ?>

[ggreeley]

Hi @imkri -

I recently ran into this issue myself. I solved it by removing the name argument from the saveData() function, like so:

function saveData(data) {

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'write_data.php'); // see 'write_data.php'; should match the docs
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({filedata: data}));

    };

This potential solution was inspired by #2774 from @jodeleeuw. If the name parameter isn't being used, perhaps the data input is being evaluated in the name position, and the data parameter ends up empty/null. This would make sense with what I was experiencing, at least, such that a file would be written successfully but it would contain no data (0 bytes). Thus, keeping only the data parameter removes any ambiguity about where the data input should be evaluated. This is my representation of the problem - not sure if it's accurate.

A few other people have asked similar questions/ran into the same problem. I'm not sure why some folks would be impacted by this while others wouldn't, but this worked for me!

[imkri]

Hi @ggreeley
Thank you so much for your answer! This solved my problem, both in my local setup and online. I really appreciate it :)