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

From Catglobe Wiki
Jump to: navigation, search
(Tag: visualeditor)
 
Line 11: Line 11:
  
 
<source lang="javascript">
 
<source lang="javascript">
−
//Solution 1
+
Question.bind('afterShowQuestion', function(ev, question) {
−
quest.onInit = function(){
+
  $(".cg-ui-answer-option").parent().click(function(ev) {
−
$(".grid_subquestion_odd,.grid_subquestion_even").click(
+
    if($(this).hasClass(".cg-ui-selected")){
−
$(".grid_subquestion_odd,.grid_subquestion_even").click(
+
      return true;
−
function(evt) {
+
    }
−
  if(evt.target.nodeName == "INPUT")
+
    else
−
  return true;
+
    {
−
  $(this).children("input").click();
+
      $(this).children(".viewer_answer_option_controller").click();
−
  return false;
+
      return false;
−
});
+
    }
−
};
+
  });
−
 
 
−
//Solution 2:
 
−
quest.onInit = function(){
 
−
// For single, singlegrid question
 
−
$('input[type="radio"][name^="QUESTION."]')
 
−
.parent()
 
−
.click(function(event) {
 
−
$(this).find('input[type="radio"][name^="QUESTION."]').attr('checked', true);
 
−
});
 
−
 
−
// For multi, multigrid question
 
−
var checkboxes = $('input[type="checkbox"][name^="QUESTION."]');
 
−
checkboxes.click(function(event) {
 
−
event.stopPropagation();
 
−
});
 
−
checkboxes.parent().click(function(event) {
 
−
var child = $(this).find('input[type="checkbox"][name^="QUESTION."]');
 
−
if(child.attr('checked'))
 
−
$(this).find('input[type="checkbox"][name^="QUESTION."]').attr('checked', false);
 
−
else
 
−
$(this).find('input[type="checkbox"][name^="QUESTION."]').attr('checked', true);
 
−
});
 
 
});
 
});
 
</source>
 
</source>
  
 
== Source ==
 
== Source ==
−
Questionnaire Resource Id on cg.catglobe.com site: 164079 (Question: Q10_Make_whole_cell_clickable_in_single_and_multi_)
+
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"