Difference between revisions of "Add an extra row before a sub question in a grid"

From Catglobe Wiki
Jump to: navigation, search
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Challenge ==
+
== Add an extra row before a sub question in a grid ==
  
 
In order to categorize sub questions in a grid question
 
In order to categorize sub questions in a grid question
Line 7: Line 7:
 
I want to add extra rows to the grid
 
I want to add extra rows to the grid
  
'''Example'''
+
==== Example ====
  
 
I have a single grid question.
 
I have a single grid question.
  
[[Image: QuestionTips_SingleGrid_1.jpg]]
+
[[File:AddExtraRow1.jpg]]
  
 
I want to have an extra row to group some sub questions together.
 
I want to have an extra row to group some sub questions together.
  
[[Image: QuestionTips_SingleGrid_4.jpg]]
+
[[File:AddExtraRow2.jpg]]
  
== Solution ==
+
==== Solution ====
  
Find the row in the grid, add a new row before it.
+
*Add a Single grid question to Questionnaire editor
 +
*Go to menu Properties -> Question scripts -> Add code to Java script tab
  
== Code  ==
 
  
<source lang="javascript" line="1">
+
 
 +
[[File:AddExtraRowCode.jpg]]
 +
 
 +
==== Code ====
 +
 
 +
<source lang="javascript">
 
//add a row before a sub question in the grid
 
//add a row before a sub question in the grid
 
//subQuestionIndex: the index of sub question which we should add a row before
 
//subQuestionIndex: the index of sub question which we should add a row before
Line 30: Line 35:
 
//includeAnswerOptionTexts: if it is true, answer option texts will be included in the new row
 
//includeAnswerOptionTexts: if it is true, answer option texts will be included in the new row
 
quest.addRowBefore = function(subQuestionIndex, cssClass, text, includeAnswerOptionTexts)
 
quest.addRowBefore = function(subQuestionIndex, cssClass, text, includeAnswerOptionTexts)
{
+
{  
  //get number of columns
+
  //get number of columns  
  var n = $(".grid_inner")[0].rows[0].cells.length;
+
  var n = $(".grid_inner")[0].rows[0].cells.length;  
  $(".grid_inner").find("tr").each(
+
  $(".grid_inner").find("tr").each(  
  function(i)
+
  function(i)  
  {
+
  {  
  if (i == subQuestionIndex + 1)
+
  if (i == subQuestionIndex + 1)  
  {
+
  {  
  if (!includeAnswerOptionTexts)
+
  if (!includeAnswerOptionTexts)  
  {
+
  {  
  $(this).before(
+
  $(this).before( $("<tr>")
$("<tr>").append($("<td colspan="+n+">").text(text).addClass(cssClass))
+
.append($("<td colspan="+n+">").text(text).addClass(cssClass))
  );
+
  );  
  }
+
  }  
  else
+
  else  
  {
+
  {  
  var tr = $("<tr>").append($("<td>").text(text).addClass(cssClass));
+
  var tr = $("<tr>").append($("<td>").text(text).addClass(cssClass));  
  for (var j=0; j<quest.questions[0].options.length; j++)
+
  for (var j=0; j<quest.questions[0].options.length; j++)  
  {
+
  {  
  tr.append($("<td>").text(quest.questions[0].options[j].text).addClass(cssClass));
+
  tr.append($("<td>").text(quest.questions[0].options[j].text).addClass(cssClass));  
  }
+
  }  
  $(this).before(tr);
+
  $(this).before(tr);  
  }
+
  }  
  }
+
  }  
  }
+
  }  
 
  )
 
  )
 
}
 
}
 +
 
quest.onInit = function()
 
quest.onInit = function()
{
+
{  
  //insert a cell before Don't know on header
+
  //insert a cell before Don't know on header  
  var dontKnow_value = 3;
+
  var dontKnow_value = 3;  
+
  this.addRowBefore(2, "extra_row_header", "Alcohol drinks", true);
  this.addRowBefore(1, "extra_row_header", "My sub question group", true);
 
 
}
 
}
 
</source>
 
</source>
 +
 +
==== Source ====
 +
 +
Questionnaire Resource Id on cg site: 159730

Latest revision as of 05:13, 17 October 2013

Add an extra row before a sub question in a grid

In order to categorize sub questions in a grid question

As a questionnaire creator

I want to add extra rows to the grid

Example

I have a single grid question.

AddExtraRow1.jpg

I want to have an extra row to group some sub questions together.

AddExtraRow2.jpg

Solution

  • Add a Single grid question to Questionnaire editor
  • Go to menu Properties -> Question scripts -> Add code to Java script tab


AddExtraRowCode.jpg

Code

//add a row before a sub question in the grid
//subQuestionIndex: the index of sub question which we should add a row before
//cssClass: the stylesheet that would be applied to the new row
//text: name of the sub question group
//includeAnswerOptionTexts: if it is true, answer option texts will be included in the new row
quest.addRowBefore = function(subQuestionIndex, cssClass, text, includeAnswerOptionTexts)
{ 
 //get number of columns 
 var n = $(".grid_inner")[0].rows[0].cells.length; 
 $(".grid_inner").find("tr").each( 
 function(i) 
 { 
 if (i == subQuestionIndex + 1) 
 { 
 if (!includeAnswerOptionTexts) 
 { 
 $(this).before( $("<tr>")
 .append($("<td colspan="+n+">").text(text).addClass(cssClass))
 ); 
 } 
 else 
 { 
 var tr = $("<tr>").append($("<td>").text(text).addClass(cssClass)); 
 for (var j=0; j<quest.questions[0].options.length; j++) 
 { 
 tr.append($("<td>").text(quest.questions[0].options[j].text).addClass(cssClass)); 
 } 
 $(this).before(tr); 
 } 
 } 
 } 
 )
}

quest.onInit = function()
{ 
 //insert a cell before Don't know on header 
 var dontKnow_value = 3; 
 this.addRowBefore(2, "extra_row_header", "Alcohol drinks", true);
}

Source

Questionnaire Resource Id on cg site: 159730