Catglobe Wiki - User contributions [en]

Merge duplicate users

2013-09-12T10:48:14Z

Cg van: /* Set recalculate duplicates dialog */

[[Category:User module]]

=== Merge duplicate users ===

In order to merge duplicate users that may exist in the system Catglobe offers the merge user feature, which can be accessed via

''Tools -> Administration -> HR -> Duplicate user''

The reason for wanting to merge two users are many, but generally it can have been caused by errors or users who have signed up to be respondent more than once. In both cases we need to keep important information and move it to a new user and delete the rest.

In order to do this we operate with some definitions important for the understanding of merging users.

'''Deleted User:''' the user that will be destroyed after being merged.

'''Main User:''' the user whose values are chosen for the Merged User by default. This is the user account that is kept. After the merge-process is done, we can call it '''Merged User'''.

Since we normally will have no easy way of finding duplicate users, Catglobe offers a feature to do this. The page you will initially see is the duplicate list. This list identifies all the possible duplicates that exist on the database and list them side by side as shown below:

[[Image:4311.png|800px|MergeUser5-4-1]]You may not immediately see all the duplicate users in your system since this page uses a scheduled approach to finding duplicates, since the query is very heavy and cannot be run every time opening this page.

The list you see will feature information on the two users that are found to be possible duplicates. Besides this there is a “certainty” column which shows the percentage of similarity between the two users.

Finally there is the status column showing three possible values:

*Open: no action has been taken on this duplicate.
*Merged: the two users of this duplicate have been merged.
*Ignored: this duplicate has been marked as “Ignored”.

A number of actions are possible from this page:

*Ignore: highlighting and clicking ignore on a pair of users will ensure that they are never again seen as duplicates when we search for potential duplicates. Some duplicates can be caused by similar names and once we find that they are really different people we will never want them to appear in the list again.
*Merge: When highlighting a record and clicking the merge field we will then be introduced to the merge user dialogue, which is explained in more detail below.
*Search: Makes it possible to limit identified duplicates to only include users where both duplicates are members of a certain group.
*Recalculate duplicates: This is a dialogue for managing the duplicate search schedule and rules, which will be explained later in this help file.
*Manual merge (found under tools): A tool for manually choosing the users to merge is available through this button. Explained in detail below.
*Ignored data list: A list that identifies names or data that we want to exclude from being identified as duplicates. Explained in detail below.

===Merge user===

Once we choose to merge a pair of users we will be presented with the following dialog.

[[Image:4312.png|800px|MergeUser5-4-2]]

The screen contains a button to initiate merge of the two users, a reset button to undo any merge settings done in the dialog, and a button to close the dialog without taking any actions.

A normal process to merge two users is to go through all the tabs and choose which information we want to keep. The chosen information will be displayed in the main tab area, where you can make some final adjustments if needed. Once you are satisfied with

How the final main user will look you click merge. The following detailed guide will lead you through merging users.

===Step 1: Choose main user===

* Select one of the two option buttons to choose the Main User. Note that we can’t select a user account that has been deleted as a Main User. If a user has already been deleted, the corresponding radio button will be disabled.
* After the Main User has been chosen, all other controls are enabled.
* When one of the two users is selected as Main User, the Main User will get all values from the selected one, except for Address and Phone numbers.
* If both users have an address specified, the Main User will get the address values from the selected user. If only one of the two users has Address, the Main User will get the address values from that user. The same logic applies to phone numbers.
* By default, the “disabled” setting of the Main User is FALSE and “access expiration” is null.
* Points will always be the sum of all points of both users.

===Step 2: Choose value for each attribute===

Initially the value in the main user will be set to the chosen main user, but it is possibly to change this later either by manually changing the main user or by deciding on the other user’s radio button.

[[Image:4314.png|800px|MergeUser5-4-3]]

* After all the values are decided, click the “Merge” button to start the merging process.
* After the merge process is done, the dialog will close and you will be returned to the duplicate user list.

=== Set recalculate duplicates dialog ===

This dialog makes it possible to set criteria for how often the find duplicate query is run and the criteria for what users it finds. The dialogue looks like below.

