Survey text - auto-fill issue and trouble providing feedback #2488

patiencerosestevens · 2022-02-03T19:33:04Z

patiencerosestevens
Feb 3, 2022

Hello! I'm having two issues with survey-text trials.

The first issue is I suspect less specific to my code - when I use Chrome to view my experiment, even with an incognito browser, it suggests prior responses that I've typed for auto-replace during survey-text trials, even though I've set "autocomplete" to "false". I've noticed this doesn't happen when I run it with Safari - should I just tell my participants not to use Chrome?

The second issue has to do with how I provide feedback on whether the participant's typed entry matches the correct answer. My code is below - I looked at two other discussions on this issue and I wasn't able to fix my problem. It breaks when I reach the end of the survey-text trial, and I believe the issue is specifically with the lines "if (data.response.typed_word.toUpperCase() == data.word)" because when I comment out that if statement and just let tm = false, everything else works fine. Thank you for your help with this!

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="jspsych-psychophysics-master/js/jspsych.js"></script>
    <script src="jspsych-psychophysics-master/js/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych-psychophysics-master/js/jspsych-fullscreen.js"></script>
    <script src="jspsych-psychophysics-master/js/jspsych-survey-text.js"></script>
    <script src="jspsych-psychophysics-master/js/jspsych-html-button-response.js"></script>
    <script src="jspsych-psychophysics-master/js/svg.js"></script>
    <script src="jsPsych/jspsych.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jspsych-psychophysics-master/css/jspsych.css">
    </link>
</head>

<body></body>
<script>
    var timeline = [];

    var iti = 300; // gap between trials - 300 ms
    var break_dur = 30000; // break duration (unless they press key to continue) - 30 seconds
    var feedback_dur = 1200;

    var def_list = [ // This is where the variables that will be iterated through are listed - same trial but different word pair
        {
            word: 'LIVE', def: 'to exist', comp1: 'die', comp1_rel: 1, comp2: 'clock', comp2_rel: 0, comp3: 'match', comp3_rel: 0,
            def_foil1: 'to hold 6 objects', def_foil2: 'to fall from great height', def_foil3: 'to name a newborn baby',
            def_foil4: 'to burn accidentally', def_pos1: 0, def_pos2: 2, def_pos3: 1
        },
        {
            word: 'WIN', def: 'to not lose', comp1: 'ripple', comp1_rel: 0, comp2: 'prize', comp2_rel: 1, comp3: 'beat', comp3_rel: 1,
            def_foil1: 'to hold 6 objects', def_foil2: 'to fall from great height', def_foil3: 'to name a newborn baby',
            def_foil4: 'to burn accidentally', def_pos1: 2, def_pos2: 1, def_pos3: 0
        },
        {
            word: 'CLIMB', def: 'to ascend', comp1: 'banana', comp1_rel: 0, comp2: 'mountain', comp2_rel: 1, comp3: 'wizard', comp3_rel: 0,
            def_foil1: 'to hold 6 objects', def_foil2: 'to fall from great height', def_foil3: 'to name a newborn baby',
            def_foil4: 'to burn accidentally', def_pos1: 2, def_pos2: 0, def_pos3: 1
        },
        {
            word: 'MESS', def: 'to make unclean', comp1: 'clean', comp1_rel: 1, comp2: 'broom', comp2_rel: 1, comp3: 'dynamite', comp3_rel: 0,
            def_foil1: 'to hold 6 objects', def_foil2: 'to fall from great height', def_foil3: 'to name a newborn baby',
            def_foil4: 'to burn accidentally', def_pos1: 1, def_pos2: 0, def_pos3: 2
        }
    ];

    var bk1_inst = {
        type: 'html-button-response',
        stimulus: '<p><strong>Section 1 of 9</strong></p>' +
            '<p>In this section, you will learn definitions for a set of new words.</p>' +
            '<p>For each word, read the word and definition. Then <b>type the word</b> in the text box provided.</p>' +
            '<p>(Note that capitalization doesn\'t matter: if you see "TROOFLE" and type "troofle", that\'s fine.)</p>' +
            '<p>*</p>' +
            '<p>Then you will be presented with a real word (e.g., "bird") and asked to decide whether</p>' +
            '<p>this word is or is not related in meaning to the new word.</p>' +
            '<p>Related words can be synonyms, antonyms, or otherwise</p>' +
            '<p>similar in meaning. Try to be as accurate in these responses as possible.</p>',
        choices: ['I\'ve read the instructions, and I\'m ready to start']
    }
    timeline.push(bk1_inst);

    var bk1 = { // this is block 1 - show word and definition, type word, respond "yes" or "no" to whether it's related. 
        timeline_variables: def_list,
        randomize_order: true,
        timeline: [
            {
                type: 'survey-text',
                preamble: jsPsych.timelineVariable('word'),
                questions: [
                    { prompt: jsPsych.timelineVariable('def'), required: true, name: "typed_word" }
                ],
                autocomplete: false,
                data: {
                    word: jsPsych.timelineVariable('word'),
                    block: "bk1"
                },
                button_label: 'Submit',
                // **Below is the end-of-event function that should record whether typed word matches presented word. 
                // **The code breaks when I get to this part of the trial. 
                on_finish: function (data) {
                    // Score the response as correct or incorrect.
                    var tm = false;
                    if (data.response.typed_word.toUpperCase() == data.word) {
                        tm = true;
                    }
                    data.typematch = tm;
                }
                // ** end of section
            },
            // **Below is the event where I would provide feedback if typed word didn't match presented word. 
            // **Only is displayed if typematch was set to false  on last event. 
            {
                type: 'html-keyboard-response',
                stimulus: "That did not quite match - be careful to type the word correctly!",
                trial_duration: function () {
                    var typed_word_match = jsPsych.data.getLastTrialData().values()[0].typematch;
                    if (typed_word_match) {
                        return 0; // feedback is not displayed
                    } else {
                        return feedback_dur; // feedback is displayed
                    }
                }
            },
            // **End of section. 
            {
                type: 'html-button-response',
                stimulus: jsPsych.timelineVariable('comp1'),
                prompt: '<p>Is this related in meaning to the word you just typed?</p>',
                choices: ['No', 'Yes'],
                on_finish: function (data) {
                    // Score the response as correct or incorrect.
                    if (data.response == jsPsych.timelineVariable('comp1_rel')) {
                        data.correct = true;
                    } else {
                        data.correct = false;
                    }
                },
                margin_vertical: '20px'
            },
            {
                type: 'html-keyboard-response',
                stimulus: function () {
                    var is_rel = ["not ", ""];
                    var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
                    if (last_trial_correct) {
                        return "<p>Correct!</p>"; // the parameter value has to be returned from the function
                    } else {
                        return "<p>Incorrect.</p>" + "<p><strong>" + jsPsych.timelineVariable('comp1') + "</strong> is " +
                            is_rel[jsPsych.timelineVariable('comp1_rel')] + "related in meaning to <strong>" +
                            jsPsych.timelineVariable('word') + "</strong></p>"; // the parameter value has to be returned from the function
                    }
                },
                trial_duration: feedback_dur
            }
        ]
    };
    timeline.push(bk1)

    var debrief1 = { // beginning of actual debrief - what was the experiment about? 
        type: 'html-button-response',
        choices: ['Continue'],
        stimulus: "<p>Thank you for participating!</p>" +
            "<p>Now we\'ll explain what this study is about... </p>"
    }
    timeline.push(debrief1);

    jsPsych.init({ // this is the code that actually runs the timeline we just built 
        timeline: timeline,
        default_iti: iti
    });
