For this you can add this text "click here...." as a hyper link so when user clicks on it, it will take user to that information page, PDF file or anything.

---

Thanks for your response. Is this the only way? Or is there a way to bring up the list of words as a pop-up box that can be opened and closed over the survey page?

---

That can also be done along with mouse over using the html tags.

---

Great! How would I do that step-by-step? (sorry, I'm new to Qualtrics)

---

Hi @CSonn

Can you confirm if this is what you're looking for ?

click here

For this you need to add the following code in header:



<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>

jQuery("[id*='dialog']" ).dialog({ autoOpen: false});

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); });

</script>

In the question / option you want go in HTML view and add the following code :

``<button id="btn1">Click Me!</button><span id="dialog" title="Qualtrics Community Service">Is this what you want CSonn ?</span> ``

and in add javascript code for that question and put the following code inside after addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/

jQuery( "#btn1" ).click(function() {

jQuery("#dialog").dialog( "option", "modal", true );

jQuery("#dialog").dialog( "open" );

});

---

Perfect! Thank you!

---

Hi, could you please tell me how to modify the code to include more than one pop-up boxes? thanks

---

> @ccpollon said:

> Hi, could you please tell me how to modify the code to include more than one pop-up boxes? thanks



Its not in Best practice to show more than one pop-up boxes on single click.



Paste the following code in the Header(in look and feel)

` <link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>`





Step 1: Paste the following code in the question HTML view

`<button id="btn1">Click Me!</button><span id="dialog" title="1. Qualtrics Community Service">Is this what you want CSonn ?</span> <span id="dialog1" title="2. Qualtrics Community Service">Is this what you want CSonn ?</span>`



Step 2: Paste the following code in the js(OnReady) of the question



jQuery("[id*='dialog1']" ).dialog({ autoOpen: false,position: { my: " top", at: "top", of: window } });

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog1']").dialog('close'); });



jQuery("[id*='dialog']" ).dialog({ autoOpen: false});

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); });



jQuery( "#btn1" ).click(function() {

jQuery("#dialog").dialog( "option", "modal", true );

jQuery("#dialog").dialog( "open" );

jQuery("#dialog1").dialog( "option", "modal", true );

jQuery("#dialog1").dialog( "open" );

});



Step 3: Output

!





Note: If you want different button pops up different pop up then change the following lines of code



`<button id="btn1">Click Me1!</button><button id="btn2">Click Me2!</button>`



And



jQuery( "#btn1" ).click(function() {

jQuery("#dialog").dialog( "option", "modal", true );

jQuery("#dialog").dialog( "open" );

});

jQuery( "#btn2" ).click(function() {

jQuery("#dialog1").dialog( "option", "modal", true );

jQuery("#dialog1").dialog( "open" );

});

---

Thank you @Shashi!

Yes, I'd like to have different button pops up displaying different texts.

I copied and pasted the code (all in the HTML header/footer as I cannot find the way to switch to HTML for the body of the question) and in the js(OnReady) section. It partially works; it creates one pop up button that when I click shows the text that I want. However, even if the second button is visible when I click it nothing happens. I believe I must have made a mistake somewhere but I'm not sure where.



This is what I have done:

1. HTML, header:

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="//code.jquery.com/jquery-1.12.4.js"></script>

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



2. HTML, footer:

<button id="btn1">Definition of A</button><span id="dialog" title="Definitions">A is ...</span><button id="btn2">Definition of B</button><span id="dialog" title="Definitions">B is ...</span>





3. And in the js(OnReady) section:

Qualtrics.SurveyEngine.addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/



jQuery("[id*='dialog1']" ).dialog({ autoOpen: false,position: { my: " top", at: "top", of: window } });

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog1']").dialog('close'); });



jQuery("[id*='dialog']" ).dialog({ autoOpen: false});

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); });



jQuery( "#btn1" ).click(function() {

jQuery("#dialog").dialog( "option", "modal", true );

jQuery("#dialog").dialog( "open" );

});

jQuery( "#btn2" ).click(function() {

jQuery("#dialog1").dialog( "option", "modal", true );

jQuery("#dialog1").dialog( "open" );

});

});



