Difference between revisions of "Make whole cell clickable in single and multi grids"

From Catglobe Wiki
Jump to: navigation, search
(Created page with '== Challenge == Normally, the grid question require to click on the check or radiobutton. Now, we want it to register the answer when the user click on the cell. == Example == […')
 
(Tag: visualeditor)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
== Challenge ==  
 
== Challenge ==  
−
Normally, the grid question require to click on the check or radiobutton. Now, we want it to register the answer when the user click on the cell.
+
Normally, the grid question require a click on the checkbox or radiobutton. Now, we want it to register the answer when the user click on the cell for the answer option.
−
== Example ==
+
<br>
−
[[Image:OneCheckRequired.png ]]
+
'''Example'''<br>
−
== Script ==
+
[[Image:Clickable_cell.gif ]]
−
<source lang="javascript" line="1">
+
== Solution ==
−
quest.onInit = function()
+
*Create a grid question
−
{
+
*Add the below script to that question
−
  $(".grid_subquestion_odd,.grid_subquestion_even").click(
 
−
            function(evt)
 
−
            {
 
−
              if(evt.target.nodeName == "INPUT")
 
−
                  return true;
 
−
              $(this).children("input").click();
 
−
              return false;
 
−
            });
 
−
}
 
  
 +
== Code ==
 +
 +
<source lang="javascript">
 +
Question.bind('afterShowQuestion', function(ev, question) {
 +
  $(".cg-ui-answer-option").parent().click(function(ev) {
 +
    if($(this).hasClass(".cg-ui-selected")){
 +
      return true;
 +
    }
 +
    else
 +
    {
 +
      $(this).children(".viewer_answer_option_controller").click();
 +
      return false;
 +
    }
 +
  });
 +
});
 
</source>
 
</source>
 +
 +
== Source ==
 +
Questionnaire Resource Id on mmr.catglobe.com site: 339496 (Question: SG2 or MGr1)

Latest revision as of 09:00, 13 March 2019

Challenge

Normally, the grid question require a click on the checkbox or radiobutton. Now, we want it to register the answer when the user click on the cell for the answer option.
Example
Clickable cell.gif

Solution

  • Create a grid question
  • Add the below script to that question

Code

Question.bind('afterShowQuestion', function(ev, question) {
  $(".cg-ui-answer-option").parent().click(function(ev) {
    if($(this).hasClass(".cg-ui-selected")){
      return true;
    }
    else
    {
      $(this).children(".viewer_answer_option_controller").click();
      return false;
    }
  });
});

Source

Questionnaire Resource Id on mmr.catglobe.com site: 339496 (Question: SG2 or MGr1)

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