How to add a custom button between "Previous" and "Next"? | XM Community
Question

How to add a custom button between "Previous" and "Next"?

  • 27 February 2021
  • 3 replies
  • 172 views

I need a button "See a cat" which sends the user to the descriptive "question" with a dog picture. I would be glad to post a minimal working example but after two days I am still clueless.


3 replies

Userlevel 7
Badge +22

Instead of custom code, you can simply make use of multi choice question with blank question text and a single option that says "See a cat". Then you can make use of skip or branch logic to show  the descriptive "question" with a dog picture.

Thanks, though I would need to find a more straightforward solution as I would use the same code to get back to the question.

Userlevel 7
Badge +21

In your question, add a button with some id.


Use JS to move this element to the "Buttons" container:
document.querySelector("#Buttons").insert(document.querySelector("#cat_button")

Hide the dog question onload using JS:

this.questionContainer.hide()

Assign an onclick attribute to the cat button to toggle visibility of the questions:
document.querySelector("#cat_button").onclick = function () {
    document.querySelectorAll("[id^=QID]:not(.Separator)").forEach((quest) => {
        if (quest.style.display == "none") quest.show();
        else quest.hide();
    });
};



Leave a Reply