Any idea why I can visualise both buttons but only one works when I click on it?



Thank you

---

Sorry it did not get the html code:



1. HTML, header:

#

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

#



2. HTML, footer:

#

<button id="btn1">Definition of A</button><span id="dialog" title="Definitions">A is ...</span><button id="btn2">Definition of B</button><span id="dialog" title="Definitions">B is ...</span>

#



3. And in the js(OnReady) section:

Qualtrics.SurveyEngine.addOnReady(function()

{

/Place your JavaScript here to run when the page is fully displayed/



jQuery("[id='dialog1']" ).dialog({ autoOpen: false,position: { my: " top", at: "top", of: window } });

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id='dialog1']").dialog('close'); });



jQuery("[id='dialog']" ).dialog({ autoOpen: false});

jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id='dialog']").dialog('close'); });



jQuery( "#btn1" ).click(function() {

jQuery("#dialog").dialog( "option", "modal", true );

jQuery("#dialog").dialog( "open" );

});

jQuery( "#btn2" ).click(function() {

jQuery("#dialog1").dialog( "option", "modal", true );

jQuery("#dialog1").dialog( "open" );

});

});

---

@ccpollon ,

See the question text block of this link

---

Thanks @Shashi,

I'm having a look at it now. Any idea why the html code I paste isn't visualised here?

Anyway, this is what Ive done before:

!

---

@ccpollon , After the "Defination of B" the span should have id="dialog1"

---

Thank you very much @Shashi ! Now it works!!

---

Is it possible to give the button a colour (e.g. yellow button, black text)?

---

Hello @CSonn ,



button (e.g. yellow button, black text)

`<button style="background-color: yellow;color: black;" >Button</button>`

---

Thanks Shashi! Where would I paste that script? In the JS part or the HTML part - and does it have to be pasted somewhere specific within that text?

---

> @CSonn said:

> Thanks Shashi! Where would I paste that script? In the JS part or the HTML part - and does it have to be pasted somewhere specific within that text?



In the HTML part of the question and you need to add ` style="background-color: yellow;color: black;" ` -this attribute in the button as shown in above code.



So your new code will be



`<button style="background-color: yellow;color: black;" id="btn1">Click Me!</button><span id="dialog" title="Qualtrics Community Service">Is this what you want CSonn ?</span>`

---

Is there anyway to further change the layout of the button? More specifically, I would like to make it a circle instead of a square and nicer color, e.g. dark red. Thank you very much for you help!

---

Hi guys! How do I change the code such that it does not display text after popping up, but an image? And how do I properly store the image such that the code can retrieve it?



I'm stuck 😀

---

Hi
I want to add a button that takes them to the descriptive text or displays the descriptive text. I was able to add the button following the above instructions but could not get it to do what i wanted it to do. how can i make it display a text when it is clicked? now it just takes me out of the survey.
thank you.

---

Hallo to you all! I hope everyone is doing ok during these complicated times. I am writing to this community for the first time. I have followed this and other conversation about how to develop a pop-up window in a survey and I am very grateful for those of you who shared their codes, which I was able to copy to work on my survey. However, I am experiencing an issue. I have 2 questions each with multiple items and for each of these items I would like to have a pop-up window showing the associated definition. While the code works for the first questions it does not seem to work for the second questions. Below I posted my code and if anyone would be able to help I would really appreciate it.
This is my code:
I hope it is clear what I did. I basically repeated the code for both questions. Is this correct?

Thank you for any help you may be able to provide!
Ale

---

Hi guys,
Is there a code that will let me get data on how often respondents opened the additional information (i.e., clicked on the button)?

Thanks

---

Hi guys, 

I’ve a similar query wherein I’m trying to add a button which says ”Comment” so when the user clicks on it the text entry field appears to enter the comment.

 

Can I get some guidance how this can be acheived.

Thank You!

---

Hi! I am having trouble with this, too. 

I keep getting this:
JavaScript no válido. No puede guardar hasta que corrija todos los errores: Unexpected end of input

---