Catglobe Wiki - User contributions [en]

Show datepicker in text/text grid questions

2014-02-13T02:17:15Z

Cg pham:

== Challenge ==

In order to help the interviewer be faster in entering a meeting day

As a questionnaire creator

I want to show a calendar inside a text/text grid question

'''Example''' [[File:ShowDatetimePicker.jpg]]

== Solution ==

*Use jquery's datepicker (read more at: [http://docs.jquery.com/UI/Datepicker http://docs.jquery.com/UI/Datepicker])
*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[File:ShowDatetimePicker1.jpg]]

*Update the layout to include the style sheet for the datepicker

[[File:ShowDatetimePicker2.jpg]]

*Remember to validate the text value when clicking Next (not to be written here)

== Code ==

*Javascript

<source lang="javascript">
function getQuestionTextBox(label, sqIndex)
{
return $("input[name='QUESTION."+ label + "." + sqIndex + "']");
}

quest.onInit = function()
{
var qTB = getQuestionTextBox("Q_MeetingTime_TextGrid_ShowDatetimePicker", 0);

qTB.datepicker(
{
dateFormat: 'dd-mm-yy' onSelect: functions () {}
changeMonth: true,
nextText: '>',
prevText: '<',
firstDay: 1
}
);

$("input:text").width("200px");
}
</source>

*CSS

<source lang="css">
/* Datepicker----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; background-color:#dfeaf1;font-family:Verdana}
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next
{ position:absolute; top: 2px; width: 1.8em; height: 1.8em; }

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span
{ display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }

.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 30%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:black;font-weight:bold;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-family:Verdana }
.ui-datepicker td { border: 0; padding: 1px; font-family:Verdana}

.ui-datepicker td span, .ui-datepicker td a
{ display: block; padding: .2em; text-align: right; text-decoration: none; }

.ui-datepicker .ui-datepicker-header
{position: relative;background-color:#345879;padding-top: 0.2em;padding-right: 0pt;padding-bottom: 0.2em;padding-left: 0pt;}

.ui-datepicker-today a{ color:red; }
.ui-helper-clearfix{display: inline-block;}
.ui-helper-clearfix{display: block;}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next
{position: absolute;top: 2px;width: 1.8em;height: 1.8em; cursor:pointer; color:white;font-weight:bold}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover
{top: 1px;}

.ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

SetPhoneNumber

2013-10-25T04:58:28Z

Cg pham:

{{HelpFiles}}

<h4> setPhoneNumber </h4>
Sets the phone number of the current questionnaire answer sheet’s user
Syntax
setPhoneNumber(phone_number_type, new_phone_number, country_code)
Arguments
phone_number_type. Is a numeric (non-decimal) expression. It must be one of the built-in constants:
PhoneNumber_Type_NotIdentified,
PhoneNumber_Type_Home1,
PhoneNumber_Type_Home2,
PhoneNumber_Type_Mobile1,
PhoneNumber_Type_Mobile2,
PhoneNumber_Type_Business1,
PhoneNumber_Type_Business2,
PhoneNumber_Type_HomeFax,
PhoneNumber_Type_BusinessFax
new_phone_number: Is a string expression
country_code: Is a numeric (non-decimal) expression.
Return type
empty
Examples
setPhoneNumber(PhoneNumber_Type_Home1, "212277", 358);
Availability
Version 4.8
Reference:
<a href="http://help4.catglobe.com/4436.htm">http://help4.catglobe.com/4436.htm</a> _

Tabulation setTotalAnswerText

2013-10-24T09:50:48Z

Cg pham:

{{HelpFiles}}

===== Tabulation_setTotalAnswerText =====

Set the text for the total answers row, which is one of the statistical rows that can be shown for tables. If this function is not used then the label for the row will just be the default value "Total answers".

'''Syntax'''

Tabulation_setTotalAnswersText(text)

'''Arguments'''

*text: is string

'''Return value'''

empty

'''Example'''

''Tabulation_setCountAnswer(true);''

''createFrequenceDiagram("Multi");''

''//Result:''

[[File:GetTotalAnswerText-Multi.jpg]]

''Tabulation_setTotalAnswerText("Total answers text");''

''createFrequenceDiagram("Multi");''

''//Result:''

[[File:SetTotalAnswerText.jpg]]

{{note}}

This script should be paired with script [[Tabulation setCountAnswer]].

'''Availability'''

Version 5.8.1

Tabulation setTotalAnswerText

2013-10-24T09:48:44Z

Cg pham: Undo revision 24852 by Cg pham (talk)

{{HelpFiles}}

===== Tabulation_setTotalAnswerText =====

Set the text for the total answers row, which is one of the statistical rows that can be shown for tables. If this function is not used then the label for the row will just be the default value "Total answers".

'''Syntax'''

Tabulation_setTotalAnswersText(text)

'''Arguments'''

*text: is string

'''Return value'''

empty

'''Example'''

''Tabulation_setCountAnswer(true);''

''createFrequenceDiagram("Multi");''

''//Result:''

[[File:GetTotalAnswerText-Multi.jpg]]

''Tabulation_setTotalAnswerText("Total answers text");''

''createFrequenceDiagram("Multi");''

''//Result:''

[[File:SetTotalAnswerText.jpg]]

{{note}}This script should be paired with script "Tabulation_setCountAnswer".

'''Availability'''

Version 5.8.1 __NOTOC__

Tabulation setTotalAnswerText

2013-10-24T09:47:40Z

Cg pham:

{{HelpFiles}}

<h5> Tabulation_setTotalAnswerText </h5>
Set the text for the total answers row, which is one of the statistical rows that can be shown for tables. If this function is not used then the label for the row will just be the default value "Total answers".
Syntax
Tabulation_setTotalAnswersText(text)
Arguments

<ul><li>text: is string
</li></ul>
Return value
empty
Example
Tabulation_setCountAnswer(true);
createFrequenceDiagram("Multi"); 
//Result:
<img src="/images/5/51/GetTotalAnswerText-Multi.jpg" _fck_mw_filename="GetTotalAnswerText-Multi.jpg" alt="" />
Tabulation_setTotalAnswerText("Total answers text"); 
createFrequenceDiagram("Multi"); 
//Result: 
<img src="/images/3/36/SetTotalAnswerText.jpg" _fck_mw_filename="SetTotalAnswerText.jpg" alt="" />
{{note}}This script should be paired with script "Tabulation_setCountAnswer".
Availability
Version 5.8.1 _