jsPsych/docs/markdown_docs/plugins/jspsych-survey-multi-picture.md

jspsych-survey-multi-picture plugin

The survey-multi-picture plugin displays a set of questions with multiple picture response fields. The subject selects a single answer.

Parameters

This table lists the parameters associated with this plugin. Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.

Parameter	Type	Default Value	Description
questions	array	undefined	An array of strings. The strings are the prompts/questions that will be associated with a group of options (images). All questions will get presented on the same page (trial).
options	array	undefined	An array of arrays of objects containing url key and label key(label is optional). The innermost arrays contain a set of options to display for an individual question. The length of the outer array should be the same as the number of questions.
horizontal	boolean	false	If true, then questions are centered and options are displayed horizontally.
preamble	string	empty string	HTML formatted string to display at the top of the page above all the questions.

Data Generated

In addition to the default data collected by all plugins, this plugin collects the following data for each trial.

Name	Type	Value
responses	JSON string	A string in JSON format containing the response for each question. The encoded object will have a separate variable for the response to each question, with the first question in the trial being recorded in Q0, the second in Q1, and so on. The responses are recorded as the image url for the picture clicked on.
rt	numeric	The response time in milliseconds for the subject to make a response. The time is measured from when the questions first appear on the screen until the subject's response.

Examples

Basic example with multiple questions on a page.

    // defining groups of questions that will go together.
    var page_1_questions = ["I like vegetables.", "I like fruit."];

    // definiting two different response scales that can be used.
    var page_1_options = [{url: "http://www.thetechconnectioninc.com/assets/img/Twitter.png", label: "twitter"}, {url: "http://www.freeiconspng.com/uploads/facebook-logo-png-20.png", label: "facebook"}];
    var page_2_options = [{url: "http://www.gameswithwords.org/WhichEnglish/images/1_1.jpg", label: "dog chase cat"}, {url: "http://www.gameswithwords.org/WhichEnglish/images/1_2.jpg", label: "cat chase dog"}];

    var multi_picture_block = {
        type: 'survey-multi-picture',
        questions: page_1_questions,
        options: [page_1_options, page_2_options],  // need one scale for every question on a page
    };

    var multi_picture_block_horizontal = {
        type: 'survey-multi-picture',
        questions: page_1_questions,
        options: [page_1_options, page_2_options],  // need one scale for every question on a page
        horizontal: true  // centers questions and makes options display horizontally
    };

    jsPsych.init({
      timeline: [multi_picture_block, multi_picture_block_horizontal],
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });