Catglobe Wiki - User contributions [en]

Align min/max texts in scale grid questions

2010-06-29T09:41:39Z

Phongha: /* Code */

==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 
[[Image:sg2.png]] 

AFTER 
[[Image:SG1.png]] 
==Solution==
Make the text cells have the same width
==Code==
<source lang=javascript>
quest.onInit = function()
{
$("td:contains('Min')").width("200px");
$("td:contains('Max')").width("200px");
$("td:contains('Longer')").width("200px");
}
</source>

==Second Solution==
If the question doesn't contain subquestion text and the text cells have the same width
==Code==
<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>

Align min/max texts in scale grid questions

2010-06-29T08:16:34Z

Phongha:

==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 
[[Image:sg2.png]] 

AFTER 
[[Image:SG1.png]] 
==Solution==
Make the text cells have the same width
==Code==
<source lang=javascript>
quest.onInit = function()
{
$("td:contains('Min')").width("200px");
$("td:contains('Max')").width("200px");
$("td:contains('Longer')").width("200px");
}
</source>

==Second Solution==
If the question doesn't contain subquestion text and the text cells have the same width
==Code==
<source lang=javascript>
quest.onInit = function()
{
$(".grid_outer table").css({'width' : '100%'});
$(".grid_inner td table").css("width","100%");
$(".grid_inner td table").each(function()
{
$('td:eq(0)', this).css({'width' : '300px', 'text-align' : 'right'});
$('td:eq(3)', this).css({'width' : '280px', 'text-align' : 'left'});
});
};
</source>

Make whole cell clickable in single and multi grids

2010-01-27T13:47:04Z

Phongha: /* Challenge */

== Challenge ==
Normally, the grid question require a click on the checkbox or radiobutton. Now, we want it to register the answer when the user click on the cell for the answer option.

== Example ==
[[Image:Clickable_cell.gif ]]

== Script ==
<source lang="javascript" line="1">
quest.onInit = function()
{
$(".grid_subquestion_odd,.grid_subquestion_even").click(
function(evt)
{
if(evt.target.nodeName == "INPUT")
return true;
$(this).children("input").click();
return false;
});
}

</source>

Make whole cell clickable in single and multi grids

2010-01-27T13:45:45Z

Phongha: /* Example */

== Challenge ==
Normally, the grid question require to click on the check or radiobutton. Now, we want it to register the answer when the user click on the cell.
== Example ==
[[Image:Clickable_cell.gif ]]

== Script ==
<source lang="javascript" line="1">
quest.onInit = function()
{
$(".grid_subquestion_odd,.grid_subquestion_even").click(
function(evt)
{
if(evt.target.nodeName == "INPUT")
return true;
$(this).children("input").click();
return false;
});
}

</source>

2010-01-18T10:33:58Z

Phongha: moved Questionnaire to User guidelines

== Introduction ==

This page is meant as a guideline for how to do in Catglobe. Initially inspired by working in questionnaires.

=== Disable many users ===
You can either disable users with import or run a batch script to disable them.

If you will disable a few users, then it is easiest to do it from user module.
Tools -> HR -> Users -> All users. In the search find the users that should be disabled. Open the users and click on disable.

==== Disable with import ====

Your excel file shall contain 2 cells: UserId and a Date. The date has following format YYYY-MM-DD HH:MM:SS like "2010-01-01 10:00:00". The date must not be greater than your current date else you can type in whatever you like. I recommend that you use the correct date but the time isn't really important. So later on you can use this to trace back if you want to make a research for something.

The date column should be text as type. I recommend that you insert a ' (apostrophe) in front of the date, then it will be regarded as text.

 [[Image:Disable import.gif]]

Open Import wizard.

[[Image:Disable import2.gif]] 

Find your excel file with Browse button.

When the file is found and uploaded, in "User id column (optional)" select box choose UserId column from your excel (so the system knows that the user exist in the system) and click next.

[[Image:Disable import3.gif]]

In step 2, check on "Import user information" and "Advanced mode" as shown below. It is recommended that Advanced mode is used with care and you should limit the use of this.

[[Image:Disable import4.gif]]

In step 3, you shall map the disable date from your excel file with the systems disable date. So in "Source columns" you shall choose the column for disable date and in "Destination columns" you should select the option called: [User].[Disabled_Date] and then click on Add.

[[Image:Disable import5.gif]]

You will then find your mapped data in the list as shown below. [[Image:Disable import6.gif]]

The last step will show you warnings of errors if there are any. If you can click on Finish buttons then you can completed the import. If not, then you should read the error message to correct the errors and redo the import. [[Image:Disable import7.gif]] 

==== Disable with cgscript ====

If you can add users to be disabled in a questionniare then you can use this script to disable the user:
 <source lang="javascript">
if(getRPQTest()) return; array user=User_getQasUser();

