Problems with modified image-button-response

[kburkin]

Hi! I'm having a couple of problems with a plugin that I made by modifying the image-button-response plugin. Following @becky-gilbert 's advice, I put in some code to add a skip/"I don't know" button which would appear for the users after a minute. I'm having two issues with this code (but they are not giving me any errors that I can see):

1. My prompts for test trials no longer appear in my trials (e.g. the line that says "Click the image that you think does not belong."). I think this has to do with my modified plugin, because I have trials in the same experiment with the same prompt code that use the regular image-button-response plugin and they work just fine.

2. When the skip button is clicked, it should show up in my result output as "unsure", but instead it shows up as "NaN". For my purposes this isn't really a problem, but I wonder why it doesn't work.

I've attached my plugin as a .txt file, and I've included my test trial procedure and an example of trial data for one of my test trials below. I'd appreciate any help that people can offer!

Thanks,
-Kelly

Test trial procedure:

        var test = {
            type: jsPsychOddOneOut,
            stimulus: jsPsych.timelineVariable('stimulus'),
            choices: function(){
                return jsPsych.randomization.shuffle(jsPsych.timelineVariable('choices'));
            },
            button_html: '<img src="img/images/%choice%.jpg" style="width:30vw; border:2px solid #000000;" onclick=badading.play() />',
            prompt: '<span style="font-size:2vw;">Click the image that you think does not belong.</span>', // THIS DOES NOT APPEAR
            data: jsPsych.timelineVariable('data'),
            save_trial_parameters: {
                choices: true // save the randomly-selected button order to the trial data
            },
            post_trial_gap: 600, // inserted to allow the image button noise to finish           
        }

Example trial data:

    {
        stimulus: '',
        choices: [
            'brake/brake_01b',
            'needle/needle_01s',
            'float/float_01b',
        ],
        data: {
            bin_number: 'Interval 0.2-0.3',
            pair_number: '13',
            triplet_index: '3406755',
            test_part: 'test',
            odd_one_out: 'float',
        },
    },

plugin-odd-one-out.txt

[becky-gilbert]

Hi @kburkin,
I'm not sure, but I think the problem with your plugin code is that in this part:

html += '<div class="jspsych-odd-one-out-button" style="display:block; position:fixed; width:13vw; left:calc(90vw - 8.5vw); bottom:0; margin:2vw" id="skip-button" data-choice="unsure"><button class="jspsych-btn" style="visibility:hidden;" onclick=bloop.play()>'+"I don't know >"+'</button></div>';
display_element.innerHTML = html;

the last line above is removing some content that had been added to the page already. One confusing thing about the image-* plugins is that the content is added to the page in two different ways, depending on whether render_on_canvas is true or false. If it's true (the default) then content is added progressively with e.g.
display_element.insertAdjacentHTML("beforeend", trial.prompt);
Whereas if it's false, then the content is put together in one long html string and added to the page all at once.

So one thing you could try is just using render_on_canvas: false in your trial definition, and that might fix it.

Or if you want to keep using the canvas rendering method, you could change your code so that the "don't know" button is added to the bottom of the existing page content like this:

var unsure_button = '<div class="jspsych-odd-one-out-button" style="display:block; position:fixed; width:13vw; left:calc(90vw - 8.5vw); bottom:0; margin:2vw" id="skip-button" data-choice="unsure"><button class="jspsych-btn" style="visibility:hidden;" onclick=bloop.play()>'+"I don't know >"+'</button></div>';
display_element.insertAdjacentHTML("beforeend", unsure_button);

Does that help?

[becky-gilbert]

Oh and for your second question, the value of the data-choice attribute is an integer for all of the normal response buttons, but for your "don't know" button it's a string (unsure). In the after_response function, the choice is assumed to be a number and is converted to a string here:

response.button = parseInt(choice)

When choice is a string instead of a number, the result is NaN.
I would just add an if statement here that checks the value of choice before trying to convert it from an integer to a string. Something like:

if (choice === "unsure") {
  response.button = choice;
} else {
  response.button = parseInt(choice);
}

[kburkin]

Thank you for the quick response @becky-gilbert ! I made render_on_canvas false and added the if statement. Both worked and everything looks great!