Solved
Insert a button that gives a pop-up additional information window when clicked
Hello,
I've been looking for information on how to create a pop-up button that when clicked brings up a box of additional information - but I have only found "hover-over" options and an option for using the "next" button as a pop up option. I'd like to have a button that says "Click here for examples you can use to edit or complete your list" that appears under a text entry form. When clicked, a pop-up window would appear with information.
I am new to Qualtrics with little knowledge on coding. Is there a simple way to do this without coding knowledge? If there is another page with information on this already I'm happy to be redirected. Thank you!
Best answer by NiC
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" );
});
View original
1 person likes this
+39For 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?
+39That can also be done along with mouse over using the html tags.
+27Hi @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" );
});
> @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" );
});
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" );
});
});
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:
!
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
+1Hi 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
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.