user[USER_PHONE_NUMBER]={};
if(user[USER_COUNTRY]==empty && (user[USER_ADDRESS]!=empty || user[USER_CITY]!=empty || user[USER_ZIPCODE]!=empty || user[USER_REGION]!=empty)) user[USER_COUNTRY]="dk";

user[USER_DISABLED]=true; User_save(user);
</source>

=== Tools for import ===
In this file [[File:Email_validation.zip]], you will find some nice tools to Windows offices Excel that will help you with your import.
The file include
Catglobe.xla, which is an add-ins to Excel. It will add a menu button, so you can manipulate with the text in Excel.
moreFunc, is a tool to validate the data in Excel. With this you can use regular expression, and validate the wanted text.
regular expression - email check.txt, is a file that contains an expression to insert into the Excel commando line to validate the email address.

To include the add-ins, you need to change the security settings for Excel. It is different from versions to version. So i recommand you to search for the answer if you can't get it to work with this guideline.

In Excel 2007, the steps are:
COM Add-ins can also be loaded and unloaded through the Excel 2007 user interface. To do this, follow these steps:

1. Click the Microsoft Office Button, and then click Excel Options. 
2. Click Add-Ins. 
3. Under Manage, click COM Add ins, and then click Go . 
4. In the Add-Ins dialog box, click Automation. In the list of registered COM servers,click on Catglobe.xla, and then click OK.
 