[[Image:5301.png|500px|DuplicateUser5-5-1]]

If you want to limit the search being made for users in a certain group you can select it here. This can e.g. make sure that you only search on panel members, since you do actually allow employees to have more than one user account.

You can further specify when the query will start and how often it will be run (interval in days). There are three options; Start now, start later and recurring. Each of these have different settings to specify.

If you want disabled users to also be compared for duplicates you can check the “Include disabled users?” check box. Finally, you can specify the criteria that will be compared between users to see if they are duplicates.  Save and wait to see the result of your settings.

A number of other factors may also influence the business logic of how duplicates are found; these are only for administrators to set up via the web configuration file and you can read more about them by clicking here.

[[Key: DoubletUsersNumberOfNewUsersForSearch]]

[[Key: DoubletUsersUpperThresholdForSearch]]

===Manual merge===

When you know of two users that need to be merged and these do not necessarily appear in the duplicate list, you can use the manual merge feature,

[[Image:4316.png|450px|MergeUser5-4-5]] It basically gives you the option to merge two users by searching for their user using the small search dialog or by choosing their ID and clicking the related “Merge” details button. This will open the merge user dialog.

===Ignored data list===

This page displays the list of full names/addresses/phone numbers/e-mails/passwords that are ignored during the search for duplicate users. Please note that these ignored data are different from ignored duplicates. The values that are placed on this list are dependent on a setting in the web configuration, which you can read more about by clicking here. Basically it is a setting specifying the duplicate search to ignore any duplicates that exist in a large number. The reason for such a feature is that we have certain combinations (like empty full name or full names that are all “Respondent Respondent” due to import choices) and we do not wish to include these in our duplicate list. There is no manual choice of what these are; they are purely based on amount in existence. [[Image:4317.png|1094px|MergeUser5-4-6]]

There are 6 buttons on the tool bar:

'''Full name: '''list of the top 30 ignored full names.

'''Password:''' list of the top 30 ignored passwords.

'''Phone number:''' list of the top 30 ignored phone numbers.

'''E-mail: '''list of the top 30 ignored e-mails.

'''Address:''' list of the top 30 ignored addresses.

'''Close: '''Will return you to the duplicate list page.
__NOTOC__

Tabulation setMergeStatisticPctItem

2012-03-29T07:39:53Z

Cg van:

{{HelpFiles}}

===== Tabulation_setMergeStatisticPctItem =====

When tables are being shown with both absolute and percentage columns, the statistical rows will, for an item, show the same result in both the absolute and statistical columns. When enabling this setting, the cells for these columns will be merged together, so that the result will just be shown on one shared cell for both columns.

'''Syntax'''

Tabulation_setMergeStatisticPctItem(''enabled'')

'''Arguments'''

''enabled: '' Is a boolean expression. If ''true'' then cells will be merged, if ''false'' they will not.

'''Return type'''

empty

'''Examples'''

''Tabulation_setAbsText("abs");''

''Tabulation_setPctText("%");''

''Tabulation_setCountAnswer(true);''

''Tabulation_setTotalAnswerText("Total sample size");''

''createCrossDiagram({"Civil_status"},{"Sex"});''

''//Result:''

[[Image:SetMergeStatisticPctItem False.jpg]]

''Tabulation_setMergeStatisticPctItem(true);''

''createCrossDiagram({"Civil_status"},{"Sex"}); ''

''//Result:''

[[Image:SetMergeStatisticPctItem.jpg]]

'''Availability'''

Version 5.8.1 __NOTOC__ 

[[Category:Style_setting_functions]]

Change stylesheet of an answer option column in a single grid question

2012-02-10T03:52:59Z

Cg van:

== Change style sheet of an answer option column in a single grid question ==

In order to highlight an answer option column

As a questionnaire creator

I want to change the style sheet of a specific answer option column in a single grid question

'''Example'''

*I have a single grid question like below.

[[Image:ChangeStyleSheetAOText1.jpg]]

*I want to change the style of Don't know column.

[[Image:ChangeStyleSheetAOText2.jpg]]

== Solution ==

*Add a Single grid question to Questionnaire editorlike below<br>
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

<br>

[[Image:ChangeStyleSheetAOText Code.jpg]]<br>

== Code ==

<source lang="javascript" line="1">
//change style of a SINGLE grid question's answer option column
//answerOptionValue: value of the answer option column
//newColor: the new background color of the column's cells
quest.changeAnswerOptionColumnStyle = function(answerOptionValue, cssClass)
{
//change style of answer option text
$("#grid_answeroption_text_" + answerOptionValue).addClass(cssClass);

//change style of answer option cells
$("input:radio").each(
function(i)
{
if ($(this).val() == answerOptionValue)
$(this).parent().addClass(cssClass);
}
)
}

quest.onInit = function()
{
var dontKnow_value = 3;
this.changeAnswerOptionColumnStyle(dontKnow_value, "another_column_css");
}
</source>

==Source==

Questionnaire Resource Id on cg site: 159730

Change stylesheet of an answer option column in a single grid question

2012-02-10T03:52:33Z

Cg van: /* Code */

== Change style sheet of an answer option column in a single grid question ==

In order to highlight an answer option column

As a questionnaire creator

I want to change the style sheet of a specific answer option column in a single grid question

'''Example'''

*I have a single grid question like below.

[[Image:ChangeStyleSheetAOText1.jpg]]

*I want to change the style of Don't know column.

[[Image:ChangeStyleSheetAOText2.jpg]]

== Solution ==

*Add a Single grid question to Questionnaire editorlike below<br>
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

<br>

[[Image:ChangeStyleSheetAOText Code.jpg]]<br>

== Code ==

<source lang="javascript" line="1">
//change style of a SINGLE grid question's answer option column
//answerOptionValue: value of the answer option column
//newColor: the new background color of the column's cells
quest.changeAnswerOptionColumnStyle = function(answerOptionValue, cssClass)
{
//change style of answer option text
$("#grid_answeroption_text_" + answerOptionValue).addClass(cssClass);

//change style of answer option cells
$("input:radio").each(
function(i)
{
if ($(this).val() == answerOptionValue)
$(this).parent().addClass(cssClass);
}
)
}

quest.onInit = function()
{
var dontKnow_value = 3;
this.changeAnswerOptionColumnStyle(dontKnow_value, "another_column_css");
}
</source>;

==Source==

Questionnaire Resource Id on cg site: 159730

Add text before answer option of single question

2012-02-03T07:52:24Z

Cg van: /* Solution */

== Challenge ==

In order to add text before answer option of single question

As a questionnaire creator

I want to add text before answer option of single question

'''Example'''

I have a single question.

{|border="0"
|-
| align="center"|[[Image: OneColumnBefore.JPG]]
| [[Image: MultiColumnBefore.JPG]]
|}

I want to add an text before answer option like this image
{||-
| align="center"|[[Image: OneColumnAfter.jpg]]
| [[Image: MultiColumnAfter.jpg]]
|}

== Solution ==
*Add a Single question to Questionaire editor
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:AddTextBeforeAOOfSingleQuestion.jpg]]

== Code ==

<source lang="javascript" line="1">
quest.insertTextBefore = function(aoIndex, text)
{
var that = this;
$(".option_row").each(
function(i)
{
if (i == aoIndex)
{
var tr = $("<tr>").addClass("customized_text")
.append($("<td>").text(text).attr("colSpan",that.cols));
$(this).before(tr);
}
}
);

}

quest.onInit = function()
{
var text = "My Text";
this.insertTextBefore(2, text);
}
</source>

== Question stylesheet ==
<source lang="css">
.customized_text
{
background-color:white;
}
</source>

==Source==
Questionnaire Resource Id on cg site: 159730

Question: Q_OS_Single_AddTextBeforeAO

File:AddTextBeforeAOOfSingleQuestion.jpg

2012-02-03T07:51:44Z

Cg van:

Add text before answer option of single question

2012-02-03T07:50:11Z

Cg van: /* Source */

== Challenge ==

In order to add text before answer option of single question

As a questionnaire creator

I want to add text before answer option of single question

'''Example'''

I have a single question.

{|border="0"
|-
| align="center"|[[Image: OneColumnBefore.JPG]]
| [[Image: MultiColumnBefore.JPG]]
|}

