Images and multimedia

Images, videos, and links to HTML or PDF content may be added to the question text of any question object. Images may also be inserted instead of, or in addition to, answer text.

---

Add image to survey

To add an image to your survey:

Survey Editor (Legacy)

1. Upload the image to the survey Resources folder

   • Click on Resources
   • Click Upload (upload icon)
   • In the Upload Resources dialog box, make sure the Resources folder is selected as the upload location, and click Upload
   • Locate and select the file to be uploaded, then click Open
   • The uploaded image will be displayed in the Resources list - click on it to preview the file (click Refresh to refresh the list if required)
   • Close the Manage Resources dialog box

2. Add the image reference to the required question

   • Select the question object in the survey flowchart
   • Place the cursor in the Question Text or Answer Text field, and click on the Insert/edit image icon (camera icon)
   • In the Insert/edit image dialog box, select the required image from the Image list dropdown
   • The current dimensions (in pixels) of the image (width x height) is displayed - you can reduce the display size if required (leave the constrain proportions box checked to avoid stretching the image)
   • Click OK

3. Save the survey

Survey Editor (Beta)

1. Upload the image to the survey Resources folder. See Upload a file to Resources.

2. Add the image to the required question

   • Select the question’s card in the flowchart
   • Place the cursor in the Question Text or Answer Text field, and click Image in the rich text toolbar
   • In Choose a project resource, select the image. Only PNG, JPG and GIF files are listed. To use an image hosted elsewhere, enter its address in URL instead.
   • Click Insert
   • To make the image smaller, drag its bottom-right corner. It keeps its proportions.

3. Save the survey

To add alt text, click HTML source and add an alt attribute to the <img> tag.

---

Add video to survey

To add video to a survey question, the video will first need to be uploaded to a video hosting site such as YouTube or Vimeo.

To embed a video into your Survey:

1. In YouTube or Vimeo, locate the video you want to embed and click on the Share button

2. Click on the Embed button and copy the fixed code

3. In Survey Shaper, select the question object in the survey flowchart that you want to embed the video into

4. Place the cursor in the Question Text field, and click on the Source code icon (< >). In Survey Editor (Beta), click HTML source.

5. Paste the video embed code into the source code editor

6. Click OK to close the source code editor. In Survey Editor (Beta), there’s nothing to close: the text stays in HTML source, because embedded videos can only be edited as HTML.

7. Save the survey

HTML source in Survey Editor (Beta)

Survey Editor (Beta) switches to HTML source on its own when the text contains HTML it can’t show as formatted text, such as an embedded video (iframe), video or audio tags, tables, or any class or id attribute. A message above the editor tells you why. Nothing is removed: you just edit that text as HTML.

---

Add an HTML file to survey

Links to HTML content can also be placed in a survey. If the file is already hosted on a website, simply add a hyperlink via the Rich Text Editor.

Alternatively, if there is no existing URL for the HTML content:

Survey Editor (Legacy)

1. Upload the HTML file to the survey Resources folder

   • Click on Resources
   • Click Upload (upload icon)
   • In the Upload Resources dialog box, make sure the Resources folder is selected as the upload location, and click Upload
   • Locate and select the file to be uploaded, then click Open
   • The uploaded file will be displayed in the Resources list - click on it to preview the file (click Refresh to refresh the list if required)
   • Close the Manage Resources dialog box

2. Add the link to the required question

   • Select the question object in the survey flowchart
   • Place the cursor in the Question Text field, and click on the insert/edit link icon (chain link icon)
   • In the Insert link dialog box, select the required HTML file from the Link list dropdown - the URL field at the top of the dialog box will automatically update once a link has been selected
   • Edit the Text to display as required
   • In the Target dropdown box, select New Window - the HTML content will open in a new window, allowing the respondent to return to the survey
   • Click OK

3. Save the survey

Survey Editor (Beta)

1. Upload the HTML file to the survey Resources folder. See Upload a file to Resources.

2. Add the link to the required question

   • Select the question’s card in the flowchart
   • Select the text you want to link in the Question Text field, and click Link in the rich text toolbar
   • In Choose a project resource, select the HTML file
   • Check the Link text
   • Click Insert

