Difference between revisions of "Showing Answer Option in tab"

From Catglobe Wiki
Jump to: navigation, search
(New page: == Challenge == You want to control when the next button should be available for the respondent . Image:Fetch)UID).INBOX.related_to_Questionnaire)2014.PNG == Solution == Using Java ...)
 
 
(32 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
== Challenge ==  
+
== Showing answer option in tab ==
−
You want to control when the next button should be available for the respondent .
 
−
[[Image:Fetch)UID).INBOX.related_to_Questionnaire)2014.PNG]]
 
−
== Solution ==
 
−
Using Java Script property of question
 
−
== Code ==
 
−
<source lang="javascript">
 
−
var columnPerRow = 3;
 
  
−
quest.getHTML = function()
+
We have a single question which has a lot of answer options. We want to show answer options in Alphabetical tab
  
−
{
+
[[File:Tab20120116.png]]
  
−
  if(this.type != 1 && this.type!=2)
+
== Solution ==
  
−
      return;
+
Using Java Script property of question.
  
−
 
+
There are 2 type of alphabetical tabs.
  
−
  //This code used to set data to question.options
+
#'''No tab is selected as default'''
 +
#'''An extra tab showing all answer options which is selected as default'''
  
−
  ans = this.answer.split("_|_");
+
== Code 1: No tab is selected by default ==
  
−
  for(i = 0; i < ans.length; i++)
+
<source lang="javascript">
  
−
  {
+
/// Maximum number of column in tab.
 +
var columnPerRow = 3;
  
−
      ans[i] = ans[i].split("_:_");
 
  
−
  }
+
//answer option list to display outside of the tabs
 +
var excludeAOs = [998,999];
  
−
   
+
Array.prototype.contains = function(item)
 +
{
 +
  var i;
 +
for(i=0; i<this.length; i++)
 +
{
 +
if (this[i] == item)
 +
return true;
 +
}
 +
return false;
 +
}
  
−
  for(i = 0; i < ans[0].length; i++)
+
//Overrider Array to find an item easier
 +
Array.prototype.indexOf = function(character)
 +
{
 +
for (var i = 0; i < this.length; i++)
 +
if (this[i] == character)
 +
return i;
 +
return -1;
 +
}
  
−
  {
+
quest.getHTML = function()
 +
{
 +
if (this.type != 1 && this.type != 2)
 +
return;
  
−
      if(ans[0][i].length > 0)
+
//This code used to set data to question.options
 +
ans = this.answer.split("_|_");
 +
for (i = 0; i < ans.length; i++)
 +
{
 +
ans[i] = ans[i].split("_:_");
 +
}
  
−
      {
+
for (i = 0; i < ans[0].length; i++)
 +
{
 +
if (ans[0][i].length > 0)
 +
{
 +
for (j = 0; j < this.options.length; j++)
 +
{
 +
if (this.options[j].value == ans[0][i])
 +
{
 +
this.options[j].checked = true;
 +
if (ans.length > 1 && typeof this.options[j].open != "undefined" && typeof ans[1][i] != "undefined")
 +
this.options[j].open = ans[1][i];
 +
}
 +
}
 +
}
 +
}
  
−
        for(j = 0; j < this.options.length; j++)
+
var optionType = this.type == 1 ? 1 : 3;
  
−
        {
+
var sres = "";
 +
sres += "<table border=" + this.bordersize + " class=\"question_outer\" cellpadding=\"0\" cellspacing=\"0\">";
 +
if (this.countdown > 0 && this.showcountdowndisplay)
 +
{
 +
sres += "<tr><td><div id=\"countdowndisplay\"></div></td></tr>";
 +
}
 +
sres += "<tr><td id=\"question_text\">" + this.text + "</td></tr>";
 +
sres += "<tr><td align=\"center\">";
  
−
            if(this.options[j].value == ans[0][i])
+
//Generate list of tabs
 +
var tabList = new Array();
 +
tabList.push(" #");
 +
for (var i = 0; i < this.options.length; i++) {
 +
if (tabList.indexOf(this.options[i].text.trim().substr(0, 1).toUpperCase()) == -1)
 +
tabList.push(this.options[i].text.trim().substr(0, 1).toUpperCase());
 +
}
  
−
            {
+
//Sort Alphabetical
 +
tabList.sort();
  
−
              this.options[j].checked = true;
+
sres += "<div id='example_tab' class='ui-tabs ui-widget ui-widget-content ui-corner-all'>";
 +
//Generate tab header UI
 +
sres += "<ul class='ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'>";
 +
for (var i = 0; i < tabList.length; i++) {
 +
var tabHeaderContent = document.createElement("li");
 +
sres += "<li class='ui-state-default ui-corner-top'>";
 +
sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
 +
}
 +
sres += "</ul>";
  
−
   
+
  sres += "<div id='tab_" + 0 + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'></div>";
  
−
              if(ans.length > 1 && typeof this.options[j].open != "undefined" && typeof ans[1][i] != "undefined")
+
var answerOptionNotToIncluded = new Array();
  
−
              {
+
for (var i = 1; i < tabList.length; i++) {
 +
var tabContent = "";
 +
tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'>";
  
−
                  this.options[j].open = ans[1][i];
+
//generate content for tab
 +
tabContent += "<table><tbody><tr>";
 +
var indexOfItemInTab = 1;
 +
var currentRow = 1;
 +
for (var j = 0; j < this.options.length; j++) {
 +
if (this.options[j].text.trim().substr(0, 1).toUpperCase() != tabList[i])
 +
continue;
  
−
              }
+
if (excludeAOs.contains(this.options[j].value)) {
 +
answerOptionNotToIncluded.push(this.options[j]);
 +
continue;
 +
}
  
−
            }
+
tabContent += this.options[j].getHTML(optionType);
 +
indexOfItemInTab++;
 +
if (indexOfItemInTab > columnPerRow * currentRow) {
 +
tabContent += "</tr><tr>";
 +
currentRow++;
 +
}
 +
}
  
−
        }
+
if (this.options.lenght == 0)
 +
tabContent = "<td>&nbsp;</td>";
 +
tabContent += "</tr></tbody></table></div>";
  
−
      }
+
if ($(tabContent).find("input").length <= 0)
 +
__emptyTabSearchString = "a[href*='tab_" + i + "']";
 +
else
 +
sres += tabContent;
 +
}
 +
if (answerOptionNotToIncluded.length > 0)
 +
{
 +
sres += "</div></td></tr><tr><td><table id='extra_options'>";
 +
for(var i=0; i<answerOptionNotToIncluded.length; i++)
 +
{
 +
sres += "<tr>" + answerOptionNotToIncluded[i].getHTML(optionType) + "</tr>";
 +
}
 +
sres += "</table></td></tr></table>";
 +
}
 +
else
 +
sres += "</div></td></tr></table>";
  
−
  }
+
return sres;
 +
};
  
−
  var optionType = this.type == 1 ? 1 : 3;
+
var normaloptClick = optclick;
−
 
+
this.optclick = function(slbl, lidx, blnk)
−
 
+
{
 +
var currentAOValue = quest.options[lidx].value;
 +
var inputType = quest.type == 1 ? "radio" : "checkbox";
  
 +
var openInput, currentAOInput;
 
   
 
   
−
 
+
currentAOInput = $("input[type='" + inputType + "'][value='" + currentAOValue + "']")[0];
−
  var sres = "";
 
−
 
 
−
      sres += "<div id='question_text'>"+this.text+"</div>";
 
−
 
 
 
   
 
   
  
−
  //Overrider Array to find an item easier
+
if (excludeAOs.contains(currentAOValue))
 +
return normaloptClick(slbl, lidx, blnk);
  
−
  Array.prototype.indexOf = function(character)
+
//If user click on the link instead of the radiobutton/checkbox then check/uncheck the radio/checkbox
 +
if (blnk && currentAOInput.type == "checkbox")
 +
currentAOInput.checked = !currentAOInput.checked;
 +
else if (blnk)
 +
currentAOInput.checked = true;
  
−
  {
+
openInput = document["query"][slbl + ".Open." + currentAOValue];
 +
if ((typeof openInput) != "undefined")
 +
{
 +
if (currentAOInput.checked)
 +
{
 +
openInput.disabled = false;
 +
openInput.focus();
 +
}
 +
else
 +
{
 +
openInput.value = "";
 +
openInput.disabled = true;
 +
}
 +
}
 +
var o;
 +
for(var i=0; i<quest.options.length; i++)
 +
{
 +
o = quest.options[i];
 +
if (o.single && currentAOValue != o.value)
 +
{
 +
$("input[type='" + inputType + "'][value='" + o.value + "']").attr("checked", false);
 +
}
 +
}
 +
}
  
−
      for(var i=0; i< this.length; i++)
+
quest.onInit = function()
−
 
+
{
−
        if(this[i] == character)
+
if (typeof(__emptyTabSearchString) != "undefined")
−
 
+
$(__emptyTabSearchString).parent().remove();
−
            return i;
 
−
 
 
−
      return -1;
 
−
 
 
−
  }
 
−
 
 
−
    //Generate list of tabs
 
−
 
 
−
  var tabList = new Array();
 
−
 
 
−
  for(var i=0; i<this.options.length; i++)
 
−
 
 
−
  {
 
−
 
 
−
      if(tabList.indexOf(this.options[i].text.trim().substr(0,1)) == -1)
 
−
 
 
−
        tabList.push(this.options[i].text.trim().substr(0,1));
 
−
 
 
−
  }
 
−
 
 
−
  //Sort Alphabetical
 
−
 
 
−
  tabList.sort();
 
  
 +
$("#example_tab").tabs();
 +
$("a[href='#tab_0']").parent().css("display", "none");
 
   
 
   
 +
// set Next invisible onload
 +
//setVisibility(false);
 +
$("#extra_options").hide();
 +
};
 +
</source>
  
−
  sres += "<div id='examle_tab'>";
+
== Code 2: Extra tab showing all answer options ==
  
−
  sres += "<ul class='ui-tabs-nav'>";
+
<source lang="javascript">
  
−
+
/// Maximum number of column in tab.
 +
var columnPerRow = 3;
  
−
  //Generate tab header UI
 
  
−
  for(var i = 0; i < tabList.length; i++)
+
//answer option list to display outside of the tabs
 +
var excludeAOs = [998,999];
  
−
  {
+
Array.prototype.contains = function(item)
 +
{
 +
var i;
 +
for(i=0; i<this.length; i++)
 +
{
 +
if (this[i] == item)
 +
return true;
 +
}
 +
return false;
 +
}
  
−
      var tabHeaderContent = document.createElement("li");
+
//Overrider Array to find an item easier
 +
Array.prototype.indexOf = function(character)
 +
{
 +
for (var i = 0; i < this.length; i++)
 +
if (this[i] == character)
 +
return i;
 +
return -1;
 +
}
  
−
      sres += "<li class='ui-tabs-selected'>";
+
quest.getHTML = function()
 +
{
 +
if (this.type != 1 && this.type != 2)
 +
return;
  
−
      sres += "<a href='#tab_" + tabList[i] +"'><span>" + tabList[i] +"</span></a></li>";
+
//This code used to set data to question.options
 +
ans = this.answer.split("_|_");
 +
for (i = 0; i < ans.length; i++)
 +
{
 +
ans[i] = ans[i].split("_:_");
 +
}
  
−
  }
+
for (i = 0; i < ans[0].length; i++)
 +
{
 +
if (ans[0][i].length > 0)
 +
{
 +
for (j = 0; j < this.options.length; j++)
 +
{
 +
if (this.options[j].value == ans[0][i])
 +
{
 +
this.options[j].checked = true;
 +
if (ans.length > 1 && typeof this.options[j].open != "undefined" && typeof ans[1][i] != "undefined")
 +
this.options[j].open = ans[1][i];
 +
}
 +
}
 +
}
 +
}
  
−
  sres += "</ul>";
+
var optionType = this.type == 1 ? 1 : 3;
  
−
  for(var i = 0; i < tabList.length; i++)
+
var sres = "";
 +
sres += "<table border=" + this.bordersize + " class=\"question_outer\" cellpadding=\"0\" cellspacing=\"0\">";
 +
if (this.countdown > 0 && this.showcountdowndisplay)
 +
{
 +
sres += "<tr><td><div id=\"countdowndisplay\"></div></td></tr>";
 +
}
 +
sres += "<tr><td id=\"question_text\">" + this.text + "</td></tr>";
 +
sres += "<tr><td align=\"center\">";
  
−
  {
+
//Generate list of tabs
 +
var tabList = new Array();
 +
tabList.push(" All");
 +
for (var i = 0; i < this.options.length; i++) {
 +
if (tabList.indexOf(this.options[i].text.trim().substr(0, 1).toUpperCase()) == -1)
 +
tabList.push(this.options[i].text.trim().substr(0, 1).toUpperCase());
 +
}
  
−
      if(i ==0)  
+
//Sort Alphabetical
 +
tabList.sort();
  
−
        sres += "<div id='tab_" + tabList[i] + "' class='ui-tabs-panel'>";
+
sres += "<div id='example_tab' class='ui-tabs ui-widget ui-widget-content ui-corner-all'>";
 +
//Generate tab header UI
 +
sres += "<ul class='ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'>";
 +
for (var i = 0; i < tabList.length; i++) {
 +
var tabHeaderContent = document.createElement("li");
 +
sres += "<li class='ui-state-default ui-corner-top'>";
 +
sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
 +
}
 +
sres += "</ul>";
  
−
      else
+
var answerOptionNotToIncluded = new Array();
  
−
        sres += "<div id='tab_" + tabList[i] + "' class='ui-tabs-panel ui-tabs-hide'>";
+
for (var i = 0; i < tabList.length; i++) {
 +
var tabContent = "";
 +
if(i==0)tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'>";
 +
else tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-tabs-hide'>";
 +
 +
//generate content for tab
 +
tabContent += "<table><tbody><tr>";
 +
var indexOfItemInTab = 1;
 +
var currentRow = 1;
 +
for (var j = 0; j < this.options.length; j++) {
 +
if (i != 0 && this.options[j].text.trim().substr(0, 1).toUpperCase() != tabList[i])
 +
continue;
 +
var optionInput = this.options[j].getHTML(optionType);
 +
if (i == 0) {
 +
while (optionInput.indexOf(this.label) != -1) {
 +
optionInput = optionInput.replace(this.label, "TabAllAnswer");
 +
}
 +
}
 +
if (i!=0 && excludeAOs.contains(this.options[j].value)) {
 +
answerOptionNotToIncluded.push(this.options[j]);
 +
continue;
 +
 +
}
  
−
   
+
tabContent += this.options[j].getHTML(optionType);
 +
indexOfItemInTab++;
 +
if (indexOfItemInTab > columnPerRow * currentRow) {
 +
tabContent += "</tr><tr>";
 +
currentRow++;
 +
}
 +
}
  
−
      //generate content for tab
+
if (this.options.lenght == 0)
 +
tabContent = "<td>&nbsp;</td>";
 +
tabContent += "</tr></tbody></table></div>";
  
−
      sres += "<table><tbody><tr>";
+
if ($(tabContent).find("input").length <= 0)
 +
__emptyTabSearchString = "a[href*='tab_" + i + "']";
 +
else
 +
sres += tabContent;
 +
}
 +
if (answerOptionNotToIncluded.length > 0)
 +
{
 +
sres += "</div></td></tr><tr><td><table id='extra_options'>";
 +
for(var i=0; i<answerOptionNotToIncluded.length; i++)
 +
{
 +
sres += "<tr>" + answerOptionNotToIncluded[i].getHTML(optionType) + "</tr>";
 +
}
 +
sres += "</table></td></tr></table>";
 +
}
 +
else
 +
sres += "</div></td></tr></table>";
  
−
      var indexOfItemInTab = 1;
+
return sres;
 +
};
  
−
      var currentRow = 1;
+
var normaloptClick = optclick;
 +
this.optclick = function(slbl, lidx, blnk)
 +
{
 +
var currentAOValue = quest.options[lidx].value;
 +
var inputType = quest.type == 1 ? "radio" : "checkbox";
  
−
      for(var j =0; j<this.options.length; j++)
+
var openInput, currentAOInput;  
−
 
+
−
      {
+
currentAOInput = $("input[type='" + inputType + "'][value='" + currentAOValue + "']")[0];
−
 
+
−
        if(this.options[j].text.trim().substr(0,1) != tabList[i])
 
−
 
 
−
            continue;
 
−
 
 
−
         
 
−
 
 
−
        sres += this.options[j].getHTML(optionType);
 
−
 
 
−
        indexOfItemInTab ++;
 
−
 
 
−
        if(indexOfItemInTab > columnPerRow * currentRow)
 
−
 
 
−
        {
 
−
 
 
−
            sres+="</tr><tr>";
 
−
 
 
−
            currentRow++;
 
−
 
 
−
        }
 
−
 
 
−
      }
 
−
 
 
−
      if(this.options.lenght == 0)
 
−
 
 
−
        sres = "<td>&nbsp;</td>";
 
−
 
 
−
      sres +="</tr></tbody></table></div>";
 
−
 
 
−
  }
 
−
 
 
−
  sres += "</div>"
 
  
−
 
+
if (excludeAOs.contains(currentAOValue))
 +
return normaloptClick(slbl, lidx, blnk);
  
−
  return sres;
+
//If user click on the link instead of the radiobutton/checkbox then check/uncheck the radio/checkbox
 +
if (blnk && currentAOInput.type == "checkbox")
 +
currentAOInput.checked = !currentAOInput.checked;
 +
else if (blnk)
 +
currentAOInput.checked = true;
  
−
};
+
openInput = document["query"][slbl + ".Open." + currentAOValue];
−
 
+
if ((typeof openInput) != "undefined")
−
   
+
{
 +
if (currentAOInput.checked)
 +
{
 +
openInput.disabled = false;
 +
openInput.focus();
 +
}  
 +
else
 +
{
 +
openInput.value = "";
 +
openInput.disabled = true;
 +
  }
 +
}
 +
var o;
 +
for(var i=0; i<quest.options.length; i++)
 +
{
 +
o = quest.options[i];
 +
if (o.single && currentAOValue != o.value)
 +
{
 +
$("input[type='" + inputType + "'][value='" + o.value + "']").attr("checked", false);
 +
}
 +
}
 +
}
  
 
quest.onInit = function()
 
quest.onInit = function()
−
 
 
{
 
{
 +
if (typeof(__emptyTabSearchString) != "undefined")
 +
$(__emptyTabSearchString).parent().remove();
  
−
  $("#examle_tab > ul").tabs();
+
$("#example_tab").tabs();
−
 
+
//$("a[href='#tab_0']").parent().css("display", "none");
 +
 +
// set Next invisible onload
 +
//setVisibility(false);
 +
$("#extra_options").hide();
 
};
 
};
 
</source>
 
</source>
 +
 +
== Source ==
 +
 +
Questionnaire Resource Id on cg.catglobe.com site: 164079 (Questions: Q_1_No_tab_is_selected_by_default & Q_2_Extra_tab_showing_all_answer_options)

Latest revision as of 04:10, 17 October 2013

Showing answer option in tab

We have a single question which has a lot of answer options. We want to show answer options in Alphabetical tab

Tab20120116.png

Solution

Using Java Script property of question.

There are 2 type of alphabetical tabs.

  1. No tab is selected as default
  2. An extra tab showing all answer options which is selected as default

Code 1: No tab is selected by default

/// Maximum number of column in tab.
var columnPerRow = 3;


//answer option list to display outside of the tabs
var excludeAOs = [998,999];

Array.prototype.contains = function(item)
{
 var i;
 for(i=0; i<this.length; i++)
 {
 if (this[i] == item)
 return true;
 }
 return false;
}

 //Overrider Array to find an item easier
Array.prototype.indexOf = function(character)
{
 for (var i = 0; i < this.length; i++)
 if (this[i] == character)
 return i;
 return -1;
}

quest.getHTML = function()
{
 if (this.type != 1 && this.type != 2)
 return;

 //This code used to set data to question.options
 ans = this.answer.split("_|_");
 for (i = 0; i < ans.length; i++) 
 {
 ans[i] = ans[i].split("_:_");
 }

 for (i = 0; i < ans[0].length; i++) 
 {
 if (ans[0][i].length > 0) 
 {
 for (j = 0; j < this.options.length; j++) 
 {
 if (this.options[j].value == ans[0][i]) 
 {
 this.options[j].checked = true;
 if (ans.length > 1 && typeof this.options[j].open != "undefined" && typeof ans[1][i] != "undefined")
 this.options[j].open = ans[1][i];
 }
 }
 }
 }

 var optionType = this.type == 1 ? 1 : 3;

 var sres = "";
 sres += "<table border=" + this.bordersize + " class=\"question_outer\" cellpadding=\"0\" cellspacing=\"0\">";
 if (this.countdown > 0 && this.showcountdowndisplay) 
 {
 sres += "<tr><td><div id=\"countdowndisplay\"></div></td></tr>";
 }
 sres += "<tr><td id=\"question_text\">" + this.text + "</td></tr>";
 sres += "<tr><td align=\"center\">"; 

 //Generate list of tabs
 var tabList = new Array();
 tabList.push(" #");
 for (var i = 0; i < this.options.length; i++) {
 if (tabList.indexOf(this.options[i].text.trim().substr(0, 1).toUpperCase()) == -1)
 tabList.push(this.options[i].text.trim().substr(0, 1).toUpperCase());
 }

 //Sort Alphabetical
 tabList.sort();

 sres += "<div id='example_tab' class='ui-tabs ui-widget ui-widget-content ui-corner-all'>";
 //Generate tab header UI
 sres += "<ul class='ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'>";
 for (var i = 0; i < tabList.length; i++) {
 var tabHeaderContent = document.createElement("li");
 sres += "<li class='ui-state-default ui-corner-top'>";
 sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
 }
 sres += "</ul>";

 sres += "<div id='tab_" + 0 + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'></div>";

 var answerOptionNotToIncluded = new Array();

 for (var i = 1; i < tabList.length; i++) {
 var tabContent = "";
 tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'>";

 //generate content for tab
 tabContent += "<table><tbody><tr>";
 var indexOfItemInTab = 1;
 var currentRow = 1;
 for (var j = 0; j < this.options.length; j++) {
 if (this.options[j].text.trim().substr(0, 1).toUpperCase() != tabList[i])
 continue;

 if (excludeAOs.contains(this.options[j].value)) {
 answerOptionNotToIncluded.push(this.options[j]);
 continue;
 }

 tabContent += this.options[j].getHTML(optionType);
 indexOfItemInTab++;
 if (indexOfItemInTab > columnPerRow * currentRow) {
 tabContent += "</tr><tr>";
 currentRow++;
 }
 }

 if (this.options.lenght == 0)
 tabContent = "<td>&nbsp;</td>";
 tabContent += "</tr></tbody></table></div>";

 if ($(tabContent).find("input").length <= 0)
 __emptyTabSearchString = "a[href*='tab_" + i + "']";
 else
 sres += tabContent;
 }
 if (answerOptionNotToIncluded.length > 0)
 {
 sres += "</div></td></tr><tr><td><table id='extra_options'>";
 for(var i=0; i<answerOptionNotToIncluded.length; i++)
 {
 sres += "<tr>" + answerOptionNotToIncluded[i].getHTML(optionType) + "</tr>";
 }
 sres += "</table></td></tr></table>";
 }
 else
 sres += "</div></td></tr></table>";

 return sres;
};

