Drag slider question view - Revision history

Wikicatglobe at 02:05, 18 October 2013

2013-10-18T02:05:28Z

← Older revision		Revision as of 02:05, 18 October 2013
Line 1:		Line 1:
	<accesscontrol>~~Administrators,,Cem,,Maysunshine~~</accesscontrol>		<accesscontrol>Main:MyGroup</accesscontrol>
	[[Category:Miscellaneous]]		[[Category:Miscellaneous]]
	==Drag slider question view==		==Drag slider question view==

Cg_pham at 09:52, 24 October 2011

2011-10-24T09:52:21Z

← Older revision		Revision as of 09:52, 24 October 2011
Line 1:		Line 1:
	<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>		<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
	[[Category:~~Guidelines~~]]		[[Category:Miscellaneous]]
	==Drag slider question view==		==Drag slider question view==
	The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.		The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.

Cg_pham at 07:40, 5 October 2011

2011-10-05T07:40:19Z

← Older revision		Revision as of 07:40, 5 October 2011
Line 1:		Line 1:
			<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
			[[Category:Guidelines]]
	==Drag slider question view==		==Drag slider question view==
	The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.		The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.

Catglobe: /* Configuration of the question */

2010-05-25T03:56:48Z

Configuration of the question

← Older revision		Revision as of 03:56, 25 May 2010
Line 31:		Line 31:
	Below is shown an example in QSL of a scale grid question configured with the drag slider question view, it's ready to be imported to your questionnaire and modified to fit your needs.		Below is shown an example in QSL of a scale grid question configured with the drag slider question view, it's ready to be imported to your questionnaire and modified to fit your needs.

	When using this example you must remember to replace 'JavaScript GUID', and 'Flash GUID' with those GUIDs you found in the previous section, keep the quotes. You can insert the images from the questionnaire editor, they should be uploaded to the questionnaire template then inserted into the sub questions.		When using this example you must remember to replace 'JavaScript GUID', and 'Flash GUID' with those GUIDs you found in the previous section, keep the quotes. You can insert the images from the questionnaire editor, they should be uploaded to the questionnaire template then inserted into the sub questions. And you can edit some flash view configuration as you need (size of flash, pictures size,..).

	<source lang="javascript">		<source lang="javascript">
Line 50:		Line 50:
	// Enter the GUID for the Flash attachment		// Enter the GUID for the Flash attachment
	var flashGuid = 'Flash GUID';		var flashGuid = 'Flash GUID';

			// Enter the dimension for the Flash
			var flashWidth = 500;
			var flashHeight = 400;

			// Insert the flash
			quest.text += '<p><object width="' + flashWidth + '" height="' + flashHeight + '" id="dragSliderFlash"
			classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0">
			<param name="quality" value="high">
			<param name="movie" value="../../Attachments/GetAttachment.aspx?noattach=true&rid=' + flashGuid + '">
			<embed src="../../Attachments/GetAttachment.aspx?noattach=true&rid=' + flashGuid + '" quality="high"
			width="' + flashWidth + '" height="' + flashHeight + '" name="dragSliderFlash"
			pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
			</embed></object></p>';

	// Modify the question after the DOM has finished loading to get jQuery access		// Modify the question after the DOM has finished loading to get jQuery access
