Align min/max texts in scale grid questions: Difference between revisions

← Older edit

VisualWikitext

Latest revision as of 07:27, 3 February 2012

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

AFTER

Solution

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

Code

Case 1

quest.onInit = function()
{
	$("td:contains('Min')").width("200px");
	$("td:contains('Max')").width("200px");
	$("td:contains('Longer')").width("200px");
}

Case 2

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

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

Questionnaire Resource Id on cg site: 159730

@@ Line 1: / Line 1: @@
 ==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/>
-[[Image:sg2.png]]<br/>
+[[Image:AlignMinMaxTextsInScaleGrid1.jpg]]<br/>
 AFTER<br/>
-[[Image:SG1.png]]<br/>
+[[Image:AlignMinMaxTextsInScaleGrid2.jpg]]<br/>
 ==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==
+===Case 1===
 <source lang=javascript>
 quest.onInit = function()
@@ Line 22: / Line 28: @@
 </source>
-==Second Solution==
+===Case 2===
 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_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==
+Questionnaire Resource Id on cg site: 159730