Difference between revisions of "Reverse single grid between sub questions and answer options"

From Catglobe Wiki
Jump to: navigation, search
Line 22: Line 22:
  
 
<source lang="javascript" line="1">
 
<source lang="javascript" line="1">
// CODE EXAMPLE: CHANGE COLUMN AND ROW
+
var normaloptClick = optclick;
 +
this.optclick = function(slbl, lidx, blnk)
 +
{
 +
  return normaloptClick(slbl, lidx, blnk);
 +
}
  
 
quest.onInit = function()
 
quest.onInit = function()
 
{
 
{
// declare variables
+
var i,j;
 +
// declare variables
 
  var mytable =  $("table[class='grid_inner']");
 
  var mytable =  $("table[class='grid_inner']");
 
  var numberOfQuestions = this.questions.length;
 
  var numberOfQuestions = this.questions.length;
 
  var numberOfAnswers = quest.questions[1].options.length;
 
  var numberOfAnswers = quest.questions[1].options.length;
// get max number of Answer Option and Sub Question
 
var maxValue = numberOfQuestions;
 
if (numberOfAnswers > numberOfQuestions)
 
{
 
  maxValue = numberOfAnswers;
 
}
 
 
// get all radio buttons in the Grid
 
// get all radio buttons in the Grid
 
  var radioButtonsEven = $("td[class='grid_subquestion_even']");
 
  var radioButtonsEven = $("td[class='grid_subquestion_even']");
 
  var radioButtonsOdd = $("td[class='grid_subquestion_odd']");
 
  var radioButtonsOdd = $("td[class='grid_subquestion_odd']");
 
+
// ~~~~~~`swap column to row and inversely~~~~~~
+
// swap radio buttons
// Rearrange radio buttons
+
  var newTable = $("<table>");
var myRow = mytable.find("tr:first").next();
+
   var ao;
var evenRunner = 0;
+
   var sq;  
var oddRunner = 0;
+
   var aoName;  
 
+
   var sqName;  
// Swap AnswerOption names and Sub Question names
+
   var firstRow = $("<tr>");
  for(var i=1; i <= maxValue; i++ )
+
   var posAo;
  {
+
   var posSq;
   var aoIndex =i;
+
  firstRow.append($(".grid_empty_cell"));
   var sqIndex =i;
+
   for(i=0;i<numberOfQuestions;i++)
   var aoName = "td[id='grid_answeroption_text_" + aoIndex +"']";
 
   var sqName = "td[id='grid_subquestion_text_" + sqIndex +"']";
 
   var ao=$(aoName);
 
   var sb=$(sqName);
 
   var checkLenghtCondition = ((ao.length>0) && (sb.length>0));
 
   if (checkLenghtCondition)
 
 
   {
 
   {
       sb.parent().prepend(ao);
+
       posAo = i + 1;
       mytable.find("tr:first").append(sb);
+
       sqName = "td[id='grid_subquestion_text_" + posAo +"']";
  }
+
       sq =$(sqName);
  else{
+
       firstRow.append(sq);
      // insert new row
 
       if ((sb.length==0))
 
      {
 
        mytable.append($("<tr>").append(ao).remove());
 
       }
 
      else
 
      {
 
        mytable.find("tr:first").append(sb);
 
      }
 
 
   }
 
   }
  }
+
  newTable.append(firstRow);
// swap radio buttons
+
     
for (var i=0; i<numberOfQuestions; i++)
+
   var newTr;
{
+
   for(i=0;i<numberOfAnswers;i++)
   myRow = mytable.find("tr:first");
 
   for (var j=0; j< numberOfAnswers; j++)
 
 
   {
 
   {
       myRow = myRow.next();
+
        
       if (i%2==0)
+
      posSq = i + 1;
       {     
+
       aoName = "td[id='grid_answeroption_text_" + posSq +"']";
        if (myRow.length==0){
+
       ao =$(aoName);
            mytable.append($("<tr>").append(radioButtonsEven[evenRunner]));
+
      newTr = $('<tr>');
        }
+
      newTr.append(ao);
         else
+
      for(j=0;j<numberOfQuestions;j++)
 +
      {
 +
         if (j%2==0)
 
         {
 
         {
             myRow.append(radioButtonsEven[evenRunner]);
+
             newTr.append(radioButtonsEven[Math.round(j/2)*numberOfAnswers+i]);
            evenRunner = evenRunner + 1;
 
        }
 
      }
 
      else
 
      {   
 
        if (myRow.length==0){
 
            mytable.append($("<tr>").append(radioButtonsOdd[oddRunner]));
 
 
         }
 
         }
 
         else
 
         else
        {
+
             newTr.append(radioButtonsOdd[(Math.round(j/2)-1)*numberOfAnswers+i]);
             myRow.append(radioButtonsOdd[oddRunner]);
 
            oddRunner = oddRunner + 1;
 
        }
 
 
       }
 
       }
 +
      newTable.append(newTr);
 +
     
 
   }
 
   }
  }
+
  newTable.append($("input[value='']"));
 
+
  mytable.empty();
 +
  mytable.append(newTable.children()[0]);     
 +
   
  
 
}
 
}
 
