Toggle search
Toggle menu
862
3.8K
30.2K
279.1K
Catglobe Wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Showing Answer Option in tab

From Catglobe Wiki
More actions

Challenge

Showing answer option in Alphabetical tab

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;
/// Value of answer option which will not included in tab
/// 0 means include all answer option
var answerOptionValueWhichIsNotIncludeInTab = 8;

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\">";

    //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;
    }

    //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'>";
    //Generate tab header UI
    sres += "<ul class='ui-tabs-nav'>";
    for (var i = 0; i < tabList.length; i++) {
        var tabHeaderContent = document.createElement("li");
        sres += "<li class='ui-tabs-selected'>";
        sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
    }
    sres += "</ul>";

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

    var answerOptionNotToIncluded;

    for (var i = 1; i < tabList.length; i++) {
        var tabContent = "";
        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 (this.options[j].text.trim().substr(0, 1).toUpperCase() != tabList[i])
                continue;

            if (answerOptionValueWhichIsNotIncludeInTab > 0 && this.options[j].value == answerOptionValueWhichIsNotIncludeInTab) {
                answerOptionNotToIncluded = 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 (answerOptionValueWhichIsNotIncludeInTab > 0)
        sres += "</div></td></tr><tr>" + answerOptionNotToIncluded.getHTML(optionType) + "</tr></table>";
    else
        sres += "</div></td></tr></table>";

    return sres;
};

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

    var qao, i, cb, o1, openInput, currentAOInput, val;
    cb = new Array();
    o1 = document["query"][slbl];
    cb = o1;
    qao = quest.options;
    currentAOInput = $("input[type='" + inputType + "'][value='" + quest.options[lidx].value + "']")[0];
    val = currentAOInput.value;

    //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." + val];
    if ((typeof openInput) != "undefined") {
        if (currentAOInput.checked) {
            openInput.disabled = false;
            openInput.focus();
        } else {
            openInput.value = "";
            openInput.disabled = true;
        }
    }

     // Singleoption
    if (quest.type == 1 || quest.options[lidx].single) {
        for (var i = 0; i < cb.length; i++) {
            if (cb[i].value == val)
                continue;
            cb[i].checked = false;
        }
    }

}

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

    $("#example_tab > ul").tabs();
    $("li[class='ui-tabs-selected']").css("display", "none");
};

Code 2: Extra tab showing all answer options

/// Maximum number of column in tab.
var columnPerRow = 3;
/// Value of answer option which will not included in tab
/// 0 means include all answer option.
var answerOptionValueWhichIsNotIncludeInTab = 8;

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\">";

    //Override 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;
    }

    //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'>";
    //Generate tab header UI
    sres += "<ul class='ui-tabs-nav'>";
    for (var i = 0; i < tabList.length; i++) {
        var tabHeaderContent = document.createElement("li");
        sres += "<li class='ui-tabs-selected'>";
        sres += "<a href='#tab_" + i + "'><span>" + tabList[i] + "</span></a></li>";
    }
    sres += "</ul>";

    for (var i = 0; i < tabList.length; i++) {
        var tabContent = "";
        if (i == 0)
            tabContent += "<div id='tab_" + i + "' class='ui-tabs-panel'>";
        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 && answerOptionValueWhichIsNotIncludeInTab > 0 && this.options[j].value == answerOptionValueWhichIsNotIncludeInTab) {
                answerOptionNotToIncluded = this.options[j];
                continue;
            }

            tabContent += optionInput;
            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 (answerOptionValueWhichIsNotIncludeInTab > 0)
        sres += "</div></td></tr><tr>" + answerOptionNotToIncluded.getHTML(optionType) + "</tr></table>";
    else
        sres += "</div></td></tr></table>";

    return sres;
};

var normaloptClick = optclick;
this.optclick = function(slbl, lidx, blnk)
{
    var inputType = quest.type == 1 ? "radio" : "checkbox";
    other_slbl = slbl == "TabAllAnswer" ? quest.label : "TabAllAnswer";
    var val = quest.options[lidx].value;
    var currentAOInput = $("input[type='" + inputType + "'][name='" + slbl + "'][value='" + val + "']")[0];
    var other_currentAOInput = $("input[type='" + inputType + "'][name='" + other_slbl + "'][value='" + val + "']")[0];

    // Singleoption
    if (quest.type == 1) {
        var InputNeedToBeUnCheck = $("input:" + inputType + "[value!='" + val + "']:checked");
        for (var i = 0; i < InputNeedToBeUnCheck.length; i++) {
            InputNeedToBeUnCheck[i].checked = false;
        }
    }

    //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;

    other_currentAOInput.checked = currentAOInput.checked;
}

quest.onInit = function()
{
    if (__emptyTabSearchString != null)
        $(__emptyTabSearchString).parent().remove();
    $("#example_tab > ul").tabs();
};
Retrieved from "https://testwiki.catglobe.com/index.php?title=Showing_Answer_Option_in_tab&oldid=9649"