3. To open the link in a new window, so the respondent can return to the survey, click HTML source and add target="_blank" to the link’s <a> tag

4. Save the survey

---

Add a PDF to survey

Survey Editor (Legacy)

Currently, a workaround solution is required to place a PDF link in a survey.

To add a PDF file link into a survey:

1. Upload the PDF file to the survey Resources folder

   • Click on Resources
   • Click Upload (upload icon)
   • In the Upload Resources dialog box, make sure the Resources folder is selected as the upload location, and click Upload
   • Locate and select the file to be uploaded, then click Open
   • The uploaded file will be displayed in the Resources list (click Refresh to refresh the list if required) - select the file name and press Ctrl+C, or right-click and select Copy to copy the file name to the clipboard
   • Close the Manage Resources dialog box

2. Add the link to the required question

   • Select the question object in the survey flowchart
   • Place the cursor in the Question Text field, and click on the Insert/edit link icon (chain link icon)
   • In the Insert link dialog box, the PDF file will not be visible, so select any file in another format (e.g. jpg, png, htm) from the Link list dropdown. If there is no file available in the list, you will need to upload an image or HTML file to the Resources folder, following the instructions above.
   • The URL field at the top of the dialog box will automatically update once a link has been selected - click on the URL and scroll across to the file name at the end of the URL (after “Resources/”). Delete the current file name and press Ctrl+V, or right-click and select Paste to paste in the PDF file name at the end of the URL.
   • Edit the Text to display as required
   • In the Target dropdown box, select New Window - the PDF file will open in a new window, allowing the respondent to return to the survey
   • Click OK

3. Save the survey

Survey Editor (Beta)

1. Upload the PDF file to the survey Resources folder. See Upload a file to Resources.

2. Add the link to the required question

   • Select the question’s card in the flowchart
   • Select the text you want to link in the Question Text field, and click Link in the rich text toolbar
   • PDF files aren’t listed in Choose a project resource, so type the address in URL instead: @ResourceUrl/ followed by the file name, for example @ResourceUrl/brochure.pdf. You can also paste the file’s full web address, copied from Manage Resources (see Get a file’s web address), but that address includes the version number, so it keeps pointing to this version’s copy of the file.
   • Check the Link text
   • Click Insert

3. To open the PDF in a new window, click HTML source and add target="_blank" to the link’s <a> tag

4. Save the survey

---

Add zoom to image

To add a hover-to-magnify effect on an image in Survey Shaper:

1. Open the survey Preferences (in Survey Editor (Beta), More editor actions (⋮) > Preferences)

2. Check the Display System Properties box

3. In the flowchart, click on the question you want to add the image into, then expand the System properties section

4. Click on the button next to the Question Footer Raw property

