Align min/max texts in scale grid questions - Revision history

Cg van at 07:27, 3 February 2012

2012-02-03T07:27:38Z

← Older revision		Revision as of 07:27, 3 February 2012
Line 1:		Line 1:
	==Challenge==		==Challenge==
	In order to make scale grid questions look nicer~~<br/>~~		In order to make scale grid questions look nicer
	As a questionnaire creator~~<br/>~~
	I want to align min/max texts for all sub questions~~<br/>~~		As a questionnaire creator
	~~<b>~~Example~~</b><br/>~~
			I want to align min/max texts for all sub questions

			'''Example'''

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

	AFTER<br/>		AFTER<br/>
	[[Image:~~SG1~~.~~png~~]]<br/>		[[Image:AlignMinMaxTextsInScaleGrid2.jpg]]<br/>
	==Solution==		==Solution==
	~~Make the text cells have the same width~~		*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==		==Code==
			===Case 1===
	<source lang=javascript>		<source lang=javascript>
	quest.onInit = function()		quest.onInit = function()
Line 22:		Line 28:
	</source>		</source>

	==~~Second Solution~~==		===Case 2===
	If the question doesn't contain subquestion text and the text cells have the same width		If the question doesn't contain subquestion text and the text cells have the same width
	~~==Code==~~
	<source lang=javascript>		<source lang=javascript>
	quest.onInit = function()		quest.onInit = function()
Line 33:		Line 39:
	};		};
	</source>		</source>

			==Source==

			Questionnaire Resource Id on cg site: 159730

2010-06-29T09:41:39Z

Code

← Older revision		Revision as of 09:41, 29 June 2010
Line 28:		Line 28:
	quest.onInit = function()		quest.onInit = function()
	{		{
	$(".grid_outer table").css({'width' : '~~100~~%'});		$(".grid_outer table").css({'width' : '80%'});
	$(".grid_inner td table").css("width",~~"100~~%");		$(".grid_inner td table").css('width','80%');
	$(".grid_inner td table").~~each~~(~~function()~~		$(".grid_inner td table").find("td").width("200px");
	{
	~~$('~~td~~:eq(0)', this~~).~~css({'~~width~~' : '300px', 'text-align' : 'right'});~~
	$(~~'td:eq(3)', this).css({'width' : '280px', 'text-align' : 'left'});~~
	});
	};		};
	</source>		</source>

2010-06-29T08:16:34Z

@@ Line 20: / Line 20: @@
 	$("td:contains('Longer')").width("200px");
+}
 </source>

2009-03-09T07:32:58Z

Code