Survey.StylesManager.applyTheme("defaultV2");
var json = {
"elements": [
{
"type": "imagepicker",
"name": "animals",
"title": "Which animals would you like to see in real life?",
"description": "Please select all that apply.",
"isRequired": true,
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
"text": "Lion"
},
{
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg",
"text": "Giraffe"
},
{
"value": "red-panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg",
"text": "Red panda"
},
{
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg",
"text": "Camel"
}
],
"showLabel": true,
"multiSelect": true
}
],
"showQuestionNumbers": "off"
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Picker Question, Reactjs Example | JS Survey and Form Library</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>Image picker (image chooser) is a question type that displays multiple images or videos and allows users to select one or more items. This demo shows how to configure an image chooser survey question in your JavaScript framework.
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 choices.
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 showLabel property.
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.