Master Guide: Configuring Image-Only Answer Choices In Dooblo SurveyToGo

Displaying image-only answers in Dooblo SurveyToGo requires embedding media attachments directly into the answer properties while suppressing the textual label render modes in the question display settings. By configuring the answer layout properties to hide answer text and setting appropriate image scaling parameters, survey scripts deliver visual-only response options across Android, iOS, and Web CAPI engines. This setup ensures seamless data collection without compromising the underlying numeric answer codes required for export analysis.

Pre-Configuration Asset Preparation & Environment Requirements

Before modifying answer display properties within Dooblo SurveyToGo Designer, you must establish an optimized asset library and verify that your survey script framework supports custom visual rendering modes. Relying on uncompressed or incorrectly dimensioned image files leads to application latency, off-screen rendering bugs, and synchronization bottlenecks during field data collection.

• Essential Software & Assets:
  
  
  • Dooblo SurveyToGo Designer (version 1.32.250 or higher recommended).
  • Target media files saved in standardized compressed formats (.PNG or .JPG).
  • Batch image editing software to standardize image aspect ratios and file footprints.
  • Active SurveyToGo Collector application installed on a test Android or iOS tablet for field rendering validation.
• Mandatory Technical Standards & Knowledge:
  
  
  • Standard image dimensions: 300x300 pixels for single-column lists; 200x200 pixels for multi-column grids.
  • Maximum file size limit: 150 KB per image to maintain low device RAM consumption during long CAPI interviews.
  • Color space standard: sRGB color profile to prevent cross-platform color shifts between OLED mobile displays and desktop LCD monitors.
  • Understanding of SurveyToGo Answer Properties, Attachment Managers, and Render Settings.
• Resource Benchmarks:
  
  
  • Estimated Setup Duration: 15 to 30 minutes per question module.
  • Storage Budget: Less than 10 MB total survey package weight for optimal offline synchronization.

Execution Workflow for Visual-Only Response Displays

Step 1: Standardize and Optimize Answer Media

Begin by formatting all graphic assets prior to importing them into the SurveyToGo environment. SurveyToGo renders images inside structured container frames, meaning inconsistent canvas dimensions will cause misalignment across device screens.

1. Crop all image assets to an exact 1:1 square or 4:3 aspect ratio across the entire answer set.
2. Export all assets as PNG-24 (for graphics requiring transparent backgrounds) or JPG (for standard photos) at a maximum resolution of 72 DPI.
3. Name your image files using alphanumeric characters without spaces or special characters (for example, option_01.png, option_02.png) to avoid file-path resolution errors on Linux-based web collectors or Android runtimes.

Warning: Do not upload raw digital camera photos exceeding 1 MB per file into answer properties. Large files cause noticeable scrolling lag on field devices and dramatically increase data usage during survey sync operations.

Step 2: Attach Media Assets to Question Answer Choices

Once your assets are structured, import them directly into the target question within SurveyToGo Designer.

1. Open your survey project in SurveyToGo Designer and locate the specific question node in the survey tree structure.
2. Select the question to open the Question Properties panel on the right-hand side of the interface.
3. Navigate to the Answers tab located at the bottom or middle pane of the main script editor.
4. Define your full list of answer options. Ensure each answer has a unique, positive integer value in the Code column (for example, 1, 2, 3), as these numerical codes will capture responses in the raw dataset regardless of visual label visibility.
5. In the answer text field, type a concise descriptive label for internal administrative tracking (such as Red Car, Blue Car). This label will be hidden from respondents later but remains crucial for data processing and export mapping.
6. Click on the first answer item, locate the Attachment or Image property in the lower property grid, and click the file selection button.
7. Select and upload the corresponding image file from your local repository. Repeat this process for every answer choice in the list.

Step 3: Suppress Answer Text and Configure Image-Only Rendering Mode

With assets mapped to answer codes, modify the presentation properties to disable text rendering while maintaining image visibility.

1. Highlight the parent question in the survey tree to reveal the overall Question Display Properties.
2. Locate the Display Mode property under the Rendering section of the properties panel.
3. Change the rendering engine mode from Default to Grid or List, depending on your preferred interface layout.
4. Navigate to the Answer Display Properties within the same pane and locate the Show Answer Text flag.
5. Toggle the Show Answer Text property to False (or uncheck the box labeled "Display Text with Image", depending on your specific version of SurveyToGo Designer).
6. Locate the Image Alignment setting and adjust it to Center. Set the Image Scaling Mode to Fit to Aspect Ratio to ensure images do not warp on high-density mobile screens.

Pro-Tip: If your specific version of SurveyToGo Designer lacks a dedicated "Hide Text" checkbox in the basic interface, leave the visual prompt clean by setting the answer font color to transparent, or enable the custom grid view module where text labels are turned off at the layout template level.

