Broken images! | XM Community
Skip to main content

Hello, I am working on this custom html question, the images display fine in my preview but like broken images on the survey preview (adding in a screenshot). Does anyone know why this may be the case? I am also pasting my code below. 


  <!-- Main Container with Background Image -->
  <div style="position: relative; width: 600px; height: 600px; background-image: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VHOdoYnAyqTK5Lt'); background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid #ccc;">
    <!-- Grid Cells -->
    <div class="grid-cell" data-location="R1C1" style="position: absolute; top: 40px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;"> </div>
    <div class="grid-cell" data-location="R1C2" style="position: absolute; top: 40px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R1C3" style="position: absolute; top: 40px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R2C1" style="position: absolute; top: 220px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R2C2" style="position: absolute; top: 220px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R2C3" style="position: absolute; top: 220px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R3C1" style="position: absolute; top: 410px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R3C2" style="position: absolute; top: 410px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
    <div class="grid-cell" data-location="R3C3" style="position: absolute; top: 410px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
  </div>

  <!-- Buttons Section -->
  <div style="margin-top: 10px; text-align: center;">
    <button data-item="breakfast" id="select-breakfast">Select Breakfast</button>
    <button data-item="dinner" id="select-dinner">Select Dinner</button>
  </div>

  <!-- JavaScript for Button Actions -->
  <script>
    // Image URLs for test items
    const breakfastImage = "https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_vrPsqekWIt26Rxt";
    const dinnerImage = "https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWecqmidZuBBznx";

    let selectedImage = null;

    // Set the selected image based on the clicked button
    document.getElementById("select-breakfast").addEventListener("click", function () {
      selectedImage = breakfastImage;
    });

    document.getElementById("select-dinner").addEventListener("click", function () {
      selectedImage = dinnerImage;
    });

    // Apply the selected image to the clicked grid cell
    document.querySelectorAll(".grid-cell").forEach(cell => {
      cell.addEventListener("click", function () {
        if (selectedImage) {
          this.innerHTML = `<img src="${selectedImage}" alt="Selected Item" style="width: 35%; height: 35%; object-fit: contain;">`;
        } else {
          alert("Please select an image first!");
        }
      });
    });
  </script>
</body>
</html>

 

Have you tried to replace this portion to check for exact value of selectedImage instead of using backticks (`)?

// Apply the selected image to the clicked grid cell
    document.querySelectorAll(".grid-cell").forEach(cell => {
      cell.addEventListener("click", function () {
        if (selectedImage==breakfastImage) {
          this.innerHTML = '<img src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_vrPsqekWIt26Rxt" alt="Selected Item" style="width: 35%; height: 35%; object-fit: contain;">';
        } else if (selectedImage==dinnerImage) {
          this.innerHTML = '<img src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWecqmidZuBBznx" alt="Selected Item" style="width: 35%; height: 35%; object-fit: contain;">';
        } else {
          alert("Please select an image first!");
        }
      });

 

​@Chee Heng_SZ That solves it!!! Thank you so much!

Terms & ConditionsAccessibility statement