Reverse single grid between sub questions and answer options

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:

After reversing, we have a Single Grid like this:

Solution

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

Code

 1 // CODE EXAMPLE: CHANGE COLUMN AND ROW
 2 
 3 quest.onInit = function()
 4 {
 5 // declare variables
 6  var mytable =  $("table[class='grid_inner']");
 7  var numberOfQuestions = this.questions.length;
 8  var numberOfAnswers = quest.questions[1].options.length;
 9 // get max number of Answer Option and Sub Question 
10 var maxValue = numberOfQuestions;
11  if (numberOfAnswers > numberOfQuestions)
12  {
13    maxValue = numberOfAnswers;
14  }
15 // get all radio buttons in the Grid
16  var radioButtonsEven = $("td[class='grid_subquestion_even']");
17  var radioButtonsOdd = $("td[class='grid_subquestion_odd']");
18 
19 // ~~~~~~`swap column to row and inversely~~~~~~
20 // Rearrange radio buttons
21  var myRow = mytable.find("tr:first").next();
22  var evenRunner = 0;
23  var oddRunner = 0;
24 
25  for (var i=0; i<numberOfQuestions; i++) 
26  {
27    myRow = mytable.find("tr:first");
28    for (var j=0; j< numberOfAnswers; j++)
29    {
30       myRow = myRow.next();
31       if (i%2==0)
32       {      
33          if (myRow.length==0){
34             mytable.append($("<tr>").append(radioButtonsEven[evenRunner]));
35          }
36          else
37          {
38             myRow.append(radioButtonsEven[evenRunner]);
39             evenRunner = evenRunner + 1;
40          }
41       }
42       else
43       {     
44          if (myRow.length==0){
45             mytable.append($("<tr>").append(radioButtonsOdd[oddRunner]));
46          }
47          else
48          {
49             myRow.append(radioButtonsOdd[oddRunner]);
50             oddRunner = oddRunner + 1;
51          }
52       }
53    }
54  }
55 
56 // Swap AnswerOption names and Sub Question names
57   for(var i=1; i <= maxValue; i++ )
58   {
59    var aoIndex =i;
60    var sqIndex =i;
61    var aoName = "td[id='grid_answeroption_text_" + aoIndex +"']";
62    var sqName = "td[id='grid_subquestion_text_" + sqIndex +"']";
63    var ao=$(aoName);
64    var sb=$(sqName);
65    var checkLenghtCondition = ((ao.length>0) && (sb.length>0));
66    if (checkLenghtCondition)
67    {
68       sb.parent().prepend(ao);
69       mytable.find("tr:first").append(sb);
70    } 
71    else{
72       // insert new row
73       if ((sb.length==0))
74       {
75          mytable.append($("<tr>").append(ao).remove());
76       }
77       else
78       {
79          mytable.find("tr:first").append(sb);
80       }
81    }
82   }
83 }