Forms through inline JavaScript in OSWeb/JATOS?

PeterC · July 2021

Dear all,

As part of our online study, as possibly of many others, we collect responses to some questions of a questionnaire. The 'forms' item does not work in OSWeb, and the canvas + mouseclick option is not really convenient. The suggestion on the OpenSesame website is to use a commercial service. We would prefer, of course, to keep everything in the JATOS environment.

So I thought that it should be possible, somehow, to use inline script to produce the form, collect the responses, pass them to a global experiment variable, and write it to the output file together with the rest.

I wrote a javascript function that writes a html page with a form element and attached an 'eventlistener' (rather than a URL) to the submit action. There are two versions of this, one in which I recycle the OSWeb window to write the html to, and one in which I open a new window (or tab). This is a javascript inline item in my opensesame experiment layout, with a data logger immediately after it.

I do manage to show the form, and capture the responses (I can spawn an alert window with the responses upon submit, for example), but I do not manage to write it to the output file as the other logged variables. If I recycle the OSWeb window for the form, OSWeb does not come back, I have to reload or use the back function, and JATOS results in a "FAIL". If I use a new window, I can close it, the session ends 'normally', but the variable I created to capure the responses is null. I suspect that, in this case, the experiment goes straight to the data logger, without waiting for the inline javascript to return control.

Has anyone dealt with a similar situation? What would be the best solution?

I copy-pasted the javascript code below.

Kind regards,

Peter

// Dummy questionnaire for demo

vars.QQ_qarray = ["I feel happy.", "I feel sad."];

// Function to produce 5-point Likert scale for 'question' number qid:

function form_with_likert(question, qid) {

var txt_button1 = "<input type='radio' name='"+qid+ "' value='1' id='"+qid+"_1'>1</input>";

var txt_button2 = "<input type='radio' name='"+qid+ "' value='2' id='"+qid+"_2'>2</input>";

var txt_button3 = "<input type='radio' name='"+qid+ "' value=3 id='"+qid+"_3'>3</input>";

var txt_button4 = "<input type='radio' name='"+qid+ "' value=4 id='"+qid+"_4'>4</input>";

var txt_button5 = "<input type='radio' name='"+qid+ "' value=5 id='"+qid+"_5'>5</input>";

var html_txt = txt_first+question+"<br />"+txt_button1+txt_button2+txt_button3+txt_button4 +txt_button5 + "<br />" ;

return html_txt;

}

// Handling of window or tab:

// next line for new window:

// var wnd = window.open("about:blank", "");

// next line recycles the current window:

var wnd = window;

wnd.document.open();

wnd.document.write("<html><header></header><body>");

// next line for new window (text needs to be black):

// var txt_first = "<form id=likertform><p>";

// next line for OSWeb window (text needs to be white)

// Some helper variables to produce html:

var txt_first = "<form id=likertform><p style='color:white;'>";

var txt_submit = "</p><p><input type='submit' value='Submit'/><input type='reset' value='Reset' /></p>"

var txt_last = "</form>";

// Actual writing to page:

wnd.document.write(txt_first);

var qcounter = 1;

for (const QQ_q of vars.QQ_qarray) {

wnd.document.write(form_with_likert(QQ_q,String(qcounter)));

wnd.document.write("<br />");

qcounter = qcounter+1;

}

wnd.document.write(txt_submit);

wnd.document.write(txt_last);

wnd.document.write("</body></html>");

// Handle form submit:

var form = wnd.document.querySelector("#likertform");

form.className= "HTMLFormElement";

form.addEventListener("submit", function(event) {

var data = new FormData(form);

var output = "";

for (const entry of data) {

output = output + "Q" + entry[0] + "=" + entry[1] + ",\r";

};

// window.location.reload();

vars.QQ = output;

console.log(output);

wnd.alert(output);

event.preventDefault();

}, false);

wnd.document.close();

PeterC · July 2021

Ok, well, I kept trying, and I believe my idea about the reason for the problem was correct.

I solved it like this: I open a new browser window/tab, make my participant fill out the form, then close that newly created window and move focus back to the original JATOS window. While the participant is filling out the form, the original JATOS window displays a sketchpad terminated by keypress, that is immediately followed by the data logger. If the participant follows the instructions, this works fine.

This is not easily adaptable to running python/fullscreen I guess, because displaying the form depends on html and therefore the browser.

For whomever might be interested, the crucial code sample follows below. There are more efficient ways to code this, of course, and I suppose people might want to adapt this (as I will) with table layout or a 'style' tag to tweak the visual.

Kind regards,

Peter.

In prepare:

vars.QQ_qarray = ["I am happy.", "I am sad."];
vars.QQ_responses = "";

In run:

function form_with_likert(question, qid) {
  var txt_b1 = "<input type='radio' name='"+qid+ "' value='1' id='"+qid+"_1'>1</input>";
  var txt_b2 = "<input type='radio' name='"+qid+ "' value='2' id='"+qid+"_2'>2</input>";
  var txt_b3 = "<input type='radio' name='"+qid+ "' value='3' id='"+qid+"_3'>3</input>";
  var txt_b4 = "<input type='radio' name='"+qid+ "' value='4' id='"+qid+"_4'>4</input>";
  var txt_b5 = "<input type='radio' name='"+qid+ "' value='5' id='"+qid+"_5'>5</input>";
  var html_txt = txt_first+question+"<br />"+txt_b1+txt_b2+txt_b3+txt_b4+txt_b5+"<br />" ;
  return html_txt;
}

var JATOSwin = window;
var wnd = window.open("about:blank", "");
wnd.document.open();
wnd.document.write("<html><header></header><body>");
var txt_first = "<form id=likertform><p>";
var txt_submit = "</p><p><input type='submit' value='Submit'/>";
var txt_reset = "<input type='reset' value='Reset' /></p>";
var txt_last = "</form>";

wnd.document.write(txt_first);

var qcounter = 1;
for (const QQ_q of vars.QQ_qarray) {
  wnd.document.write(form_with_likert(QQ_q,String(qcounter)));
  wnd.document.write("<br />");
  qcounter = qcounter+1;
}

wnd.document.write(txt_submit);
wnd.document.write(txt_reset);
wnd.document.write(txt_last);
wnd.document.write("</body></html>");
var output = "";
var form = wnd.document.querySelector("#likertform");
form.className= "HTMLFormElement";
console.log('addEventListener');
form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = output + "Q" + entry[0] + "=" + entry[1] + ",";
  };
  vars.QQ_responses = output;
  event.preventDefault();
  wnd.close();
  JATOSwin.focus();
}, false);

wnd.document.close();

eduard · July 2021

Thanks for sharing Peter! This seems to be incredibly useful!

Howdy, Stranger!

Categories

Forms through inline JavaScript in OSWeb/JATOS?

Comments

Howdy, Stranger!

Quick Links

Categories

Forms through inline JavaScript in OSWeb/JATOS?

Comments