Show previous trials and right answers throughout the whole experiment

[lpavan98]

Good morning,

in my experiment I need to keep on screen the visual stimuli that participants were shown in previous trials, as well as the right answers to them. I cannot find out how to make this, so please help me if you have ideas. In the following, the desired result is explained.

In each trial, participants are shown three geometrical shapes in various colors and sizes and need to select one of the three. The three pictures for each trial should not appear in the middle of the screen, but on the left part of the screen. The right part of the screen should in fact display previously shown trials and the right answers to them. For example, when participants are doing trial number 3 on the left of the screen, trials number 1 and trial number 2 should be visible on the right (in a smaller size), with the figure corresponding to the right answer highlighted.

Thank you for the help,
Lorenzo

[Shaobin-Jiang]

Here is a really simplified version:

const jspsych = initJsPsych();

// Define all stimulus and correct responses
let stimulus = [
    { stim: ['a', 'b', 'c'], correct: 0 },
    { stim: ['d', 'e', 'f'], correct: 1 },
    { stim: ['g', 'h', 'i'], correct: 2 },
    { stim: ['j', 'k', 'l'], correct: 0 },
    { stim: ['m', 'n', 'o'], correct: 1 },
    { stim: ['p', 'q', 'r'], correct: 2 },
];

// Mark the progress of the experiment
let trial_id = 0;

let trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: () => {
        // Left part of the main content
        let html_left = `<p style="width: 40vw;">${stimulus[trial_id].stim.join('-')}</p>`;
        
        // Right part of the main content
        let html_right = '<div style="width: 40vw;">';
        for (let i = 0; i < trial_id; i++) {
            let stim = Object.assign([], stimulus[i].stim)
            let correct = stimulus[i].correct
            stim[correct] = `<b>${stim[correct]}</b>`
            html_right += `<p>${stim.join('-')}</p>`
        }
        html_right += '</div>'

        // Use flex layout here
        return '<div style="display: flex; align-items: center; justify-content: center;">' +
            html_left +
            html_right +
            '</div>'
    },
    choices: ['j', 'k', 'l'],
    on_finish: () => {
        trial_id++;
    },
};

// Repeatedly run the trial until stimulus runs out
jspsych.run([{
    timeline: [trial],
    loop_function: () => trial_id < stimulus.length
}])

This example uses characters as the stimuli, but it is quite straight-forward to replace them with your desired stimuli.

[lpavan98]

Thank you very much for the answer, it was a great help for me|