Documentation Docs
Documentation Docs

Image and Video Choice Questions

About questions with visual content

An image or video choice question is a type of question format commonly used in surveys, quizzes, or assessments. In this type of question, respondents are presented with visual content, such as images or videos, and are asked to make a choice or provide feedback based on what they see.

For example, in a market research survey, participants might be shown different product images and asked to select which one they find most appealing. In an educational setting, students might be shown a video clip and asked questions about its content or to choose the most appropriate response based on what they watched.

These types of questions can be particularly effective for engaging respondents and gathering more nuanced feedback compared to traditional text-based questions. They can also be useful for assessing visual perception, preferences, or understanding of visual content.

Input types that support visual content

SurveyJS Form Builder offers two question types that allow form creators to add images and videos to their surveys and forms—Image Picker and Image.

Image Picker

Image Picker, or image chooser, is a type of input that allows users to select images or video files from a predefined set of options. The image below illustrates the Image Picker question that offers respondents to select their favorite movie from the Academy Award for Best Picture nominees of 2024.

Image picker question

Image

The Image question is a type of question that includes visual content, such as an image, graphics, or video as a question itself. Instead of being purely text-based, the Image question requires a respondent to interpret or analyze the visual information provided in order to answer the follow-up question(s) accurately. Unlike the Image Picker, the Image question allows presenting only one visual element at once and doesn't imply any choice making. The image below shows an Image question that displays a YouTube video.

Add an image or video to a from

How to Create an Image Choice Question

To add an Image Picker to a form, follow these steps:

  1. Drag the Image Picker input type from the Toolbox on the left onto the design surface. By default, its Content mode property is set to Image.

    Image picker question: Select content mode
  2. Under Choice Options, locate the property table Choices.
  3. In the first column titled Value, assign internal IDs for your choice options.
  4. In the second column titled Alt text, add descriptive alternative texts for media files to make your image picker question accessible for respondents using screen readers.
  5. In the third column titled Image or video file URL, paste URLs to image files in the following formats: JPEG, GIF, PNG, APNG, SVG, BMP, ICO.

    Image picker question: Configure choice options
  6. To specify how to fit the images into their containers, under General, locate the Image and thumbnail fit property and choose from the following values:
    • None - Image maintains its original size.
    • Contain - Image is resized to fit while maintaining its aspect ratio.
    • Cover - Image fills the entire box while maintaining its aspect ratio.
    • Fill - Image is stretched to fill the box without maintaining its aspect ratio.

      Image picker question: Image fit
  7. Locate and select the Allow multiple selection checkbox if you want to enable respondents to choose more than one option.
  8. To set the number of minimum and maximum answers that a respondent can select, locate the Validation rules property under Validation.
  9. In the drop-down menu, select Answer count.
  10. Enter the minimum number of answers in the Minimum count field.
  11. Enter the maximum number of answers in the Maximum count field.

    Image picker question: Set the minimum and maximum number of answers
  12. Under General, locate and select the Show image and video captions checkbox to display the alternative texts as image captions.
  13. Locate Display area height and Display area width and specify display area dimensions for image containers. The input fields accept positive numbers and CSS values. Note that it's not recommended to set Display area height and Display area width values when the Survey width mode property is set to Responsive.

    Image picker question: Allow multiple selection
  14. To change the order of the choice options, locate Choice order under Choice Options.
  15. In the drop-down menu, select among available choice order options.

    Image picker question: Choice order

Values entered in "Display area height" and "Display area width" fields override the values of the following properties:

  • Minimum display area width
    Maintains the minimum value of the image container width (200px by default) when the "Survey width mode" property is set to Responsive.

  • Maximum display area width
    Maintains the maximum value of the image container width (400px by default) when the "Survey width mode" property is set to Responsive.

  • Minimum display area height
    Maintains the minimum value of the image container height (133px by default) when the "Survey width mode" property is set to Responsive.

  • Maximum display area height
    Maintains the maximum value of the image container height (266px by default) when the "Survey width mode" property is set to Responsive.

Optionally, you can set up a conditional rule that defines whether a particular choice option is visible/selectable. To add a display logic rule, follow these steps:

  1. Under Choice Options, locate the Choices property table.
  2. Select an option for which you wish to add a conditional rule.
  3. Click the Pen icon on the right of the option to expand its settings.
  4. Locate the Make the option visible if property if you want to set up a rule defining choice option visibility.
  5. Click the magic wand icon to select a trigger question and a condition that would make the option visible only if it is met.
  6. Locate the Make the option selectable if property if you want to set up a rule defining whether the option is available for selection or not.
  7. Click the magic wand icon to select a trigger question and a condition that would make the option selectable only if it is met.
Image picker question: set up display logic rules for choice options

How to Create a Video Choice Question

To create a question that would allow respondents to select one or several options from presented videos, follow these steps:

  1. Drag the Image Picker input type from the Toolbox on the left onto the design surface.
  2. Under General, locate the Content mode property.
  3. Select Video.
  4. Under Choice Options, locate the property table Choices.
  5. Fill out the table with an ID, alternative text, and file URL for each choice option.

The Image Picker question does not accept a combination of image and video files within one question. YouTube links are not supported. If the "Content mode" property is set to Video, the question only accepts direct video file URLs. If you want to use YouTube links to add video content to your forms, please consider using the Image question.

How to Add an Image or Video to a Form

If you want to provide information more accurately than you can with a purely text-based question, you can add an image or a video to your form, and then add a few follow-up questions underneath.

To add an image or video to a form, follow these steps:

  1. Drag the Image input type from the Toolbox on the left onto the design surface.
  2. Under General, locate the Image or video file URL property and paste a direct link to your file.
  3. To specify how to fit the image or video into its container, locate the Image and thumbnail fit property and choose from the following values:
    • None - Image maintains its original size.
    • Contain - Image is resized to fit while maintaining its aspect ratio.
    • Cover - Image fills the entire box while maintaining its aspect ratio.
    • Fill - Image is stretched to fill the box without maintaining its aspect ratio.
  4. Locate the Alt text property and add descriptive alternative text for the media file to make your image or video accessible for respondents using screen readers.
  5. Optionally, set the height and width for the media file container using the Display area height and Display area width fields.
How to add an image or video to a survey

Limitations

A survey or form created in the free form builder demo can accept up to 64KB of files in total. If you wish to have an unlimited total size for all uploaded files, including images and videos, we recommend integrating Survey Creator.

Send feedback to the SurveyJS team

Need help? Visit our support page

Copyright © 2024 Devsoft Baltic OÜ. All rights reserved.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.