Retrieve data from survey-html-form

[christinalubinus]

Hello everyone,

In an attempt to build a rudimentary version of a digit span test, I plan to present participants with an audio file and ask them to reproduce the digits by typing them into a survey-html-form. To check their performance, I need to compare the digits typed in by the participant with the ones stored in a js-file. Thus, what I hope to get store in the variable get_digits is just the digits that were typed in.
But... I am running into trouble already when extracting the results from the survey text field (I pasted the relevant -I hope- snippet of code below). My logic was that my variable data would be an object, from which I could extract the value (the numbers typed in) by means of the key ("digits"). However, get_digits is undefined and data looks like this in the console: ["{"digits":"456"}"]. I suppose I am just getting the data types wrong but I have tried a couple of things and just could not quite understand the logic behind it. Is there anyone who could help? Any hint would be appreciated.

Thanks a lot in advance,
Christina

[wenbo-lin]

Here is a quick example.

var form_trial = {
		type: 'survey-html-form',
		preamble: '',
		html:'<input type="text" name="digits">',
		on_finish:function(data){
		let response = JSON.parse(data.responses);
		console.log(response.digits);
		}
	}

The input name portion is missing quotes around it.

[christinalubinus]

Thanks a lot for your quick reply! This helps a lot.

[becky-gilbert]

Hi Christina,
The problem here is that the value of responses starts off as an object of key-value pairs (question names and text responses), and JavaScript objects can't be stored directly in the jsPsych data, so they have to be stored as a JSON-formatted text. So when trying to access the responses object, you just need to convert the JSON text back to JavaScript with JSON.parse(). Try this:

var form_trial = {
    type: 'survey-html-form',
    preamble: '<p>Please, type in the digits you just heard in the correct order.</p>',
    html: '<p><input name="digits" type="text"/></p>',
    button_label: 'Submit',
    on_finish: function(data) {
        var data = JSON.parse(jsPsych.data.get().last(1).select('responses').values);
        var get_digits = data["digits"];
        console.log(get_digits);
    }
}

[christinalubinus]

Thank you, Becky, the code solves the issue. Thanks as well for the explanation - the JSON-formatting information I did not quite absorb from the documentation (although it is there as I just checked).

[becky-gilbert]

Glad to hear that this is in the documentation, although I'm sure it could be clearer... We'll try to think of ways to improve it. (And by the way - if you ever want to help improve the jsPsych docs, you can always submit a pull request with suggestions 😃 )

[christinalubinus]

Honestly, I have been wanting to start contributing to projects but didn't so far because I have not felt familiar enough with github. Maybe I take this hint as a challenge for the weekend 😉