How to insert multiple graphics at once as choice answers?

That did it. Thanks a lot!

Hi, I'm new to Qualtrics. I also need to do similar things. Could you please share a template with me? Thank you.

https://community.qualtrics.com/XMcommunity/discussion/comment/37090#Comment_37090That's a wonderful solution! Thank you ahmedA 😁

Links are broken. Is there any chance you can update them or DM me the images?

Hi @ahmedA, just bringing this thread to your attention. I know it's been a few years since you offered the solution, but an update with new images would be greatly appreciated by the Community! Thanks for being such an active and helpful member!

Using an example from w3schools (HTML img tag)

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Change the source portion (src) to your image url (for example, src=“https://img.freepik.com/free-photo/abstract-surface-textures-white-concrete-stone-wall_74190-8189.jpg”)

If you have multiple images, you should have multiple lines each with a different src.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl2.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl3.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl4.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl5.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl6.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl7.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl8.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl9.jpg" alt="Girl in a jacket" width="500" height="600">

Then, copy and paste this whole section in the "Edit Multiple" section of your MCQ.

Note: Once a response is collected, this "Edit Multiple" portion will be disabled.

Then, choose “Choice Randomization” to randomly choose from these choices of images.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl2.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl3.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl4.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl5.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl6.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl7.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl8.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl9.jpg" alt="Girl in a jacket" width="500" height="600">

Thanks @Chee Heng_SZ!

@rrodriguezbarron, bringing this recent comment to your attention and hoping it is helpful.

Jumping in to add that I had a similar question -- I needed to add 150+ response options, each associated with a different uploaded photo from a separate survey. 

The suggested HTML approach with “edit multiple” totally works for this, but I wanted to add that you can use custom JavaScript for this as well:

• We ended up creating a list of response options in Excel, then concatenated PetName | ResponseID, <ImageURL>. From there, I copied the column of data, created a multiple choice question, then selected the edit multiple option so that I could easily paste all 150+ options (instead of creating individual response options manually). 
• Then my team and I came up with some JavaScript code on the question that shows a thumbnail of the imageURL with the response option and removes the URL text from the response option (so that you just end up seeing a thumbnail and PetName | ResponseID for each response option.
   

  Qualtrics.SurveyEngine.addOnReady(function () {
   var q = this.getQuestionContainer();
   if (!q) return;
   var labels = q.querySelectorAll("label");
   function cleanUrl(url) {
     if (!url) return "";
     return url
       .replace(/[\u200B-\u200D\uFEFF]/g, "")
       .replace(/\u00A0/g, "")
       .replace(/\s+/g, "")
       .replace(/,+$/, "")
       .trim();
   }
   function showImageModal(imageUrl, petName) {
     var existing = document.getElementById("petImageModalOverlay");
     if (existing) existing.remove();
     var overlay = document.createElement("div");
  overlay.id = "petImageModalOverlay";
     overlay.style.position = "fixed";
     overlay.style.top = "0";
     overlay.style.left = "0";
     overlay.style.width = "100%";
     overlay.style.height = "100%";
     overlay.style.background = "rgba(0,0,0,0.75)";
     overlay.style.display = "flex";
     overlay.style.alignItems = "center";
     overlay.style.justifyContent = "center";
     overlay.style.zIndex = "99999";
     overlay.style.padding = "20px";
     overlay.style.boxSizing = "border-box";
     var modal = document.createElement("div");
     modal.style.position = "relative";
     modal.style.background = "#fff";
     modal.style.padding = "16px";
     modal.style.borderRadius = "12px";
     modal.style.maxWidth = "90vw";
     modal.style.maxHeight = "90vh";
     modal.style.boxSizing = "border-box";
     modal.style.textAlign = "center";
     var closeBtn = document.createElement("button");
     closeBtn.innerHTML = "×";
     closeBtn.style.position = "absolute";
     closeBtn.style.top = "8px";
     closeBtn.style.right = "12px";
     closeBtn.style.border = "none";
     closeBtn.style.background = "transparent";
     closeBtn.style.fontSize = "28px";
     closeBtn.style.cursor = "pointer";
     closeBtn.style.lineHeight = "1";
     var title = document.createElement("div");
     title.textContent = petName;
     title.style.fontWeight = "700";
     title.style.fontSize = "18px";
     title.style.marginBottom = "12px";
     title.style.paddingRight = "30px";
     var bigImg = document.createElement("img");
     bigImg.src = imageUrl;
     bigImg.alt = petName;
     bigImg.style.maxWidth = "80vw";
     bigImg.style.maxHeight = "75vh";
     bigImg.style.width = "auto";
     bigImg.style.height = "auto";
     bigImg.style.borderRadius = "8px";
     bigImg.style.display = "block";
     bigImg.style.margin = "0 auto";
     closeBtn.onclick = function () {
       overlay.remove();
     };
     overlay.onclick = function (e) {
       if (e.target === overlay) overlay.remove();
     };
     document.addEventListener("keydown", function escHandler(e) {
       if (e.key === "Escape") {
         var el = document.getElementById("petImageModalOverlay");
         if (el) el.remove();
         document.removeEventListener("keydown", escHandler);
       }
     });
     modal.appendChild(closeBtn);
     modal.appendChild(title);
     modal.appendChild(bigImg);
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
   }
   function loadImageWithRetry(img, url, petName, maxRetries) {
     var tries = 0;
     function tryLoad() {
       img.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "_r=" + new Date().getTime() + "_" + tries;
     }
     img.onerror = function () {
       tries++;
       if (tries <= maxRetries) {
         console.log("Retrying image:", petName, "attempt", tries, url);
         setTimeout(tryLoad, 500 * tries);
       } else {
         console.log("Image failed:", petName, url);
         var placeholder = document.createElement("div");
         placeholder.textContent = "No image";
         placeholder.style.width = "80px";
         placeholder.style.height = "80px";
         placeholder.style.border = "1px solid #ccc";
         placeholder.style.borderRadius = "8px";
         placeholder.style.display = "flex";
         placeholder.style.alignItems = "center";
         placeholder.style.justifyContent = "center";
         placeholder.style.fontSize = "12px";
         placeholder.style.color = "#666";
         placeholder.style.flexShrink = "0";
         if (img.parentNode) {
           img.parentNode.replaceChild(placeholder, img);
         }
       }
     };
     tryLoad();
   }
   labels.forEach(function (label) {
     if (label.getAttribute("data-img-done") === "1") return;
     var raw = (label.textContent || label.innerText || "").trim();
     if (!raw) return;
     var urlMatch = raw.match(/https?:\/\/[^\s]+/i);
     if (!urlMatch) return;
     var imageUrl = cleanUrl(urlMatch[0]);
     var leftText = raw.replace(urlMatch[0], "").trim();
     if (leftText.charAt(leftText.length - 1) === ",") {
       leftText = leftText.substring(0, leftText.length - 1).trim();
     }
     var petName = leftText.split("|")[0].trim();
     var input = label.querySelector('input[type="radio"], input[type="checkbox"]');
     if (!input && label.parentElement) {
       input = label.parentElement.querySelector('input[type="radio"], input[type="checkbox"]');
     }
     if (!input) {
       var row = label.closest("li, .Choice, .ChoiceRow");
       if (row) {
         input = row.querySelector('input[type="radio"], input[type="checkbox"]');
       }
     }
     label.innerHTML = "";
     label.style.display = "flex";
     label.style.alignItems = "center";
     label.style.gap = "12px";
     label.style.cursor = "pointer";
     label.style.width = "100%";
     var checkboxHolder = document.createElement("span");
     checkboxHolder.style.display = "inline-flex";
     checkboxHolder.style.alignItems = "center";
     checkboxHolder.style.justifyContent = "center";
     checkboxHolder.style.marginRight = "8px";
     checkboxHolder.style.flexShrink = "0";
     checkboxHolder.style.minWidth = "18px";
     if (input) {
       input.style.position = "static";
       input.style.opacity = "1";
       input.style.pointerEvents = "auto";
       input.style.margin = "0";
       input.style.width = "16px";
       input.style.height = "16px";
       checkboxHolder.appendChild(input);
     }
     label.appendChild(checkboxHolder);
     var img = document.createElement("img");
     img.alt = petName;
     img.style.width = "80px";
     img.style.height = "80px";
     img.style.objectFit = "cover";
     img.style.border = "1px solid #ccc";
     img.style.borderRadius = "8px";
     img.style.flexShrink = "0";
     img.style.display = "block";
     img.loading = "eager";
     img.decoding = "async";
     img.referrerPolicy = "no-referrer";
     var textWrap = document.createElement("div");
     textWrap.style.display = "flex";
     textWrap.style.flexDirection = "column";
     textWrap.style.alignItems = "flex-start";
     var text = document.createElement("span");
     text.textContent = petName;
     text.style.fontWeight = "600";
     text.style.color = "#222";
     var previewLink = document.createElement("a");
     previewLink.href = "#";
     previewLink.textContent = "Preview";
     previewLink.style.fontSize = "12px";
     previewLink.style.marginTop = "4px";
     previewLink.onclick = function (e) {
       e.preventDefault();
       e.stopPropagation();
       showImageModal(imageUrl, petName);
     };
     textWrap.appendChild(text);
     textWrap.appendChild(previewLink);
     label.appendChild(img);
     label.appendChild(textWrap);
     loadImageWithRetry(img, imageUrl, petName, 2);
     function selectChoice() {
       if (input) input.click();
     }
     img.addEventListener("click", selectChoice);
     text.addEventListener("click", selectChoice);
     label.setAttribute("data-img-done", "1");
   });
  });

   

-Erin