var normaloptClick = optclick;
this.optclick = function(slbl, lidx, blnk)
{
 var currentAOValue = quest.options[lidx].value;
 var inputType = quest.type == 1 ? "radio" : "checkbox";

 var openInput, currentAOInput; 
 
 currentAOInput = $("input[type='" + inputType + "'][value='" + currentAOValue + "']")[0];
 

 if (excludeAOs.contains(currentAOValue))
 return normaloptClick(slbl, lidx, blnk);

 //If user click on the link instead of the radiobutton/checkbox then check/uncheck the radio/checkbox
 if (blnk && currentAOInput.type == "checkbox")
 currentAOInput.checked = !currentAOInput.checked;
 else if (blnk)
 currentAOInput.checked = true;

 openInput = document["query"][slbl + ".Open." + currentAOValue];
 if ((typeof openInput) != "undefined") 
 {
 if (currentAOInput.checked) 
 {
 openInput.disabled = false;
 openInput.focus();
 } 
 else 
 {
 openInput.value = "";
 openInput.disabled = true;
 }
 } 
 var o;
 for(var i=0; i<quest.options.length; i++)
 {
 o = quest.options[i];
 if (o.single && currentAOValue != o.value)
 {
 $("input[type='" + inputType + "'][value='" + o.value + "']").attr("checked", false); 
 }
 } 
}

