Difference between revisions of "Add text before answer option of single question"

From Catglobe Wiki
Jump to: navigation, search
Line 1: Line 1:
<h2> Challenge </h2>
+
== Challenge ==
<p>In order to add text before answer option of single question
 
</p><p>As a questionnaire creator
 
</p><p>I want to add text before answer option of single question
 
</p><p><b>Example</b>
 
</p><p>I have a single question.
 
</p>
 
<table border="0">
 
  
<tr>
+
In order to add text before answer option of single question
<td align="center"><img src="/images/a/a3/OneColumnBefore.JPG" _fck_mw_filename="OneColumnBefore.JPG" alt="" />
+
 
</td>
+
As a questionnaire creator
<td> <img src="/images/0/08/MultiColumnBefore.JPG" _fck_mw_filename="MultiColumnBefore.JPG" alt="" />
+
 
</td></tr></table>
+
I want to add text before answer option of single question
<p><br />
+
 
I want to add an text before answer option like this image
+
'''Example'''
</p>
+
 
<table>
+
I have a single question.
<tr>
+
 
<td align="center"><img src="/images/2/2f/OneColumnAfter.jpg" _fck_mw_filename="OneColumnAfter.jpg" alt="" />
+
{| border="0"
</td>
+
|-
<td> <img src="/images/6/69/MultiColumnAfter.jpg" _fck_mw_filename="MultiColumnAfter.jpg" alt="" />
+
| align="center" | &lt;img src="/images/a/a3/OneColumnBefore.JPG" _fck_mw_filename="OneColumnBefore.JPG" alt="" /&gt;<br/>
</td></tr></table>
+
| &lt;img src="/images/0/08/MultiColumnBefore.JPG" _fck_mw_filename="MultiColumnBefore.JPG" alt="" /&gt;
<h2> Solution </h2>
+
|}
<ul><li>Add a Single question to Questionaire editor
+
 
</li><li>Go to menu Properties -&gt; Question scripts -&gt; Java script tab -&gt; Input script
+
<br/>I want to add an text before answer option like this image
</li></ul>
+
 
<p><img src="/images/5/56/AddTextBeforeAOOfSingleQuestion.jpg" _fck_mw_filename="AddTextBeforeAOOfSingleQuestion.jpg" alt="" />
+
{|
</p>
+
|-
<h2> Code </h2>
+
| align="center" | &lt;img src="/images/2/2f/OneColumnAfter.jpg" _fck_mw_filename="OneColumnAfter.jpg" alt="" /&gt;
<p><span class="fck_mw_source" _fck_mw_customtag="true" _fck_mw_tagname="source" lang="javascript" line="1">fckLRquest.insertTextBefore = function(aoIndex, text)fckLR{fckLR var that = this;fckLR $(&quot;.option_row&quot;).each(fckLR function(i)fckLR {fckLR if (i == aoIndex)fckLR {fckLR var tr = $(&quot;&lt;tr&gt;&quot;).addClass(&quot;customized_text&quot;)fckLR .append($(&quot;&lt;td&gt;&quot;).text(text).attr(&quot;colSpan&quot;,that.cols)); fckLR $(this).before(tr);fckLR }fckLR }fckLR );fckLRfckLR}fckLRfckLRquest.onInit = function()fckLR{fckLR  var text = &quot;My Text&quot;;fckLR this.insertTextBefore(2, text);fckLR}fckLR</span>
+
| &lt;img src="/images/6/69/MultiColumnAfter.jpg" _fck_mw_filename="MultiColumnAfter.jpg" alt="" /&gt;
</p>
+
|}
<h2> Question stylesheet </h2>
+
 
<p><span class="fck_mw_source" _fck_mw_customtag="true" _fck_mw_tagname="source" lang="css">fckLR.customized_textfckLR{fckLR  background-color:white;fckLR}fckLR</span>
+
== Solution ==
</p>
+
 
<h2>Source</h2>
+
*Add a Single question to Questionaire editor
<p>Questionnaire Resource Id on cg site: 159730  
+
*Go to menu Properties -> Question scripts -> Java script tab -> Input script
</p><p>Question: Q_OS_Single_AddTextBeforeAO
+
 
</p>
+
&lt;img src="/images/5/56/AddTextBeforeAOOfSingleQuestion.jpg" _fck_mw_filename="AddTextBeforeAOOfSingleQuestion.jpg" alt="" /&gt;
 +
 
 +
== 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 05: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