Step 4: Configure Layout Matrix and Responsive Columns

To prevent respondents from having to scroll infinitely through a vertical list of large images, format the answer choices into a responsive visual grid.

1. In the Question Properties pane, locate the Columns setting under the Display section.
2. Set the column count to a number appropriate for your target device form factor (for example, 2 columns for smartphones, 3 or 4 columns for tablets in landscape mode).
3. Adjust the Cell Padding setting to 10 pixels to ensure visual separation between image options.
4. Enable the Selection Border option. This provides a clear, high-contrast visual outline (such as a blue highlight ring) around an image when a respondent taps or clicks it, confirming their selection without needing text labels.

Step 5: Test Execution Across Mobile and Web Engines

Never deploy an image-only question to field teams without validating rendering performance across multiple target display environments.

1. Click the Run or Preview button in the upper toolbar of SurveyToGo Designer to launch the built-in emulator.
2. Verify that the answer choices display purely as images, that clicking an image highlights it properly, and that no residual text strings or broken image placeholders appear.
3. Sync the updated survey draft to a physical Android or iOS test device running the SurveyToGo Collector app.
4. Step through the question on the mobile application to confirm that touch targets are sufficiently large (minimum 44x44 points) and that device orientation shifts do not disrupt the grid layout.

Technical Specifications for Dooblo SurveyToGo Image Rendering

Field Troubleshooting & Display Remediation

Residual Text Labels Visible Alongside Images

• Root Cause: The global question display settings are set to override custom answer properties, or the text suppression flag was toggled off at the survey project template level.
• Actionable Fix: Re-open the Question Properties panel, expand the Display section, and verify that Show Answer Text is explicitly set to False. If using an advanced custom layout template, open the Template Properties and remove the text variable binding from the answer view container.

Images Appear Stretched, Pixelated, or Distorted on Mobile Devices

• Root Cause: Original image assets were uploaded using inconsistent aspect ratios, or the Image Scaling Mode is configured to "Stretch to Fill" instead of preserving natural dimensions.
• Actionable Fix: Re-process the source images in an image editor to ensure uniform pixel dimensions across all options. In SurveyToGo Designer, set the Image Scaling Mode to Keep Aspect Ratio and verify that image container widths are set using percentages rather than fixed pixel dimensions.

Blank White Frames or Missing Image Icons in Field Application

• Root Cause: Image attachments failed to package properly during synchronization, or the field device is running low on internal storage, preventing media extraction.
• Actionable Fix: Open the SurveyToGo Designer Attachment Manager, run a syntax check, and choose Re-index Attachments. Perform a full Sync (Force Download) on the field device to clear cached survey packages and download the complete updated media manifest.

Extended Delay or Lag When Rendering the Question Screen

• Root Cause: Uncompressed, high-resolution image files exceed the RAM allocation limits of the SurveyToGo rendering pipeline on lower-spec CAPI tablets.
• Actionable Fix: Batch-compress all answer images using web optimization tools to reduce individual file sizes below 100 KB. Re-upload the compressed assets to the Answer Attachments tab and re-publish the survey project.

Frequently Asked Questions

Will hiding answer text prevent the text labels from exporting in my final SPSS or Excel dataset?

No, suppressing the visual display of text labels on the respondent screen does not alter your underlying dataset. SurveyToGo records data using the hidden numeric Answer Codes, and any administrative labels entered into the answer text properties will still appear in your codebook, export dictionaries, and statistical packages.

Can I display answers with only images for Grid-type (Matrix) questions?

Yes, you can apply image-only rendering to both header scale items and side-row items in Grid questions. Attach media files to the corresponding sub-questions or scale answers, and set the Scale Item Display Mode to Image Only within the Grid Display Properties panel.

What is the ideal image size for mobile CAPI surveys in Dooblo SurveyToGo?

The optimal asset standard for mobile CAPI deployment is a 300x300 pixel square image saved as a PNG or JPG file under 100 KB. This balance maintains crisp visual presentation on high-density displays without degrading hardware rendering performance.

How do I highlight an image option when a respondent selects it?

Enable the Selection Outline or Border Highlight property in the Question Display panel. This property automatically applies a high-contrast colored border around the selected image frame, giving respondents immediate visual feedback without relying on text indicators or radio buttons.

Can I conditionally show or hide image answers based on previous survey responses?

Yes, image-only answer choices obey standard SurveyToGo answer routing logic. You can apply validation rules, masking, or Answer Display Conditions to image-based answer items just as you would with traditional text answers.

Optimize Your Fieldwork Operations

Elevate your market research capabilities by deploying professionally formatted, visual-first mobile surveys with SurveyToGo. Contact our survey scripting team today to review your project architecture, optimize media pipelines, and implement advanced visual rendering workflows for your global field operations.