</source>
 
</source>

Revision as of 10:50, 2 February 2010

Challenge

Client would like to show Sub-Questions and Answer Options inversly on Single-Grid. Therefore, we have to reverse the columns and rows on Single-grid. By the way, we have to change the radio buttons accordingly.

Example

We have the original Single Grid like this:

Original SingleGrid 1.jpg

After reversing, we have a Single Grid like this:

After SingleGrid 4.jpg

Solution

1. Reverse Sub-Questions' names and Answer Options' names. 2. Rearrange the radio buttons accordingly.

Code

 1 var normaloptClick = optclick;
 2 this.optclick = function(slbl, lidx, blnk)
 3 {
 4    return normaloptClick(slbl, lidx, blnk);
 5 }
 6 
 7 quest.onInit = function()
 8 {
 9  var i,j; 
10  // declare variables
11  var mytable =  $("table[class='grid_inner']");
12  var numberOfQuestions = this.questions.length;
13  var numberOfAnswers = quest.questions[1].options.length;
14 // get all radio buttons in the Grid
15  var radioButtonsEven = $("td[class='grid_subquestion_even']");
16  var radioButtonsOdd = $("td[class='grid_subquestion_odd']");
17  
18 // swap radio buttons
19    var newTable = $("<table>");
20    var ao;
21    var sq; 
22    var aoName; 
23    var sqName;    
24    var firstRow = $("<tr>");
25    var posAo;
26    var posSq;
27    firstRow.append($(".grid_empty_cell"));
28    for(i=0;i<numberOfQuestions;i++)
29    {
30       posAo = i + 1;
31       sqName = "td[id='grid_subquestion_text_" + posAo +"']";
32       sq =$(sqName);
33       firstRow.append(sq);
34    }
35    newTable.append(firstRow);
36       
37    var newTr;
38    for(i=0;i<numberOfAnswers;i++)
39    {
40       
41       posSq = i + 1;
42       aoName = "td[id='grid_answeroption_text_" + posSq +"']";
43       ao =$(aoName);
44       newTr = $('<tr>');
45       newTr.append(ao);
46       for(j=0;j<numberOfQuestions;j++)
47       {
48          if (j%2==0)
49          {
50             newTr.append(radioButtonsEven[Math.round(j/2)*numberOfAnswers+i]);
51          }
52          else
53             newTr.append(radioButtonsOdd[(Math.round(j/2)-1)*numberOfAnswers+i]);
54       }
55       newTable.append(newTr);
56       
57    }
58    newTable.append($("input[value='']"));
59    mytable.empty();
60    mytable.append(newTable.children()[0]);      
61  
62 
63 }