Re: [jspsych] trouble while trying to save data

734 views
Skip to first unread message

Josh de Leeuw

unread,
Oct 24, 2016, 1:45:08 PM10/24/16
to alonb...@gmail.com, jsPsych
Hi there,

Are you running a local server on your machine, like XAMPP?

On Mon, Oct 24, 2016 at 12:37 PM <alonb...@gmail.com> wrote:
Hello,

I am new to jsPsych, and have ben trying to play around to see if I can use it for my experiment. For the mean time I want just to run the experiment on my computer, and save the data to a CSV file.

I have tried to follow the tutorial in order to do that, but I get an error.

If I run my experiment in Chrome, I get this error:

jquery.min.js:4 XMLHttpRequest cannot load file:///Users/neurotheory/Documents/Latent%20State%20Experiment/jsPsych_experiment/save_data.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

If I run it in Firefox, I get a different error:

no element found save_data.php:8:3
no element found experiment.html:8:3

Not sure what is the problem as I think I followed the tutorials...

here is my code:

the php file (as in the tutorial):

<?php
// the $_POST[] array will contain the passed in filename and data
// the directory "data" is writable by the server (chmod 777)
$filename = "data/".$_POST['filename'];
$data = $_POST['filedata'];
// write the file to disk
file_put_contents($filename, $data);
?>

the html experiment:

<!doctype html>
<html>
<head>
    <title>My experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="jspsych-5.0.3/jspsych.js"></script>
    <script src="jspsych-5.0.3/plugins/jspsych-text.js"></script>
    <script src="jspsych-5.0.3/plugins/jspsych-single-stim.js"></script>
    <link href="jspsych-5.0.3/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
</body>
<script>

    var post_trial_gap = function() {
        return Math.floor(Math.random() *1500) + 750;
    }

    var welcome_block = {
        type: 'text',
        text: 'Welcome to the expeiment. Press any key to begin!'
    };

    var instructions_block = {
        type: 'text',
        text: "<p>In this experiment, a circle will appear in the center " +
        "of the screen.</p><p>If the circle is <strong>blue</strong>, " +
        "press the letter F on the keyboard as fast as you can.</p>" +
        "<p>If the circle is <strong>orange</strong>, do not press " +
        "any key.</p>" +
        "<div class='left center-content'><img src='img/blue.png'></img>" +
        "<p class='small'><strong>Press the F key</strong></p></div>" +
        "<div class='right center-content'><img src='img/orange.png'></img>" +
        "<p class='small'><strong>Do not press a key</strong></p></div>" +
        "<p>Press any key to begin.</p>"
    };

    var test_stimuli = [
    {
        stimulus: 'img/blue.png',
        data: {toDo: 'go'}
    },
    {
        stimulus: 'img/orange.png',
        data: {toDo: 'no-go'}
    }
    ];

    var test_block = {
      type: 'single-stim',
      choices: ['F'],
      timing_response: 1500,
      time_post_trial: post_trial_gap,
      on_finish: function(data) {
        var correct = false;
        if (data.toDo ==='go' && data.rt > -1) {
            correct = true;
        } else if(data.toDo == 'no-go' && data.rt == -1) {
            correct = true;
        }
        jsPsych.data.addDataToLastTrial({correct: correct});
    },
    timeline: test_stimuli

}
svar timeline = [];
timeline.push(welcome_block)
timeline.push(instructions_block)
timeline.push(test_block)

function saveData(filename, filedata){
 $.ajax({
  type:'post',
  cache: false,
      url: 'save_data.php', // this is the path to the above PHP script
      data: {filename: filename, filedata: filedata}
  });
}

jsPsych.init({
    timeline:timeline,
    on_finish: function(data) {
        saveData("filename.csv", jsPsych.data.dataAsCSV()) }
    });


</script>
</html>

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/6e4bbf69-b5af-4f55-88ac-4660a9858b42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

alonb...@gmail.com

unread,
Oct 24, 2016, 2:11:21 PM10/24/16
to jsPsych, alonb...@gmail.com
I did install XAMPP, and it is running (I get to the http://localhost/dashboard/ when I hit "localhost").

I guess I don't really understand what it means to run a local host - do I need to somehow open my html file through XAMPP? how do I do that?

Sorry for the ignorance, I assume these are very basic questions...

Josh de Leeuw

unread,
Oct 24, 2016, 2:17:29 PM10/24/16
to alonb...@gmail.com, jsPsych
Yes, you need to serve the PHP file through the XAMPP server. PHP has to be run through the PHP engine, which the XAMPP install includes. I'd suggest looking for a quick getting started tutorial on XAMPP to see how to serve the html and php through the server (it should be as simple as copying it to a particular directory that was created when you installed XAMPP).


To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/c6ad7b2d-2c0f-4086-9d0a-9a9e7745702f%40googlegroups.com.

alonb...@gmail.com

unread,
Oct 24, 2016, 7:55:13 PM10/24/16
to jsPsych, alonb...@gmail.com
Thanks a lot for your quick and helpful replies.

I copied the html and the php files (together with all the rest of the necessary jsPsych files) to the directory of the server /Applications/XAMPP/htdocs - such that when I go to localhost/ in my browser I can launch the experiment. However I still have issues:

1) In Chrome I still get the same error message as before:

jquery.min.js:4 XMLHttpRequest cannot load file:///Users/neurotheory/Documents/Latent%20State%20Experiment/jsPsych_experiment/save_data.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

2) in Firefox, the experiment seems to run without any problem and reach it's end, however no data is being saved - the data/ folder I created for the data to be saved in (as instructed in the tutorial) is empty...

Any ideas?

Thanks again!

alonb...@gmail.com

unread,
Oct 25, 2016, 6:46:59 AM10/25/16
to jsPsych, alonb...@gmail.com
I think the problem is still in the access to the php file:

In Firefox, If I change the url of the php file in the saveData function to some nonsense, I don't get any error:

function saveData(filename, filedata){
$.ajax({
type:'post',
cache: false,
url: 'nonsense_url.php', // this is the path to the above PHP script
data: {filename: filename, filedata: filedata}

});
}

Similarly if I keep the correct url but write nonsense in the php file, I don't get any error.

I am running the experiment on localhost/ and the php file is in the same directory like the experiment.

Any ideas?

alonb...@gmail.com

unread,
Oct 25, 2016, 7:46:23 AM10/25/16
to jsPsych, alonb...@gmail.com
Actually if I change the version of jquery to 3.1.1, then I get an error if the URL is wrong.
BUT, it still doesn't seem like the php script is being accessed when I run experiment.html because there is no error if I write nonsense in the save_data.php file.

Josh de Leeuw

unread,
Oct 26, 2016, 1:16:48 PM10/26/16
to alonb...@gmail.com, jsPsych

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/3b189734-5e49-45b8-831c-fb70ffb5d630%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages