Show a single question as a dropdown list inside another text grid question

Challenge

In order to restrict the value entered in a text grid question
As a questionnaire creator
I want to show a dropdown list inside the text grid

<img src="/images/1/1c/QuestionnaireTips_SingleQuestionAsDropdownList.png" _fck_mw_filename="QuestionnaireTips SingleQuestionAsDropdownList.png" alt="" />

Solution

• Create a text grid question (Q3)
• Create a dummy single question with the same answer options as we want to show inside the text grid question (Q3x)
• Add javascript code to the text grid question to include the single question inside

Code

fckLRfunction SingleQuestion(q, selectedValue, even)fckLR{fckLR this.label = "QUESTION." + q.label;fckLR this.text = q.text;fckLR this.aoValues = q.aoValues;fckLR this.aoTexts = q.aoTexts; fckLR this.selectedValue = selectedValue; fckLR this.even = even;fckLR}fckLRfckLRSingleQuestion.prototype.getHTML =function()fckLR{fckLR var n = this.aoValues.length;fckLR var list = $("<select>").width("400px");fckLR var selected="";fckLR for(var i=0; i<n; i++)fckLR { fckLR if (this.aoValues[i] == this.selectedValue)fckLR selected = "true";fckLR elsefckLR selected = "";fckLR list.append($("<option>")fckLR .val(this.aoValues[i])fckLR .text(this.aoTexts[i])fckLR .attr("selected", selected)fckLR );fckLR }fckLR //handle change event to change the value of the single questionfckLR var s_label = this.label;fckLR list.change(fckLR function()fckLR {fckLR $("input:hidden").each(fckLR function(i)fckLR { fckLR if ($(this).attr("name") == s_label)fckLR $(this).val(list.val());fckLR fckLR }fckLR );fckLR fckLR }fckLR );fckLR var row = $("<tr>");fckLR var s;fckLR fckLR if (this.even)fckLR s = "even";fckLR elsefckLR s = "odd";fckLR row.append($("<td>").text(this.text).addClass("grid_subquestion_text grid_subquestion_"+s));fckLR row.append(fckLR $("<td>").addClass("grid_subquestion_"+ s)fckLR .append(list)fckLR )fckLR if (this.selectedValue == "")fckLR this.selectedValue = this.aoValues[0];fckLR row.append($("<input type = \"hidden\">").attr("name", this.label).val(this.selectedValue));fckLRfckLR return row;fckLR}fckLRfckLRquest.onInit = function()fckLR{fckLR //question in JSON formatfckLR var q3x = {"label":"Q3x","text":"Titel","aoValues":[1,2,3],"aoTexts":["Ejer","Adm. direktør","Økonomichef"]};fckLRfckLR //get the previous selected valuefckLR var selectedValue = "Template:Q3x.Value"; fckLR var q = new SingleQuestion(q3x, selectedValue, true);fckLR //append the single question inside the gridfckLR $(".grid_inner").append(q.getHTML());fckLR fckLR $("input:text").width("400px");fckLR}fckLR

Code sample

Open the qnaire "Js demo - some js samples" (Resource Id: 159684). View the sub question "Q1[0]" on the text grid "Q1"