Как включить расширяемый / сворачиваемый текст в опрос Qualtrics - PullRequest
Новая
       11

Как включить расширяемый / сворачиваемый текст в опрос Qualtrics

0 голосов
/ 05 июня 2018

Я пытался включить расширяемый / складываемый текст в свой опрос 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>

1 Ответ

0 голосов
/ 06 июня 2018

Способ, которым мы реализовали это, заключался в написании общих функций JavaScript, которые показывают и скрывают теги всплывающей подсказки для события двойного щелчка.

Если вы хотите изменить событие одним щелчком, вы можете изменить ondblclick на onclick в функциях.

  1. Скопируйте и вставьте следующие функциив следующее текстовое поле («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>

  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, прежде чем дважды щелкнуть по нему.Вставить в ('Look & Feel'> 'Advanced'> + 'Custom CSS').Вы также можете изменить шрифт и стиль tipText здесь, используя css.Если вы хотите по умолчанию показывать 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*/
}

Пример опрос со складным текстом.

...