Difference between revisions of "Show a single question as a dropdown list inside another text grid question"

From Catglobe Wiki
Jump to: navigation, search
m (→‎Code)
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
== Challenge ==
+
== Challenge ==
−
In order to restrict the value entered in a text grid question <br/>
+
 
−
As a questionnaire creator<br/>
+
In order to restrict the value entered in a text grid question<br/>As a questionnaire creator<br/>I want to show a dropdown list inside the text grid
−
I want to show a dropdown list inside the text grid<br/>
+
 
−
[[Image:QuestionnaireTips SingleQuestionAsDropdownList.png]]
+
http://wiki.catglobe.com/images/1/1c/QuestionnaireTips_SingleQuestionAsDropdownList.png
−
== Solution ==
+
 
 +
== Solution<br/> ==
 +
 
 
*Create a text grid question (Q3)
 
*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)
 
*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
 
*Add javascript code to the text grid question to include the single question inside
−
==Code==
+
 
 +
== Code ==
 +
 
 
<source lang="javascript">
 
<source lang="javascript">
−
var SingleQuestion = {
+
function SingleQuestion(q, selectedValue, even)
−
onInit: function(_label, _text, _answerOptionValues, _answerOptionTexts, _selectedValue)
+
{
−
{
+
this.label = "QUESTION." + q.label;
−
this.label = "QUESTION." + _label;
+
this.text = q.text;
−
this.text = _text;
+
this.aoValues = q.aoValues;
−
this.aoValues = _answerOptionValues;
+
this.aoTexts = q.aoTexts;  
−
this.aoTexts = _answerOptionTexts;
+
this.selectedValue = selectedValue;
−
this.selectedValue = _selectedValue;
+
this.even = even;
−
},
+
}
−
getHTML: function()
+
 
−
{
+
SingleQuestion.prototype.getHTML =function()
−
var n = this.aoValues.length;
+
{
−
var list = $("<select>").width("400px");
+
var n = this.aoValues.length;
−
var selected="";
+
var list = $("<select>").width("400px");
−
for(var i=0; i<n; i++)
+
var selected="";
−
{
+
for(var i=0; i<n; i++)
−
if (this.aoValues[i] == this.selectedValue)
+
{  
−
selected = "true";
+
if (this.aoValues[i] == this.selectedValue)
−
else
+
selected = "true";
−
selected = "";
+
else
−
list.append($("<option>")
+
selected = "";
−
.val(this.aoValues[i])
+
list.append($("<option>")
−
.text(this.aoTexts[i])
+
.val(this.aoValues[i])
−
.attr("selected", selected)
+
.text(this.aoTexts[i])
−
);
+
.attr("selected", selected)
−
}
+
);
−
                //handle change event to change the value of the single question
+
}
−
list.change(
+
//handle change event to change the value of the single question
−
function()
+
var s_label = this.label;
−
{
+
list.change(
−
$("input:hidden").each(
+
function()
−
function(i)
+
{
−
{
+
$("input:hidden").each(
−
if ($(this).attr("name") == SingleQuestion.label)
+
function(i)
−
$(this).val(list.val());
+
{  
−
+
if ($(this).attr("name") == s_label)
−
}
+
$(this).val(list.val());
−
);
+
−
+
}
−
}
+
);
−
);
+
−
var row = $("<tr>");
+
}
−
row.append($("<td>").text(this.text).addClass("grid_subquestion_text grid_subquestion_odd"));
+
);
−
row.append(
+
var row = $("<tr>");
−
$("<td>").addClass("grid_subquestion_odd")
+
var s;
−
.append(list)
+
−
)
+
if (this.even)
−
row.append($("<input type = \"hidden\">").attr("name", this.label).val(""));
+
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;
+
return row;
−
}
 
 
}
 
}
  
 
quest.onInit = function()
 
quest.onInit = function()
 
{
 
{
−
var n = 8;
+
//question in JSON format
−
var aoValues = new Array(n);
+
var q3x = {"label":"Q3x","text":"Titel","aoValues":[1,2,3],"aoTexts":["Ejer","Adm. direktør","Økonomichef"]};
−
var aoTexts = new Array(n);
 
−
for (var i=0; i<n; i++)
 
−
{
 
−
aoValues[i] = i+1;
 
−
}
 
−
        //answer option texts
 
−
aoTexts[0] = "Ejer";
 
−
aoTexts[1] = "Adm. direktør";
 
−
aoTexts[2] = "Økonomichef";
 
−
aoTexts[3] = "Personalechef";
 
−
aoTexts[4] = "Bogholder / økonomimedarbejder";
 
−
aoTexts[5] = "Medhjælpende ægtefælle";
 
−
aoTexts[6] = "Andet, notér på næste side";
 
−
aoTexts[7] = "Ved ikke";
 
−
 
 
−
        //get the previous selected value
 
−
var single_selectedValue = "{{Q3x.Value}}";
 
−
SingleQuestion.onInit("Q3x","Titel", aoValues, aoTexts, single_selectedValue);
 
  
−
        //append the single question inside the grid
+
//get the previous selected value
−
$(".grid_inner").append(SingleQuestion.getHTML());
+
var selectedValue = "{{Q3x.Value}}";
−
+
var q = new SingleQuestion(q3x, selectedValue, true);
−
$("input:text").width("400px");
+
//append the single question inside the grid
 +
$(".grid_inner").append(q.getHTML());
 +
 +
$("input:text").width("400px");
 
}
 
}
 
</source>
 
</source>
 +
 +
== Code sample ==
 +
 +
Open the qnaire "Js demo - some js samples" (Resource Id: 159684). View the sub question "Q1[0]" on the text grid "Q1"

Latest revision as of 05:25, 17 October 2013

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

QuestionnaireTips_SingleQuestionAsDropdownList.png

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"

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