Is there a way [other than using a Text Entry Form to creat a time of day question? | XM Community
Skip to main content
Solved

Is there a way [other than using a Text Entry Form to creat a time of day question?

  • October 28, 2020
  • 1 reply
  • 69 views
P
Forum|alt.badge.img+3

I have survey which is going to ask respondents, when an event happened and how long it lasted. And do it multiple times. I can simply the responses to just hours and minutes and can make a Text Entry Form with to vertically arranged boxed. But this looks odd. Is there a way to have the two part response appear horizontally?

Best answer by Radam

You could use a flatpicker JS:
Question type: Text Entry
Add this script in the JavaScript section on the individual questions:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
     dateFormat: "G:i K",
enableTime: true,
noCalendar: true,
  });

});

And include this in the survey's header: Look and Feel>General>Header (html view)
https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />">https://cdn.jsdelivr.net/npm/flatpickr">
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />">https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">

For documentation and sample code to configure the questions JavaScript: https://flatpickr.js.org/examples/

    1 reply

    Radam
    Level 4 ●●●●
    Forum|alt.badge.img+33
    • Radam
    • Level 4 ●●●●
    • Answer
    • October 28, 2020

    You could use a flatpicker JS:
    Question type: Text Entry
    Add this script in the JavaScript section on the individual questions:
    Qualtrics.SurveyEngine.addOnload(function()
    {
    jQuery("#"+this.questionId+" .InputText").flatpickr({
         dateFormat: "G:i K",
    enableTime: true,
    noCalendar: true,
      });

    });

    And include this in the survey's header: Look and Feel>General>Header (html view)
    https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />">https://cdn.jsdelivr.net/npm/flatpickr">
    https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />">https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">

    For documentation and sample code to configure the questions JavaScript: https://flatpickr.js.org/examples/

    P
    Terms & ConditionsAccessibility statement