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

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

function SingleQuestion(q, selectedValue, even)
{
   this.label = "QUESTION." + q.label;
   this.text = q.text;
   this.aoValues = q.aoValues;
   this.aoTexts = q.aoTexts;		
   this.selectedValue = selectedValue;	
   this.even = even;
}

SingleQuestion.prototype.getHTML =function()
{
   var n = this.aoValues.length;
   var list = $("<select>").width("400px");
   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:hidden").each(
            function(i)
            {                        
               if ($(this).attr("name") == s_label)
                  $(this).val(list.val());
                  
            }
         );
         
      }
   );
   var row = $("<tr>");
   var s;
   
   if (this.even)
      s = "even";
   else
      s = "odd";
   row.append($("<td>").text(this.text).addClass("grid_subquestion_text grid_subquestion_"+s));
   row.append(
      $("<td>").addClass("grid_subquestion_"+ s)
      .append(list)
   )
   if (this.selectedValue == "")
      this.selectedValue = this.aoValues[0];
   row.append($("<input type = \"hidden\">").attr("name", this.label).val(this.selectedValue));

   return row;
}

quest.onInit = function()
{
   //question in JSON format
	var q3x = {"label":"Q3x","text":"Titel","aoValues":[1,2,3],"aoTexts":["Ejer","Adm. direktør","Økonomichef"]};

   //get the previous selected value
	var selectedValue = "{{Q3x.Value}}";	
   var q = new SingleQuestion(q3x, selectedValue, true);
	//append the single question inside the grid
	$(".grid_inner").append(q.getHTML());
	
	$("input:text").width("400px");
}

Code sample

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