Show single questions as dropdown lists in their own pages

Challenge

As a questionnaire creator

In order not to have the answer option list taking much space when viewing the question

I want to show answer options as a drop down list

Example

Before

 

After

 

Solution

• Hide answer option rows
• Create a drop down list containing all answer options, add it to the option table

Code

• Create SingleQuestion class

function SingleQuestion(q, selectedValue)
{
 if (q.label.indexOf("QUESTION.") != -1)
 this.label = q.label;
 else
 this.label = "QUESTION." + q.label;
 
 this.aoValues = q.aoValues;
 this.aoTexts = q.aoTexts; 
 this.selectedValue = selectedValue; 
}

SingleQuestion.prototype.createDropDownList = function()
{
 var n = this.aoValues.length;
 var list = $("<select id='dropDownList'>");
 list.append($("<option>")
 .val("")
 .text("Select...")
 .attr("selected", "true"));
 var selected="";
 for(var i=0; i<n; i++)
 { 
 if (this.aoValues[i] == this.selectedValue)
 selected = "true";
 else
 selected = "";
 list.append($("<option>")
 .val(this.aoValues[i])
 .text(this.aoTexts[i])
 .attr("selected", selected)
 );
 }
 //handle change event to change the value of the single question
 var s_label = this.label;
 list.change(
 function()
 { 
 $("input[name='" + s_label + "']").val($(this).val());
 }
 );
 return list;
}

SingleQuestion.prototype.validate = function()
{
 ErrorMessages.getInstance().clearErrorMessages();
 if ($("input[name='" + this.label + "']").val() == "")
 {
 ErrorMessages.getInstance().showErrorMessage(quest.requiredtext);
 return false;
 }
 return true;
 
}

• Add the drop down list to the option table

quest.onInit = function()
{
 $(".option_row").remove();
 var q = {'label':'Q3', 'aoTexts':['C2','C3','C4','C5','C6','C7','C8','T1','T2','T3','T4','T5','T6','T7','T8','T9','T10','T11','T12','L1','L2','L3','L4','L5','S1','S2','S3','S4',"Don't know"], 'aoValues':[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29
]};
 var qS = new SingleQuestion(q, "{{Q3.Value}}");
 var oldValue = "{{Q3.Value}}";
 $("input[name='" + qS.label + "']").val(oldValue);

 $(".option_table").append($("<tr>").append($("<td>").append(qS.createDropDownList())).addClass("option_row"));
 $("#dropDownList").val(oldValue);
 quest.qS = qS;

 $(".QuestionSpace >p").attr("align", "center");
}

questioncheck = function()
{
 return quest.qS.validate();
}

Source

Questionnaire resource id on cg site: 164079(Question: Q_Show_single_questions_as_dropdown_lists_in_their)