How To Dynamically Display Question or Answer Images

Overview

Part of the SurveyToGo features is the ability to attach and display images as answers. One way is to assign images manually to each answer, as you can learn in this as shown here.

In this HowTo, you’ll learn two dynamic ways to assign and display images as answers. 

Way #1: Attachment Source:

1. Step 1: Add the wanted images to the survey
2. Step 2: Create Attachment Source
3. Step 3: Assign the attachment source to the question 

Step 1: Add the wanted images to the survey 

All images used, need to be uploaded to the survey. To upload images files to the survey, go to the survey’s Advanced tab, click on the “Edit survey attachments” link and add your files through the “New” button:

Step 2: Create Attachment Source

Attachment source is a mechanism that allows you to handle attachments dynamically during an interview. An attachment source generates a list of the attachments you want to use then later that list can be associated with a specific question.

1. Go to the survey Advanced tab and open the “Edit attachment source” link:

    

    
2. Click on the “+” button to add the attachment source, and name it as you will. To add images to the attachment source, you need to use this code:

   list.AddFromAttachment(“ImageName”, <Answer/Topic>Index);

   “ImageName” should be replaced with a name of an image you uploaded to the survey.

   Each image you’ll add to the attachment source will be displayed for each answer, according to the order you added in. For example, in the screen shot below, you see the “MyNewAttachSrc” attachment source, where three images are added: “A.jpg”, “B.jpg” and “C.jpg”, in this order. This means that in the question I’ll use this attachment source, image “A.jpg” will be displayed in answer index 1, “B.jpg” will be displayed in answer index 2, and “C.jpg” will be displayed in answer index 3:
   
    

3. When you finish with the attachment source, click “OK”.

Step 3: Assign the attachment source to the question

Go to the question’s Advanced tab, and choose the relevant attachment source to be defined for the “AnswerAttachmentSourse” property:

Way #2: Text Piping

1. Step 1: Write the GetImageFormat(inName) function in the survey's Advanced Scripts
2. Step 2: Put a placeholder in the question's body text
3. Step 3: Pipe the attachment into the placeholder

Note: This implementation uses the Text Piping method. To learn more about Text piping, click here.

Step 1: Write the GetImageFormat(inName) function in the survey's Advanced Scripts

The GetImageFormat(inName) function gets a name of an attachment in the survey, and returns an "HTML formatted" string with that attachment's location and ID. That string is later used as the "piping text" for the question.

Add this code to the Advanced Scripts:

function GetImageFormat(inName){

      return "<img src=\"dblstgatc://"+GetAttachmentID(inName)+ "\">";

}

Step 2: Put a placeholder in the question's body text

In the question's body text, put a placeholder where you want the image to be piped into:

Step 3: Pipe the attachment into the placeholder

Use the SetTextFormat() function to pipe in the formatted string created in the function from step 1. For example, in the screenshot below, the formatted string of the attachment called "Chevrolet.jpg" is piped in the question text:

And so the final result on screen would be:

That’s it!

Visit us at: http://www.dooblo.net