preload

71 views

Skip to first unread message

andrea albergoni

unread,

Mar 3, 2021, 10:52:37 AM3/3/21

to jsPsych

Hi!

I am trying to set an experiment where the people see a video serie and they have to asnwer a question related to the video.

but the preload doesn't work

___the error__

jspsych-preload.js:102 Uncaught TypeError: jsPsych.getSafeModeStatus is not a function

at Object.jsPsych.plugins.preload.plugin.trial (jspsych-preload.js:102)

at doTrial (jspsych.js:889)

at startExperiment (jspsych.js:819)

at jspsych.js:2644

at Object.jsPsych.pluginAPI.module.preloadVideo (jspsych.js:2515)

at jspsych.js:2643

at Object.jsPsych.pluginAPI.module.preloadAudioFiles (jspsych.js:2367)

at jspsych.js:2642

at Image.img.onload (jspsych.js:2479)

jsPsych.plugins.preload.plugin.trial @ jspsych-preload.js:102

doTrial @ jspsych.js:889

startExperiment @ jspsych.js:819

(anonymous) @ jspsych.js:2644

jsPsych.pluginAPI.module.preloadVideo @ jspsych.js:2515

(anonymous) @ jspsych.js:2643

jsPsych.pluginAPI.module.preloadAudioFiles @ jspsych.js:2367

(anonymous) @ jspsych.js:2642

img.onload @ jspsych.js:2479

load (async)

preload_image @ jspsych.js:2475

jsPsych.pluginAPI.module.preloadImages @ jspsych.js:2499

jsPsych.pluginAPI.module.autoPreload @ jspsych.js:2641

(anonymous) @ jspsych.js:203

checkExclusions @ jspsych.js:1032

init @ jspsych.js:198

load (async)

window.jsPsych.core.init @ jspsych.js:226

(anonymous) @ forse.html:298

forse.html:1 Uncaught (in promise) {}

index.js:1

_____the code___

<!DOCTYPE html>

<html>

<head>

<title>My experiment</title>

<style>

</style>

</head>

//<script src="../plugins/jspsych-preload.js" >

var preload = {

type: 'preload',

video: ['immagini/40.mp4', 'immagini/60.mp4', 'immagini/80.mp4','immagini/100.mp4'],

message: "Caricamento dati",

auto_preload: true,

continue_after_error: true,

error_message: "Caricamento dati fallito",

}

////////1paginainiziale