</script>

</html>

Answered by becky-gilbert

Feb 3, 2022

Hi @patiencerosestevens, I'm not sure which version of the survey-text plugin you're using because you're using files from the jsPsych psychophysics fork. Do you happen to know what jsPsych version those files are based on? I'm wondering if your version of the survey-text plugin doesn't include the autocomplete parameter. Perhaps you could add a link to your files or to a live version of your experiment?

View full answer

becky-gilbert · 2022-02-03T21:26:18Z

becky-gilbert
Feb 3, 2022
Maintainer

Hi @patiencerosestevens, I'm not sure which version of the survey-text plugin you're using because you're using files from the jsPsych psychophysics fork. Do you happen to know what jsPsych version those files are based on? I'm wondering if your version of the survey-text plugin doesn't include the autocomplete parameter. Perhaps you could add a link to your files or to a live version of your experiment?

9 replies

becky-gilbert Feb 3, 2022
Maintainer

I just looked at your survey-text plugin file, and I think it's an older version because there's no autocomplete parameter, and the response field in the trial data is called responses rather than response.

One option is to switch to using a jsPsych release rather than using the psychophysics fork, but that might mean having to make a bunch of other changes to your code to make it compatible with that jsPsych version. I can't say for sure whether this will be the case and what changes you'd have to make without knowing what version of jsPsych your forked files are based on. If you go with this option, then I suggest using jsPsych v6.3.1. In this version, the responses are stored in a data property called "response", so you would keep the data.response.typed_word in your on_finish code. And there is an autocomplete parameter in this version, so your autocomplete: false parameter should work in Chrome.

A simpler option might be to edit your survey-text plugin file so that it includes the autocomplete parameter. This way you don't have to deal with other compatibility-related changes that come with switching jsPsych versions. You can look at a newer version of the plugin from jsPsych v6.3.1 (the last v6 release, before the major v7 changes): https://github.com/jspsych/jsPsych/blob/v6.3.1/plugins/jspsych-survey-text.js
Search for "autocomplete" and make the relevant changes to your file. In this case you can leave the trial data name as responses in the plugin file, and update your on_finish code to use responses instead of response:

