Save every text input on external HTML (with check function)

[d-bohn]

I have an external HTML trial where the user inputs a specific text string based on a prompt. The text input is evaluated by a check function that matches the text input against a variable using RegExp.

Is there a way to capture all text inputs (even if it is wrong)? For example, if the desired input is "Some text" but the user inputs "a little text", hits continue, receives a fail alert, and then inputs "Some text" and proceeds to the next trial, I'd like to have a data variable on that trial that has both responses, something like,

{
    ...,
    "text_responses": [
        "a little text",
        "Some text",
    ],
    ...,
}

From my understanding, the check function activates when the user attempts to continue the trial (the continue button), but starts this over on every "click". Using console.log() it appears to output every attempted text input, but I can't figure out a way to save those.

I've included my check function below for reference. Right now, only the last (correct) inputted value is saved. I tried adding an empty array to push the inputs to, but it still only saves the last text input.

check() {
    let regex_attr = new RegExp('Some text');
    let input = document.getElementById('textInput').value;
    console.log(input);

    if (regex_attr.test(input)) {
        jsPsych.data.addProperties({ text_responses: input });
        return true;

    } else {
        alert(
            "Wrong input! Please try again!"
        );
    }
}

[becky-gilbert]

Hi @d-bohn, sorry for the very slow response. I think you should go with the array approach rather than the one you've listed above, because this line:

jsPsych.data.addProperties({ text_responses: input });

will save the value of input to a data property called text_responses, and since the data properties have to be unique, the value of text_responses will be overwritten each time this is called. But I think the array approach that you suggested should work - something like this:

// outside of the check function, initialize the text_responses property in the data with an empty array 
jsPsych.data.addProperties({ text_responses: [] });

// inside the check function, update the value of text_responses by pushing to the array
check() {
  // ...
  let input = document.getElementById('textInput').value;
  // get the current responses array from the data
  let current_responses = jsPsych.data.get().select('text_responses').values[0];
  // overwrite the responses value in the data with a new array that adds the last input value to the end of the existing array
  let updated_responses = current_responses.push(input);
  jsPsych.data.addProperties({ text_responses: updated_responses });
}

Also, I haven't tested this, but I wonder if the reason you're only getting the last (valid) response with your code above is because the function that adds the response to the data is inside of a in if statement that is conditional on the input being correct (i.e. passing your regex test). So to save all of the responses, you could try moving the code to save the input value so that it runs regardless of whether the regex test passes.

jsPsych.data.addProperties({ text_responses: [] });

// ...

check() {
  let regex_attr = new RegExp('Some text');
  let input = document.getElementById('textInput').value;
  let current_responses = jsPsych.data.get().select('text_responses').values[0];
  let updated_responses = current_responses.push(input);

  // update the data with this response, regardless of its validity
   jsPsych.data.addProperties({ text_responses: updated_responses }); 

  if (regex_attr.test(input)) {
    return true; 
  } else {
    alert("Wrong input! Please try again!");
  }
}

Does that help?