How to insert a button that gives a pop-up with an additional information window when clicked upon | XM Community
Skip to main content
Question

How to insert a button that gives a pop-up with an additional information window when clicked upon

  • March 16, 2021
  • 6 replies
  • 1742 views
Q

For one of the questions posed in my survey I have a few examples of answers that I would like participants to be able to view when they like to via a pop-up window. I have found one post on this community, but that does not seem to do the trick. The post is already a few years old, so it might not work for the current version. I am new to Qualtrics with no knowledge on coding, so if someone one knows the answer to my question I need very clear instructions to be able to use them. It would be great if someone could help out, thanks!

6 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2050 replies
  • March 16, 2021

Add this to your question HTML:


Change 

a.lert
to 
alert

L
Forum|alt.badge.img+1

https://community.qualtrics.com/XMcommunity/discussion/comment/35680#Comment_35680How can I make this work for a translated survey?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6084 replies
  • March 29, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/44988#Comment_44988Replace Message with a piped value that is translated.

T
Level 2 ●●
Forum|alt.badge.img+1
  • TLDW_Tutorials
  • Level 2 ●●
  • 14 replies
  • May 16, 2023

I actually made a YouTube video about this because I was encountering this a lot myself.  My video shows a few approaches: (1) simple HTML that shows text when hovering over certain text, (2) a pop-up button that shows more information when someone clicks on it, (3) the same thing as #2, but it triggers when someone clicks on a word that is embedded with a hyperlink. 

 

Adam_M_1
Forum|alt.badge.img+4
  • Adam_M_1
  • 1 reply
  • September 6, 2023

Thanks for the YouTube video! It’s getting me closer to what I’m hoping to do. I’d like to have 5 buttons next to each other with different text in each pop up. Below is what I put in the HTML Tab, but I’m not sure how to get the specific text to show when one clicks on each button.   Right now when you click on any button it’s showing what’s behind the 5th alert in the code below in each pop-up. I would guess it has to do with putting something in the MyFunction elements of the code? I'm new to coding/HTML/Java Script/CSS, etc.  If you have ideas of how to put a space between the title (first line of code) and the the row of buttons, I’d be grateful for this as well.

 

<div style="text-align: center;"><span style="font-size: 26px;"><b>More Reasons to Use EPAs in UME<b>

<center><button onclick="myFunction()"><div style=background-color:rgba(0,0,0,0);"><b>Reason #1<b></button>

<script> function myFunction() {alert("’Consistent with what is known about progressive skill development [Dreyfus and Dreyfus Model].’");}

</script>

<button onclick="myFunction()"><div style=background-color:rgba(0,0,0,0);"><b>Reason #2<b></button>

<script> function myFunction() {alert("’EPAs operationalize medical education outcomes as essential professional activities that one entrusts a professional to perform.’");}

</script>

<button onclick="myFunction()"><div style=background-color:rgba(0,0,0,0);"><b>Reason #3<b></button>

<script> function myFunction() {alert("’UME EPAs defined as essential health care activities’");}

</script>

<button onclick="myFunction()"><div style=background-color:rgba(0,0,0,0);"><b>Reason #4<b></button>

<script> function myFunction() {alert("Provide insight to students’ ability/quality to care for patients and support patient safety.’");}

</script>

<button onclick="myFunction()"><div style=background-color:rgba(0,0,0,0);"><b>Reason #5<b></button>

<script> function myFunction() {alert("’Application of the same competency framework in both UME and GME training would promote…vertical integration across the continuum.’");}

</script><center>

<div style="text-align: center;"><span style="font-size: 10px;"><b>Quotes and information come from Chen et al., 2015, pp. 1-2<b>

T
Level 2 ●●
Forum|alt.badge.img+1
  • TLDW_Tutorials
  • Level 2 ●●
  • 14 replies
  • September 8, 2023

Hey there - you are very close.  Try making a specific function for each specific button.  See below:

 


<html>

<body>
<div style="text-align: center;">
  <span style="font-size: 26px;"><b>More Reasons to Use EPAs in UME<b></span>
</div>

<div class="button-container">
  <button onclick="showReason1()"><b>Reason #1</b></button>
  <button onclick="showReason2()"><b>Reason #2</b></button>
  <button onclick="showReason3()"><b>Reason #3</b></button>
  <button onclick="showReason4()"><b>Reason #4</b></button>
  <button onclick="showReason5()"><b>Reason #5</b></button>
</div>

<script>
  function showReason1() {
    alert("Reason #1: Consistent with what is known about progressive skill development [Dreyfus and Dreyfus Model].");
  }

  function showReason2() {
    alert("Reason #2: EPAs operationalize medical education outcomes as essential professional activities that one entrusts a professional to perform.");
  }

  function showReason3() {
    alert("Reason #3: UME EPAs defined as essential health care activities.");
  }

  function showReason4() {
    alert("Reason #4: Provide insight to students’ ability/quality to care for patients and support patient safety.");
  }

  function showReason5() {
    alert("Reason #5: Application of the same competency framework in both UME and GME training would promote vertical integration across the continuum.");
  }
</script>

<div style="text-align: center;">
  <span style="font-size: 10px;"><b>Quotes and information come from Chen et al., 2015, pp. 1-2<b></span>
</div>

</body>
</html>

 


Terms & ConditionsAccessibility statement