on_finish: function (data) {
  // Score the response as correct or incorrect.
  var tm = false;
  if (data.responses.typed_word.toUpperCase() == data.word) {    // <-- CHANGED TO "responses"
    // etc.
}

I hope this helps. Can you let us know if either of these solutions work for you?

patiencerosestevens Feb 3, 2022
Author

Thank you so much! Editing the jspsych-survey-text.js I was using to include an autocomplete parameter did the trick, and I'm glad I didn't have to switch to a jsPsych release.

I'm still having trouble with the data.responses section, however. When I get rid of the .toUpperCase(), the code doesn't break anymore but the data.responses.typed_word is always output as undefined so it never satisfies data.responses.typed_word == data.word . My newest code is below :

on_finish: function (data) {
     console.log("response: ", data.responses.typed_word); // took out .toUpperCase());
     console.log("correct: ", data.word); 
     var tm = false;
     if (data.responses.typed_word == data.word) {  // took out .toUpperCase()
          tm = true;
     }
     data.typematch = tm;
    }

patiencerosestevens Feb 4, 2022
Author

Good news, I found a way to make this work! I'm sure there is a more elegant solution, but here's what worked for me:

With the older version of jsPysch that I'm using, when I printed out "responses" with console.log("response: ", data.responses); the output is a string in the format {"Q0":"mess"}.
So I just spliced up this string to get what I needed, removing the first 7 characters and the last 2 characters: var typedword = data.responses.slice(7, data.responses.length).slice(0, -2).toUpperCase(). The full block of code is below, if anyone else wants a quick but hacky fix to this issue! Thanks so much for your help, @becky-gilbert

var bk1 = { // this is block 1 - show word and definition, type word, respond "yes" or "no" to whether it's related. 
        timeline_variables: def_list,
        randomize_order: true,
        timeline: [
            {
                type: 'survey-text',
                preamble: jsPsych.timelineVariable('word'),
                questions: [
                    { prompt: jsPsych.timelineVariable('def'), required: true } // got rid of name: typed_word
                ],
                autocomplete: false,
                data: {
                    word: jsPsych.timelineVariable('word'),
                    block: "bk1"
                },
                button_label: 'Submit',
                on_finish: function (data) {
                    var typedword = data.responses.slice(7, data.responses.length).slice(0, -2).toUpperCase()
                    console.log("response: ", data.responses);
                    console.log("response: ", typedword);
                    console.log("correct: ", data.word);
                    var tm = false;
                    if (typedword == data.word) {
                        tm = true;
                    }
                    data.typematch = tm;
                }
            },
            {
                type: 'html-keyboard-response',
                stimulus: "That did not quite match - be careful to type the word correctly!",
                trial_duration: function () {
                    var typed_word_match = jsPsych.data.getLastTrialData().values()[0].typematch;
                    if (typed_word_match) {
                        return 0; // the parameter value has to be returned from the function
                    } else {
                        return feedback_dur; // the parameter value has to be returned from the function
                    }
                }
            }
        ]
    };
    timeline.push(bk1)

becky-gilbert Feb 4, 2022
Maintainer

Glad to hear you were able to add the autocomplete parameter and fix the response scoring!

Ah yes, I just realized why you were getting undefined for the responses - it's because your version of the plugin converts the JavaScript object that contains the responses into a JSON-formatted string before saving it to the jsPsych data (this is something we changed in v6.3 I think). So another way to get the value from the data is to convert the responses JSON string back into a JavaScript object with JSON.parse. For instance, if your question name is typed_word, then you can do this:

var typedword = JSON.parse(data.responses).typed_word.toUpperCase();

Of course you can stick with the slice method if that's working - just giving you another option 😃

patiencerosestevens Feb 5, 2022
Author

Thank you! That's much tidier, I switched to the JSON.parse approach.

Uh oh!

Survey text - auto-fill issue and trouble providing feedback #2488

Uh oh!

Uh oh!

patiencerosestevens Feb 3, 2022

Replies: 1 comment · 9 replies

Uh oh!

becky-gilbert Feb 3, 2022 Maintainer

Uh oh!

Uh oh!

becky-gilbert Feb 3, 2022 Maintainer

Uh oh!

Uh oh!

patiencerosestevens Feb 3, 2022 Author

Uh oh!

Uh oh!

patiencerosestevens Feb 4, 2022 Author

Uh oh!

becky-gilbert Feb 4, 2022 Maintainer

Uh oh!

patiencerosestevens Feb 5, 2022 Author

patiencerosestevens
Feb 3, 2022

Replies: 1 comment 9 replies

becky-gilbert
Feb 3, 2022
Maintainer

becky-gilbert Feb 3, 2022
Maintainer

patiencerosestevens Feb 3, 2022
Author

patiencerosestevens Feb 4, 2022
Author

becky-gilbert Feb 4, 2022
Maintainer

patiencerosestevens Feb 5, 2022
Author