Text responses in JavaScript: Dialogue boxes

Online experiments
8

Fianaly, after a lot of work I managed to solve the issues. The full approach is to use a JQueries to access and customize a Dialogue Box. The code works well while a new version of Psychopy arrives with new features that make life easier for everyone.

For anyone interested in the solution, the function in JavaScript below creates and displays a Dialogue Box. The function takes two arguments as default text for the input fields. When people click on the “OK” button, the text they typed in the input fields is used to update the value of those variables.

Code at the beginning of the experiment:

  showTextBox = function(text1="", text2="") {

      //Destroy the Old Dialog Box
      psychoJS.gui.destroyDialog();


      //Create new Dialoge Box
      let boxTitle = 'Title of the dialogue box';
      let boxFields = {'Label1': text1, 'Label2': text2};
     
      var myBox = psychoJS.gui.DlgFromDict({
          dictionary: boxFields,
          title: boxTitle
          });
      
      //Run the new Dialogue Box
      myBox();

      //Enable the "OK" button
      $("#buttonOk").button("option", "disabled", false);
      $("#buttonOk").hide(0, () => { $("#buttonOk").show(); });

      //Hide the progress bar
      $("#progressbar").hide();
      
     //When "OK" is pressed... 
      $("#buttonOk").click( function() {
          var Label1_Input = document.getElementById("Label1" + "_id");
          var Label2_Input = document.getElementById("Label2" + "_id");
          
          // Variables that will be updated
          myText1 = Label1_Input.value;
          myText2 = Label2_Input.value;            
       }

     //When "CANCEL" is pressed
      $("#buttonCancel").click( function() {
       }

How to call the function during the experiment:

var myText1 = "Default Text";
var myText2 = "Default Text";

showTextBox(myText1, myText2);

** Notice that this function cannot return the updated values of the input fields as it finishes running way before the people are able to type something and click on “OK”. The function in charge of updating the value of the variables is a JQuery called when the “OK” button is pressed.