hyperlinks in questionnaire | XM Community
Skip to main content

hello

is there a way to either

  1. remove the line or make it white underneath the hyperlinked text within an answer choice in survey design
  2. make the whole button to be hyperlink that take you to a specific URL

@AnnaP If you add the JavaScript below to the question containing the link, it should remove the underline. Please consider that you need to add it separately to each relevant question.

Qualtrics.SurveyEngine.addOnload(function() {
// Get the current question container
var questionContainer = this.getQuestionContainer();

// Select all links (anchor tags <a>) within the question container
var links = questionContainer.querySelectorAll('a');

// Loop through each link and remove the underline
links.forEach(function(link) {
link.style.textDecoration = 'none';
});
});

If you want to apply this to all links within your survey project, you could also just add this custom CSS to your project:

a {
text-decoration: none !important;
}

Best
Christian


@chackbusch thank you. I think that worked. The line is gone. One more question if I can. So, the link I am working on is one of the options in multiple choice question question (two options to chose from). Atthe moment you have to click on the text within the box to get redirected to the URL. Is there an option to click anywhere on the button and be redirected?


@AnnaP Try this updated version: 

Qualtrics.SurveyEngine.addOnload(function() {
// Get the current question container and answer options
var questionContainer = this.getQuestionContainer();
var labelWrappers = questionContainer.querySelectorAll('.LabelWrapper');

// Select all links (anchor tags <a>) within the question container
var links = questionContainer.querySelectorAll('a');

// Loop through each LabelWrapper
labelWrappers.forEach(function(wrapper) {
// Find the anchor <a> element within the LabelWrapper
var link = wrapper.querySelector('a');

// If the <a> element exists
if (link) {
// Remove the underline
link.style.textDecoration = 'none';

// Attach a click event listener to the LabelWrapper which clicks the link
wrapper.addEventListener('click', function() {
// Simulate a click on the <a> element
link.click();
});

// Optionally, change the cursor to a pointer to indicate it's clickable
wrapper.style.cursor = 'pointer';
}
});
});

If you want that the link is opened in a new tab instead of the same window, update the line with link.click() to this:

window.open(link.href, '_blank');

Best
Christian


Leave a Reply