Replies: 21 comments 72 replies
-
|
Hi Josh! I'm making an experiment with jsPsych and JATOS and am migrating my experiment to v7.0. I've started with one of my simple components, a Break trial, and I think it's going okay, but I'm getting an error from the part where I pass data to JATOS. Here is my error message: And here is my component code: <!DOCTYPE html>
<html>
<head>
<title>Odd One Out break</title>
<!-- These lines import all script sources, including the jsPsych JavaScript library, any plugin files
used, any supplemental files (e.g. stimuli lists for test trials, functions that are shared across multiple
components), the jsPsych CSS, and JATOS scripts. Most of these are contained within the study folder, and
so the full file path is not required at the beginning. -->
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/plugin-html-button-response.js"></script>
<script src="js/functions.js"></script>
<link href="jspsych/jspsych_edited.css" rel="stylesheet" type="text/css"></link>
<script src="/assets/javascripts/jatos.js"></script>
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
preload_audio: ['audio/bloop.mp3'],
on_data_update: function(data){ // on_data_update saves data after each trial and sends it to JATOS when the browser is closed
var studyID = jatos.studyResultId; // grabs Result ID generated by JATOS
this.jsPsych.data.addProperties({subject_id : studyID}); // adds subject column to data with Result IDs
var resultsRaw = this.jsPsych.data.get();
var results = resultsRaw.ignore('stimulus').ignore('trial_type').ignore('internal_node_id').ignore('time_elapsed'); // if you want to ignore certain columns in the output so the data output is a bit cleaner, doesn't include the "intern_node_id" or "time_elapsed" columns" in the output in this case
var resultsCSV = results.csv(); // convert results output to CSV
jatos.submitResultData(resultsCSV); // sends data to JATOS when the browser is closed
},
on_finish: function (data) { // on_finish will overwrite any data saved from on_data_update if all of the data gets sent in at the end
var studyID = jatos.studyResultId;
this.jsPsych.data.addProperties({subject_id : studyID});
var resultsRaw = this.jsPsych.data.get();
var results = resultsRaw.ignore('stimulus').ignore('trial_type').ignore('internal_node_id').ignore('time_elapsed');
var resultsCSV = results.csv();
jatos.submitResultData(resultsCSV, jatos.startNextComponent);
}
})
/* Initialize a general timeline for the component */
var timeline = [];
/* Create variable(s) containing button audio */
var bloop = new Audio("audio/bloop.mp3"); // for navigation buttons
/* Instructions page for the participant/their parent. */
var pause = {
type: jsPsychHtmlButtonResponse,
stimulus: "<span style='font-size:2vw;'><p><b>Great work!</b></p><p>This is a good time for a break. Take as long as you like before continuing.</p><p>Please leave this window open while you do so.</p></span>",
choices: ['Continue >'],
button_html: '<button style="position:fixed; width:11vw; left:calc(50vw - 7.5vw); bottom:0; margin:2vw;" class="jspsych-btn"; onclick=bloop.play()>%choice%</button>', // specify fixed width, calc for left should be 50vw (50% across screen) minus half width and 10 px (half the margin value)
data: {
test_part: 'pause_break'
},
post_trial_gap: 240, // inserted to allow the navigation button noise to finish
};
timeline.push(pause);
/* Start experiment and send results back to JATOS when it is done. */
jatos.onload(function() {
jsPsych.run(timeline);
});
</script>
</html>Do you have any thoughts about what I should change? Thank you for any help you can offer. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @kburkin, I think the issue here might be the use of the jsPsych.data.addProperties({subject_id : studyID}); // adds subject column to data with Result IDsThe |
Beta Was this translation helpful? Give feedback.
-
|
Oh! That was simple. Thank you, that works! |
Beta Was this translation helpful? Give feedback.
-
|
Hi Josh, I have another question! For my experiment, I'm using the image-button-response plugin, but previously I'd modified it to add an "I don't know" button that would appear after a minute of no response, following Becky's advice in threads #1294 and #1786 . I successfully made a copy of the plugin file and re-named it to match my study ("plugin-odd-one-out"/"jsPsychOddOneOut"), and tried to migrate the same changes into it, but I'm not sure where to put them within the plugin code or how they should be modified to match v7.0.0. The portions I'd added to the old plugin are as follows: // add the skip button HTML, add "unsure" to data as response, button is on right of screen
html += '<div class="jspsych-odd-one-out-button" style="display:block; position:fixed; width:13vw; left:calc(90vw - 8.5vw); bottom:0; margin:2vw;'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="skip-button" data-choice="unsure"><button class="jspsych-btn" style="visibility:hidden;" onclick=bloop.play()>'+"I don't know >"+'</button></div>';
display_element.innerHTML = html;
// timer to change the skip button to visible after 1 minute
jsPsych.pluginAPI.setTimeout(function(){
// get the skip-button div, then get all of the button elements inside of it, then select the first (only) one
document.getElementById('skip-button').getElementsByTagName('button')[0].style.visibility = "visible";
}, 60000);
// add click event listener to skip button
display_element.querySelector('#skip-button').addEventListener('click', function(e){
var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
after_response(choice);
});
// kill any remaining setTimeout handlers (at end of trial)
jsPsych.pluginAPI.clearAllTimeouts();Do you have any advice on how I should incorporate this into the new version? Thank you, |
Beta Was this translation helpful? Give feedback.
-
|
Any thoughts, @jodeleeuw? |
Beta Was this translation helpful? Give feedback.
-
|
I don't see anything obviously wrong here. Which line is line 335 where the error is generating? I'm not sure why this would be necessary without seeing the rest of your code, but you could try using an arrow function for the event handlers on the button click: .addEventListener("click", (e) => {I think this is very unlikely to solve the problem, but it can't hurt. |
Beta Was this translation helpful? Give feedback.
-
|
@jodeleeuw line 335 is below within the after_response function. The script for the plugin continues here: ...
// gather the data to store for the trial
var trial_data = {
rt: response.rt,
stimulus: trial.stimulus,
response: response.button,
};
// clear the display
display_element.innerHTML = "";
// move on to the next trial
this.jsPsych.finishTrial(trial_data);
};
// function to handle responses by the subject
function after_response(choice) {
// measure rt
var end_time = performance.now();
var rt = Math.round(end_time - start_time);
response.button = parseInt(choice);
response.rt = rt;
// after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded
display_element.querySelector("#jspsych-odd-one-out-stimulus").className += //line 335
" responded";
// disable all the buttons after a response
var btns = document.querySelectorAll(".jspsych-odd-one-out-button button");
for (var i = 0; i < btns.length; i++) {
//btns[i].removeEventListener('click');
btns[i].setAttribute("disabled", "disabled");
}
if (trial.response_ends_trial) {
end_trial();
}
}
// hide image if timing is set
if (trial.stimulus_duration !== null) {
this.jsPsych.pluginAPI.setTimeout(function () {
display_element.querySelector("#jspsych-odd-one-out-stimulus").style.visibility = "hidden";
}, trial.stimulus_duration);
}
// end trial if time limit is set
if (trial.trial_duration !== null) {
this.jsPsych.pluginAPI.setTimeout(function () {
end_trial();
}, trial.trial_duration);
}
else if (trial.response_ends_trial === false) {
console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.");
}
}
}
OddOneOutPlugin.info = info;
return OddOneOutPlugin;
})(jsPsychModule);Let me know if it's easier for me to send you my code all at once. Thank you for looking into this! |
Beta Was this translation helpful? Give feedback.
-
|
The error message is indicating that Can you check to make sure the ID matches the element you are targeting, and that the element hasn't been cleared from the page before the script hits this line? |
Beta Was this translation helpful? Give feedback.
-
|
@jodeleeuw I looked more closely at that line, and not only did it not match the elements I was working with, but as I understand it its purpose is to provide visual feedback that a response was selected. Since for my experiment the buttons make noises when you click them, I actually just removed that line altogether (first by commenting it out to test my theory), and my plugin is now working properly! Unless you have any reason a priori why it's important for me to include that element, I will leave it out. Thank you for your help! |
Beta Was this translation helpful? Give feedback.
-
|
Here is my experiment that i am trying to migrate to 7.0.0. I made all the changes on the migration guide, but I obviously missed something. Let me know if you can spot it. Thank you ! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rbruno1, really sorry for the long delay! Were you able to figure this out? Looks like the link isn't working anymore, but I'm happy to take a look if you can share your code or another link. |
Beta Was this translation helpful? Give feedback.
-
|
I was never able to figure it out! I gave up and just reverted back to the 6.3.1, and i have been stuck on it since. I would still love to update my code to work with JsPsych 7.0.0. here is the link https://9fuxuvckuo.cognition.run/ |
Beta Was this translation helpful? Give feedback.
-
|
@rbruno1 sorry again for the delay! (I'm on maternity leave and away from the computer a lot!) It looks like the experiment you linked to is the one that uses v6.3.1 - do you happen to have a separate link where you've mplemented your experiment with v7.0? If so, I can take a look at that one and see if I can spot the problem. One thing I noticed in this version is that you've created/added a custom plugin ("choose_option"). That might be the issue. One of the big changes with 7.0 is the way that plugins are written and how they interact with the jsPsych 'core' object. The documentation page about plugin development explains the changes, and the jspsych-contrib repo contains some templates for writing custom plugins for jsPsych v7.0, which you can read about in the jspsych-contrib readme. However it looks like your custom plugin just creates a drop-down selection question, so you could probably swap that for the "drop-down" question type in the 7.0 survey plugin, which would save you the trouble of migrating the custom plugin. |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone! I am struggling to understand how to set up jsPsych 7.0.0. I am trying to follow the tutorial on the jsPsych website, with the goal of downloading and hosting jsPsych on my computer. I downloaded [email protected] from the GitHub releases page and began to follow the Hello World tutorial for hosting jsPsych on one's computer. However, Step 2 of the tutorial says to "copy the contents of the dist folder", but I cannot find any folder called "dist." I also cannot find any file called "jspsych.js" or any files called "[plugin name].js." If you cannot tell, I'm a bit of a technophobe XD so if someone could clarify the process of downloading and hosting jsPsych on one's computer, I would be grateful! |
Beta Was this translation helpful? Give feedback.
-
|
Hi! If you look on the latest releases page (linked below), under [email protected] in the Assets section, there's a file for download call Dist archive. This is the one you'll want to download; it contains those files you specified. I hope that helps! |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I'm trying to migrate to [email protected] from version 6 -- a painful process given that the documentation seems not to be up to date. Typically, I have the following error message when I shuffle a vector using "jsPsych.randomization.shuffle":
I vaguely understand why given the new use of JsPsych. Yet, the documentation does not mention the alternative way of shuffling. Thanks! Bastien |
Beta Was this translation helpful? Give feedback.
-
|
Same for rt? |
Beta Was this translation helpful? Give feedback.
-
|
You can see the data generated by each plugin in its documentation. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, that all works. Part of the problem was that I missed more than one update. Thanks again! |
Beta Was this translation helpful? Give feedback.
-
|
Hi there! I am in the process of migrating to 7.2 and am having a recurring error with all my plugins by which I am getting the following error: 'Uncaught ReferenceError: jsPsychModule is not defined'. thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @alexaruel, I think this might be a different problem so I suggest creating a new comment in this thread, so that the problems/solutions are easier for others to find. It would also help if you could provide the code you're using to load jsPsych and the plugins. Thanks! 😃 |
Beta Was this translation helpful? Give feedback.
-
|
Hi, var feedbackPos = {
type: 'html-keyboard-response',
stimulus: function() {
var data = jsPsych.data.get().last(1).values()[0];
if(data.accuracy){
document.body.style.background = fdbColorCorrect;
return "Correct!"; //"Richtig!"
} else if (data.response == null) {
document.body.style.background = fdbColorIncorrect;
return "Too slow!"; //"Zu langsam!";
} else {
document.body.style.background = fdbColorIncorrect;
return "Wrong"; //"Falsch!"
}
},
choices: jsPsych.NO_KEYS,
trial_duration: trainingFeedbackDuration,
data: { trialPart: 'feedback' },
on_finish: function(){
document.body.style.background = backgroundColor;
}
};But this leads to a migration error and I have no idea how to solve it. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Schiwo , @jodeleeuw , I run my study in JATOS. Here's an example from one of my (working) JATOS components, in case that helps. I actually call JATOS commands within the jsPsych initialization, not the other way around. var jsPsych = initJsPsych({
on_data_update: function(data){ // on_data_update saves data after each trial and sends it to JATOS when the browser is closed
var studyID = jatos.studyResultId; // grabs Result ID generated by JATOS
jsPsych.data.addProperties({subject_id : studyID}); // adds subject column to data with Result IDs
var resultsRaw = jsPsych.data.get().filter([{test_part: 'test'}, {test_part: 'filler'}]); // only select trials with "test" and "filler" as their test_part
var results = resultsRaw.ignore('stimulus').ignore('trial_type').ignore('internal_node_id').ignore('time_elapsed'); // each "ignore" removes a column in the output so the results output is a bit cleaner
var resultsCSV = results.csv(); // convert results output to CSV
jatos.submitResultData(resultsCSV); // sends data to JATOS when the browser is closed
},
on_finish: function (data) { // on_finish will overwrite any data saved from on_data_update if all of the data gets sent in at the end
var studyID = jatos.studyResultId;
jsPsych.data.addProperties({subject_id : studyID});
var resultsRaw = jsPsych.data.get().filter([{test_part: 'test'}, {test_part: 'filler'}]);
var results = resultsRaw.ignore('stimulus').ignore('trial_type').ignore('internal_node_id').ignore('time_elapsed');
var resultsCSV = results.csv();
jatos.submitResultData(resultsCSV, jatos.startNextComponent); // send resultsCSV to JATOS, start next component if another component is selected to be run
}
}) |
Beta Was this translation helpful? Give feedback.
-
Yep this is exactly what I would do.
I can't think of a reason/example of why this would be necessary, but it might make things easier and offer more flexibility. I suppose there's also the potential for weird things to happen if initialization options are changed while the experiment is running... |
Beta Was this translation helpful? Give feedback.
-
|
Hey, first of all thank you for your super fast help. This is awesome! In principle, I think the problem is solved, however I have to make a decision in my script design and maybe you could advise me. <script src="src/jsPsych/jspsych.js"></script>
<script src="src/jsPsych/plugins-xyz.js"></script>
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<script>
jatos.onLoad(function() {
jsPsych.init()
}
</script>Now with the changes of 7.x, either I have to get rid of the jatos.onLoad funciton (however jatos documentation advises to use it): <script src="src/jsPsych/jspsych.js"></script>
<script src="src/jsPsych/plugins-xyz.js"></script>
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<script>
var jsPsych = initJsPsych()
jsPsych.run(timeline)
}
</script>Or I have to make sure the external scripts are loaded inside the jatos.onLoad function. But Iam unsure how to do this <script src="src/jsPsych/jspsych.js"></script>
<script src="src/jsPsych/plugins-xyz.js"></script>
<script>
jatos.onLoad(function() {
var jsPsych = initJsPsych()
<script src="scripts/script1.js"></script> //this needs to be loaded here
<script src="scripts/script2.js"></script> //this needs to be loaded here
jsPsych.run(timeline)
}
}
</script>Do you have ideas/suggestions? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Schiwo, ah, I see. I would definitely keep the <script src="src/jsPsych/jspsych.js"></script>
<script src="src/jsPsych/plugins-xyz.js"></script>
<script src="scripts/script1.js"></script> // now defines the function run_script1
<script src="scripts/script2.js"></script> // now defines the function run_script2
<script>
jatos.onLoad(function() {
var jsPsych = initJsPsych();
run_script1();
run_script2();
jsPsych.run(timeline);
}
</script>Does that work? Josh might have some other ideas. |
Beta Was this translation helpful? Give feedback.
-
Don't see any real advantages too, plus we would need to carefully exclude options that are used on init – easy to break and hard to maintain. If it's just about |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I am attempting to make the move from jsPsych 6.3 to 7 but am running into some scope issues, I think. My experiment is spread out across multiple JavaScript source files that are compiled at runtime with webpack. I have an The timeline function calls and imports additional scripts to help build trials, styling, etc.. In one of those scripts I access Is there a way to initiate jspsych in one file and have it callable across other separate experiment files? I feel like there is an easy solution that I am overlooking! Any help would be appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
What about passing your |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the information and suggestion @bjoluc. For most use cases, including the |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried something like this? const jsPsych = initJsPsych({
on_trial_finish: (data) => get_trial_data(data, jsPsych),
}); |
Beta Was this translation helpful? Give feedback.
-
|
Hello! I am trying to migrate a custom plugin from jsPsych 6.3 to 7.2. I started with a mix of @YoannJulliard's multiple slider plugin and the original I've then tried to update this custom plugin to jsPsych 7 and get the following error message: My plugin code is as follows: var jsPsychMultipleSlider = (function(jspsych) {
'use strict';
const info = {
name: 'multiple-slider',
description: '',
parameters: {
questions: {
type: jspsych.ParameterType.COMPLEX,
array: true,
pretty_name: 'Questions',
nested: {
/** The HTML string to be displayed */
stimulus: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Stimulus",
default: "",
},
prompt: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Prompt',
default: undefined,
description: 'Content to be displayed below the stimulus and above the slider'
},
// Labels to appear to the left of each slider, one in line with the top row ticks and one in line with the bottom
labels: {
type: jspsych.ParameterType.STRING,
pretty_name:'Labels',
default: [],
array: true,
description: 'Labels of the sliders.',
},
/** Array containing the ticks to show along the slider. Ticks will be displayed at equidistant locations along the slider. Note this parameter is called Labels in the original plugin.*/
ticks: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name:'Ticks',
default: [],
array: true,
description: 'Ticks of the sliders.',
},
name: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Question Name',
default: '',
description: 'Controls the name of data values associated with this question'
},
min: {
type: jspsych.ParameterType.INT,
pretty_name: 'Min slider',
default: 0,
description: 'Sets the minimum value of the slider.'
},
max: {
type: jspsych.ParameterType.INT,
pretty_name: 'Max slider',
default: 100,
description: 'Sets the maximum value of the slider',
},
slider_start: {
type: jspsych.ParameterType.INT,
pretty_name: 'Slider starting value',
default: 50,
description: 'Sets the starting value of the slider',
},
step: {
type: jspsych.ParameterType.INT,
pretty_name: 'Step',
default: 1,
description: 'Sets the step of the slider'
}
}
},
randomize_question_order: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Randomize Question Order',
default: false,
description: 'If true, the order of the questions will be randomized'
},
preamble: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Preamble',
default: null,
description: 'String to display at top of the page.'
},
button_label: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Button label',
default: 'Continue',
description: 'Label of the button.'
},
autocomplete: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Allow autocomplete',
default: false,
description: "Setting this to true will enable browser auto-complete or auto-fill for the form."
},
require_movement: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Require movement',
default: false,
description: 'If true, the participant will have to move the slider before continuing.'
},
slider_width: {
type: jspsych.ParameterType.INT,
pretty_name:'Slider width',
default: 500,
description: 'Width of the slider in pixels.'
}
}
}
class MultipleSliderPlugin {
constructor(jsPsych) {
this.jsPsych = jsPsych;
}
trial(display_element, trial) {
// half of the thumb width value from jspsych.css, used to adjust the label positions
var half_thumb_width = 7.5;
var html = '<div id="jspsych-html-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
if(trial.slider_width !== null){
html += 'width:'+trial.slider_width+'px;';
} else {
html += 'width:auto;';
}
html += '">';
// show preamble text
if(trial.preamble !== null){
html += '<div id="jspsych-multiple-slider-preamble" class="jspsych-multiple-slider-preamble">'+trial.preamble+'</div>';
}
if ( trial.autocomplete ) {
html += '<form id="jspsych-multiple-slider-form">';
} else {
html += '<form id="jspsych-multiple-slider-form" autocomplete="off">';
}
// add sliders questions ///
// generate question order. this is randomized here as opposed to randomizing the order of trial.questions
// so that the data are always associated with the same question regardless of order
var question_order = [];
for(var i=0; i<trial.questions.length; i++){
question_order.push(i);
}
if(trial.randomize_question_order){
question_order = this.jsPsych.randomization.shuffle(question_order);
}
for (var i = 0; i < trial.questions.length; i++) {
var question = trial.questions[question_order[i]];
// Add stimulus
html += '<div id="jspsych-html-slider-response-stimulus">' + question.stimulus + '</div>';
// add prompt
html += '<label class="jspsych-multiple-slider-statement">' + question.prompt + '</label><br>';
// add top left label
html += '<div style="font-size: 100%; font-weight: bold; position: absolute; left: calc(-30%)">' + question.labels[0] + '</div>'
// html += '<div style="font-size: 100%; font-weight: bold; position: absolute; left: calc(-33%)">' + question.labels[1] + '</div>'
// Add top row ticks in ascending order
for(var j=0; j < question.ticks.length; j++){
var label_width_perc = 95/(question.ticks.length-1);
var percent_of_range = 5 + j * (95/(question.ticks.length - 1));
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
var offset = (percent_dist_from_center * half_thumb_width)/100;
html += '<div style="border: 1px solid transparent; position: absolute; '+
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
html += '<span style="text-align: center; font-size: 80%;">'+question.ticks[j]+'</span>';
html += '</div>'
}
html += '<br>'
// add sliders
html += '<input style="width: 95%; float: right" type="range" class="jspsych-html-slider-response-response" value="'+(question.slider_start)+'" min="'+question.min+'" max="'+question.max+'" step="'+question.step+'" id="jspsych-html-slider-response-response-'+i+'" name="Q'+i+'" data-name="'+question.name+'"></input><br>';
// add bottom left label
html += '<div style="font-size: 100%; font-weight: bold; position: absolute; left: calc(-30%)">' + question.labels[1] + '</div>'
// Bottom row ticks - reverse the labels list and then do the same thing as before
var reversed_ticks = question.ticks.reverse()
for(var j=0; j < question.ticks.length; j++){
var label_width_perc = 95/(question.ticks.length-1);
var percent_of_range = 5 + j * (95/(question.ticks.length - 1));
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
var offset = (percent_dist_from_center * half_thumb_width)/100;
html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
html += '<span style="text-align: center; font-size: 80%;">'+reversed_ticks[j]+'</span>';
html += '</div>'
}
// add some space between the sliders
html += '<br/><br/>';
}
// add some space before the next button
html += '<br/>'
// add submit button
html += '<input type="submit" id="jspsych-multiple-slider-next" class="jspsych-multiple-slider jspsych-btn" value="'+trial.button_label+'"></input>';
html += '</form>'
html += '</div>';
html += '</div>';
display_element.innerHTML = html;
// require responses
if (trial.require_movement) {
// disable by default the next button
document.getElementById('jspsych-multiple-slider-next').disabled = true;
// check whether all sliders have been clicked
function check_reponses() {
var all_sliders = document.querySelectorAll('.jspsych-html-slider-response-response');
var all_clicked = true;
for (var i=0; i<all_sliders.length; i++) {
if (!all_sliders[i].classList.contains("clicked")) {
// if any one slider doesn't have the 'clicked' class, then we know that they haven't all been clicked
all_clicked = false;
break;
}
}
if (all_clicked) {
// if they have been clicked then enable the next button
document.getElementById('jspsych-multiple-slider-next').disabled = false;
}
}
var all_sliders = document.querySelectorAll('.jspsych-html-slider-response-response');
all_sliders.forEach(function(slider) {
slider.addEventListener('click', function() {
slider.classList.add("clicked"); // record the fact that this slider has been clicked
check_reponses(); // each time a slider is clicked, check to see if they've all been clicked
});
});
}
display_element.querySelector('#jspsych-multiple-slider-form').addEventListener('submit', function(e){
e.preventDefault();
// measure response time
var endTime = performance.now();
var response_time = endTime - startTime;
// create object to hold responses
var question_data = {};
// hold responses
var matches = display_element.querySelectorAll('input[type="range"]');
// store responses
for(var index = 0; index < matches.length; index++){
var id = matches[index].name;
var response = matches[index].valueAsNumber;
var obje = {};
if(matches[index].attributes['data-name'].value !== ''){
var name = matches[index].attributes['data-name'].value;
} else {
var name = id;
}
obje[name] = response;
Object.assign(question_data, obje);
}
// save data
var trial_data = {
"rt": response_time,
"responses": JSON.stringify(question_data),
"question_order": JSON.stringify(question_order)
};
display_element.innerHTML = '';
// next trial
this.jsPsych.finishTrial(trial_data);
});
var startTime = performance.now();
};
}
MultipleSliderPlugin.info = info;
return MultipleSliderPlugin;
})(jsPsychModule);Barring the high likelihood that I've just got a misplaced bracket or typo somewhere, I have one other idea about where the problem might be: I've looked at the guidance on how to migrate plugins and note the point on using functions like I'm sorry if this is a painfully simple problem, this plugin is really pretty hacked together because I'm very much not an experienced programmer. So any help would be much appreciated! (P.S. In case it's useful to see the experiment where I'm getting the error, it's here.) |
Beta Was this translation helpful? Give feedback.
-
|
Hi @akkeogh I think you are right that you need to convert the callback to an arrow function. Have you tried this? display_element.querySelector('#jspsych-multiple-slider-form').addEventListener('submit', (e) => { |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @jodeleeuw. Unfortunately it appears that was either not the problem or at least not the only one - I still have the same error message after making that change. |
Beta Was this translation helpful? Give feedback.
-
|
Not to worry, I figured out the issue - nothing to do with the plugin code itself, as it turns out! |
Beta Was this translation helpful? Give feedback.
-
|
I wrote a plugin (rok) for jsPsych Version 6 about a year ago. Now I adapted it to the new version 7 but I am having a hard time testing it. I cloned the jspsych-contib repository to my local system and then adapted an existing plugin (rdk). But I don’t exactly lnow how I can load the self-written plugin into an experiment. I used the ts-template. Is there an easy way to test this on my local computer? I was able to use new plugins (especially rdk) via installing them through npm: "npm install jspsych" and then npm "install @jspsych-contrib/plugin-rdk". But I don't know how I can test my own plugin (or even get it installed). |
Beta Was this translation helpful? Give feedback.
-
|
We have a development guide here that might be useful. It sounds like you'll need to build your plugin locally and then you can I confess I'm not yet an expert on navigating the node environment. @bjoluc may be the right person to chime in if you have any questions after reading through the development guide. And then maybe we can update the guide based on your feedback. |
Beta Was this translation helpful? Give feedback.
-
|
In the 6.x version, according to the guide, the connection to pavlovia worked well, but in 7.x, it is not connected. |
Beta Was this translation helpful? Give feedback.
-
|
Some info about upgrading Pavlovia to version 7 is available here: #1738 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, so I wrote all the code in 7.x (before asking), but it doesn't work in Pavlovia. |
Beta Was this translation helpful? Give feedback.
-
|
Hello I am getting Uncaught u MigrationError: A string was provided as the trial's `type` parameter. Since jsPsych v7, the `type` parameter needs to be a plugin object. Please follow the migration guide at https://www.jspsych.org/7.0/support/migration-v7/ to update your experiment.Is it because of the types in the parameters of the info? If yes what do I change to remove it? var MyPlugin = (function (jspsych) {
"use strict";
const info = {
name: 'survey',
description: '',
parameters: {
audios: {
type: jspsych.ParameterType.COMPLEX,
array: true,
pretty_name: 'Audios',
nested: {
transcript: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Transcript',
default: '',
description: ''
},
required: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Required',
default: true,
description: ''
},
audio_name: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Audio Name',
default: '',
description: ''
}
}
},
options: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Options',
array: true,
default: ["5", "4", "3", "2", "1"],
description: ''
},
randomize_audio_order: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Randomize Audio Order',
default: false,
description: ''
},
preamble: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Preamble',
default: null,
description: ''
},
rating_info: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Rating Information',
default: "1: Bad 2: Poor 3: Fair 4: Good 5: Excellent",
description: ''
},
transcript: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Transcript All',
default: null,
description: ''
},
button_label: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Button label',
default: 'Continue',
description: 'Label of the continue button.'
},
autocomplete: {
type: jspsych.ParameterType.BOOL,
pretty_name: 'Allow autocomplete',
default: false,
description: ""
},
test_name: {
type: jspsych.ParameterType.STRING,
pretty_name: 'Test name',
default: '',
description: ''
},
}
}; |
Beta Was this translation helpful? Give feedback.
-
|
Hi @shivammehta007, I think the error you're getting is actually from the way that your trial objects are created, rather than an issue with the parameter types in your plugin. In jsPsych v6, the var trial = {
type: 'html-keyboard-response', // <-- string
stimulus: "Hi, I'm version 6."
}But in jsPsych v7, you need to use the plugin's class for the var trial = {
type: jsPsychHtmlKeyboardResponse, // <-- class
stimulus: 'Hello, version 7.0!'
}Loading the plugin file should create the global variable that defines the plugin's class (e.g. You can read more about this and other v6-v7 migration changes in the "Migrating from 6.x to 7.x" section in the docs. You can also look at the plugin documentation pages to see some examples of how to create trial objects in jsPsych v7. |
Beta Was this translation helpful? Give feedback.
-
|
Aha! Thank you, Is there any location where I can find the mapping between the previous string-based responses and the new plugin class objects? Or just the list of possible responses now? |
Beta Was this translation helpful? Give feedback.
-
|
I don't think we have a list of the plugin classes anywhere, but they are written in a standard way. This is from the Migrating docs page that I mentioned above:
So the plugin classes always start with 'jsPsych', and then instead of hyphens you just have the next word starting with a capital letter, e.g. 'html-keyboard-response' -> |
Beta Was this translation helpful? Give feedback.
-
|
Hi Josh, first of all thank you for providing the community with jsPsych and this support forum here. We have tried to combine an existing RDK task built for the jsPsych version 6.1.0 with a task written for the new 7.2.1 version into one html document. We therefore changed all dependencies of the newer jsPsych task to make use of all the old version 6 plugins. That worked except for one major issue: when a response on a trial was missed, the response on the next trial measured the RT starting from the previous trial ~ the keyboardListener did not stop listening at the end of the missed trial. Thank you very much! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @anikalowe, hmm that sounds like it might be a bug in the plugin rather than a v6-v7 migration issue. This is happening with the jsPsych html-keyboard-response plugin? Could you please provide the code that you're using that's causing this problem? |
Beta Was this translation helpful? Give feedback.
-
|
Also a note that the RDK plugin is still available for version 7, it is just now in the community contributions repository. Just in case you want to upgrade the whole task to v7. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @becky-gilbert and @jodeleeuw, thanks for the replies! @becky - exactly, it is happening with the html-keyboard-response plugin. I am attaching the code below (I of course had changed the plugin to start with jsPsych[...]) Kind regards, timeline.push(inst_pvt)
for (var i = 0; i < set.n.pvt_prac; i++) {
var fixation_pvt = {
type: jsPsychHtmlKeyboardResponse,
stimulus: "<span style='font-size:" + set.s.pvt.fixcross + "px;'> + </span>",
choices: 'NO_KEYS',
trial_duration: set.t.pvt.fixcross + isi_pvt[i]
}
var trial_pvt = {
type: jsPsychHtmlKeyboardResponse,
stimulus: "<span style='font-size:" + set.s.pvt.fixcross + "px; color:red'> + </span>",
choices: [' '], // Spacebar, has to be an array
trial_duration: set.t.pvt.cue,
data: {
task: 'pvt_prac',
isi: set.t.pvt.fixcross + isi_pvt[i],
doSave: true
}
}
var feedback_pvt = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
var rt = Math.round(jsPsych.data.getLastTrialData().values()[0].rt);
var feedback_txt = "<span style = 'font-size:" + set.s.pvt.feedback + "px;color:green'> reaction time = " + rt + " ms</span>";
if (rt == 0) {
feedback_txt = "<span style = 'font-size:" + set.s.pvt.feedback + "px;color:red'> please pay attention </span>";
};
return feedback_txt;
},
choices: 'NO_KEYS',
trial_duration: set.t.pvt.feedback,
data: {
task: 'pvt_prac',
doSave: true
}
}
timeline.push(fixation_pvt, trial_pvt, feedback_pvt)
} |
Beta Was this translation helpful? Give feedback.
-
|
Hi @becky-gilbert and @jodeleeuw Thank you for your help! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I am migrating from jsPsych 6.3 to jsPsych 7.3, and have a hard time trying to resolve the following error: The global I am sure its an easy fix. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @maibra88, at some point you're calling |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it works perfectly now! I called |
Beta Was this translation helpful? Give feedback.
-
|
A clarification question, I'm happy with a thumbs-up if I got this right. jspsych now automatically preloads all video and audio files if it the experiment runs on a server and if jspsych finds a path for them in the exp, e.g. |
Beta Was this translation helpful? Give feedback.
-
|
You'll need to use the preload plugin to preload the media content. It is not able to autodetect values in timeline variables, so you would need to pass it a list of the video stimuli. We're working on making it autodetect timeline variables in a future version, but edge cases are tricky 😁 |
Beta Was this translation helpful? Give feedback.
-
|
Righto, so like this: |
Beta Was this translation helpful? Give feedback.
-
|
I don't think your preload trial will work here because the preload plugin needs an array of file paths for the let filenames = [];
my_paths.forEach((element) => {
filenames.push(element.video);
});
var preload = {
type: jsPsychPreload,
video: filenames
}; |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, Below is the code I am trying to migrate to jsPsych 7.0: Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @pelinTan,
Almost: The parameter {
type: "free-recall",
questions: ...,
}before, but now needs to be {
type: jsPsychFreeRecall,
questions: ...,
}The error message might apply to trials with other plugins as well. Hope this helps to fix it! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much! I definitely see the issue now and changed "free-recall" to jsPsychFreeRecall in my main code as well. The error pertains to this code at the end of my plugin: I create a default value for time limit option above and get no errors for |
Beta Was this translation helpful? Give feedback.
-
|
Lines 127-134 need to go into the |
Beta Was this translation helpful? Give feedback.
-
|
Hi all, I'm migrating a colleague's custom plugin from 6.x to 7.3 syntax, and while I've been able to recoup most of the functionality, I'm running into a problem in appending new HTML via jQuery selection to the I've cut off the code after the break point for brevity and I've commented in the lines where I have trouble, but to recap, the problem is that I can't append an svg element. Here's the error traceback: Many, many thanks in advance 🙏🏻 |
Beta Was this translation helpful? Give feedback.
-
|
What about instead of using |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jodeleeuw, thank you so, so much for the prompt answer—it worked beautifully, and thanks to your recommendation, I also seem to have fixed a bunch of other issues down the line :) Out of curiosity, do you know why jQuery wouldn't work here whereas it did previously for 6.x? |
Beta Was this translation helpful? Give feedback.
-
|
Glad it worked! 😁 I'm not sure without digging into the code more. The basic things to verify would be that jQuery is loaded and in the global scope. Assuming that is configured correctly, I'm not sure where to look next other than whatever error messages are getting generated. |
Beta Was this translation helpful? Give feedback.
-
|
Hi again @jodeleeuw—it's your favorite weekend warrior back at it again 💀 I've been able to migrate mostly everything over successfully, but I do have another question: I'm noticing some differences in the DOM structure between 6.x and 7.3 just for a simple display of instructions via the instructions plugin. While the script I'm upgrading shows the instructions directly within the It's not a breaking issue, but I'm just confused because my two experiments are not looking the same—the new DOM structure results in misaligned content, for example. I do see that these additional containers are added via |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I'm trying to run a simple experiment where I present 4 words on the screen, but when I try to run it I get the following error message: Here is the code I'm using: Can you please help me? Many thanks, |
Beta Was this translation helpful? Give feedback.
-
|
Hi @NicoBiagi The plugin's type parameter changed in version 7, described here. It looks like your |
Beta Was this translation helpful? Give feedback.
-
|
Hi, However, it does not work on 7.X. Can you please help me? Or is there any way that can help me to upload data to GitHub? Many thanks, |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Hello @jodeleeuw and @becky-gilbert, Here is a copy of my old working experiment: https://g8shiui5za.cognition.run/ The tasks above requires user input from the slider, but even before clicking on that if I look in the dev console environment, I can't see the trial_seq object that is in the experiment that is available in the version that actually works. I wonder if I have misunderstood how scoping works between the two instances of jspsych. Sorry if this is just a matter of placing code in the wrong area of my custom plugin, but I've tried really hard and can't figure this one out. |
Beta Was this translation helpful? Give feedback.
-
|
Hm, when I run the broken version, I actually can see the value of |
Beta Was this translation helpful? Give feedback.
-
|
@becky-gilbert ah I see I was silly and didn't locally declare them thank you so much :) I should have caught this earlier and have no idea why it works in the previous version but that's alright I've fixed it now thank you so much!! 😃 |
Beta Was this translation helpful? Give feedback.
-
|
Yay, great! |
Beta Was this translation helpful? Give feedback.
-
|
Ohhh I see now 😃 - look it was actually a useful exercise because I'm new to js and coded the plugin from scratch so I handn't delved into variable declaration (const vs var vs let), or function expression and hoisting into any great detail before this so I've learnt a lot in any case. It may be useful to throw a cautionary note in there, but I am not sure of the general level of fluency people have in js before writing their own plugin - I assumed people would be way more knowledgeable than myself before they attempted coding in raw js so they might not make those errors! I guess that also explains why the plugin template has "strict" in it up the top to me now 😅😅 |
Beta Was this translation helpful? Give feedback.
-
|
I am trying to run a jspsych task using PsiTurk on Google Chrome. The task works perfectly on my local computer, but I am getting errors when it builds the timeline when being run online. Specifically, when I try to push any var with a |
Beta Was this translation helpful? Give feedback.
-
|
Hi @samanthareisman, this is tricky to debug without more info. I don't suppose you could post your code, or better yet, link to the online/broken version so that I can see what's happening. Thanks! |
Beta Was this translation helpful? Give feedback.
and others
-
If you've got questions about migrating your pre-7.0 experiment to v7.0, this is the thread to ask 'em in.
See our migration guide as a starting point.
Beta Was this translation helpful? Give feedback.
All reactions