You can see the whole guideline here:
[http://support.microsoft.com/kb/291392 http://support.microsoft.com/kb/291392]

When you are done, you will see a select box called Catglobe under Add-Ins tab menu.
[[Image:Importtools1.gif]]
Pling, will convert the marked cells to type text.
Proper, will capital first letter and the rest in small case.
Lower, will change all text to lower cases.
Upper, will change the text to upper cases.

==== Email validation ====
Before this will work the steps to enable addins (step 1-3) has to be done.

Click on the setup.exe, and complete the installation.
Now open the file with the emails that has to be validated.
Insert this command (that is the text file):
=REGEX.COMP('''E2''';"^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(([0-9]{1,3})|([a-zA-Z]{2,3})|(aero|coop|info|museum|name))$")

Edit the E2 commando to the cell that contains the email address, and then click on enter.
The cell will return TRUE/FALSE. The email is valide when it is mark as true.
[[Image:Importtools2.gif]]
[[Category:Production_guidelines]]

User guidelines

2010-01-15T15:30:10Z

Phongha: /* Disable many users */

User guidelines

2010-01-15T15:14:27Z

Phongha: /* Introduction */

== Introduction ==

This page is meant as a guideline for how to do in Catglobe. Initially inspired by working in questionnaires.

=== Disable many users ===

=== Tools for import ===

[[category:Production guidelines]]

User guidelines

2010-01-15T15:13:16Z

Phongha: Created page with '== Introduction == This page is meant as a guideline for how to do in Catglobe. Initially inspired by working in questionnaires. === Answer options === ==== Often used answ…'

== Introduction ==

This page is meant as a guideline for how to do in Catglobe. Initially inspired by working in questionnaires.

=== Answer options ===

==== Often used answer options and their values ====

[[category:Production guidelines]]

Questionnaire - Javascript Fun Tips

2009-12-08T10:50:15Z

Phongha: /* Examples */

== Basic Hints ==

Questionnaire viewer is implemented in a way that you can add javascript to manipulate the way your questions are displayed.

jQuery is already included in the viewer, thanks to what javascript has even more powerful effect! (read more about jquery here: [http://jquery.com/ http://jquery.com/])

Javascript is a property on both question and questionnaire levels, which means that you can add javascript for each question or for the whole questionnaire.

The most important features are:

*quest: the current question's object
*questioncheck: the function called before going Next

=== quest ===

There are several important properties in quest object:

*quest.questions: array of sub questions
*quest.options: array of answer options
*quest.setQuestions(Array subQuestions): assign an array of question objects to the sub question list of the current question
*quest.setOptions(Array options): assign an array of options to the answer option list of the current question
*quest.setAnswer(string value): assign a value to the question
*quest.getHTML(): returns the HTML which will be rendered to display the question
*quest.onInit(): called right after loading the question
*quest.rotateAnswerOptions(startIndex, endIndex, rotateIndex): rotate answer options in a range specified by startIndex and endIndex, the first item in the range will be rotateIndex
*quest.rotateSubQuestions(startIndex, endIndex, rotateIndex): rotate sub questions in a range specified by startIndex and endIndex, the first item in the range will be rotateIndex
*quest.randomizeAnswerOptions(randomSeed, startIndex, endIndex): randomize answer options in a range specified by startIndex and endIndex, the order is unique for each randomSeed
*quest.randomizeSubQuestions(randomSeed, startIndex, endIndex):randomize sub questions in a range specified by startIndex and endIndex, the order is unique for each randomSeed 

=== questioncheck() ===

We need to override this function to get rid of the default question check supported by the questionnaire viewer, it is a must when showing more than one questions in the same page. The function returns true when there is nothing wrong and false otherwise.

There is an object which should be used to display errors: ErrorMessages.

*ErrorMessages.getInstance().clearErrorMessages(): clear all existing error messages
*ErrorMessages.getInstance().showErrorMessage(msg): show an error message

If you want to extend the questioncheck function with special cases then you should re-create the questioncheck function carefully, because else you will create an endless loop. If you get a stack overflow error from the browser, then your problem should be solved by the following script pattern:

<source lang="javascript">// Store a reference to the default question check
var defaultQuestionCheck = questioncheck;

// Implement your own question check routine
var questioncheck = function()
{
// Call the default question check
// If it fails
if (!defaultQuestionCheck())
// Then return at once with false
return false;

// Catch exceptions, this is just for precaution
try
{
// Optimistic assumption that everything is OK
var valid = true;

// Do your customized question checks here set variable
// valid to false if the question is answered incorrectly

if (!valid)
{
// You might want to clear default error messages given
ErrorMessages.getInstance().clearErrorMessages();

// Add your own error message
ErrorMessages.getInstance().showErrorMessage("An error message");

// Terminate the question check by returning false
return false;
}
}
catch(e)
{
// Inform about the reason for the exception
alert(e.message);

// And return false
return false;
}

// Everything is OK
return true;
}</source>

==Technical tips==
===Include an external script library===
In case we want to use external javascript libraries hosted on external servers (like google), we need to include the library link to the question script. 
A simple method of doing so is using jquery's getScript method (http://docs.jquery.com/Ajax/jQuery.getScript#urlcallback) 
Example: 
<source lang = javascript>
$.getScript("http://ui.jquery.com/testing/ui/ui.datepicker.js", function()
{
//the library is now ready to use
}
);
</source>

===Edit stylesheet===
The easiest way is to use Firefox with Web Developer Add-on (http://chrispederick.com/work/web-developer) 

[[Image:Web_developer.png]]

== Examples ==
[[Showing Answer Option in tab]]

[[Rotate answer options/sub questions]]

[[Randomize answer options/sub questions]]

[[Drag and drop answer option values]]

[[Change Impsys mages]]

[[Add an extra row before a sub question in a grid]]

[[Hide sub question text column in a grid question]]

[[Show a text grid and a single question in the same page|Show a text grid question and a single question in the same page]]

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

[[Add an extra column before an answer option column in single grid question]]

[[Both horizontal and vertical single grid]]

[[Disable sub questions in text grids]]

[[Number grid]]

[[Close to URL]]

[[Double columns in text grids]]

[[Count down with invisible counter]]

[[Fold in/out texts in question text]]

[[Force email address]]

[[Force number of characters]]

[[Change text box size]]

[[Set focus on question text in the top]]

[[Maximum text length]]

[[Next button count down]]

[[Mark answer option with keyboard]]

[[Show flash movies on questionnaire viewer|Play a list of movies in questionnaire]]

[[Play a commercial and automatically go next when it is over in questionnaire]]

[[Show a single question as a dropdown list inside another text grid question]]

[[Hide Next button in n seconds]]

[[Show datepicker in text/text grid questions]]

[[Show column header in text grid question]]

[[Prioritize sub questions in a text grid question]]

[[Align min/max texts in scale grid questions]]

[[Add text before answer option of single question]]

[[Show single questions as dropdown lists in their own pages]]

[[Show language selector page]]

[[Reverse single grid between sub questions and answer options]]

[[Insert a TextGrid question into a SingleGrid Question]]

[[Script for making a text grid numerical summing to a specific value]]

[[Convert closed question TextBox into TextArea]]

[[Validate email specified as an open text of a single question]]

[[Show more than one single grid in the same page]]

[[Show more than one single question in the same page]]

[[Require only one check for grid question]]

File:Citymail productionmanual.doc

2009-09-03T12:03:23Z

Tracking projects

2009-03-09T13:35:19Z

Phongha:

== Introduction ==
This page will display all the tracking projects and the deadline for the data deliveries.

=== Demo ===
<table cellspacing="1" cellpadding="10" bordercolor="#000000" border="1">

<tr height="18" bgcolor="#CCCCCC" bordercolordark="#000000">
<td height="18" width="86">'''Project Name'''</td>
<td width="255">'''Delivery'''</td>
<td width="529">'''Quota'''</td>
</tr>
<tr height="17">
<td height="17">8653ins</td>
<td>The first week in every month, not strict</td>
<td>Have to have 75 completed every week, but the other quota can have plus/minus some..</td>
</tr>
<tr height="17">
<td height="17"> </td>
<td> </td>
<td> </td>
</tr>
</table>

[[category:Production guidelines]]