Adding a back button to only certain blocks and counting clicks | XM Community
Question

Adding a back button to only certain blocks and counting clicks

  • 27 February 2024
  • 1 reply
  • 123 views

Badge

Hello

I want to add a custom back button that only appears on certain pages. I would also like to count the number of times a participant clicks that button. I would like to basically give a set of instructions on one page and then see how many times the participant returns to check that page. 

What’s the best way to do this? I am new to coding so babysteps please!!

Thanks!!


1 reply

Userlevel 7
Badge +21

There are a few problems with your approach:

  1. The back button in Qualtrics only works at the block level, so if you have lets say a consent block followed by Question Block 1, Question Block 2 etc. Anyone who has reached question block 1 will not be able to go back to the consent block and so on. Therefore, if you plan to give instructions on one page, then you’ll need to have all question for which you want them to go back in that block itself.
  2. The back button needs to be enabled at the survey level, so instead of showing it in particular blocks, you need to disable it the blocks for which you don’t want it.

 

A simpler option would be include your instructions in the first page and have them show up as a pop-up in others.

 

Suppose you are showing a pdf as your instructions using the HTML:

<iframe src="https://iima.au1.qualtrics.com/ControlPanel/File.php?F=F_BpxH55DtUTiAkJv" allow="fullscreen" style="border: none; width: 100%; height: 80vh;"></iframe><style>.wide-body{width: 60vw;}</style>

In all subsequent questions, you can add the JS to insert a Show Instructions button and display this PDF as a pop-up:

Qualtrics.SurveyEngine.addOnload(function () {
if (!window.Swal) {
jQuery.getScript("https://cdn.jsdelivr.net/npm/sweetalert2@11");
}
});
Qualtrics.SurveyEngine.addOnReady(function () {
const pdfURL = "https://iima.au1.qualtrics.com/ControlPanel/File.php?F=F_BpxH55DtUTiAkJv";

const buttonHTML = '<button id="showPDF">Show Instructions</button>';
document.querySelector("#Questions").insertAdjacentHTML("afterend", buttonHTML);

const showButton = document.querySelector("#showPDF");
showButton.style.position = "fixed";
showButton.style.left = "5px";
showButton.style.bottom = "5px";

showButton.onclick = function () {
Swal.fire({
html:
'<iframe src="' +
pdfURL +
'" allow="fullscreen" style="border: none; width: 100%; height: 80vh;"></iframe><style>.wide-body{width: 60vw;}</style>',
customClass: {
popup: "wide-body"
},
confirmButtonText: "Close",
confirmButtonColor: "#3085d6",
allowOutsideClick: false
});

const currentClicks = parseInt(Qualtrics.SurveyEngine.getEmbeddedData("instructionClicks")) || 0;
Qualtrics.SurveyEngine.setEmbeddedData("instructionClicks", currentClicks + 1);
};
});

 

You can then access the number of times they have clicked on the pop-up by the instructionClicks embedded data.

Leave a Reply