Error on Firefox: "Trial level node is missing the "type" parameter. The parameters for the node are: {}" #2172
-
|
Hi! I'm having this error with one of my experiments not in Chrome but in firefox: Trial level node is missing the "type" parameter. The parameters for the node are: {} Any ideas? In Google Chrome works fine. This is my code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- jsPsych library -->
<script src="jspsych-6.3.0/jspsych.js"></script>
<!-- SVG.js for virtual chin rest -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<!-- jsPsych plugins-->
<script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-fullscreen.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-instructions.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-trail-making-test.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-survey-html-form.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-virtual-chinrest.js"></script>
<link rel="stylesheet" href="jspsych-6.3.0\css\jspsych_2.css" />
<!-- Coordinates of items -->
<script src="coordinates.js"></script>
</head>
<body></body>
<script>
//STYLE: Gray background
document.body.style.backgroundColor = "#BEBEBE";
let x
let y
// URL variables
var urlvar = jsPsych.data.urlVariables();
console.log('Subject id: ' , urlvar.id)
// TIMELINE
let timeline = [];
//CONSTANTS
const FONT_SIZE_EXPLANATION = 110
const RADIUS = 18;
const CANVAS_HEIGHT = 750
const CANVAS_WIDTH = 750
const FIXATION_DURATION = 500
const CANVAS_BACKGROUND_COLOR = "#BEBEBE"
const TRIAL_DURATION = 25000
// fixation stimuli
let FIRST_TRIAL = true
let FIX_COLOR = 'blue'
//////////////////////////////////* Preload *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var preload = {
type: "preload",
auto_preload: true,
};
//////////////////////////////////* Full screen *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var fullScreen = {
type: "fullscreen",
fullscreen_mode: true,
message: '<h2>Te damos la bienvenida al experimento,</h2>'+' <h2>por favor presioná el botón para ir a pantalla completa </h2>',
button_label: "Continuar a pantalla completa",
};
//////////////////////////////////* Welcome *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var welcome_block = {
data: {
screen_id: "Bienvenidx"
},
type: "survey-html-form",
preamble: "<h3> Por favor, completá los siguientes datos: </h3> ",
html: `
<table>
<tr>
<td align="right">Edad:</td>
<td align="left"><input name="age" type="number" required="" /></td>
</tr>
<tr>
<td align="right">Dispositivo de entrada:</td>
<td align="left"><input list="MouseOrPad" id="MouseOrPad-choice" name="MouseOrPad-choice" required="" /><datalist id="MouseOrPad">
<option value="Mouse"> <option value="pad de notebook"> <option value="otro"></datalist> </td>
</tr>
<tr>
<td align="right">Mano hábil:</td>
<td align="left"><input list="hand" id="hand-choice" name="hand-choice" required="" /><datalist id="hand">
<option value="izquierda"> <option value="derecha"> </datalist></td>
</tr>
<tr>
<td align="right">¿Dispositivo configurado para mano hábil?</td>
<td align="left"><input list="hand_config" id="hand_config-choice" name="hand_config-choice" required="" /><datalist id="hand_config">
<option value="si"> <option value="no"></datalist></td>
</tr>
<tr>
<td align="right">E-mail:</td>
<td align="left"><input name="mail" type="email" required="" /></td>
</tr>
</table><br>`,
button_label: "Continuar",
data: {subject_id: urlvar.id}
};
//////////////////////////////////* Explanation *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var explanation_train = {
type: 'instructions',
pages: [
`
<p style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'> Este experimento consta de dos tipos de ensayos y tendrá un límite de tiempo
fijo para resolver cada uno.<br> <br>
Los ensayos que empiezan con una cruz <b style='color:blue;'>AZUL</b> consisten en una serie de <b>números del 1 al 20</b> rodeados cada uno por un círculo.
Tu objetivo es unir con un trazo continuo los puntos en orden creciente (ejemplo: 1-2-3-4-5-6, etc)<br>
Los ensayos que empiezan con una cruz <b style='color:red;'>ROJA</b> consisten en una serie de <b>números del 1 al 10 y letras de la A a la J</b>.
Tu objetivo es unir con un trazo continuo los puntos de manera alternada (ejemplo: 1-A-2-B-3-C, etc) <br><br>
En ambos casos tenés que evitar que los trazos se toquen.
</p>` ,
` <br> <img id="tmt_a" src="tmt_A_example.gif" style="width: 40%"><br>
<p style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'>
Los ensayos del primer tipo consisten en una serie de números del 1 al 20 rodeados cada
uno por un círculo.<br> Tu objetivo será unir con un trazo continuo los puntos en orden creciente,<br> tratando de
evitar que los trazos se toquen.<br> <br>
Al comenzar cada uno de estos ensayos verás una cruz <b style='color:blue;'>azul</b> en el centro de la pantalla,<br> cuando esta desaparezca
y veas los círculos deberás presionar el botón izquierdo del mouse (o del pad de la notebook)<br>
y mantenerlo presionado hasta terminar el ensayo.<br>
<p>Si usás el pad de la notebook, podés usar las dos manos (una para presionar el botón y otra para moverte)</p>
No levantes el dedo del botón al menos que haya terminado el ensayo, o que éste haya terminado por superar el tiempo límite.</p>`,
`<br> <img id="tmt_b" src="tmt_B_example.gif" style="width: 50%"><br>
<p style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'>
El otro tipo de ensayo comienza con una cruz <b style='color:red;'>roja</b> y consiste en una serie de números del 1 al 10 y letras de la A
a la J.<br> Su objetivo será unir con un trazo continuo los puntos de manera alternada (ejemplo 1-A-2-B-3-C,
etc).<br><br>
Los ensayos van a aparecer siempre alternadamente.<br><br>
Si te das cuenta de que cometiste un error, es muy importante que <b>vuelvas al último círculo por el que pasaste correctamente y retomes la
tarea desde ahí.</b>`,
`
<p style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'>
Primero se te mostrarán unos ensayos de prueba donde al pasar por encima de los circulos estos cambiarán de color.</p>
<p style='font-size:100%;color:black'>Este efecto no estará durante
el experimento pero lo agregamos acá para que quede claro donde se considera que se pasó correctamente por encima de ellos.<br><br>
¡Suerte y muchas gracias por participar!<br><br>
Presioná siguiente para comenzar el entrenamiento.<br>
</p>
`
],
show_clickable_nav: true,
show_page_number: true,
button_label_previous: 'Anterior',
button_label_next: 'Siguiente',
page_label: 'página'
}
var explanation_test = {
type: 'instructions',
pages: [
`
<div style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'>
<h3>Ahora comenzaremos con el experimento.</h3>
<p>Los ensayos van a aparecer siempre alternadamente: cruz azul ➔ cruz roja ➔ cruz azul ➔ cruz roja ➔ etc.</p>
<p>La tarea será la misma pero ahora <b>los círculos NO cambiarán de color al pasar por encima</b>.</p>
<p>Si usás el pad de la notebook, podés usar las dos manos (una para presionar el botón y otra para moverte)</p>
<p>Presioná siguiente para comenzar.</p>
</div>
`
],
show_clickable_nav: true,
show_page_number: true,
allow_backward: false,
button_label_next: 'Siguiente',
page_label: 'página'
}
var explanation_final = {
type: 'instructions',
pages: [
`
<div style='font-size:${FONT_SIZE_EXPLANATION}%;color:black'>
<p>El experimento finalizó.</p>
<p>Presioná <b>Finalizar</b> para enviar los datos y terminar el experimento.</p>
<p>¡Muchas gracias por haber participado!</p>
</div>
`
],
show_clickable_nav: true,
show_page_number: true,
allow_backward: false,
show_page_number: false,
button_label_next: 'Finalizar',
page_label: 'página'
}
var pad_use_block = {
data: {
screen_id: "Uso del pad"
},
type: "survey-html-form",
preamble: `<h3> Sobre el uso del mouse pad: </h3> `,
html: `
<table>
<tr>
<td align="right"> ¿Cómo usaste el pad de notebook? </td>
<td align="left"><input list="PadUse" id="MouseOrPad-choice" name="PadUsechoice" required="" /><datalist id="PadUse">
<option value="No usé pad de notebook, usé un mouse normal"> <option value="Con una sola mano"> <option value="Con dos manos"><option value="A veces una mano, a veces dos"> </datalist> </td>
</tr>
</table><br>`,
button_label: "Terminar el experimento",
};
//////////////////////////////////* virtual chin rest *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
let virtual_chin_rest = {
type: "virtual-chinrest",
blindspot_reps: 2,
resize_units: "cm",
pixels_per_unit: 50,
item_path: "jspsych-6.3.0/examples/img/card.png",
adjustment_prompt: `<div style="text-align: left;">
<p>Hacé click y deslizá la esquina inferior izquierda de la imagen hasta que coincida con el tamaño de una tarjeta que tengas apoyada sobre la pantalla.</p>
<p>Podés usar una tarjeta de crédito, deébito o la SUBE, cualquiera que tenga tamaño estándar (8,5 x 5.4 centímetros).</p>
<p>Esto nos sirve para saber el tamaño de tu pantalla y mostrarte el experimento de forma adecuada.</p>
</div>`,
adjustment_button_prompt: "Presioná acá cuando la imagen sea del tamaño correcto",
blindspot_prompt: `
Ahora vamos a evaluar cual es la distancia a la que te encontrás del monitor. Por favor colocá tu mano izquierda sobre la barra y
cubrí tu ojo derecho con tu mano derecha. Utilizando tu ojo izquierdo enfocá en el cuadrado negro y mantené tu foco en el cuadrado.
La pelotita roja va a desaparecer de tu vista en un dado momomento mientras se mueve de derecha a izquierda. Presioná la barra lo
más rápidamente posible ni bien dejes de verla.
Presioná la barra para comenzar.<br><br><br>
`,
redo_measurement_button_label:"No es mi distancia aproximada, hagámoslo de nuevo",
blindspot_done_prompt: `Si, es correcto`,
blindspot_measurements_prompt: "Mediciones restantes: ",
viewing_distance_report: `
Basado en tus respuestas, estás a una distancia de aproximadamente <span id='distance-estimate' style='font-weight: bold;'></span>
de la pantalla ¿Esto es correcto? <br><br>
`,
data:{
'canvas_size': CANVAS_HEIGHT,
'radius': RADIUS,
'screenX': screen.width,
'screenY': screen.height,
'innerX': window.innerWidth,
'innerY': window.innerHeight
}
};
//////////////////////////////////* trials *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
let train_trial = {
type: "trail-making-test",
coordinates: jsPsych.timelineVariable('stimulus'),
radius: RADIUS,
canvas_size: [CANVAS_HEIGHT, CANVAS_WIDTH],
canvas_background_color: CANVAS_BACKGROUND_COLOR,
highlight: true, // para que se pinten al pasar por arriba
trial_duration: TRIAL_DURATION,
data: jsPsych.timelineVariable('stimulus')
};
let test_trial = {
type: "trail-making-test",
coordinates: jsPsych.timelineVariable('stimulus'),
radius: RADIUS,
canvas_size: [CANVAS_HEIGHT, CANVAS_WIDTH],
canvas_background_color: CANVAS_BACKGROUND_COLOR,
highlight: false, // para que se pinten al pasar por arriba,
trial_duration: TRIAL_DURATION,
data: jsPsych.timelineVariable('stimulus')
};
var fixation = {
type: 'html-keyboard-response',
stimulus: function(){
if(FIRST_TRIAL == true){
FIX_COLOR = 'blue'
FIRST_TRIAL = false
return `<div style="font-size:60px;color:${FIX_COLOR};">+</div>`
}else{
if(FIX_COLOR == 'blue'){
FIX_COLOR = 'red'
return `<div style="font-size:60px;color:${FIX_COLOR};">+</div>`
} else {
FIX_COLOR = 'blue'
return `<div style="font-size:60px;color:${FIX_COLOR};">+</div>`
}
}
},
choices: jsPsych.NO_KEYS,
trial_duration: FIXATION_DURATION,
data:{'FIX_COLOR': FIX_COLOR},
}
//////////////////////////////////* prcedures *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var train_procedure = {
timeline: [fixation,train_trial],
timeline_variables: train_stimuli,
repetitions: 1,
randomize_order: false,
}
var test_procedure = {
timeline: [fixation,test_trial],
timeline_variables: test_stimuli,
repetitions: 1,
randomize_order: false
}
jsPsych.init({
// Esto es una opcion para hacer backup de los clicks
on_trial_start: function(trial,data) {
console.log('trial.data', trial.data)
trial_start_time = performance.now()
document.addEventListener('mousedown', (e) => {
x = e.offsetX;
y = e.offsetY;
//timer for cursor
let click_time = Math.round(performance.now());
//start_time was declared at begining of the trial
let time_in_trial = Math.round(click_time - trial_start_time);
//cursor time is an array with the time measurement for every [x,y] position relative to the start of the trial
t = time_in_trial
console.log('Desde el main: ', [x,y,t])
try {
trial.data.x_y_clicked_position = [x,y,t];
} catch (error) {
console.log(error);
}
}, {once : true}) // el once hace que solo funcione una vez
},
timeline: [
preload,
fullScreen,
welcome_block,
virtual_chin_rest,
explanation_train,
train_procedure,
explanation_test,
test_procedure,
pad_use_block,
explanation_final
],
// timeline: [
// preload,
// test_procedure
// ],
on_finish: function () {
// Display data
jsPsych.data.displayData();
// first argument is the format, second is the filename.
// the format can be either 'csv' or 'json'.
// jsPsych.data.get().localSave('csv','TMT_data.csv');
},
//minimum browser size values
exclusions: {
min_width: 800,
min_height: 600,
},
});
</script>
</html>Best, Gustavo. |
Beta Was this translation helpful? Give feedback.
Answered by
becky-gilbert
Sep 24, 2021
Replies: 1 comment 2 replies
-
|
Hi @GEJ1, are you able to narrow down which trial or trial procedure is causing the problem? For instance, if you run the experiment in Firefox with each of the trials / trial procedures separately, do you get the error every time? |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Oh! Actually that helped me a lot. I think the problem was because the name of the full screen variable. Is that posible? edit: |
Beta Was this translation helpful? Give feedback.
-
|
Huh, weird! I bet you're right - maybe there's some kind of naming collision with the Gecko |
Beta Was this translation helpful? Give feedback.
Answer selected by
GEJ1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @GEJ1, are you able to narrow down which trial or trial procedure is causing the problem? For instance, if you run the experiment in Firefox with each of the trials / trial procedures separately, do you get the error every time?
Another thing you can try is printing out your timeline array to the console (before calling
jsPsych.init), which might show you whether there's a missingtypeparameter in any of the trial/procedure objects.