jsPsychSurveyHtmlForm (Debugging)

[Lena3558]

Hello everyone,

I am new to jsPsych and run into a problem while coding a simple online questionnaire.
This is my code, which works perfectly fine for the first item, but always crashes when coming to the second item. The code should display one item and if there are more than 2 input signs (Li+Ri) the page should be refreshed and otherwise the next item should be presented.

var jsPsych = initJsPsych({
  on_finish: function() {
    jsPsych.data.displayData();
  }
});

var timeline = [];
var items = ["Schreiben", "Zeichnen", "Werfen"];

for (var i = 0; i < 3; i++) {
  (function (index) {
	var ehi = {
	  type: jsPsychSurveyHtmlForm,
	  preamble: '<p> instructions </p>',
	  html: '\<pre><p>'+ (i + 1) +'. '+ items[i] +'	Links <input name="L'+ (i + 1) +'" type="text" id="L'+ (i + 1) +'" maxlength="2"/>   Rechts <input name="R'+ (i + 1) +'" type="text" id = "R'+ (i + 1) +'" maxlength="2"/></pre></p>\
	  ',
	  button_label: 'Weiter',
	  on_finish: function(data) {
        var leftInput = jsPsych.data.get().select('response').values[0]['L' + (index)].length;
        var rightInput = jsPsych.data.get().select('response').values[0]['R' + (index)].length;
	    if (leftInput + rightInput > 2) {
          alert("Bitte setzen Sie maximal 2 Kreuze.");
	      window.history.go();
		}
	  }
	};
	timeline.push(ehi);
  })(i+1);
}

jsPsych.run(timeline);

I would be very thankful for any help or ideas how to solve this problem. Thank you!
Lena

[Shaobin-Jiang]

Let's see what the problem is. The console indicates that an error main.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'length'). The code on that line is:

var leftInput = jsPsych.data.get().select('response').values[0]['L' + (index)].length;

Now, as your name property in the html string changes as index increments, so that it is L1 in the first trial, L2 in the second, and L3 in the third. However, in the second trial, you are still using jsPsych.data.get().select('response').values[0], which gets the data from the first trial. Naturally, there is only L1 and not L2, causing the error. So the correct way is modifying lines 19 and 20:

var leftInput = jsPsych.data.get().select('response').values[index - 1]['L' + (index)].length;
var rightInput = jsPsych.data.get().select('response').values[index - 1]['R' + (index)].length;

---

But there is also a better way of doing this. on_finish receives on argument which is the data object of the current trial. So instead you can simply do this:

var leftInput = data.response['L' + index].length;
var rightInput = data.response['R' + index].length;

[Lena3558]

Thanks a lot for pointing this out! This works now perfectly fine, but I have still another problem with this line: window.history.go();

After an alert message, the same item should be presented again, but the command window.history.go(); always directs back to the first item. Do you also have an idea how I can solve this problem?

[Shaobin-Jiang]

That behavior is expected. window.history.go(delta) moves delta pages, and in this case, where delta is not specified, it reloads the current page. Because the javascript code runs afresh from the beginning on every entrance to a page, the experiment starts from the first trial naturally.

The solution would be the same as I have pointed out in your other question, see here. I have provided an example of solving your problem with loop timelines below, but there is definitely room for improvement if you are keen on understanding jspsych better.

var jsPsych = initJsPsych({
  on_finish: function () {
    jsPsych.data.displayData();
  },
});

var timeline = [];
var items = ["Schreiben", "Zeichnen", "Werfen"];

// Trial id
var i = 0;

// Wrap it in a child timeline
let ehi = {
  timeline: [
    {
      type: jsPsychSurveyHtmlForm,
      preamble: "<p> instructions </p>",
      // This is the dynamic parameters feature of jsPsych; allows the parameter to be evaluated when the trial is run
      html: () => "<pre><p>" + (i + 1) + ". " + items[i] + '	Links <input name="L' + (i + 1) + '" type="text" id="L' + (i + 1) + '" maxlength="2"/>   Rechts <input name="R' + (i + 1) + '" type="text" id = "R' + (i + 1) + '" maxlength="2"/></pre></p>\ ',
      button_label: "Weiter",
    },
  ],
  loop_function: function () {
      var response = jsPsych.data.get().select("response").values;

      // Use the last value from the data
      var leftInput = response[response.length - 1]["L" + (i + 1)].length;
      var rightInput = response[response.length - 1]["R" + (i + 1)].length;

      if (leftInput + rightInput > 2) {
        alert("Bitte setzen Sie maximal 2 Kreuze.");
        
        // Repeat the timeline by returning true
        return true;
      } else {
        // Otherwise, do not repeat the timeline
        return false;
      }
    },
};


// Use another loop funcion to repeat the `ehi` timeline
// The better way would be using timeline variables, but let's not complicate things further
let trials = {
    timeline: [ehi],
    loop_function: function () {
        i++;
        return i < 3;
    }
}

jsPsych.run([trials]);

[Lena3558]

Thank you so much! I understand everything better now.