Difference between revisions of "Multi question with group option title"

From Catglobe Wiki
Jump to: navigation, search
(Created page with "test")
 
(update)
(Tag: visualeditor)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
test
+
This solution will help you have a multi question that their options was grouped by group title.
 +
 
 +
Please see following example:
 +
 
 +
[[File:Eg 1.png|center|thumb|1000x1000px]]
 +
To do it, please follow below steps:
 +
 
 +
'''1.Preparing JavaScript Code for question's Java Script.'''<syntaxhighlight lang="js">
 +
can.view.ejs('RandomAO', '<div id="<%= this.attr(\'label\') %>-question" class="cg-ui-question cg-ui-state-normal" <%= this %> <%= (el) -> new Viewer.MultiQuestionController(el) %>>  <div class="cg-ui-error-message cg-ui-hidden"></div>  <div class="cg-ui-text"><%== this.attr(\'text\') %></div>  <div class="cg-ui-answer-option-list<%= answerOptions.length == 0 ? \' cg-ui-hidden\' : \'\' %>"      <%= this %> <%= (el) -> new Viewer.AnswerOptionsController(el) %>>  <table class="cg-ui-grid">  <% for (var r = 0; r < answerOptionRows; r++) { %>      <tr class="cg-ui-grid-row <%= (r % 2) == 0 ? \'even\' : \'odd\' %>">      <% list(answerOptions.map(function(a, i) { if (i % answerOptionRows == r) return a; }), function(a, i) { %>      <% if(a.attr(\'value\')>=90) {%>        <td class="cg-ui-text">            <%== a.attr(\'text\') %>        </td>      <% } else { %>        <td class="cg-ui-answer-option-list-column cg-ui-answer-option <%= a.selected ? \' cg-ui-selected\' : \'\' %>"            style="<%= \'width: \' + (100/answerOptionColumns).toFixed(0) + \'%;\' %>"            <%= a %> <%= (el) -> new Viewer.AnswerOptionController(el) %>>            <table>              <tr>                  <td><div class="<%= a.single ? \'cg-ui-radio-button\' : \'cg-ui-check-box\' %>"></div>        </td>                  <td class="cg-ui-text">                    <%== a.attr(\'text\') %>                    <% if (a.attr(\'open\')) { %>                        <input class="cg-ui-input" type="text" value="<%= a.attr(\'openAnswer\') %>"                        tabindex="<%= QuestionnaireViewer.getTabIndex() %>" />                    <% } %>                  </td>              </tr>            </table>        </td>      <% } %>      <% }) %>      </tr>  <% } %>  </table></div></div>');
 +
Question.bind('beforeShowQuestion', function(ev, question) {
 +
  // Change default template for this question
 +
  question.attr('template', 'RandomAO');
 +
});
 +
</syntaxhighlight>'''2. Create normal multi question'''
 +
 
 +
- Let create a multi question as normal.
 +
 
 +
- Marks group option title by their value, it must to be '''more than 90.'''
 +
 
 +
- all real value options have to be '''less than 90.'''
 +
 
 +
See below:
 +
[[File:Eg 2.png|center|thumb|845x845px]]
 +
'''3. Custom'''
 +
 
 +
You must copy and paste our code which we prepare at step 1 to java script tab of your question, and click save button of questionnaire editor.
 +
 
 +
'''4. Testing'''
 +
 
 +
End of Documentation.
 +
[[Category:Questionnaire]]

Latest revision as of 11:38, 5 February 2018

This solution will help you have a multi question that their options was grouped by group title.

Please see following example:

Eg 1.png

To do it, please follow below steps:

1.Preparing JavaScript Code for question's Java Script.

can.view.ejs('RandomAO', '<div id="<%= this.attr(\'label\') %>-question" class="cg-ui-question cg-ui-state-normal" <%= this %> <%= (el) -> new Viewer.MultiQuestionController(el) %>>   <div class="cg-ui-error-message cg-ui-hidden"></div>   <div class="cg-ui-text"><%== this.attr(\'text\') %></div>   <div class="cg-ui-answer-option-list<%= answerOptions.length == 0 ? \' cg-ui-hidden\' : \'\' %>"      <%= this %> <%= (el) -> new Viewer.AnswerOptionsController(el) %>>   <table class="cg-ui-grid">   <% for (var r = 0; r < answerOptionRows; r++) { %>      <tr class="cg-ui-grid-row <%= (r % 2) == 0 ? \'even\' : \'odd\' %>">      <% list(answerOptions.map(function(a, i) { if (i % answerOptionRows == r) return a; }), function(a, i) { %>      <% if(a.attr(\'value\')>=90) {%>         <td class="cg-ui-text">            <%== a.attr(\'text\') %>         </td>      <% } else { %>         <td class="cg-ui-answer-option-list-column cg-ui-answer-option <%= a.selected ? \' cg-ui-selected\' : \'\' %>"             style="<%= \'width: \' + (100/answerOptionColumns).toFixed(0) + \'%;\' %>"             <%= a %> <%= (el) -> new Viewer.AnswerOptionController(el) %>>            <table>               <tr>                  <td><div class="<%= a.single ? \'cg-ui-radio-button\' : \'cg-ui-check-box\' %>"></div>         </td>                  <td class="cg-ui-text">                     <%== a.attr(\'text\') %>                     <% if (a.attr(\'open\')) { %>                        <input class="cg-ui-input" type="text" value="<%= a.attr(\'openAnswer\') %>"                        tabindex="<%= QuestionnaireViewer.getTabIndex() %>" />                     <% } %>                  </td>               </tr>            </table>         </td>      <% } %>      <% }) %>      </tr>   <% } %>   </table></div></div>');
Question.bind('beforeShowQuestion', function(ev, question) {
   // Change default template for this question
   question.attr('template', 'RandomAO');
});

2. Create normal multi question

- Let create a multi question as normal.

- Marks group option title by their value, it must to be more than 90.

- all real value options have to be less than 90.

See below:

Eg 2.png

3. Custom

You must copy and paste our code which we prepare at step 1 to java script tab of your question, and click save button of questionnaire editor.

4. Testing

End of Documentation.