如何在 Qualtrics 调查中包含 expandable/collapsible 文本
How to include expandable/collapsible text in Qualtrics survey
我一直在尝试在我的 Qualtrics 调查中包含 expandable/collapsible 文本,但似乎无法正常工作。我已将其放入描述性文本部分,并将其粘贴到 html 视图中。调查设计部分的问题本身似乎使用 html,但当我单击预览时,文本不是 expandable/collapsible。所有文本都在那里,包括应该隐藏的内容。有谁知道如何实现这一目标?以下是最新、最简单的实现方法:
<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>
我们实现它的方法是编写通用的 JavaScript 函数来显示和隐藏双击事件中的工具提示标签。
如果要将事件改为单击事件,可以在函数中将ondblclick
改为onclick
。
将以下函数复制并粘贴到以下文本字段中 ('Look & Feel' > 'Advanced' > 'Header')。这让函数位于调查 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>
在问题正文中,点击'Add JavaScript...',调用上面定义的函数
Qualtrics.SurveyEngine.addOnload(function()
{
showTooltipOnClick();
hideTooltipOnClick();
});
在问题描述text/choice文本输入框,输入源代码如下:
<div class="tip">Text to show<span class="tipText">
Text to uncollapse/display when double clicked</span></div>
最后,您需要添加CSS代码来隐藏tipText
,然后双击它。插入 ('Look & Feel' > 'Advanced' > + 'Custom CSS')。您还可以使用 css 更改 tipText
的字体和样式。如果您想默认 tipText
在双击时显示然后折叠,请将下面的 visibility
更改为 'visible'。
/* 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。
我一直在尝试在我的 Qualtrics 调查中包含 expandable/collapsible 文本,但似乎无法正常工作。我已将其放入描述性文本部分,并将其粘贴到 html 视图中。调查设计部分的问题本身似乎使用 html,但当我单击预览时,文本不是 expandable/collapsible。所有文本都在那里,包括应该隐藏的内容。有谁知道如何实现这一目标?以下是最新、最简单的实现方法:
<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>
我们实现它的方法是编写通用的 JavaScript 函数来显示和隐藏双击事件中的工具提示标签。
如果要将事件改为单击事件,可以在函数中将ondblclick
改为onclick
。
将以下函数复制并粘贴到以下文本字段中 ('Look & Feel' > 'Advanced' > 'Header')。这让函数位于调查 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>
在问题正文中,点击'Add JavaScript...',调用上面定义的函数
Qualtrics.SurveyEngine.addOnload(function() { showTooltipOnClick(); hideTooltipOnClick(); });
在问题描述text/choice文本输入框,输入源代码如下:
<div class="tip">Text to show<span class="tipText"> Text to uncollapse/display when double clicked</span></div>
最后,您需要添加CSS代码来隐藏
tipText
,然后双击它。插入 ('Look & Feel' > 'Advanced' > + 'Custom CSS')。您还可以使用 css 更改tipText
的字体和样式。如果您想默认tipText
在双击时显示然后折叠,请将下面的visibility
更改为 'visible'。/* 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。