How to access response, which is collected as data by jspsych-html-slider-response

[ghost]

Hello,

I was looking into jspsych-html-slider-response, and it looks like this plugin collects the numeric value of the slider (response).

This is silly, but I have been struggling with figuring out how to access response. I have been checking whether I can correctly access the numeric value on the slider the user selected by displaying it on my console.

For some reason, this is the output:

I was assuming that response is the first element given by getLastTrialData, but I am pretty sure that my assumption is wrong? I actually was looking into jsPsych.data.getLastTrialData, and it looks like it returns a DataCollection (which I think is different from an array)?

Any help is much appreciated.

[becky-gilbert]

Hi @rmtham, based on the code block you posted, it looks like you're trying to access the trial data in the main level of the experiment script. All of the code that sets up your experiment timeline etc. will run when the page first loads, which means that at that point, there's no data (because the experiment hasn't started yet). So if you want to access the data during the experiment, then that code will need to go inside a function that runs at a particular point during the experiment. Typically this is done inside event-related callback functions, which are functions that you create that will run after certain events take place during the experiment.

In your case, if you want to check the response to trial1, you could move your code into a function that runs during the next trial. Here's an example:

var trial1 = {
  type: 'html-slider-response',
  // other parameters...
};
timeline.push(trial1);

var trial2 = {
  type: 'html-keyboard-response',
  stimulus: 'This is the next trial',
  on_start: function() {
    // when trial2 starts, check the data from the last trial 
    var last_trial_data = jsPsych.data.getLastTrialData().values()[0];
    console.log('last trial data: ', last_trial_data);
  }
};
timeline.push(trial2);

You could also check the response to trial1 in the on_finish function for that same trial. But in this case, you wouldn't access the trial data with the getLastTrialData function, because you want the data from the current trial. So instead it would look like this:

var trial1 = {
  type: 'html-slider-response',
  // other parameters...
  on_finish: function(data) {
    // when this trial ends, check the data
    console.log('trial data: ', data);
    console.log('response: ', data.response);
  }
};

Do either of those solutions work for you?

BTW you're absolutely right that the getLastTrialData function returns a data collection, so you'll need to use one of the data collection functions to work with the result. And if you just want to get the data out of the data collection, then you would use the values function, and then access the trial data by indexing the first (only) trial in the resulting array, which is exactly what you've done 👍

[ghost]

Hi Becky,

Thank you very much for the information! That makes a lot of sense, since I noticed that the information on the main level is always printed first, then the information within the trials.

I was trying to access the trial data on the main level because I am trying to keep track of whether a subject correctly guesses 5 token values consecutively. If not, the subject will be asked what the values of the tokens are until they correctly guess all of the 5 token values one after another.

One approach I thought that could work is creating a global variable to keep track of how many token values the subject correctly guesses after one round, then resetting this global variable to 0 once a round is finished. The global variable would be updated within the on finish function. However, I don't think global variables can be updated within trials.

I am not sure how to implement this, I am thinking of looking into the jsPsych documentation a little bit more.

If I still run into trouble, may I post on this discussion thread or would it be better if I create a new one?

[becky-gilbert]

Great, glad you got this working! Please let us know if you need help with anything else 😃

[SimonStephan31]

Dear @rmtham and @becky-gilbert I'm stuck with a very similar problem and given your last update, @rmtham , I think that you might be able to help me out. Here's my scenario:

I define a global variable called "cond_chosen". Then I show participants a trial called "select" in which they have to presse a key (they can press either "1" or "2"). Now all I want is to update "cond_chosen" and have this variable take on the value of the key response. The goal is that "cond_chosen" determines which trial is pushed to the timeline next. This sounds like a very easy problem, but I don't get it working. I achieve to recode "cond_chosen" within the trial "select" using "on_finish" function. But it does not seem to overwrite the global variable "cond_chosen." Here is a working code snippet:

///////////////////////////////////////////////////////////////////////////////////////////////////////////
var cond_chosen; // the global variable

var select = {
type: jsPsychHtmlKeyboardResponse,
stimulus: "select a condition: type in a number between 1 and 8.",
choices: ['1', '2'],
data: {
task: 'response',
},
on_finish: function(data){
console.log(data.response),
cond_chosen = data.response, // my attempt to change "cond_chosen" value within the trial
console.log(cond_chosen)
}
};
timeline.push(test);

var welcome = {
type: jsPsychHtmlButtonResponse,
stimulus:you chose:+cond_chosen+., // ideally, the text would even show what was chosen before
choices: ['Continue'],
on_start: function() {
// when trial2 starts, check the data from the last trial
var last_trial_data = jsPsych.data.getLastTrialData().values()[0];
console.log('last trial data: ', last_trial_data);
}
};

if (cond_chosen == 1) {
timeline.push(welcome); // here I wanted to try if I can use "cond_chosen" in a conditional
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////

Thank you very much in advance.

[becky-gilbert]

Hi @SimonStephan31, the problem here is that the timeline needs to be defined before the experiment starts. Your if statement at the bottom won't work because the experiment hasn't started when it runs, which is when the page first loads.

Instead you can add two conditional nodes to your timeline - one for each of the cond_choice values. Conditional nodes contain a function that runs during the experiment, so here you can check the earlier response and either run a timeline or skip it. For example:

var conditional_1 = {
  timeline: [welcome],
  conditional_function: function () {
    if (cond_chosen == 1) {
      return true; // run welcome trial
    } else {
      return false; // skip welcome trial
    }
  }
}

Also, you only need conditional nodes if you want the timeline to change depending on the condition. If the conditions run the same numbers/types of trials but only differ in terms of trial parameters (e.g. stimulus values, timing etc.) then you can do that just using dynamic parameters, without the need for conditional nodes.

I hope that makes sense! Let us know if you need more guidance.

[becky-gilbert]

Sorry, I just noticed an issue with your welcome trial too. The stimulus value needs to be wrapped in a function so that it runs during the experiment, after cond_chosen has been assigned a value:

var welcome = {
  type: jsPsychHtmlButtonResponse,
  stimulus: function () {
    return "you chose: "+cond_chosen;
  },
  etc.
}

The page on dynamic parameters that I linked to should help explain this.

And again - if you want to show the welcome trial for all conditions then you don't need any conditional nodes, you can just put this trial on your main experiment timeline and use dynamic parameters to change the stimulus text.

[SimonStephan31]

Dear @becky-gilbert thank you very much for your fast response. With your help, I managed to get this implemented. Have a merry Christmas and stay safe!