I want to add an text before answer option like this image
{||-
| align="center"|[[Image: OneColumnAfter.jpg]]
| [[Image: MultiColumnAfter.jpg]]
|}

== Solution ==
*Add a Single question to Questionaire editor
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

== Code ==

<source lang="javascript" line="1">
quest.insertTextBefore = function(aoIndex, text)
{
var that = this;
$(".option_row").each(
function(i)
{
if (i == aoIndex)
{
var tr = $("<tr>").addClass("customized_text")
.append($("<td>").text(text).attr("colSpan",that.cols));
$(this).before(tr);
}
}
);

}

quest.onInit = function()
{
var text = "My Text";
this.insertTextBefore(2, text);
}
</source>

== Question stylesheet ==
<source lang="css">
.customized_text
{
background-color:white;
}
</source>

==Source==
Questionnaire Resource Id on cg site: 159730

Question: Q_OS_Single_AddTextBeforeAO

Add text before answer option of single question

2012-02-03T07:46:15Z

Cg van: uestion to Question

== Challenge ==

In order to add text before answer option of single question

As a questionnaire creator

I want to add text before answer option of single question

'''Example'''

I have a single question.

{|border="0"
|-
| align="center"|[[Image: OneColumnBefore.JPG]]
| [[Image: MultiColumnBefore.JPG]]
|}

I want to add an text before answer option like this image
{||-
| align="center"|[[Image: OneColumnAfter.jpg]]
| [[Image: MultiColumnAfter.jpg]]
|}

== Solution ==
*Add a Single question to Questionaire editor
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

== Code ==

<source lang="javascript" line="1">
quest.insertTextBefore = function(aoIndex, text)
{
var that = this;
$(".option_row").each(
function(i)
{
if (i == aoIndex)
{
var tr = $("<tr>").addClass("customized_text")
.append($("<td>").text(text).attr("colSpan",that.cols));
$(this).before(tr);
}
}
);

}

quest.onInit = function()
{
var text = "My Text";
this.insertTextBefore(2, text);
}
</source>

== Question stylesheet ==
<source lang="css">
.customized_text
{
background-color:white;
}
</source>

==Source==
Questionnaire Resource Id on cg site: 159730
Question: Q_OS_Single_AddTextBeforeAO

Align min/max texts in scale grid questions

2012-02-03T07:27:38Z

Cg van:

==Challenge==
In order to make scale grid questions look nicer

As a questionnaire creator

I want to align min/max texts for all sub questions

'''Example'''

BEFORE<br/>
[[Image:AlignMinMaxTextsInScaleGrid1.jpg]]<br/>

AFTER<br/>
[[Image:AlignMinMaxTextsInScaleGrid2.jpg]]<br/>
==Solution==
*Add a Scale grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:AlignMinMaxTextsInScaleGrid Code.jpg]]
==Code==
===Case 1===
<source lang=javascript>
quest.onInit = function()
{
$("td:contains('Min')").width("200px");
$("td:contains('Max')").width("200px");
$("td:contains('Longer')").width("200px");
}
</source>

===Case 2===
If the question doesn't contain subquestion text and the text cells have the same width

<source lang=javascript>
quest.onInit = function()
{
$(".grid_outer table").css({'width' : '80%'});
$(".grid_inner td table").css('width','80%');
$(".grid_inner td table").find("td").width("200px");
};
</source>

==Source==

Questionnaire Resource Id on cg site: 159730

File:AlignMinMaxTextsInScaleGrid Code.jpg

2012-02-03T07:17:44Z

Cg van:

File:AlignMinMaxTextsInScaleGrid2.jpg

2012-02-03T07:17:43Z

Cg van:

File:AlignMinMaxTextsInScaleGrid1.jpg

2012-02-03T07:17:43Z

Cg van:

Prioritize sub questions in a text grid question

2012-02-02T10:46:01Z

Cg van:

==Challenge==
In order to let the respondent prioritize a list of products

As a questionnaire creator

I want to allow him to enter only values in a list of priorities for each product (one priority is only used once)

