Make whole cell clickable in single and multi grids: Difference between revisions
From Catglobe Wiki
More actions
No edit summary  | 
				CGHelpdesk (talk | contribs) No edit summary  | 
				||
| Line 8: | Line 8: | ||
*Add the below script to that question  | *Add the below script to that question  | ||
== Code ==    | == Code ==  | ||
<source lang="javascript"   | |||
quest.onInit = function()  | <source lang="javascript">  | ||
{  | //Solution 1  | ||
quest.onInit = function(){  | |||
 $(".grid_subquestion_odd,.grid_subquestion_even").click(  | |||
 function(evt) {  | |||
 if(evt.target.nodeName == "INPUT")  | |||
 return true;  | |||
 $(this).children("input").click();  | |||
 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 cg.catglobe.com site: 164079 (Question: Q10_Make_whole_cell_clickable_in_single_and_multi_)  | ||
Revision as of 07:10, 11 November 2013
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
Solution
- Create a grid question
 - Add the below script to that question
 
Code
//Solution 1
quest.onInit = function(){
 $(".grid_subquestion_odd,.grid_subquestion_even").click(
 function(evt) {
 if(evt.target.nodeName == "INPUT")
 return true;
 $(this).children("input").click();
 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
Questionnaire Resource Id on cg.catglobe.com site: 164079 (Question: Q10_Make_whole_cell_clickable_in_single_and_multi_)