im programming a survery in Qualtrics. I want to code a clickable button, that shows some text in a box.
The codes I used are:
In the Qualtrics survey-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>
JS in the specific question:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#btn1").click(function() {
jQuery("#dialog").dialog( "option", "modal", true);
jQuery("#dialog").dialog( "open", "width", 500).css({
"padding":"0px"
});
})
});
HTML in the question text:
<button id="btn1"> BUTTON TEXT </button><br>
<span title="MOD Explanation" id="dialog"> TEXT IN BOX</span>
However, I cannot change the width of the box. I would like it to spread about 60% over screen with a min-width of 450px.
Thanks for any help!
Best, Tim
Comment explains how to do it, not sure what Qualtrics.SurveyEngine.addOnload is, api here: https://api.jqueryui.com/dialog/
$(document).ready(function() {
jQuery("#btn1").click(function() {
jQuery("#dialog").dialog({modal: true, width: "60%", minWidth: 450}); // you need to pass object here docs: https://api.jqueryui.com/dialog/
})
})<html>
<head>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button id="btn1"> BUTTON TEXT </button><br>
<span title="MOD Explanation" id="dialog"> TEXT IN BOX</span>
</body>
</html>