如何在 Qualtrics 调查中包含可展开/可折叠的文本

Question

我一直在尝试在我的 Qualtrics 调查中包含可展开/可折叠的文本，但似乎无法正常工作。我已将其放入描述性文本部分，并将其粘贴到 html 视图中。调查设计部分的问题本身似乎使用了 html，但是当我单击预览时，文本不可展开/折叠。所有文本都在那里，包括应该隐藏的内容。有谁知道如何实现这一目标？下面是实现这一点的最新和最简单的尝试：

<div>
<details>
  <summary>What is the purpose of the research?</summary>
  To help us explore feelings of ownership.
</details>
<details>
  <summary>What does the study involve?</summary>
  You completing this survey.
</details>
</div>

Answer 1

我们实现这一点的方式是编写通用的 JavaScript 函数，在双击事件上显示和隐藏工具提示标签。

如果要将事件改为单击，可以在函数中将ondblclick更改为onclick。

1. 将以下函数复制并粘贴到以下文本字段中（“外观”>“高级”>“标题”）。这让函数位于调查的 div 中的某个位置，以便在需要时调用。

   <script>    
   //This method shows the tooltip text when the project text is clicked
   function showTooltipOnClick(){
   
   var toolTips = document.getElementsByClassName('tip');//the project text is identified by the className 'tip'
   
   //Iterate through all project text elements to add a function when the text is clicked
   for(var i = 0; i <toolTips.length; i++){
   
       var toolTip = toolTips[i];
   
       toolTip.ondblclick = function(e){//when the text is clicked call this function
   
           //Get this project's tooltip text  and make it visible
           var elemStyle = e.target.getElementsByClassName('tipText')[0].style;//the tooltip text is identified by the className 'tipText' and is a descendent of the given 'tip' element
           elemStyle.visibility = 'visible';
           elemStyle.position = 'static';
   
       }
   }//End for
   }//End showTooltipOnClick()
   
   //This method hides the tooltip text when the project text is clicked
   function hideTooltipOnClick(){
   var tipTexts = document.getElementsByClassName('tipText');
   
   for(var i = 0; i < tipTexts.length; i++){
   
       var tipText = tipTexts[i];
   
       tipText.ondblclick = function(e){
           //e.target gets the element that was clicked.
           //The .closest('span') method gets the closest span ancestor of the element which should be the whole tipText.
           //The .style.visibility = "hidden" method changes the css visibility of the span element to hidden i.e. it hides the tipText.
           var elemStyle = e.target.closest('span').style;
           elemStyle.visibility = 'hidden';
           elemStyle.position = 'absolute';
       }
   }//End for
   }//End hideTooltipOnClick()
   
   </script>
   

2. 在问题正文中，单击“添加 JavaScript...”并调用上面定义的函数

   Qualtrics.SurveyEngine.addOnload(function()
   {
     showTooltipOnClick();
     hideTooltipOnClick();
   
   });
   

3. 在问题描述文本/选择文本输入字段中，输入源代码如下：

   <div class="tip">Text to show<span class="tipText">
   Text to uncollapse/display when double clicked</span></div>
   

4. 最后，您需要添加 CSS 代码来隐藏 tipText，然后再双击它。插入（“外观”>“高级”>“自定义 CSS”）。您还可以在此处使用 css 更改 tipText 的字体和样式。如果您想默认 tipText 在双击时显示并折叠，请将下面的 visibility 更改为“可见”。

   /* Tooltip container */
   .tip{
       position: relative;
       display: inline-block;
       cursor: help; /*change the cursor symbol to a question mark on mouse over*/
       color: inherit; /*inherit text color*/
       text-decoration: none; /*remove underline*/
      }
   
   /*Tooltip text*/
   .tip .tipText{
       visibility: hidden;
       font: bold 24px arial;
       color: inherit;
       display: block;
       position: static;/*so that it doesn't interfere when it's in containers. Will change this when revealing it*/
   }
   

示例 survey 带有可折叠文本。