Estoy programando una encuesta en Qualtrics. Quiero codificar un botón en el que se pueda hacer clic, que muestre algo de texto en un cuadro.
Los códigos que usé son:
En el encabezado de la encuesta de Qualtrics:
<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 en la pregunta específica:
Qualtrics.SurveyEngine.addOnload(function() { jQuery("#btn1").click(function() { jQuery("#dialog").dialog( "option", "modal", true); jQuery("#dialog").dialog( "open", "width", 500).css({ "padding":"0px" }); }) });HTML en el texto de la pregunta:
<button id="btn1"> BUTTON TEXT </button><br> <span title="MOD Explanation" id="dialog"> TEXT IN BOX</span>Sin embargo, no puedo cambiar el ancho de la caja. Me gustaría que se extendiera alrededor del 60 % en la pantalla con un ancho mínimo de 450 px.
¡Gracias por cualquier ayuda!
Mejor, Tim
El comentario explica cómo hacerlo, no estoy seguro de qué es Qualtrics.SurveyEngine.addOnload , api aquí: 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>