Single trial showing an array of images selecting and button response #2323

kiante-fernandez · 2021-11-11T04:33:19Z

kiante-fernandez
Nov 11, 2021

I am trying to create a single trial experiment. The goal is to have an array/grid of 15 images shown to the subject. Then in that trial subjects can move the mouse over an image and click it to indicate selection (sort of like a button). But I do not want this to end the trial, I want to record the selection and highlight a box around the image to indicate selection. Then, once the subject has selected the number of image they desire, I would like the subject to use a keypress which would end the trial.

So far, since I care about when they select an image timing wise and changing the images (since once they are clicked on the outline around them should appear) I thought the psychophysics plugin would be of use.

<!DOCTYPE html>
<html>
    <head>
        <script src="jspsych-psychophysics/js/jspsych.js"></script>
        <script src="jspsych-psychophysics/jspsych-psychophysics.js"></script>
        <script src="jspsych-psychophysics/js/jspsych-preload.js"></script>
        <script src="jspsych-psychophysics/js/jspsych-html-button-response.js"></script>
        <script src="jspsych-psychophysics/js/jspsych-image-button-response.js"></script>

        <!-- <script src="js/plugins/jspsych-html-button-response.js"></script> -->
        <script src="js/plugins/jspsych-instructions.js"></script>
        <script src="js/plugins/jspsych-image-keyboard-response.js"></script>
        <script src="js/plugins/jspsych-html-keyboard-response.js"></script>

        <link href="css/jspsych.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    </body>

<script>

const images = [
    "img/food/food1.jpg",
    "img/food/food2.jpg",
    "img/food/food3.jpg",
    "img/food/food4.jpg",
    "img/food/food5.jpg",
    "img/food/food6.jpg",
    "img/food/food7.jpg",
    "img/food/food8.jpg",
    "img/food/food9.jpg",
    "img/food/food10.jpg",
    "img/food/food11.jpg",
    "img/food/food12.jpg",
    "img/food/food13.jpg",
    "img/food/food14.jpg",
    "img/food/food15.jpg",
];

// Preloading files are needed to present the stimuli accurately.
const preload = {
    type: 'preload',
    images: images,
}
        // Experimental trial (just one trial!)
        var trial = {
            timeline: [
                {
                    type: 'psychophysics',
                    stimuli: [
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('firstImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 100,
                            startX: 150,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('secondImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 100,
                            startX: 425,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('thirdImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 100,
                            startX: 700,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('fourthImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 100,
                            startX: 975,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('fithImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 100,
                            startX: 1250,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('sixthImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 325,
                            startX: 150,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('seventhImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 325,
                            startX: 425,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('eighthImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 325,
                            startX: 700,
                            scale: 0.25
                        },
                        {
                            obj_type: 'image',
                            file: jsPsych.timelineVariable('ninthImage'),
                            show_start_time: 500, // ms after the start of the trial
                            startY: 325,
                            startX: 975,
                            scale: 0.25
                        },
                        {
                        obj_type: 'image',
                        file: jsPsych.timelineVariable('tenthImage'),
                        show_start_time: 500, // ms after the start of the trial
                        startY: 325,
                        startX: 1250,
                        scale: 0.25
                    },
                    {
                        obj_type: 'image',
                        file: jsPsych.timelineVariable('eleventhImage'),
                        show_start_time: 500, // ms after the start of the trial
                        startY: 550,
                        startX: 150,
                        scale: 0.25
                    },
                    {
                        obj_type: 'image',
                        file: jsPsych.timelineVariable('twelfthImage'),
                        show_start_time: 500, // ms after the start of the trial
                        startY: 550,
                        startX: 425,
                        scale: 0.25
                    },
                    {
                        obj_type: 'image',
                        file: jsPsych.timelineVariable('thirteenthImage'),
                        show_start_time: 500, // ms after the start of the trial
                        startY: 550,
                        startX: 700,
                        scale: 0.25
                    },
                    {
                        obj_type: 'image',
                        file: jsPsych.timelineVariable('fourteenthImage'),
                        show_start_time: 500, // ms after the start of the trial
                        startY: 550,
                        startX: 975,
                        scale: 0.25
                    },
                    {
                    obj_type: 'image',
                    file: jsPsych.timelineVariable('fifteenthImage'),
                    show_start_time: 500, // ms after the start of the trial
                    startY: 550,
                    startX: 1250,
                    scale: 0.25
                }
                    ],
                    data: {
                        'firstImage': jsPsych.timelineVariable('firstImage'),
                        'secondImage': jsPsych.timelineVariable('secondImage'),
                        'thirdImage': jsPsych.timelineVariable('thirdImage'),
                        'fourthImage': jsPsych.timelineVariable('fourthImage'),
                        'fithImage': jsPsych.timelineVariable('fithImage'),
                        'sixthImage': jsPsych.timelineVariable('sixthImage'),
                        'seventhImage': jsPsych.timelineVariable('seventhImage'),
                        'eighthImage': jsPsych.timelineVariable('eighthImage'),
                        'ninthImage': jsPsych.timelineVariable('ninthImage'),
                        'tenthImage': jsPsych.timelineVariable('tenthImage'),
                        'eleventhImage': jsPsych.timelineVariable('eleventhImage'),
                        'twelfthImage': jsPsych.timelineVariable('twelfthImage'),
                        'thirteenthImage': jsPsych.timelineVariable('thirteenthImage'),
                        'fourteenthImage': jsPsych.timelineVariable('fourteenthImage'),
                        'fifteenthImage': jsPsych.timelineVariable('fifteenthImage')
                    } // for identification
                }
            ],
            timeline_variables: [
                {   firstImage: images[0],
                    secondImage: images[1],
                    thirdImage: images[2],
                    fourthImage: images[3],
                    fithImage: images[4],
                    sixthImage: images[5],
                    seventhImage: images[6],
                    eighthImage: images[7],
                    ninthImage: images[8],
                    tenthImage: images[9],
                    eleventhImage:images[10],
                    twelfthImage:images[11],
                    thirteenthImage:images[12],
                    fourteenthImage:images[13],
                    fifteenthImage: images[14]},
            ],
        }
        // Debrief

        // timeline
        timeline = []
        timeline.push(trial);
        //Start Experiment
        jsPsych.init({
            timeline: timeline,
            on_finish: function () {
                jsPsych.data.displayData()
            }
        })

I am not as seasoned of a programmer in javescript. So I am looking for some advice about where to go from here. Any tips are greatly appreciated.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Single trial showing an array of images selecting and button response #2323

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Single trial showing an array of images selecting and button response #2323

Uh oh!

kiante-fernandez Nov 11, 2021

Replies: 0 comments

kiante-fernandez
Nov 11, 2021