Non-clickable areas are elements without id values and other element types eg, , etc.The elements with id values become the clickable areas of the image. Ensure that your file has elements with id values that match the namevalues in your choice list.The second half of this blog goes into more detail on creating SVG images, for now just open 'difficulty.svg' (attached) in a text editor to assess it's compatibility. The values in the namecolumn are the ones that link the choices to parts of your image.ģ) Create an SVG file or assess an existing file for compatibility with Survey123. Each entry needs a list_name, nameand label. You can follow this proces s using the 'difficulty.svg' file attached to this blog.ġ) Add a select_one or select_multiple question to your XLSForm ( more information on this step).Ģ) Set up your survey choice list. The following steps relate to the 'Level of Difficulty' example in the 'Image-map Sample' survey. Also included in the 'Image-map Sample' survey is a ‘Level of Difficulty’ example that is essentially just an SVG file containing 4 clickable elements (plus some text and symbols for ease of use). The ‘big button’ experience is easily set up with a basic SVG file. These examples involve relatively complex shapes and highlight what is possible, but the most simple of SVG files can also provide real improvements to survey usability. This enables the inspection photos to be stamped with the corresponding vehicle part for easy identification later. The animation on the right shows a Vehicle Damage Inspection survey that combines the image-map appearance with the photo watermark feature. The 'Image-map Sample' survey, available in Survey123 Connect, shows a variety of use cases including Risk Assessment, Body Parts, USA States and Soil Texture. This enables fast and intuitive data collection with the underlying user selections stored in the feature service. The image-map appearance provides a powerful way to customise the UI of your survey without having to write a single line of code. So what is an SVG? An SVG file is an XML-based vector image format for two-dimensional graphics, that has support for interactivity and animation. SVGs also have the ability to have raster image formats such as. The image-mapappearance is currently not supported in the Survey123 web app. Choice list selections can now be made by simply selecting different parts of the image. This new appearance allows Scalable Vector Graphics (SVG) files to be rendered in your survey form and provides a clickable image for both select_one and select_multiple questions. Starting with Survey123 3.6, the field app now supports a new appearance of image-map.
0 Comments
Leave a Reply. |