Line 60:		Line 74:
	{		{
	// Create an instance of the drag slider		// Create an instance of the drag slider
	var myDragSlider = new DragSlider(quest~~, flashGuid, 500, 400~~);		var myDragSlider = new DragSlider(quest);

	// Do some configuration		// Do some configuration
Line 137:		Line 151:
	// Enter the GUID for the Flash attachment		// Enter the GUID for the Flash attachment
	var flashGuid = 'Flash GUID';		var flashGuid = 'Flash GUID';

			// Enter the dimension for the Flash
			var flashWidth = 500;
			var flashHeight = 400;

			// Insert the flash
			quest.text += '<p><object width="' + flashWidth + '" height="' + flashHeight + '" id="dragSliderFlash"
			classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0">
			<param name="quality" value="high">
			<param name="movie" value="../../Attachments/GetAttachment.aspx?noattach=true&rid=' + flashGuid + '">
			<embed src="../../Attachments/GetAttachment.aspx?noattach=true&rid=' + flashGuid + '" quality="high"
			width="' + flashWidth + '" height="' + flashHeight + '" name="dragSliderFlash"
			pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
			</embed></object></p>';

	// Modify the question after the DOM has finished loading to get jQuery access		// Modify the question after the DOM has finished loading to get jQuery access
Line 147:		Line 175:
	{		{
	// Create an instance of the drag slider		// Create an instance of the drag slider
	var myDragSlider = new DragSlider(quest~~, flashGuid, 500, 400~~);		var myDragSlider = new DragSlider(quest);

	// Do some configuration		// Do some configuration

Catglobe: /* Configuration of the question */

2010-05-20T10:22:43Z

Configuration of the question

← Older revision		Revision as of 10:22, 20 May 2010
Line 63:		Line 63:

	// Do some configuration		// Do some configuration
			myDragSlider.config.imageThumbnailConfiguration.imageHeight = 60;
			myDragSlider.config.imageThumbnailConfiguration.imageWidth = 60;
			myDragSlider.config.imageThumbnailConfiguration.imageSpace = 10;

	myDragSlider.config.scale.fontColor = 'FF0000';		myDragSlider.config.scale.fontColor = 'FF0000';
	myDragSlider.config.scale.fontSize = '12';		myDragSlider.config.scale.fontSize = '12';
			myDragSlider.config.scale.fontText = 'Arial';

	// Initalize the drag slider		// Initalize the drag slider
	myDragSlider.init();		myDragSlider.init();
Line 145:		Line 150:

	// Do some configuration		// Do some configuration
			myDragSlider.config.imageThumbnailConfiguration.imageHeight = 60;
			myDragSlider.config.imageThumbnailConfiguration.imageWidth = 60;
			myDragSlider.config.imageThumbnailConfiguration.imageSpace = 10;

	myDragSlider.config.scale.fontColor = 'FF0000';		myDragSlider.config.scale.fontColor = 'FF0000';
	myDragSlider.config.scale.fontSize = '12';		myDragSlider.config.scale.fontSize = '12';
			myDragSlider.config.scale.fontText = 'Arial';

	// Initalize the drag slider		// Initalize the drag slider

Catglobe at 09:38, 18 May 2010

2010-05-18T09:38:22Z

← Older revision		Revision as of 09:38, 18 May 2010
Line 2:		Line 2:
	The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.		The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.

	===Setting up the resources===		=== Setting up the resources ===
	~~The drag slider needs two attachments in order to work, a Flash-file which creates the question view and a JavaScript-file which wraps the Flash-file to simplify the usage in question script.~~

	The ~~following step~~-by-~~step guide describes a best practice for placing~~ question ~~views, it will walk you through setting up the drag slider on your Catglobe site~~.		The drag slider needs two attachments in order to work, a Flash-file which creates the question view and a JavaScript-file which wraps the Flash-file to simplify the usage in question script.

	The guide ~~assumes that~~ it ~~is the first question view~~ you ~~are adding to~~ the site~~, so some steps can be skipped if the basic structure has already been established~~.		The following step-by-step guide describes a best practice for placing question views, it will walk you through setting up the drag slider on your Catglobe site.

	~~Before~~ you ~~start, you must have~~ the ~~necessary navigation and resource access, talk with your~~ site ~~administrator about that~~, ~~she might have to give you additional permissions to complete~~ the ~~steps below~~.		The guide assumes that it is the first question view you are adding to the site, so some steps can be skipped if the basic structure has already been established.

	~~# Go to 'folders'~~		Before you start, you must have the necessary navigation and resource access, talk with your site administrator about that, she might have to give you additional permissions to complete the steps below.
	~~# Create a folder called 'Common resources' below 'SYSTEM' if it doesn't exist already~~, ~~leave inheritance on~~
	~~# Create a folder called 'Question views' below~~ the ~~folder 'Common resources' if it doesn't exist already, leave inheritance on, leave inheritance on~~
	~~# Create a folder called 'Drag slider' below the folder 'Question views' if it doesn't exist already, leave inheritance on~~
	~~# Open the attachment tab of the 'Drag slider' folder~~ and ~~upload the two files DragSlider.js and DragSlider.swf~~, ~~make sure to keep the names including the file extension~~, ~~it will make it easier~~ to ~~recognize the files in the next step~~
	~~# Go to 'tools > Projects and folders > Attachments'~~
	~~# Search by name for 'DragSlider' anywhere in name, given that~~ you ~~named the attachments according~~ to the ~~suggested naming in the step above~~
	~~# Make sure to include the Link column in the attachment resource list, you'll need it for getting the GUID of the two attachments~~
	~~# The link column for the files will look something like this:<br>http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=20eb9e88-69cc-4b03-bbe0-b0dbda53d285 (DragSlider~~.~~js)<br>http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=e8397d22-22cd-439b-932b-e36fe68b88c4 (DragSlider.swf)~~
	# You should extract the GUIDs only, note them down now together with their filename, you will need it for setting up the question:<br>DragSlider.js: 20eb9e88-69cc-4b03-bbe0-b0dbda53d285<br>DragSlider.swf: e8397d22-22cd-439b-932b-e36fe68b88c4
	~~# Create a group called 'Drag slider access' under the folder 'Drag slider'~~
	~~# Give the group 'Drag slider access' observer access to the folder 'Drag slider'~~
	~~# Add the user with username 'anonymous' to the group 'Drag slider access', this is necessary for test links and anonymous access to work~~
	# All respondents participating in questionnaires using the DragSlider must be added to the group 'Drag slider access' else they will not be able to see the drag slider when answering the questionnaire

	Respondents can be added to the 'Drag slider access' group dynamically through a dummy question in the beginning of the questionnaire to avoid adding respondents unecessarily to the group.		1. Go to 'folders' <br>2. Create a folder called 'Common resources' below 'SYSTEM' if it doesn't exist already, leave inheritance on <br>3. Create a folder called 'Question views' below the folder 'Common resources' if it doesn't exist already, leave inheritance on, leave inheritance on <br>4. Create a folder called 'Drag slider' below the folder 'Question views' if it doesn't exist already, leave inheritance on <br>5. Open the attachment tab of the 'Drag slider' folder and upload the two files DragSlider.js and DragSlider.swf, make sure to keep the names including the file extension, it will make it easier to recognize the files in the next step <br>6. Go to 'tools > Projects and folders > Attachments' <br>7. Search by name for 'DragSlider' anywhere in name, given that you named the attachments according to the suggested naming in the step above <br>8. Select the attachment from the list, press Ctrl-C, open a text editor such as Notepad, paste the value from the clipboard, get the GUID out of it (this feature will not work in other browsers except Internet Explorer)

			Example: ''369734,<span style="color: #ff0000">20eb9e88-69cc-4b03-bbe0-b0dbda53d285</span><img src=http://mycatinet.catglobe.com/Images/Attachment/notype.gif></img> Common resources\Question Views\DragSlider Fri May 14 12:44:04 UTC+0700 2010 Hjarnaa, Ulrik (ulrikhjarnaa) Fri May 14 12:44:04 UTC+0700 2010 Hjarnaa, Ulrik (ulrikhjarnaa) Fri May 14 12:44:04 UTC+0700 2010 Hjarnaa, Ulrik (ulrikhjarnaa) 9.104 KB 36685371 DragSlider''

			9. You should extract the GUIDs only, note them down now together with their filename, you will need it for setting up the question:<br>DragSlider.js: 20eb9e88-69cc-4b03-bbe0-b0dbda53d285<br>DragSlider.swf: e8397d22-22cd-439b-932b-e36fe68b88c4 <br>10. Create a group called 'Drag slider access' under the folder 'Drag slider' <br>11. Give the group 'Drag slider access' observer access to the folder 'Drag slider' <br>12. Add the user with username 'anonymous' to the group 'Drag slider access', this is necessary for test links and anonymous access to work<br>13. All respondents participating in questionnaires using the DragSlider must be added to the group 'Drag slider access' else they will not be able to see the drag slider when answering the questionnaire<br>

			Respondents can be added to the 'Drag slider access' group dynamically through a dummy question in the beginning of the questionnaire to avoid adding respondents unecessarily to the group.

	We have the necessary resources setup, and the GUIDs we need to configure the question script in the next section.		We have the necessary resources setup, and the GUIDs we need to configure the question script in the next section.

Catglobe: /* Configuration of the question */

2010-05-13T02:41:30Z

Configuration of the question

← Older revision		Revision as of 02:41, 13 May 2010
Line 68:		Line 68:
	{		{
	// Create an instance of the drag slider		// Create an instance of the drag slider
	var myDragSlider = new DragSlider(quest, flashGuid);		var myDragSlider = new DragSlider(quest, flashGuid, 500, 400);

	// Do some configuration		// Do some configuration
Line 150:		Line 150:
	{		{
	// Create an instance of the drag slider		// Create an instance of the drag slider
	var myDragSlider = new DragSlider(quest, flashGuid);		var myDragSlider = new DragSlider(quest, flashGuid, 500, 400);

	// Do some configuration		// Do some configuration

Catglobe: moved Drag slide question view to Drag slider question view: Forgot the r in slider, sigh!

2010-05-10T02:47:31Z

moved Drag slide question view to Drag slider question view: Forgot the r in slider, sigh!

← Older revision		Revision as of 02:47, 10 May 2010
(No difference)

Catglobe: Better formatting of bullet lists

2010-05-10T02:04:01Z

Better formatting of bullet lists

@@ Line 19: / Line 19: @@
 # Search by name for 'DragSlider' anywhere in name, given that you named the attachments according to the suggested naming in the step above
 # Make sure to include the Link column in the attachment resource list, you'll need it for getting the GUID of the two attachments
-# The link column for the files will look something like this:
+# The link column for the files will look something like this:<br>http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=20eb9e88-69cc-4b03-bbe0-b0dbda53d285 (DragSlider.js)<br>http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=e8397d22-22cd-439b-932b-e36fe68b88c4 (DragSlider.swf)
-http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=20eb9e88-69cc-4b03-bbe0-b0dbda53d285 (DragSlider.js)
+# You should extract the GUIDs only, note them down now together with their filename, you will need it for setting up the question:<br>DragSlider.js: 20eb9e88-69cc-4b03-bbe0-b0dbda53d285<br>DragSlider.swf: e8397d22-22cd-439b-932b-e36fe68b88c4
 # Create a group called 'Drag slider access' under the folder 'Drag slider'
 # Give the group 'Drag slider access' observer access to the folder 'Drag slider'
@@ Line 134: / Line 130: @@
 The image path will look something like the following:
-<blockquote>../../Images/GetImage.aspx?rid=8b8121cc-5ae5-4679-857b-12302efe70aa</blockquote>
+../../Images/GetImage.aspx?rid=8b8121cc-5ae5-4679-857b-12302efe70aa
 ===Limitations===
 In the current implementation it's not possible to use permutations on the sub questions, doing so will lead to bad data, since the chosen values will be coded to sub questions randomly.

Catglobe: Documentation page for drag slider question view created

2010-05-10T01:59:10Z

Documentation page for drag slider question view created

New page

==Drag slider question view==
The drag slider question view transforms a scale grid question into a vertical scale where sub questions, which must be specified as images, can be dragged up or down to the level of the scale.

===Setting up the resources===
The drag slider needs two attachments in order to work, a Flash-file which creates the question view and a JavaScript-file which wraps the Flash-file to simplify the usage in question script.

The following step-by-step guide describes a best practice for placing question views, it will walk you through setting up the drag slider on your Catglobe site.

The guide assumes that it is the first question view you are adding to the site, so some steps can be skipped if the basic structure has already been established.

Before you start, you must have the necessary navigation and resource access, talk with your site administrator about that, she might have to give you additional permissions to complete the steps below.

# Go to 'folders'
# Create a folder called 'Common resources' below 'SYSTEM' if it doesn't exist already, leave inheritance on
# Create a folder called 'Question views' below the folder 'Common resources' if it doesn't exist already, leave inheritance on, leave inheritance on
# Create a folder called 'Drag slider' below the folder 'Question views' if it doesn't exist already, leave inheritance on
# Open the attachment tab of the 'Drag slider' folder and upload the two files DragSlider.js and DragSlider.swf, make sure to keep the names including the file extension, it will make it easier to recognize the files in the next step
# Go to 'tools > Projects and folders > Attachments'
# Search by name for 'DragSlider' anywhere in name, given that you named the attachments according to the suggested naming in the step above
# Make sure to include the Link column in the attachment resource list, you'll need it for getting the GUID of the two attachments
# The link column for the files will look something like this:
http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=20eb9e88-69cc-4b03-bbe0-b0dbda53d285 (DragSlider.js)
http://vnsurvey.catglobe.com/Attachments/GetAttachment.aspx?rid=e8397d22-22cd-439b-932b-e36fe68b88c4 (DragSlider.swf)
# You should extract the GUIDs only, note them down now together with their filename, you will need it for setting up the question:
DragSlider.js: 20eb9e88-69cc-4b03-bbe0-b0dbda53d285
DragSlider.swf: e8397d22-22cd-439b-932b-e36fe68b88c4
# Create a group called 'Drag slider access' under the folder 'Drag slider'
# Give the group 'Drag slider access' observer access to the folder 'Drag slider'
# Add the user with username 'anonymous' to the group 'Drag slider access', this is necessary for test links and anonymous access to work
# All respondents participating in questionnaires using the DragSlider must be added to the group 'Drag slider access' else they will not be able to see the drag slider when answering the questionnaire

Respondents can be added to the 'Drag slider access' group dynamically through a dummy question in the beginning of the questionnaire to avoid adding respondents unecessarily to the group.

We have the necessary resources setup, and the GUIDs we need to configure the question script in the next section.

===Configuration of the question===
The drag slider must be configured for a scale grid, where each sub question must contain an img tag pointing to the picture which should be displayed.

Since there is only one scale the minimum and maximum values for the first sub question are used to define the extremeties of the scale, likewise the first sub question is also used to define the minimum and maximum text.

The other sub questions should still contain minimum and maximum values since the navigation engine validates the inputted values, and minimum and maximum text should also be added, as i makes it easier to process collected data afterwards.

Below is shown an example in QSL of a scale grid question configured with the drag slider question view, it's ready to be imported to your questionnaire and modified to fit your needs.

When using this example you must remember to replace 'JavaScript GUID', and 'Flash GUID' with those GUIDs you found in the previous section, keep the quotes. You can insert the images from the questionnaire editor, they should be uploaded to the questionnaire template then inserted into the sub questions.

<source lang="javascript">
QUESTIONNAIRE
[
HTML=true;
NEXT_BUTTON_VISIBLE = true;
BACK_BUTTON_VISIBLE = true;
REQUIRED = true;
]

QUESTION DragSlider SCALEGRID
[
JAVA_SCRIPT = "
// Enter the GUID for the JavaScript attachment
var javaScriptGuid = 'JavaScript GUID';

// Enter the GUID for the Flash attachment
var flashGuid = 'Flash GUID';

// Modify the question after the DOM has finished loading to get jQuery access
quest.onInit = function()
{
// Load the JavaScript attachment
$.getScript(
'../../Attachments/GetAttachment.aspx?rid=' + javaScriptGuid,
function()
{
// Create an instance of the drag slider
var myDragSlider = new DragSlider(quest, flashGuid);

// Do some configuration
myDragSlider.config.scale.fontColor = 'FF0000';
myDragSlider.config.scale.fontSize = '12';

// Initalize the drag slider
myDragSlider.init();
}
);
};";
]
How do you feel about these brands?
SQ: [
REVERSE = false;
MAX_TEXT = "Positive trend";
MIN_TEXT = "Negative trend";
MIN_VALUE = 1;
MAX_VALUE = 10;
DISCRETE = false;
STEP = 1;
] <img height="62" src="path to image 1" style="border: 0" width="61">
SQ: [
REVERSE = false;
MAX_TEXT = "Positive trend";
MIN_TEXT = "Negative trend";
MIN_VALUE = 1;
MAX_VALUE = 10;
DISCRETE = false;
STEP = 1;
] <img height="62" src="path to image 2" style="border: 0" width="61">
SQ: [
REVERSE = false;
MAX_TEXT = "Positive trend";
MIN_TEXT = "Negative trend";
MIN_VALUE = 1;
MAX_VALUE = 10;
DISCRETE = false;
STEP = 1;
] <img height="62" src="path to image 3" style="border: 0" width="61">
SQ: [
REVERSE = false;
MAX_TEXT = "Positive trend";
MIN_TEXT = "Negative trend";
MIN_VALUE = 1;
MAX_VALUE = 10;
DISCRETE = false;
STEP = 1;
] <img height="62" src="path to image 4" style="border: 0" width="61">
SQ: [
REVERSE = false;
MAX_TEXT = "Positive trend";
MIN_TEXT = "Negative trend";
MIN_VALUE = 1;
MAX_VALUE = 10;
DISCRETE = false;
STEP = 1;
] <img height="62" src="path to image 5" style="border: 0" width="61">
</source>

The image path will look something like the following:

<blockquote>../../Images/GetImage.aspx?rid=8b8121cc-5ae5-4679-857b-12302efe70aa</blockquote>

===Limitations===
In the current implementation it's not possible to use permutations on the sub questions, doing so will lead to bad data, since the chosen values will be coded to sub questions randomly.