quest.onInit = function()
{
 if (typeof(__emptyTabSearchString) != "undefined")
 $(__emptyTabSearchString).parent().remove();

 $("#example_tab").tabs();
 $("a[href='#tab_0']").parent().css("display", "none");
 
 // set Next invisible onload
 //setVisibility(false);
 $("#extra_options").hide();
};

Code 2: Extra tab showing all answer options

/// Maximum number of column in tab.
var columnPerRow = 3;


//answer option list to display outside of the tabs
var excludeAOs = [998,999];

Array.prototype.contains = function(item)
{
 var i;
 for(i=0; i<this.length; i++)
 {
 if (this[i] == item)
 return true;
 }
 return false;
}

 //Overrider Array to find an item easier
Array.prototype.indexOf = function(character)
{
 for (var i = 0; i < this.length; i++)
 if (this[i] == character)
 return i;
 return -1;
}

quest.getHTML = function()
{
 if (this.type != 1 && this.type != 2)
 return;

 //This code used to set data to question.options
 ans = this.answer.split("_|_");
 for (i = 0; i < ans.length; i++) 
 {
 ans[i] = ans[i].split("_:_");
 }

 for (i = 0; i < ans[0].length; i++) 
 {
 if (ans[0][i].length > 0) 
 {
 for (j = 0; j < this.options.length; j++) 
 {
 if (this.options[j].value == ans[0][i]) 
 {
 this.options[j].checked = true;
 if (ans.length > 1 && typeof this.options[j].open != "undefined" && typeof ans[1][i] != "undefined")
 this.options[j].open = ans[1][i];
 }
 }
 }
 }

 var optionType = this.type == 1 ? 1 : 3;

 var sres = "";
 sres += "<table border=" + this.bordersize + " class=\"question_outer\" cellpadding=\"0\" cellspacing=\"0\">";
 if (this.countdown > 0 && this.showcountdowndisplay) 
 {
 sres += "<tr><td><div id=\"countdowndisplay\"></div></td></tr>";
 }
 sres += "<tr><td id=\"question_text\">" + this.text + "</td></tr>";
 sres += "<tr><td align=\"center\">"; 

 //Generate list of tabs
 var tabList = new Array();
 tabList.push(" All");
 for (var i = 0; i < this.options.length; i++) {
 if (tabList.indexOf(this.options[i].text.trim().substr(0, 1).toUpperCase()) == -1)
 tabList.push(this.options[i].text.trim().substr(0, 1).toUpperCase());
 }

 //Sort Alphabetical
 tabList.sort();

 sres += "<div id='example_tab' class='ui-tabs ui-widget ui-widget-content ui-corner-all'>";
 //Generate tab header UI
 sres += "<ul class='ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'>";
 for (var i = 0; i < tabList.length; i++) {
 var tabHeaderContent = document.createElement("li");
 sres += "<li class='ui-state-default ui-corner-top'>";
 sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
 }
 sres += "</ul>";

 var answerOptionNotToIncluded = new Array();

 for (var i = 0; i < tabList.length; i++) {
 var tabContent = "";
 if(i==0)tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-widget-content ui-corner-bottom'>";
 else tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel ui-tabs-hide'>";
 
 //generate content for tab
 tabContent += "<table><tbody><tr>";
 var indexOfItemInTab = 1;
 var currentRow = 1;
 for (var j = 0; j < this.options.length; j++) {
 if (i != 0 && this.options[j].text.trim().substr(0, 1).toUpperCase() != tabList[i])
 continue;
 var optionInput = this.options[j].getHTML(optionType);
 if (i == 0) {
 while (optionInput.indexOf(this.label) != -1) {
 optionInput = optionInput.replace(this.label, "TabAllAnswer");
 }
 }
 if (i!=0 && excludeAOs.contains(this.options[j].value)) {
 answerOptionNotToIncluded.push(this.options[j]);
 continue;
 
 }

 tabContent += this.options[j].getHTML(optionType);
 indexOfItemInTab++;
 if (indexOfItemInTab > columnPerRow * currentRow) {
 tabContent += "</tr><tr>";
 currentRow++;
 }
 }

 if (this.options.lenght == 0)
 tabContent = "<td>&nbsp;</td>";
 tabContent += "</tr></tbody></table></div>";

 if ($(tabContent).find("input").length <= 0)
 __emptyTabSearchString = "a[href*='tab_" + i + "']";
 else
 sres += tabContent;
 }
 if (answerOptionNotToIncluded.length > 0)
 {
 sres += "</div></td></tr><tr><td><table id='extra_options'>";
 for(var i=0; i<answerOptionNotToIncluded.length; i++)
 {
 sres += "<tr>" + answerOptionNotToIncluded[i].getHTML(optionType) + "</tr>";
 }
 sres += "</table></td></tr></table>";
 }
 else
 sres += "</div></td></tr></table>";

 return sres;
};

