Using Webgazer.js in cognition.run: wegbgazerdata is missing t-value

[schas59]

Dear community,

I'm new to Github and I just have a little knowledge about programming. I'm programming a linguistic Eye-Tracking experiment via Cognition.run. I've already uploaded the webgazer.js file into the External JS/CSS-field. The code I've used is from the examples page and I've just updated it for German subjects and with my items.
The problem is that my rawgaze data of the webgazer-validate plugin and the webgazer data is always missing the t-value and instead there is a "dx"- and "dy"-value for the rawgaze-data and repeated values for the webgazer-data.
Unfortunately, I can't find any solution for it.

For example:

• rawgaze data:
  {"x":427,"y":432,"dx":64.76668548583984,"dy":279.5,"t":null}
• webgazer-data:
  [{"x":393,"y":346,"t":null},{"x":393,"y":346,"t":null},{"x":393,"y":346,"t":null},{"x":393,"y":346,"t":null},...,{"x":393,"y":346,"t":null}]

Below you can see a short version of the script.

Thanks for helping out!!

var jsPsych = initJsPsych({
extensions: [
{type: jsPsychExtensionWebgazer}
]
});

var timeline = [];

var preload1 = {
type: jsPsychPreload,
auto_preload: true
};
timeline.push(preload1)

var preload2 = {
type: jsPsychPreload,
images: ['intro_pic.jpeg', 'Item12_f_1.jpg', 'Item12_f_2.jpg', 'Item12_f_3.jpg']
};
timeline.push(preload2)

var camera_instructions = {
type: jsPsychHtmlButtonResponse,
stimulus: <p>Um teilzunehmen, müssen Sie dem Experiment erlauben, Ihre Kamera zu benutzen, wozu Sie auf der nächsten Seite dazu aufgefordert werden. Außer Sie haben Ihrem Browser bereits Zugriff auf die Kamera gewährt.</p> <p>Wenn Sie die Verwendung Ihrer Kamera nicht erlauben möchten, können Sie nicht an diesem Experiment teilnehmen.</p> <p>Es kann bis zu 30 Sekunden dauern, bis die Kamera gestartet wird, nachdem Sie die Erlaubnis erteilt haben.</p> <p>Drücken Sie <strong>Ok</strong>, um weiter zukommen.</p>,
choices: ['Ok'],
};
timeline.push(camera_instructions)

var init_camera = {
type: jsPsychWebgazerInitCamera,
instructions: <p><strong>Warten Sie kurz, bis Sie den Kameraausschnitt mit einem Kästchen sehen.</strong> <p>Positionieren Sie Ihren Kopf so, dass die Kamera Ihre Augen gut erkennt. Zentrieren Sie Ihr Gesicht in das viereckige Kästchen und schauen Sie direkt in die Kamera.</p> <p>Es ist wichtig, dass Sie Ihren Kopf während des Experiments einigermaßen stillhalten. Nehmen Sie sich deswegen einen Moment Zeit, um eine bequeme Position zu finden, in der Sie für die nächste Zeit bleiben können.</p> <p>Ist Ihr Kopf zentriert innerhalb des Kästchens, erscheint es grün und Sie können mit <strong>Ok</strong> fortfahren.</p>,
button_text: "Ok"
};
timeline.push(init_camera)

var calibration_instructions = {
type: jsPsychHtmlButtonResponse,
stimulus: <p>Nun werden Sie den Blickverlauf kalibrieren, damit die Software anhand des Bildes Ihrer Augen erkennen kann, wohin Sie schauen.</p> <p>Auf dem Bildschirm wird eine Reihe von Punkten angezeigt. Sehen Sie sich jeden Punkt an und klicken Sie ihn an.</p>,
choices: ['Ok'],
};
timeline.push(calibration_instructions)

var calibration = {
type: jsPsychWebgazerCalibrate,
calibration_points: [
[25,25],[75,25],[50,50],[25,75],[75,75]
],
repetitions_per_point: 2,
randomize_calibration_order: true
};
timeline.push(calibration)

var validation_instructions = {
type: jsPsychHtmlButtonResponse,
stimulus: <p>Jetzt werden wir die Genauigkeit der Kalibrierung messen.</p> <p>Schauen Sie sich jeden Punkt an, der auf dem Bildschirm erscheint.</p> <p style="font-weight: bold;">Diesmal müssen Sie nicht auf die Punkte klicken.</p>,
choices: ['Ok'],
post_trial_gap: 1000,
show_validation_data: true
};
timeline.push(validation_instructions)

var validation = {
type: jsPsychWebgazerValidate,
validation_points: [
[25,25],[75,25],[50,50],[25,75],[75,75]
],
roi_radius: 200,
time_to_saccade: 1000,
validation_duration: 2000,
show_validation_data: true,
data: {
task: 'validate'
}
};
timeline.push(validation)

