Drag drop dartboard question view - Revision history

Wikicatglobe at 02:05, 18 October 2013

2013-10-18T02:05:14Z

← 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]]

Cg_pham at 09:51, 24 October 2011

2011-10-24T09:51:46Z

← Older revision		Revision as of 09:51, 24 October 2011
Line 1:		Line 1:
	<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>		<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
	[[Category:~~Guidelines~~]]		[[Category:Miscellaneous]]

	==Drag drop dartboard question view==		==Drag drop dartboard question view==

Cg_pham at 07:37, 5 October 2011

2011-10-05T07:37:25Z

← Older revision		Revision as of 07:37, 5 October 2011
Line 1:		Line 1:
			<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
			[[Category:Guidelines]]

	==Drag drop dartboard question view==		==Drag drop dartboard question view==
	The Drag drop dartboard question view transforms a scale grid question into a dartboard where sub questions, which must be specified as images, can be dragged into to the dartboard with level specified from min and max value.		The Drag drop dartboard question view transforms a scale grid question into a dartboard where sub questions, which must be specified as images, can be dragged into to the dartboard with level specified from min and max value.

Catglobe: /* Configuration of the question */

2010-05-25T03:50:08Z

Configuration of the question

← Older revision		Revision as of 03:50, 25 May 2010
Line 55:		Line 55:
	Below is shown an example in QSL of a scale grid question configured with the Drag drop dartboard 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 drop dartboard 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', 'Flash GUID' with those GUIDs you found in the previous section, keep the quotes. And change 'D_ImagePositions' to the label name of dummy question you created. 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', 'Flash GUID' with those GUIDs you found in the previous section, keep the quotes. And change 'D_ImagePositions' to the label name of dummy question you created. 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, dartboard ring color,...).

	<source lang="javascript">		<source lang="javascript">