5. Copy the code below and paste it into the Question Footer Raw box

   <script type="text/javascript">
      var width = function(el) {
          return parseFloat(getComputedStyle(el, null).width.replace("px", ""))
      };
   
      var height = function(el) {
          return parseFloat(getComputedStyle(el, null).height.replace("px", ""))
      };
   
      var fadeOutEffect = function(fadeTarget, time) {
       fadeTarget.style.opacity = 0;
       fadeTarget.style.display = "none";
     }
      var fadeInEffect = function(fadeTarget, time) {
      fadeTarget.style.opacity = 1;
      fadeTarget.style.display = "inline-block";
     }
   
     var native_width = 0;
     var native_height = 0;
     var mouse = {x: 0, y: 0};
     var magnify;
     var cur_img;
   
     var ui = {
       magniflier: document.getElementsByClassName("magniflier"),
       glass: null
     };
   
     // Add the magnifying glass
     if (ui.magniflier.length) {
       var div = document.createElement('div');
       div.setAttribute('class', 'glass');
       ui.glass = div;
       var bodyEl = document.getElementsByTagName("body")[0];
       bodyEl.appendChild(div);
     }
   
     // All the magnifying will happen on "mousemove"
     var mouseMove = function(e) {
       // Container offset relative to document
           var magnify_offset = {
                   top: cur_img.getBoundingClientRect().top + window.pageXOffset,
                   left: cur_img.getBoundingClientRect().left + window.pageYOffset,
               };
   
       // Mouse position relative to container
       mouse.x = e.pageX - magnify_offset.left;
       mouse.y = e.pageY - magnify_offset.top;
   
       if (
         mouse.x < width(cur_img) &&
         mouse.y < height(cur_img) &&
         mouse.x > 0 &&
         mouse.y > 0
         ) {
         magnify(e);
       }
       else {
         fadeOutEffect(ui.glass, (100));
       }
   
       return;
     };
   
     var magnify = function(e) {
       var rx = Math.round(mouse.x/width(cur_img)*native_width - width(ui.glass)/2)*-1;
       var ry = Math.round(mouse.y/height(cur_img)*native_height - height(ui.glass)/2)*-1;
       var bg_pos = rx + "px " + ry + "px";
   
       var glass_left = e.pageX - width(ui.glass) / 2;
       var glass_top  = e.pageY - height(ui.glass) / 2;
   
       ui.glass.style["left"] = glass_left + "px";
       ui.glass.style["top"] = glass_top + "px";
       ui.glass.style["backgroundPosition"] = bg_pos;
   
       return;
     };
   
    for (var e = 0; e < ui.magniflier.length; e++) {
   
     ui.magniflier[e].onmousemove = function() {
       fadeInEffect(ui.glass, 100);
       cur_img = this;
   
       var large_img_loaded = cur_img.getAttribute('data-large-img-loaded');
       var src = cur_img.getAttribute('data-large') || cur_img.getAttribute('src');
   
       if (src) {
         ui.glass.style["background-image"] = 'url("' + src + '")';
         ui.glass.style["background-repeat"] = "no-repeat";
       }
   
         if (!cur_img.getAttribute('data-native_width')) {
           var image_object = new Image();
   
           image_object.onload = function() {
             native_width = image_object.width;
             native_height = image_object.height;
   
             cur_img.setAttribute('data-native_width', native_width);
             cur_img.setAttribute('data-native_height', native_height);
   
             mouseMove.apply(this, arguments);
   
             ui.glass.onmousemove = mouseMove;
           };
   
           image_object.src = src;
   
           return;
         } else {
   
           native_width = cur_img.getAttribute('data-native_width');
           native_height = cur_img.getAttribute('data-native_height');
         }
   
       mouseMove.apply(this, arguments);
   
       ui.glass.onmousemove = mouseMove;
       ui.glass.onclick = function(){
           var currSrc = cur_img.attr('src');
           var altSrc = cur_img.attr('srcAlt');
   
           cur_img.setAttribute('src', altSrc);
           cur_img.setAttribute('srcAlt', currSrc);
   
           ui.glass.style["background-image"] = 'url(' + altSrc + ')';
           ui.glass.style["background-repeat"] = 'no-repeat';
       };
     };
   
     ui.glass.onmouseout = function() {
       ui.glass.removeEventListener('mousemove', mouseMove, false);
       ui.glass.removeEventListener('click', null, false);
     };
   };
   
   </script>
   <style>
   .glass {
     width: 250px;
     height: 250px;
     position: absolute;
     top: 60px;
     left: 30%;
     border-radius: 50%;
     cursor: crosshair;
     z-index: 9999;
   
     /* Multiple box shadows to achieve the glass effect */
     box-shadow:
       0 0 0 7px rgba(255, 255, 255, 0.85),
       0 0 7px 7px rgba(0, 0, 0, 0.25),
       inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
   
     /* hide the glass by default */
     display: none;
   }
   </style>

6. Click on Resources, then upload the image to the Resources folder. Make sure the image file name does not contain any spaces.

7. To add the image to the Question Text, click on the Insert Image button (Image in Survey Editor (Beta))

8. Select the image from the dropdown and set the size that you want to display (we recommend keeping the Constrain proportions box checked so the image is not distorted). In Survey Editor (Beta), choose it in Choose a project resource, click Insert, then drag the image’s corner to resize it

9. Click on the Question Text Source Code button (HTML source in Survey Editor (Beta))

10. Insert the following code into the source code, within the <img> tag:

    class="mg_portraittest2 magniflier"

11. Add Question Text and Helper Text to provide instructions to the respondent as required

12. Click OK

13. Save and Preview the survey