Dynamic hover-over a piped-text in a questionnaire | XM Community
Skip to main content
Michael_Cooksey
Administrator
29 days ago
Solved

Dynamic hover-over a piped-text in a questionnaire

D
Level 1 ●
Forum|alt.badge.img+3

I have a following MC question:

 

```

Why did you select ${e://Field/exp_selected_ind1}?

```

And the value ${e://Field/exp_selected_ind1} is based on a value I saved in embedded data. 

I want to provide additional texts via hover-over the text “${e://Field/exp_selected_ind1}” but I need the content of the hover-over text to differ by the actual value of ${e://Field/exp_selected_ind1}. 

So far, I’m trying the following javascript:

```

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the response from the first question (stored in embedded data)
    var selectedOption = "${e://Field/exp_selected_ind1}";

    // Define hover-over text for each option
    var hoverTexts = {
        'Accommodation': ‘abcd',
        'Administrative': 'egergr.',
        'Agriculture,': 'estgrdg.',
    };

    // Get the hover text based on the selected option
    var hoverText = hoverTexts[selectedOption] || 'Default hover text';

    // Apply hover-over text to the question text
    var questionText = jQuery(".q-text");
    questionText.attr('title', hoverText);
    });
```

I’m trying to create a javascript where, if the value of ${e://Field/exp_selected_ind1} equals ‘Accommodation’, the hover over text would be ‘abcd’, and so on. 

But this is not working. Any advice would be greatly appreciated!

Best answer by Deepak

Hey, you have small syntax errors and the class of Question text is incorrect. Assuming you are not using simple layout (if you are then it would be “.question-display”). Try using below code.

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the response from the first question (stored in embedded data)
    var selectedOption = "${e://Field/exp_selected_ind1}";

    // Define hover-over text for each option
    var hoverTexts = {
        'Accommodation': 'abcd',
        'Administrative': 'egergr',
        'Agriculture': 'estgrdg',
    };

    // Get the hover text based on the selected option
    var hoverText = hoverTexts[selectedOption] || 'Default hover text';

    // Apply hover-over text to the specific element
	var questionElement = jQuery(".QuestionText:contains('${e://Field/exp_selected_ind1}')");
    questionElement.attr('title', hoverText);
    questionElement.css('cursor', 'pointer'); 
});

 

View original

3 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1549 replies
  • Answer
  • August 19, 2024

Hey, you have small syntax errors and the class of Question text is incorrect. Assuming you are not using simple layout (if you are then it would be “.question-display”). Try using below code.

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the response from the first question (stored in embedded data)
    var selectedOption = "${e://Field/exp_selected_ind1}";

    // Define hover-over text for each option
    var hoverTexts = {
        'Accommodation': 'abcd',
        'Administrative': 'egergr',
        'Agriculture': 'estgrdg',
    };

    // Get the hover text based on the selected option
    var hoverText = hoverTexts[selectedOption] || 'Default hover text';

    // Apply hover-over text to the specific element
	var questionElement = jQuery(".QuestionText:contains('${e://Field/exp_selected_ind1}')");
    questionElement.attr('title', hoverText);
    questionElement.css('cursor', 'pointer'); 
});

 

D
1 person likes this
  • D
    dl2860
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5935 replies
  • August 19, 2024

@dl2860,.

An easier solution is to set the value of exp_selected_ind1 as an html string with a title attribute. For example:

exp_selected_ind1 = <span title="hover text goes here">piped text goes here</span>

 

D
Level 1 ●
Forum|alt.badge.img+3
  • dl2860
  • Author
  • Level 1 ●
  • 4 replies
  • August 19, 2024

@Deepak Wow it worked like a charm! Thank you so much!

Leave a Reply


Terms & Conditions