Difference between revisions of "Show a single question as a dropdown list inside another text grid question"
Cg huyphong (talk | contribs) |
|||
| Line 1: | Line 1: | ||
| − | + | <h2> Challenge </h2> | |
| − | In order to restrict the value entered in a text grid question <br/> | + | <p>In order to restrict the value entered in a text grid question <br /> |
| − | As a questionnaire creator<br/> | + | As a questionnaire creator<br /> |
| − | I want to show a dropdown list inside the text grid<br/> | + | I want to show a dropdown list inside the text grid<br /> |
| − | <br/> | + | <br /> |
| − | + | <img src="/images/1/1c/QuestionnaireTips_SingleQuestionAsDropdownList.png" _fck_mw_filename="QuestionnaireTips SingleQuestionAsDropdownList.png" alt="" /> | |
| − | + | </p> | |
| − | + | <h2> Solution </h2> | |
| − | + | <ul><li>Create a text grid question (Q3) | |
| − | + | </li><li>Create a dummy single question with the same answer options as we want to show inside the text grid question (Q3x) | |
| − | + | </li><li>Add javascript code to the text grid question to include the single question inside | |
| − | == | + | </li></ul> |
| − | + | <h2>Code</h2> | |
| − | + | <p><span class="fck_mw_source" _fck_mw_customtag="true" _fck_mw_tagname="source" lang="javascript">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 = "{{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</span> | |
| − | { | + | </p> |
| − | + | <h2> Code sample </h2> | |
| − | + | <p>Open the qnaire "Js demo - some js samples" (Resource Id: 159684). View the sub question "Q1[0]" on the text grid "Q1" | |
| − | + | </p> | |
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | |||
| − | { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | |||
| − | { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | </ | ||
| − | |||
| − | |||
| − | |||
| − | Open the qnaire "Js demo - some js samples" (Resource Id: 159684). View the sub question "Q1[0]" on the text grid "Q1" | ||
Revision as of 05:16, 17 October 2013
Contents
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"