var recalibrate_instructions = {
type: jsPsychHtmlButtonResponse,
stimulus: <p>Die Genauigkeit der Kalibrierung ist etwas geringer, als wir es erwarten würden.</p> <p>Versuchen wir es noch einmal mit einer Kalibrierung.</p> <p>Schauen Sie sich auf der nächsten Seite die Punkte an und klicken Sie sie an.<p>,
choices: ['OK'],
};
timeline.push(recalibrate_instructions)

var recalibrate = {
timeline: [recalibrate_instructions, calibration, validation_instructions, validation],
conditional_function: function(){
var validation_data = jsPsych.data.get().filter({task: 'validate'}).values()[0];
return validation_data.percent_in_roi.some(function(x){
var minimum_percent_acceptable = 50;
return x < minimum_percent_acceptable;
});
},
data: {
phase: 'recalibration'
}
};
timeline.push(recalibrate)

var calibration_done = {
type: jsPsychHtmlButtonResponse,
stimulus: <p>Super, wir sind mit der Kalibrierung fertig!</p> <p>Drücken Sie Ok, um auf die Instruktionsseiten für die Studie zu gelangen.</p>,
choices: ['Ok']
};
timeline.push(calibration_done)

var trial_Beispiel1 = {
type: jsPsychHtmlButtonResponse,
stimulus: <p> Bitte lesen Sie den folgenden Text aufmerksam durch. </p> <p> Auf dem Bildschirm sehen Sie immer drei Bilder. Dazu hören Sie eine kurze Situationsbeschreibung. Ihre Aufgabe ist es, konzentriert die Bilder zu betrachten und die Situationsbeschreibung anzuhören. Wenn die Situationsbeschreibung zu Ende ist, folgt automatisch das nächste Bild-Audio-Paar. </p> <p> Hier ein Beispiel mit schriftlicher Darstellung des Textes, den Sie hören werden: </p> <p> <img src="intro_pic.jpeg"></img </p> <p> <strong> "Das Nashorn und das Zebra bemerken einander an einer Straße. Das Nashorn verfolgt das Zebra durch den Tunnel. Es ist ungeduldig." </strong> </p> <p> Wenn Sie <strong> Weiter</strong> klicken, wird Ihnen ein weiteres Beispiel gezeigt, wie es auch in der Studie vorkommen wird. </p>,
choices: ['Weiter']
};
timeline.push(trial_Beispiel1)

var fixation = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '

+

',
choices: jsPsych.NO_KEYS,
trial_duration: 1000
};
timeline.push(fixation)

var trial_Beispiel2 = {
type: jsPsychAudioKeyboardResponse,
stimulus: 'Item12a_f.wav',
prompt: <p>Beispiel 2</p> <div> <img id="Item12_f_1" src="Item12_f_1.jpg"></img> <img id="Item12_f_2" src="Item12_f_2.jpg"></img> <img id="Item12_f_3" src="Item12_f_3.jpg"></img> </div>,
choices: "NO_KEYS",
trial_duration: 20000,
extensions: [
{
type: jsPsychExtensionWebgazer,
params: {targets: ['#Item12_f_1','#Item12_f_3']}
}
]
};
timeline.push(trial_Beispiel2)

var trial_ready = {
type: jsPsychHtmlButtonResponse,
stimulus: <p> Wenn Sie bereit sind, drücken Sie bitte <strong> Weiter</strong>, um mit der Studie zu beginnen. </p>,
choices: ['Weiter']
};
timeline.push(trial_ready)

var end_questions = {
type: jsPsychSurveyText,
preamble: "Das Experiment ist nun beendet. Bitte beantworten Sie noch kurz nachstehende Fragen:",
questions: [
{prompt: "Ist Ihnen während der Studie etwas aufgefallen? Irgendwelche Muster, Regelmäßigkeiten, etwas Überraschendes oder Seltsames?", name:'Auffälligkeiten', required: true, rows: 5},
{prompt: "Was hat die Studie Ihrer Meinung nach untersucht?", name:'Untersuchungszweck', required: true, rows: 5},
{prompt: "Welche Strategien – falls zutreffend – haben Sie während des Experiments verwendet?", name:'Strategien', required: true, rows: 5}
],
horizontal: false,
button_label: 'Weiter'
};
timeline.push(end_questions)

var performance_summary = {
type: jsPsychHtmlButtonResponse,
stimulus: function(generate_feedback_string) {
var feedback_string = "

Super! Sie sind fertig! Vielen Dank für Ihre Teilnahme!

";
feedback_string += '

Bitte drücken Sie Beenden, um das Experiment abzuschließen.

'
return feedback_string;
},
choices: ['Beenden']
};
timeline.push(performance_summary)

jsPsych.run(timeline);

[jodeleeuw]

Hi @schas59,

Can you provide the link to your cognition.run experiment?

[schas59]

Hey @jodeleeuw ,
thanks for your reply! I hope you had some nice christmas days.
Below's the link for the experiment, I've changed the trial duration to the actual audio length of each trial because I thought this might be the problem but there's still t missing and just the same repeated x-/y- value...
https://qsf3u44rsf.cognition.run

[schas59]

Hey Josh,
I just wanted to ask if you can already say where to find the mistake.

Thank you so much!