'''Example'''
<br/>
[[Image:PrioritizeSQInTextGrid.jpg]]
==Solution==
*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:PrioritizeSQInTextGrid Code.jpg]]
==Code==
<source lang=javascript>
function isNumeric_LessThan6(sText)
{
var ValidChars = "12345";
if (sText.length != 1)
return false;

if (ValidChars.indexOf(sText) == -1)
return false;

return true;
}

var normalQuestionCheck = questioncheck;

function extendedQuestionCheck()
{
var valid = normalQuestionCheck();
if (!valid)
return false;

var usedNumbers = "";
ErrorMessages.getInstance().clearErrorMessages();
var msg = "";

$("input:text").each(
function(i)
{
if ($(this).attr("name").indexOf("QUESTION.") == 0)
{
//check the value
var v = $(this).val();
if (!isNumeric_LessThan6(v))
{
msg = "Only 1-5 are allowed as input";
valid = false;
return;
}

if (usedNumbers.indexOf(v) != -1)
{
valid = false;
msg = "One value can only be specified for one row";
return;
}

usedNumbers = usedNumbers + v;
}
}
);
if (!valid)
ErrorMessages.getInstance().showErrorMessage(msg);

return valid;
}

questioncheck = extendedQuestionCheck;
</source>
==Source==
Questionnaire Resource Id on cg site: 159730

File:PrioritizeSQInTextGrid Code.jpg

2012-02-02T10:44:02Z

Cg van:

File:PrioritizeSQInTextGrid.jpg

2012-02-02T10:44:02Z

Cg van:

Show column header in text grid question

2012-02-02T10:35:14Z

Cg van: /* Code */

==Challenge==
In order to indicate the unit of values to be put inside a text grid question

As a questionnaire creator

I want to add headers to columns in text grid question

'''Example'''
<br/>
[[Image:ShowColHeaderInTextGrid.jpg]]

==Solution==
*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:ShowColHeaderInTextGrid Code.jpg]]

==Code==
<source lang="javascript">
quest.onInit = function()
{
$("#grid_subquestion_text_1").parent().before($("<tr><th></th><th>Personal information</th></tr>"));
}
</source>

==Source==
Questionnaire Resource Id on cg site: 159730

Show column header in text grid question

2012-02-02T10:34:35Z

Cg van:

==Challenge==
In order to indicate the unit of values to be put inside a text grid question

As a questionnaire creator

I want to add headers to columns in text grid question

'''Example'''
<br/>
[[Image:ShowColHeaderInTextGrid.jpg]]

==Solution==
*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:ShowColHeaderInTextGrid Code.jpg]]

==Code==
<source lang="javascript">
quest.onInit = function()
{
$("#grid_subquestion_text_1").parent().before($("<tr><th></th><th>Antal minutter</th></tr>"));
}
</source>

==Source==
Questionnaire Resource Id on cg site: 159730

File:ShowColHeaderInTextGrid Code.jpg

2012-02-02T10:33:39Z

Cg van:

File:ShowColHeaderInTextGrid.jpg

2012-02-02T10:33:38Z

Cg van:

Show datepicker in text/text grid questions

2012-02-02T10:21:20Z

Cg van: /* Challenge */