Line 76:		Line 76:
	// Enter the GUID for the Flash attachment		// Enter the GUID for the Flash attachment
	var flashGuid = '216db971-5f3a-4179-9999-bd4831e160a4';		var flashGuid = '216db971-5f3a-4179-9999-bd4831e160a4';

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

			// Insert the flash
			quest.text += '<p><object width="' + flashWidth + '" height="' + flashHeight + '" id="dragDropDartboardFlash"
			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="dragDropDartboardFlash"
			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 86:		Line 100:
	{		{
	// Create an instance of the drag drop dartboard		// Create an instance of the drag drop dartboard
	var myDragDropDartboard =		var myDragDropDartboard = new DragDropDartboard(quest, 'D_ImagePositions', [{{D_ImagePositions}}]);
	new DragDropDartboard(quest~~, flashGuid~~, 'D_ImagePositions', [{{D_ImagePositions}}]~~, 500, 400~~);


	// Do some configuration		// Do some configuration by enter value you want
	myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;
	myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;
Line 163:		Line 176:
	// Enter the GUID for the Flash attachment		// Enter the GUID for the Flash attachment
	var flashGuid = '216db971-5f3a-4179-9999-bd4831e160a4';		var flashGuid = '216db971-5f3a-4179-9999-bd4831e160a4';

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

			// Insert the flash
			quest.text += '<p><object width="' + flashWidth + '" height="' + flashHeight + '" id="dragDropDartboardFlash"
			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="dragDropDartboardFlash"
			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 173:		Line 200:
	{		{
	// Create an instance of the drag drop dartboard		// Create an instance of the drag drop dartboard
	var myDragDropDartboard =		var myDragDropDartboard = new DragDropDartboard(quest, 'D_ImagePositions', [{{D_ImagePositions}}]);
	new DragDropDartboard(quest~~, flashGuid~~, 'D_ImagePositions', [{{D_ImagePositions}}]~~, 500, 400~~);

	// Do some configuration		// Do some configuration by enter value you want
	myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;
	myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;

Catglobe: /* Configuration of the question */

2010-05-20T10:20:49Z

Configuration of the question

← Older revision		Revision as of 10:20, 20 May 2010
Line 178:		Line 178:
	// Do some configuration		// Do some configuration
	myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;
	myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;		myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;
	myDragDropDartboard.config.imageThumbnailConfiguration.imageSpace = 10;		myDragDropDartboard.config.imageThumbnailConfiguration.imageSpace = 10;

	myDragDropDartboard.config.dartboard.fontColor = '000000';		myDragDropDartboard.config.dartboard.fontColor = '000000';

Catglobe: /* Configuration of the question */

2010-05-20T10:20:26Z

Configuration of the question

← Older revision		Revision as of 10:20, 20 May 2010
Line 89:		Line 89:
	new DragDropDartboard(quest, flashGuid, 'D_ImagePositions', [{{D_ImagePositions}}], 500, 400);		new DragDropDartboard(quest, flashGuid, 'D_ImagePositions', [{{D_ImagePositions}}], 500, 400);


	// Do some configuration		// Do some configuration
	myDragDropDartboard.config.dartboard.fontColor = '000000';		myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;
	myDragDropDartboard.config.dartboard.fontSize = '15';		myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;
	myDragDropDartboard.config.dartboard.fontText = 'Arial';		myDragDropDartboard.config.imageThumbnailConfiguration.imageSpace = 10;
	myDragDropDartboard.config.dartboard.oddColor = '865000';
	myDragDropDartboard.config.dartboard.evenColor = 'FFAA00';		myDragDropDartboard.config.dartboard.fontColor = '000000';
	myDragDropDartboard.config.dartboard.borderColor = '000000';		myDragDropDartboard.config.dartboard.fontSize = '15';
			myDragDropDartboard.config.dartboard.fontText = 'Arial';
			myDragDropDartboard.config.dartboard.oddColor = '865000';
			myDragDropDartboard.config.dartboard.evenColor = 'FFAA00';
			myDragDropDartboard.config.dartboard.borderColor = '000000';

	// Initalize the drag drop dartboard		// Initalize the drag drop dartboard
Line 172:		Line 177:

	// Do some configuration		// Do some configuration
	myDragDropDartboard.config.dartboard.fontColor = '000000';		myDragDropDartboard.config.imageThumbnailConfiguration.imageHeight = 60;
	myDragDropDartboard.config.dartboard.fontSize = '15';		myDragDropDartboard.config.imageThumbnailConfiguration.imageWidth = 60;
	myDragDropDartboard.config.dartboard.fontText = 'Arial';		myDragDropDartboard.config.imageThumbnailConfiguration.imageSpace = 10;
	myDragDropDartboard.config.dartboard.oddColor = '865000';
	myDragDropDartboard.config.dartboard.evenColor = 'FFAA00';		myDragDropDartboard.config.dartboard.fontColor = '000000';
	myDragDropDartboard.config.dartboard.borderColor = '000000';		myDragDropDartboard.config.dartboard.fontSize = '15';
			myDragDropDartboard.config.dartboard.fontText = 'Arial';
			myDragDropDartboard.config.dartboard.oddColor = '865000';
			myDragDropDartboard.config.dartboard.evenColor = 'FFAA00';
			myDragDropDartboard.config.dartboard.borderColor = '000000';

	// Initalize the drag drop dartboard		// Initalize the drag drop dartboard

Catglobe: /* Configuration of the question */

2010-05-18T10:04:27Z

Configuration of the question

← Older revision		Revision as of 10:04, 18 May 2010
Line 51:		Line 51:
	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.		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.

	Beside that, we need one more dummy question to store the position of images inside dartboard.		Beside that, we need one more dummy question with Open type to store the position of images inside dartboard.

	Below is shown an example in QSL of a scale grid question configured with the Drag drop dartboard 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 drop dartboard question view, it's ready to be imported to your questionnaire and modified to fit your needs.

Catglobe at 09:39, 18 May 2010

2010-05-18T09:39:18Z

← Older revision		Revision as of 09:39, 18 May 2010
Line 28:		Line 28:
	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)		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">65b8671f-6e47-4ec5-9a7b-205c71908fb0</span><img src=http://mycatinet.catglobe.com/Images/Attachment/notype.gif></img> Common resources\Question Views\~~Drag Drop Pictures~~ 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 ~~DragDropPictures~~''		Example: ''369734,<span style="color: #ff0000">65b8671f-6e47-4ec5-9a7b-205c71908fb0</span><img src=http://mycatinet.catglobe.com/Images/Attachment/notype.gif></img> Common resources\Question Views\DragDropDartboard 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 DragDropDartboard''

	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>DragDropDartboard.js: 65b8671f-6e47-4ec5-9a7b-205c71908fb0<br>DragDropDartboard.swf: 216db971-5f3a-4179-9999-bd4831e160a4		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>DragDropDartboard.js: 65b8671f-6e47-4ec5-9a7b-205c71908fb0<br>DragDropDartboard.swf: 216db971-5f3a-4179-9999-bd4831e160a4

Catglobe: /* Setting up the resources */

2010-05-18T09:34:59Z

Setting up the resources

← Older revision		Revision as of 09:34, 18 May 2010
Line 13:		Line 13:

	1. Go to 'folders'		1. Go to 'folders'

	2. Create a folder called 'Common resources' below 'SYSTEM' if it doesn't exist already, leave inheritance on		2. Create a folder called 'Common resources' below 'SYSTEM' if it doesn't exist already, leave inheritance on

	3. Create a folder called 'Question views' below the folder 'Common resources' if it doesn't exist already, leave inheritance on, leave inheritance on		3. Create a folder called 'Question views' below the folder 'Common resources' if it doesn't exist already, leave inheritance on, leave inheritance on

	4. Create a folder called 'Dragdrop dartboard' below the folder 'Question views' if it doesn't exist already, leave inheritance on		4. Create a folder called 'Dragdrop dartboard' below the folder 'Question views' if it doesn't exist already, leave inheritance on

	5. Open the attachment tab of the 'Dragdrop dartboard' folder and upload the two files DragDropDartboard.js and DragDropDartboard.swf, make sure to keep the names including the file extension, it will make it easier to recognize the files in the next step		5. Open the attachment tab of the 'Dragdrop dartboard' folder and upload the two files DragDropDartboard.js and DragDropDartboard.swf, make sure to keep the names including the file extension, it will make it easier to recognize the files in the next step
	6. Go to 'tools > Projects and folders > Attachments' using Internet Explorer
	7. Search by name for 'DragDropDartboard' anywhere in name, given that you named the attachments according to the suggested naming in the step above		6. Go to 'tools > Projects and folders > Attachments' using Internet Explorer

			7. Search by name for 'DragDropDartboard' anywhere in name, given that you named the attachments according to the suggested naming in the step above

	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)		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)
Line 25:		Line 31:

	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>DragDropDartboard.js: 65b8671f-6e47-4ec5-9a7b-205c71908fb0<br>DragDropDartboard.swf: 216db971-5f3a-4179-9999-bd4831e160a4		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>DragDropDartboard.js: 65b8671f-6e47-4ec5-9a7b-205c71908fb0<br>DragDropDartboard.swf: 216db971-5f3a-4179-9999-bd4831e160a4

	10. Create a group called 'Drag drop dartboard access' under the folder 'Drag drop dartboard'		10. Create a group called 'Drag drop dartboard access' under the folder 'Drag drop dartboard'

	11. Give the group 'Drag drop dartboard access' observer access to the folder 'Drag drop dartboard'		11. Give the group 'Drag drop dartboard access' observer access to the folder 'Drag drop dartboard'

	12. Add the user with username 'anonymous' to the group 'Drag drop dartboard access', this is necessary for test links and anonymous access to work		12. Add the user with username 'anonymous' to the group 'Drag drop dartboard access', this is necessary for test links and anonymous access to work
	13. All respondents participating in questionnaires using the DragDropDartboard must be added to the group 'Drag drop dartboard access' else they will not be able to see the Drag drop dartboard when answering the questionnaire
			13. All respondents participating in questionnaires using the DragDropDartboard must be added to the group 'Drag drop dartboard access' else they will not be able to see the Drag drop dartboard when answering the questionnaire

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

Catglobe at 09:34, 18 May 2010

2010-05-18T09:34:08Z

@@ Line 2: / Line 2: @@
 The Drag drop dartboard question view transforms a scale grid question into a dartboard where sub questions, which must be specified as images, can be dragged into to the dartboard with level specified from min and max value.
-===Setting up the resources===
+=== Setting up the resources  ===
-The following step-by-step guide describes a best practice for placing question views, it will walk you through setting up the Drag drop dartboard on your Catglobe site.
+The Drag drop dartboard 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 drop dartboard 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.
-Respondents can be added to the 'Drag drop dartboard access' group dynamically through a dummy question in the beginning of the questionnaire to avoid adding respondents unecessarily to the group.
+. Go to 'folders'
 We have the necessary resources setup, and the GUIDs we need to configure the question script in the next section.