To create an image chooser question, define an object with the
type property set to
"imagepicker" and add it to the
elements array. Use the
choices array to specify choice values. Each object in this array should have the following structure:
"value": any, // A value to be saved in the survey results
"text": String, // A display text (label). When `text` is undefined, `value` is used.
"imageLink": String // A link to the image or video that represents this choice value.
If you want to load choice values from a RESTful service, use the
choicesByUrl property instead. Refer to the ChoicesRestful object for information on how to configure this property. The demo on this page defines local
Image picker questions can display explanatory labels under images. Label texts are taken from the
text property of choice objects or from the
value property if
text is undefined. To display image labels, enable the
This demo allows you to select more than one image. To enable this behavior in your application, set the
multiSelect property to
true. With this setting, the question value contains an array of selected choice values instead of a single value.
You can also use the image chooser question as a video picker. Set the
contentMode property to
"video" to display videos instead of static images. This example does not demonstrate the video picker mode.
Image Picker questions can be used to build a layout in which selectable images have input fields attached to them. This layout allows survey creators to request additional information about a product or service illustrated by the selected image. For more information about this use case, refer to the following demo: