jsPsych icon indicating copy to clipboard operation
jsPsych copied to clipboard

How could I change the label text for IAT-plugin?

Open Tongzhao9417 opened this issue 1 year ago • 3 comments

Hi everyone. I'm facing to issues in my IAT experiment. I want to change the lable text in another language (e.g., Chinese or Germany). How could I do?

The text I want to Change:

image

I want to Change the "Press e for:" into "Drück e zum zugriff"

Tongzhao9417 avatar May 02 '24 04:05 Tongzhao9417

Just make the change in on_load:

let jsPsych = initJsPsych();

let trial = {
    type: jsPsychIatHtml,
    stimulus: 'Joyous',
    stim_key_association: 'left',
    html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
    bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
    force_correct_key_press: true,
    display_feedback: true,
    trial_duration: 3000, //Only if display_feedback is false
    left_category_key: 'e',
    right_category_key: 'i',
    left_category_label: ['OLD', 'GOOD'],
    right_category_label: ['YOUNG', 'BAD'],
    response_ends_trial: true,
    on_load: function () {
        let left = document.querySelector('#trial_left_align p');
        let right = document.querySelector('#trial_right_align p');
        left.innerHTML = left.innerHTML.replace(
            `Press ${this.left_category_key} for`,
            `Drück ${this.left_category_key} zum zugriff`
        );
        right.innerHTML = right.innerHTML.replace(
            `Press ${this.right_category_key} for`,
            `Drück ${this.right_category_key} zum zugriff`
        );
    },
};

jsPsych.run([trial]);

Shaobin-Jiang avatar May 03 '24 01:05 Shaobin-Jiang

Just make the change in on_load:


let jsPsych = initJsPsych();



let trial = {

    type: jsPsychIatHtml,

    stimulus: 'Joyous',

    stim_key_association: 'left',

    html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',

    bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',

    force_correct_key_press: true,

    display_feedback: true,

    trial_duration: 3000, //Only if display_feedback is false

    left_category_key: 'e',

    right_category_key: 'i',

    left_category_label: ['OLD', 'GOOD'],

    right_category_label: ['YOUNG', 'BAD'],

    response_ends_trial: true,

    on_load: function () {

        let left = document.querySelector('#trial_left_align p');

        let right = document.querySelector('#trial_right_align p');

        left.innerHTML = left.innerHTML.replace(

            `Press ${this.left_category_key} for`,

            `Drück ${this.left_category_key} zum zugriff`

        );

        right.innerHTML = right.innerHTML.replace(

            `Press ${this.right_category_key} for`,

            `Drück ${this.right_category_key} zum zugriff`

        );

    },

};



jsPsych.run([trial]);

Oh! I see! It's a good idea by using css selector. Alternatively, I modified the original IAT plugin code to achieve the same effect, but your advice is more simple. Thanks

Tongzhao9417 avatar May 03 '24 03:05 Tongzhao9417

I'd love to merge changes into the plugin code that makes the text a parameter for easy customization if you are interested in contributing that change!

jodeleeuw avatar May 03 '24 03:05 jodeleeuw

I'd love to merge changes into the plugin code that makes the text a parameter for easy customization if you are interested in contributing that change!

Thanks Josh. I would like to make a PR if I already modify successfully.

Tongzhao9417 avatar May 03 '24 04:05 Tongzhao9417