Difference between revisions of "Add text before answer option of single question"
Line 1: | Line 1: | ||
− | + | == Challenge == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | In order to add text before answer option of single question | |
− | + | ||
− | </ | + | As a questionnaire creator |
− | + | ||
− | + | I want to add text before answer option of single question | |
− | + | ||
− | I want to add an text before answer option like this image | + | '''Example''' |
− | + | ||
− | + | I have a single question. | |
− | + | ||
− | + | {| border="0" | |
− | + | |- | |
− | + | | align="center" | <img src="/images/a/a3/OneColumnBefore.JPG" _fck_mw_filename="OneColumnBefore.JPG" alt="" /><br/> | |
− | + | | <img src="/images/0/08/MultiColumnBefore.JPG" _fck_mw_filename="MultiColumnBefore.JPG" alt="" /> | |
− | + | |} | |
− | + | ||
− | + | <br/>I want to add an text before answer option like this image | |
− | + | ||
− | + | {| | |
− | + | |- | |
− | + | | align="center" | <img src="/images/2/2f/OneColumnAfter.jpg" _fck_mw_filename="OneColumnAfter.jpg" alt="" /> | |
− | < | + | | <img src="/images/6/69/MultiColumnAfter.jpg" _fck_mw_filename="MultiColumnAfter.jpg" alt="" /> |
− | + | |} | |
− | + | ||
− | < | + | == Solution == |
− | + | ||
− | + | *Add a Single question to Questionaire editor | |
− | + | *Go to menu Properties -> Question scripts -> Java script tab -> Input script | |
− | + | ||
− | + | <img src="/images/5/56/AddTextBeforeAOOfSingleQuestion.jpg" _fck_mw_filename="AddTextBeforeAOOfSingleQuestion.jpg" alt="" /> | |
+ | |||
+ | == Code == | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | quest.insertTextBefore = function(aoIndex, text) | ||
+ | { | ||
+ | var that = this; | ||
+ | $(".option_row").each( | ||
+ | function(i) | ||
+ | { | ||
+ | if (i == aoIndex) | ||
+ | { | ||
+ | var tr = $("<tr>").addClass("customized_text") | ||
+ | .append($("<td>").text(text).attr("colSpan",that.cols)); | ||
+ | $(this).before(tr); | ||
+ | } | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | } | ||
+ | |||
+ | quest.onInit = function() | ||
+ | { | ||
+ | var text = "My Text"; | ||
+ | this.insertTextBefore(2, text); | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | == Question stylesheet == | ||
+ | |||
+ | <source lang="css"> | ||
+ | .customized_text | ||
+ | { | ||
+ | background-color:white; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | == Source == | ||
+ | |||
+ | Questionnaire Resource Id on cg site: 159730 | ||
+ | |||
+ | Question: Q_OS_Single_AddTextBeforeAO |
Revision as of 04:10, 17 October 2013
Challenge
In order to add text before answer option of single question
As a questionnaire creator
I want to add text before answer option of single question
Example
I have a single question.
<img src="/images/a/a3/OneColumnBefore.JPG" _fck_mw_filename="OneColumnBefore.JPG" alt="" /> |
<img src="/images/0/08/MultiColumnBefore.JPG" _fck_mw_filename="MultiColumnBefore.JPG" alt="" /> |
I want to add an text before answer option like this image
<img src="/images/2/2f/OneColumnAfter.jpg" _fck_mw_filename="OneColumnAfter.jpg" alt="" /> | <img src="/images/6/69/MultiColumnAfter.jpg" _fck_mw_filename="MultiColumnAfter.jpg" alt="" /> |
Solution
- Add a Single question to Questionaire editor
- Go to menu Properties -> Question scripts -> Java script tab -> Input script
<img src="/images/5/56/AddTextBeforeAOOfSingleQuestion.jpg" _fck_mw_filename="AddTextBeforeAOOfSingleQuestion.jpg" alt="" />
Code
quest.insertTextBefore = function(aoIndex, text)
{
var that = this;
$(".option_row").each(
function(i)
{
if (i == aoIndex)
{
var tr = $("<tr>").addClass("customized_text")
.append($("<td>").text(text).attr("colSpan",that.cols));
$(this).before(tr);
}
}
);
}
quest.onInit = function()
{
var text = "My Text";
this.insertTextBefore(2, text);
}
Question stylesheet
.customized_text
{
background-color:white;
}
Source
Questionnaire Resource Id on cg site: 159730
Question: Q_OS_Single_AddTextBeforeAO