create a survey-multi-choice trial but with free entry "other" option?

[HenningTm]

Hello,

I would like to use the "survey-multi-choice" plugin but with an additional "other" option which would allow the user to type in a string. Similar to the "survey-html-form" plugin.

Is this possible?

[Shaobin-Jiang]

An example piece of code. Please read the comments as it explains the code in details.

let trial = {
    type: jsPsychSurveyMultiChoice,
    questions: [
        {
            prompt: 'Which would you prefer?',
            options: ['foo', 'bar', 'other']
        }
    ],
    on_load: function () {
        // Create an invisible text input after the "other" option
        let input = document.createElement('input');
        input.placeholder = 'enter your preference';
        input.style.display = 'none';

        // Insert the element after the "other" option
        //
        // Note, however, that the radio element and the text description are two elements. As the description, i.e.,
        // what is specified in the `options` parameter above, is a text node and difficult select, we are instead
        // inserting the text input we just created at the end of the parent element of this radio element and the text
        // description, which is a label element with a for like "jspsych-survey-multi-choice-response-0-2". You can
        // view its structure in the dev tool.
        //
        // How do we get the id of the label element then? It is exactly the same as that of the radio element within,
        // which is also "jspsych-survey-multi-choice-response-0-2".
        //
        // So now we have to get the id of the radio element. The radio elements of the first question is wrapped in a
        // div with an id "jspsych-survey-multi-choice-0", and the other option has a value of "other"; of couse, the
        // value depends on what is specified in the `options` parameter. Also note that here we are assuming that only
        // the first question in a survey is tweaked with; if you are modifying other questions, you might want to
        // change the id.
        let other = document.querySelector('#jspsych-survey-multi-choice-0 input[type="radio"][value="other"]');
        let label = document.querySelector(`label[for="${other.id}"]`);
        label.appendChild(input);

        // Modify the value of the other option so that the value can be recorded correctly in the data
        input.addEventListener('input', function (e) {
            // TODO: you might want to customize how to store this data to indicate that it is the result of an "other"
            // option.
            other.value = e.target.value;
        })

        // Select all radio elements and listen to click events on them
        for (let radio of document.querySelectorAll('#jspsych-survey-multi-choice-0 input[type="radio"]')) {
            radio.addEventListener('click', function () {
                if (radio.value === 'other') {
                    input.style.display = 'block';

                    // Require input
                    input.required = true;
                } else {
                    input.style.display = 'none';

                    // Do not require input
                    input.required = false;
                }
            })
        }
    }
};

[HenningTm]

Works perfectly! Thank you so much!

[HenningTm]

How can I make this new version of jsPsychSurveyMultiChoice required? Right now you can just click "continue" and it moves to the next trial without having chosen one of the options. Adding the parameter "required: true" to the question doesnt change this, unfortunately.

[Shaobin-Jiang]

Just add required: true to the questions as you would normally do.

{
    questions: [
        {
            prompt: 'Which would you prefer?',
            options: ['foo', 'bar', 'other'],
            required: true, // add it here
        }
    ],
}
···

[HenningTm]

I did that but it still allows me to continue without a choice

Edit: Scratch that, I made a mistake, your edit works!