var normaloptClick = optclick;
this.optclick = function(slbl, lidx, blnk)
{
 var currentAOValue = quest.options[lidx].value;
 var inputType = quest.type == 1 ? "radio" : "checkbox";

 var openInput, currentAOInput; 
 
 currentAOInput = $("input[type='" + inputType + "'][value='" + currentAOValue + "']")[0];
 

 if (excludeAOs.contains(currentAOValue))
 return normaloptClick(slbl, lidx, blnk);

 //If user click on the link instead of the radiobutton/checkbox then check/uncheck the radio/checkbox
 if (blnk && currentAOInput.type == "checkbox")
 currentAOInput.checked = !currentAOInput.checked;
 else if (blnk)
 currentAOInput.checked = true;

 openInput = document["query"][slbl + ".Open." + currentAOValue];
 if ((typeof openInput) != "undefined") 
 {
 if (currentAOInput.checked) 
 {
 openInput.disabled = false;
 openInput.focus();
 } 
 else 
 {
 openInput.value = "";
 openInput.disabled = true;
 }
 } 
 var o;
 for(var i=0; i<quest.options.length; i++)
 {
 o = quest.options[i];
 if (o.single && currentAOValue != o.value)
 {
 $("input[type='" + inputType + "'][value='" + o.value + "']").attr("checked", false); 
 }
 } 
}

quest.onInit = function()
{
 if (typeof(__emptyTabSearchString) != "undefined")
 $(__emptyTabSearchString).parent().remove();

 $("#example_tab").tabs();
 //$("a[href='#tab_0']").parent().css("display", "none");
 
 // set Next invisible onload
 //setVisibility(false);
 $("#extra_options").hide();
};

Source

Questionnaire Resource Id on cg.catglobe.com site: 164079 (Questions: Q_1_No_tab_is_selected_by_default & Q_2_Extra_tab_showing_all_answer_options)

Retrieved from "http://wiki.catglobe.com/index.php?title=Showing_Answer_Option_in_tab&oldid=24664"