survey-multi-choice. trial should end on radio button selection

[maritp]

Hi all,

I'm using an adapted version of the survey-multi-choice plugin to present x images on a grid with radio buttons below them.
I'm struggling with implementing that the next trial starts on any radio button selection (instead on clicking the continue button).
I can change the plugin so that the next trial starts for example on selecting one specific radio button (corresponds to line 181 of the survey-multi-choice plugin):

document.querySelector("#jspsych-survey-multi-choice-response-0-0").addEventListener("click", (event) => {

However, what is the correct querySelector for all the multi-choice-responses as I want the trial to end on any radio button click (I'm outside the for loop that loops across the choices)?
Further, when I do it like that, the radio button is not filled anymore on the click. Any hints on how I get the filling of the radio button back?

Thanks a lot in advance for your help.
You are doing an amazing job here!

Cheers,
Marit

[jodeleeuw]

Hi @maritp,

You can use querySelectorAll('input[type="radio"]') to get all of the radio buttons. However, this returns the collection of radio elements, so you have to iterate through it and attach the event listener to each one. Here's a relevant stackoverflow post.

I'm not sure why the radio button is not filling in. Did you call event.preventDefault() in the event handler?

[maritp]

Hi @jodeleeuw,

Thanks a lot for you quick and helpful response. The looping works perfectly.
Regarding the filling of the radio button. I do call the event.preventDefault() in the event handler. This is the whole loop:

            const rad_all = document.querySelectorAll("input[type='radio']");
            for (var j = 0; j < rad_all.length; j++ ) {
                rad_all[j].addEventListener("click", (event) => {
                   event.preventDefault();
                    // measure response time
                    var endTime = performance.now();
                    var response_time = Math.round(endTime - startTime);
                    // create object to hold responses
                    var question_data = {};
                    for (var i = 0; i < trial.questions.length; i++) {
                        var match = display_element.querySelector("#jspsych-survey-multi-choice-" + i);
                        var id = "Q" + i;
                        var val;
                        if (match.querySelector("input[type=radio]:checked") !== null) {
                            val = match.querySelector("input[type=radio]:checked").value;
                        }
                        else {
                            val = "";
                        }
                        var obje = {};
                        var name = id;
                        if (match.attributes["data-name"].value !== "") {
                            name = match.attributes["data-name"].value;
                        }
                        obje[name] = val;
                        Object.assign(question_data, obje);
                    }
                    // save data
                    var trial_data = {
                        rt: response_time,
                        response: question_data,
                        question_order: question_order,
                    };
                    display_element.innerHTML = "";
                    // next trial
                    this.jsPsych.finishTrial(trial_data);
                });
            }

[jodeleeuw]

Part of what might be happening is that you are finishing the trial immediately after someone clicks the radio button, so the radio button might be cleared (display_element.innerHTML = "";) before the button icon can change.