==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'''
<br>
[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: 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
[[Image:ShowDatetimePicker1.jpg]]
*Update the layout to include the style sheet for the datepicker
[[Image: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',
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

Show datepicker in text/text grid questions

2012-02-02T10:20:41Z

Cg van: /* Code */

==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'''
[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: 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
[[Image:ShowDatetimePicker1.jpg]]
*Update the layout to include the style sheet for the datepicker
[[Image: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',
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

Show datepicker in text/text grid questions

2012-02-02T10:19:19Z

Cg van: /* Solution */

==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'''
[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: 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
[[Image:ShowDatetimePicker1.jpg]]
*Update the layout to include the style sheet for the datepicker
[[Image: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("Q2", 0);

qTB.datepicker(
{
dateFormat: 'dd-mm-yy',
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: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:white;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

Show datepicker in text/text grid questions

2012-02-02T10:17:30Z

Cg van: /* Solution */

==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'''
[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
*Update the layout to include the stylesheet for the datepicker
[[Image:ShowDatetimePicker1.jpg]]
*Remember to validate the text value when clicking Next (not to be written here)
[[Image:ShowDatetimePicker2.jpg]]

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

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

qTB.datepicker(
{
dateFormat: 'dd-mm-yy',
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: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:white;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

Show datepicker in text/text grid questions

2012-02-02T09:39:43Z

Cg van: /* Challenge */

==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'''
[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
*Update the layout to include the stylesheet for the datepicker
*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("Q2", 0);

qTB.datepicker(
{
dateFormat: 'dd-mm-yy',
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: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:white;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

Show datepicker in text/text grid questions

2012-02-02T09:39:22Z

Cg van: /* Challenge */

==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'''

[[Image:ShowDatetimePicker.jpg]]

==Solution==
*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
*Update the layout to include the stylesheet for the datepicker
*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("Q2", 0);

qTB.datepicker(
{
dateFormat: 'dd-mm-yy',
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: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:white;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

File:ShowDatetimePicker2.jpg

2012-02-02T09:38:37Z

Cg van:

File:ShowDatetimePicker1.jpg

2012-02-02T09:38:37Z

Cg van:

File:ShowDatetimePicker.jpg

2012-02-02T09:38:36Z

Cg van:

Show datepicker in text/text grid questions

2012-02-02T05:08:39Z

Cg van:

==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'''
[[Image:Datepicker_in_question.png]]
==Solution==
*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
*Update the layout to include the stylesheet for the datepicker
*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("Q2", 0);

qTB.datepicker(
{
dateFormat: 'dd-mm-yy',
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: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker-year{color:white;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

Hide Next button in n seconds

2012-02-02T04:58:46Z

Cg van:

== Challenge ==

In order to not allow respondent click on the Next button in a period of time

As a questionnaire creator

I want to hide the Next button in some seconds 

== Example ==
[[Image:HideNextButton1.jpg]]
<br>
[[Image:HideNextButton2.jpg]]

== Solution ==

*In questionnaire template editor, choose the question I want to hide the Next button and then go to the Properties - Edit question properties - Language dependent - Select javascript property
*Override quest.onInit function.
*In that function, check if the Next button exists.
*If it doesn't exist, do nothing, else disable the Next button, set the time out to number of seconds I want to hide the button, then show the button again.

[[Image:HideNextButton Code.jpg]]
== Code ==
<source lang="javascript">
quest.onInit = function()
{
var secsTimeout = 10;
if ( !document.getElementsByName('next') || document.getElementsByName('next').length == 0 )
// next button not available
return;
document.getElementsByName('next')[0].style.display='none';
setTimeout("document.getElementsByName('next')[0].style.display='';", secsTimeout*1000);
}
</source>

== Source ==
Questionnaire Resource Id on cg site: 159730

File:HideNextButton Code.jpg

2012-02-02T04:55:44Z

Cg van:

File:HideNextButton2.jpg

2012-02-02T04:55:44Z

Cg van:

File:HideNextButton1.jpg

2012-02-02T04:55:43Z

Cg van:

Mark answer option with keyboard

2012-02-02T03:53:28Z

Cg van: /* Code */

== Challenge ==
In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

As a questionnaire creator

I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

== Example ==
[[Image:MakeAnswerOptionWithKeyboard.jpg]]

== Solution ==
*Add a Single question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[Image:MakeAnswerOptionWithKeyboard Code.jpg]]

== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q_Single_MakeAOWithKeyboard";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

Mark answer option with keyboard

2012-02-02T03:47:33Z

Cg van: /* Solution */

== Challenge ==
In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

As a questionnaire creator

I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

== Example ==
[[Image:MakeAnswerOptionWithKeyboard.jpg]]

== Solution ==
*Add a Single question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[Image:MakeAnswerOptionWithKeyboard Code.jpg]]

== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q1";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

Mark answer option with keyboard

2012-02-02T03:46:09Z

Cg van: /* Solution */

== Challenge ==
In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

As a questionnaire creator

I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

== Example ==
[[Image:MakeAnswerOptionWithKeyboard.jpg]]

== Solution ==
*Add a Single question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[IMG:MakeAnswerOptionWithKeyboard Code.jpg]]

== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q1";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

Mark answer option with keyboard

2012-02-02T03:45:31Z

Cg van: /* Example */

== Challenge ==
In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

As a questionnaire creator

I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

== Example ==
[[Image:MakeAnswerOptionWithKeyboard.jpg]]

== Solution ==
*Add a Single question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q1";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

File:MakeAnswerOptionWithKeyboard Code.jpg

2012-02-02T03:44:45Z

Cg van:

File:MakeAnswerOptionWithKeyboard.jpg

2012-02-02T03:44:45Z

Cg van:

Mark answer option with keyboard

2012-02-02T03:10:27Z

Cg van:

== Challenge ==
In order to allow the respondent to be able to answer a question by hitting a button on his keyboard.

As a questionnaire creator

I want to specify both which key on the keyboard that should be used, and which answer option that should be answered

== Example ==
[[Image:MapKey_Before.JPG‎ ]]

== Solution ==
*Add a Single question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
== Code ==
<source lang="javascript" line="1">
//which key on the keyboard that should mark the answer option. The code 32 refers to the space key
var keyCodetoReactOn = 32;

//enabels you to find out which numerical codes that belongs to which keys on the keyboard.
//Change false into true, and you will have a dialog that shows you the key code each time you hit a key.
//When you have found out which code that should mark the answer option, you change true back to false (mostly use for debugging)
var displayKeyCode = false;

//information on which answer option that should be marked when the respondent uses his keyboard.
//The answer option list has an index starting with zero when you are referring to answer options with this script.
//The number 0 therefore refers to the answer option with the value 1.
//If you want to refer to an answer option with the value 99, you write 98 in the script.
var answerOptionIndexToCheck = 0;

//the question label of the question where you run the script.
var qLabel = "Q1";

//the text that should be on the Next button.
//Note that this text will be the same for all languages if your questionnaire is programmed in multiple languages.
var buttonText = "Recognize";

//It is advisable that you hide the Next button on questions where you use this script.
// Otherwise the respondent will have two buttons, which can be confusing

function myHandler(e)
{
if (displayKeyCode)
alert(e.keyCode);
if (e.keyCode == keyCodetoReactOn)
recognize();
}
function recognize()
{
quest.options[answerOptionIndexToCheck].checked = true;
document["query"]["QUESTION." + qLabel][answerOptionIndexToCheck].checked = true;
moveForward();
}
function moveForward()
{
document["query"]["dir"].value = "next";
document["query"].submit();
}
question.prototype.getNavigationPanel = function()
{
var sres = "";

if (this.backvisible) sres += "<input type=\"button\" name=\"back\" value=\"" + this.backtext + "\" tabindex=1000 onclick=\"" + this.reference + ".back();\">";
if (this.resetvisible) sres += "<input type=\"button\" name=\"reset\" value=\"" + this.resettext + "\" tabindex=1001 onclick=\"" + this.reference + ".reset();\">";
if (this.closevisible) sres += "<input type=\"button\" name=\"close\" value=\"" + this.closetext + "\" tabindex=1002 onclick=\"" + this.reference + ".close();\">";
sres += "<input type=\"button\" name=\"spaceHandler\" onclick=\"recognize();\" onkeydown=\"return myHandler(event)\" value=\"" + buttonText + "\" tabindex=0>";
if (this.nextvisible) sres += "<input type=\"submit\" name=\"next\" onkeydown=\"return myHandler(event)\" value=\"" + this.nexttext + "\" tabindex=0>";
return sres;
}
question.prototype.onInit = function()
{
document["query"]["spaceHandler"].focus();
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

Next button count down

2012-02-01T03:07:32Z

Cg van: /* Code */

== Challenge ==
In order to control when the next button should be available for the respondent

As a questionnaire creator

I want to hide Next button in specify time

'''Example'''

*I have a Text question like below.

[[Image:NextButtonAvailable_Before.JPG‎ ]]
<br>
[[Image:NextButtonAvailable_After.JPG]]

== Solution ==
*Add a Text grid question to Questionnaire editor
*This script only works in combination with the question property count down. The number you define in count down, is the number of seconds the next button will be unavaliable for the respondent.
[[Image:CountDownNextButton.JPG]]
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:NextButtonCountDown.png]]

== Code ==
<source lang="javascript" line="1">
function setVisibility(visible)
{
if (!document.getElementsByName('next') || document.getElementsByName('next').length == 0)
// next button not available
return;
if (visible)
document.getElementsByName('next')[0].style.display = '';
else
document.getElementsByName('next')[0].style.display = 'none';
}
question.prototype.onInit = function()
{
// set invisible onload
setVisibility(false);
}
question.prototype.onCountdown = function()
{
//this.next();
if (this.countdown != null && this.countdown > 0)
{
this.countdown--;
this.countDownObj.value--;
this.countDownObj.render();
if (this.countdown == 0)
{
// Disable the timed trigger
window.clearInterval(this.countdownHandle);
setVisibility(true);
}
}
}
</source>

== Source ==

Questionnaire Resource Id on cg site: 159730

Next button count down

2012-02-01T03:00:29Z

Cg van: /* Solution */

File:NextButtonCountDown.png

2012-02-01T02:59:52Z

Cg van:

Maximum text length

2012-01-16T10:22:56Z

Cg van:

== Maximum text length ==

In order to limit number of characters that respondent input to text box.

As a questionnaire creator

I want to set maximum length on text question.

'''Example'''

*I have a Text grid question like below.

[[Image:MaximumTextLength1.jpg]]

*I want to set maximum length on text question.

[[Image:MaximumTextLength2.jpg]]

=== Solution ===

*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[Image:MaximumTextLength Code.jpg]]

=== Code ===

<source lang="javascript">
quest.maxlength = 10;
</source>

=== Source ===

Questionnaire Resource Id on cg site: 159730

Maximum text length

2012-01-16T09:58:34Z

Cg van:

== Maximum text length ==

In order to limit number of characters that respondent input to text box.

As a questionnaire creator

I want to set maximum length on text question.

'''Example'''

*I have a Text grid question like below.

[[Image:MaximumTextLength1.jpg]]

*I want to set maximum text length.

[[Image:MaximumTextLength2.jpg]]

=== Solution ===

*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
[[Image:MaximumTextLength Code.jpg]]

=== Code ===

<source lang="javascript">
quest.maxlength = 10;
</source>

=== Source ===

Questionnaire Resource Id on cg site: 159730

File:MaximumTextLength Code.jpg

2012-01-16T09:57:29Z

Cg van:

File:MaximumTextLength2.jpg

2012-01-16T09:57:29Z

Cg van:

File:MaximumTextLength1.jpg

2012-01-16T09:57:29Z

Cg van:

Change text box size

2012-01-16T09:39:20Z

Cg van:

== Change Text box size ==

In order to make text box wider.

As a questionnaire creator

I want to change text box size

'''Example'''

*I have a Text grid question like below.

[[Image:ChangeTextBoxSize1.jpg]]

*I want to change text box size.

[[Image:ChangeTextBoxSize2.jpg]]

=== Solution ===

*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[Image:ChangeTextBoxSize Code.jpg]]

=== Code ===

<source lang="javascript">
quest.size=50;
</source>

=== Source ===

Questionnaire Resource Id on cg site: 159730

Change text box size

2012-01-16T08:29:54Z

Cg van: /* Change Text box size */

== Change Text box size ==

You want to change the text box size in a Text question .The script is often used together with the Maximum text length script

In order to make text box wider.

As a questionnaire creator

I want to change text box size

'''Example'''

*I have a Text grid question like below.

[[Image:ChangeTextBoxSize1.jpg]]

*I want to change text box size.

[[Image:ChangeTextBoxSize2.jpg]]

=== Solution ===

*Add a Text grid question to Questionnaire editor like below
*Go to menu Properties -> Question scripts -> Java script tab -> Input script

[[Image:ChangeTextBoxSize Code.jpg]]

=== Code ===

<source lang="javascript">
quest.size=50;
</source>

=== Source ===

Questionnaire Resource Id on cg site: 159730