var pagina_iniziale = {

type: 'instructions',

pages: ["<head> <h1 style=color:BLUE> <b>Universit&#224 degli Studi di Genova</b></h1></head>" +

"<h3>Benvenuto/a! </h3>"

+"<p>Il presente studio ha lo scopo di valutare quanto l'esperienza motoria determina la capacit&agrave di riconoscere un carico alzato in un esercizio "

+"di sollevamento pesi, nello specifico di uno stacco da terra.</p>"

+ "<p> L'esperimento deve essere completato da computer e necessita di circa 30 minuti. &Egrave suddiviso in 2 parti: un breve questionario " + "e una sequenza di video con una domanda relativa a ciascuno di essi.</p>"

+ "<p>I dati vengono raccolti in forma totalmente anonima e saranno accessibili unicamente ai responsabili dell'iniziativa per scopi scientifici e saranno conservati per un tempo massimo di due anni.</p>"

//+ "<p><u>Premi un tasto per continuare</u></p>"

+ "<footer><span style=font-size:12px>Non sar&aacute dato accesso a terze parti per indagini di mercato o pubblicit&aacute.</footer>"

post_trial_gap: 0,

show_clickable_nav: true,

};

//////2.questionario

var questionario = {

type: 'survey-text',

preamble: '*Obbligatorio',

questions: [

{prompt: 'Inserisci le prime due lettere del <b>nome</b>, le prime due lettere del <b>cognome</b> e le ultime due cifre dell\'<b>anno di nascita</b>*', placeholder: 'NNCCAA', columns: 50, required: true, name: 'Sigla'},

{prompt: 'Genere*', placeholder: 'uomo/donna', columns: 50, required: true, name: 'Genere'},

{prompt: 'Inserisci il tuo peso (in kg)*', columns: 3, required: true, name: 'Peso'},

{prompt: 'Inserisci la tua altezza (in cm)*', columns: 3, required: true, name: 'Altezza'},

{prompt: 'Quale sport pratichi?*', placeholder: 'es.Powerlifting/tennis/nessuno', columns: 50, required: true, name: 'Sport'},

{prompt: '<p>Da quanti anni?*</p> <small>(Inserire <u>0</u>, se non si pratica nessuno sport)</small>', placeholder: 'XX', columns: 5, required: true, name: 'Pratica'},

{prompt: '<p>Ruolo?*</p>'

+ "<small>(Allenatore/Atleta agonista/Amatore/Nulla)</small>", columns: 50, required: true, name: 'Ruolo'},

{prompt: '<small><p>Se Powerlifters</p></small>' +

'Inserire massimale di <b>stacco</b>', placeholder: 'XXX', columns: 5, required: false, name: 'Massimale'},

{prompt: '<small><p>Se Powerlifters</p></small>' +

'Inserire <b>tecnica</b> utilizzata per il massimale di stacco', placeholder: 'Tradizionale/Sumo', columns: 50, required: false, name: 'tecnica'},

]

}

///////3.istruzioni

var istruzioni = {

type: 'instructions',

pages: ["<h3>Istruzioni </h3>"

+"Nell'esperimento vedrai una serie di video dove un atleta eseguir&agrave uno <b>stacco da terra</b> con carichi differenti. "

+"<br>Al termine di ogni video ti sar&agrave chiesto di rispondere a una domanda relativa al carico sollevato."

+"<br>Il carico sar&agrave espresso come percentuale sul <b>carico massimo</b> sollevabile dall'atleta, <b>una ripetizione massimale (1RM)</b>."

+"<br>Ad ogni domanda, dovrai rispondere il pi&uacute <b>velocemente</b> possibile premendo"

+"<br>[il tasto <b>V</b> per <b>SI</b>]"

+"<br>[il tasto <b>N</b> per <b>NO</b>]",

//+"<p><u>Premi un tasto per continuare</u></p>"

post_trial_gap: 0,

show_clickable_nav: true

};

//////4.esempio

var esempio = {

type: "video-keyboard-response",

stimulus: ['immagini/90.mp4'],

//autoplay: true,

width: 275,

//start: 0, //trial_duration: 8000,

response_allowed_while_playing: false,

//trial_ends_after_video: true,

prompt: "<h3><top>Esempio di uno stacco da terra</h3>"

+"<p>A esempio terminato, <u>premi un tasto per continuare</u></p>",

///verificare se il con il preload la scritta compare con il video

};

///////5 (trial esemplificativo, node)

var triales = {

timeline: [

{

type: 'html-keyboard-response',

stimulus: " ",

//choices: [ ],

prompt: "<h5>Ora un esempio del funzionamento dell'esperimento</h5>" //sistemare!

+ "<p><u>premi un tasto per continuare</u></p>"

{

type: "video-keyboard-response",

stimulus: ['immagini/k2.mp4'],

autoplay: true, width: 500,

start: 12, trial_duration: 5000,

response_allowed_while_playing: false,

prompt: "<h3>Prova</h3>"

//+"<p>A fine video, <u>premi un tasto per continuare</u></p>",

{

type: 'html-keyboard-response',

stimulus: " ",

choices: ['V', 'N'],

prompt: "<h1>Chang Dawa Sherpa era al mare?</h1>"

+ "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>"

]};

///////5 (trial esemplificativo, node)

var vid2 = {

timeline: [

{

type: "video-keyboard-response",

stimulus: ['immagini/k2.mp4'],

autoplay: true, width: 500,

start: 12, trial_duration: 5000,

response_allowed_while_playing: true,

prompt: "<h3>Prova</h3>"

//+"<p>A fine video, <u>premi un tasto per continuare</u></p>",

{

type: 'html-keyboard-response',

stimulus: " ",

choices: ['V', 'N'],

prompt: "<h1>domanda?</h1>"

+ "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>"

{

type: "video-keyboard-response",

stimulus: ['immagini/80.mp4'],

autoplay: true, width: 500,

start: 12, trial_duration: 5000,

response_allowed_while_playing: true,

prompt: "<h3>Prova</h3>"

//+"<p>A fine video, <u>premi un tasto per continuare</u></p>",

{

type: 'html-keyboard-response',

stimulus: " ",

choices: ['V', 'N'],

prompt: "<h1>domanda?</h1>"

+ "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>"

]};

///////5.1

var ready = {

timeline: [

{

type: 'image-keyboard-response',

stimulus: ['immagini/ready.jpg'],

//choices: [ ],

//prompt: "<p><u>premi un tasto per continuare</u></p>",

trial_duration: 2000,

{

type: 'html-keyboard-response',

stimulus: " ",

prompt: "<h1 style=color:red;font-size:300px;font-family:verdana> GO! </h1>",

trial_duration: 2000,

]};

//////////6(video dead)

var timeline_variables = [

{vid: 'immagini\\40.mp4', domanda: '<h1>Ha sollevato il <b>40%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '40_SI'}, nome: '40_SI'},

{vid: 'immagini\\40.mp4', domanda: '<h1>Ha sollevato il <b>60%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '40_NO60'}, nome: '40_NO60'},

{vid: 'immagini\\40.mp4', domanda: "<h1>Ha sollevato l' <b>80%</b> di 1RM?</h1>", istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '40_NO80'}, nome: '40_NO80'},

{vid: 'immagini\\40.mp4', domanda: '<h1>Ha sollevato il <b>100%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '40_NO100'}, nome: '40_NO100'},

{vid: 'immagini\\60.mp4', domanda: '<h1>Ha sollevato il <b>40%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '60_SI'}, nome: '60_SI'},

{vid: 'immagini\\60.mp4', domanda: '<h1>Ha sollevato il <b>60%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '60_NO40'}, nome: '60_NO40'},

{vid: 'immagini\\60.mp4', domanda: "<h1>Ha sollevato l' <b>80%</b> di 1RM?</h1>", istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '60_NO80'}, nome: '60_NO80'},

{vid: 'immagini\\60.mp4', domanda: '<h1>Ha sollevato il <b>100%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '60_NO100'}, nome:'60_NO100'},

{vid: 'immagini\\80.mp4', domanda: '<h1>Ha sollevato il <b>40%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '80_SI'}, nome:'80_SI'},

{vid: 'immagini\\80.mp4', domanda: '<h1>Ha sollevato il <b>60%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '80_NO40'}, nome: '80_NO40'},

{vid: 'immagini\\80.mp4', domanda: "<h1>Ha sollevato l' <b>80%</b> di 1RM?</h1>", istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '80_NO60'}, nome: '80_NO60'},

{vid: 'immagini\\80.mp4', domanda: '<h1>Ha sollevato il <b>100%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '80_NO100'}, nome: '80_NO100'},

{vid: 'immagini\\100.mp4', domanda: '<h1>Ha sollevato il <b>40%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '100_SI'}, nome: '100_SI'},

{vid: 'immagini\\100.mp4', domanda: '<h1>Ha sollevato il <b>60%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '100_NO40'}, nome:'100_NO40'},

{vid: 'immagini\\100.mp4', domanda: "<h1>Ha sollevato l' <b>80%</b> di 1RM?</h1>", istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '100_NO60'}, nome:'100_NO60'},

{vid: 'immagini\\100.mp4', domanda: '<h1>Ha sollevato il <b>100%</b> di 1RM?</h1>', istruzioni: "<br>Premi <b>V</b> per <b>SI</b> e <b>N</b> per <b>NO</b>", duration:20000, data: { ConditionName: '100_NO80'}, nome:'100_NO80'},

];

var nodo2 = {

timeline_variables: timeline_variables,

timeline: [

{

type: 'video-keyboard-response',

stimulus: jsPsych.timelineVariable('vid'),

choices: jsPsych.ALL_KEYS,

prompt: function () {return jsPsych.timelineVariable('nome', true)},

width: 600,

autoplay: true,

response_ends_trial: true,

response_allowed_while_playing: false,

trial_duration: 1000,

{

type: 'html-keyboard-response',

stimulus: " ",

//on_start: function () {stimulus = jsPsych.timelineVariable('video')},

prompt: function () {return jsPsych.timelineVariable('domanda', true) + jsPsych.timelineVariable('istruzioni', true)}, ///(chiedere perchè function)

choices: ['V', 'N'],

post_trial_gap: 500,

data: jsPsych.timelineVariable('data'),

}

randomize_order: true,

repetitions: 1

}

//////////

var prova = {

timeline_variables: timeline_variables,

timeline: [

{

type: "video-keyboard-response",

stimulus: [jsPsych.timelineVariable('video')],

//stimulus: jsPsych.timelineVariable('video'),

choices: jsPsych.NO_KEYS,

autoplay: true,

width: 275,

start: 0,

//ripetizioni??

response_allowed_while_playing: false, //false

trial_duration: 1000, ///inserire numero

//data: jsPsych.timelineVariable('data'),

//prompt: "<p>A fine video, <u>premi un tasto per continuare</u></p>",

{

type: 'html-keyboard-response',

stimulus: " ",

//on_start: function () {stimulus = jsPsych.timelineVariable('video')},

prompt: function () {return jsPsych.timelineVariable('domanda', true) + jsPsych.timelineVariable('istruzioni', true)}, ///(chiedere perchè function)

choices: ['V', 'N'],

post_trial_gap: 500,

data: jsPsych.timelineVariable('data'),

randomize_order: true,

repetitions: 1, //quanti?

};

//////fine

var end = {

type: "html-keyboard-response",

stimulus: " ",

trial_duration: 3000,

//response_allowed_while_playing: false,

prompt: "<h3 style=color:red;> Grazie di aver partecipato all'esperimento!</h3>",

};

//////"timeline"

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({filename: name+today, filedata: data}));

}

var today = new Date();

var dd = String(today.getDate()).padStart(2, '0');

var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!

var yyyy = today.getFullYear();

var ss = String(today.getSeconds()).padStart(2, '0');

var min = String(today.getMinutes()).padStart(2, '0');

var hh = String(today.getHours()).padStart(2, '0');

today = mm + dd + yyyy + '-' + hh + min + ss;

jsPsych.init({

timeline: [preload, pagina_iniziale, ready, nodo2, end],

//timeline: [pagina_iniziale, questionario, esempio, triales, ready, prova, end],

//preload_video: ['immagini\\40.mp4', 'immagini\\60.mp4', 'immagini\\80.mp4', 'immagini\\100.mp4'],

on_finish: function() {

{saveData("experiment_data", jsPsych.data.get().csv()); }

//preload_video: video_to_preload,

});

</script>

</html>

beckyann...@gmail.com

unread,

Mar 3, 2021, 12:19:26 PM3/3/21

to jsPsych

Hi! This error:

> jspsych-preload.js:102 Uncaught TypeError: jsPsych.getSafeModeStatus is not a function

suggests that you might be using an older version of the jspsych.js file. The preload plugin was released with jsPsych v6.3.0, and it needs to run with the jspsych.js file from that release. Could that be the problem here?

Becky

p.s. the jsPsych forum has moved here: https://github.com/jspsych/jsPsych/discussions :)

andrea albergoni

unread,

Mar 3, 2021, 3:13:03 PM3/3/21

to jsPsych

Thanks,

I just tried and with the preload "var" i had the same errors.

I will move the discussion on github

Reply all

Reply to author

Forward

0 new messages