Force respondent to click all 3 thumbnails before advancing

Thanks! We are almost there. When you mentioned to ‘wrap’ each thumbnail link, this is what I did.

<a href="full image link" target="_blank">
  <div class="lightbox-img" data-img="1"> <img src="thumbnail image link" alt="Email 1" width="150"></div>
</a>

The Javascript code keeps track of all my clicks, however, I can still click the next button even if it is grayed out.

There are native methods in the JS Question API to do that.

this.disableNextButton();
this.enableNextButton();

Qualtrics.SurveyEngine.addOnload(function()
{
  var viewed = {};
  var totalImages = 3;
  var nextBtn = document.getElementById('NextButton');

  // Disable Next button initially
  this.disableNextButton();

  // Add status message above Next button
  var msg = document.createElement('p');
  msg.id = 'img-status';
  msg.style.color = '#c0392b';
  msg.style.fontWeight = 'bold';
  msg.style.marginBottom = '10px';
  msg.innerHTML = 'Please take a moment to read all of the emails before continuing with the survey. (0 of 3 viewed)';
  nextBtn.parentNode.insertBefore(msg, nextBtn);

  function updateStatus() {
    var count = Object.keys(viewed).length;
    var statusMsg = document.getElementById('img-status');

    if (count >= totalImages) {
      statusMsg.style.color = '#27ae60';
      statusMsg.innerHTML = '✓ All images viewed — you may continue!';
	  this.enableNextButton();	
    } else {
      statusMsg.innerHTML = 'Please take a moment to read all of the emails before continuing with the survey. (' + count + ' of 3 viewed)';
    }
  }

  // Attach click listeners to all lightbox links
  var links = document.querySelectorAll('.lightbox-img');

  links.forEach(function(link) {
    link.addEventListener('click', function() {
      var imgId = this.getAttribute('data-img');
      viewed[imgId] = true;
      updateStatus();
    });
  });
});

So here’s the code. It works but there is a big delay before the Next button is enabled. I monitored two tests and it took 14 and 22 seconds respectively after the message below was displayed before the Next button is enabled.

Btw, I’m using a preview link to test it. 

You cannot use this in updateStatus(), its context has shifted. Declare that = this; at the top and use that.enableNextButton();

Thanks ​@vgayraud and ​@kgillis!