multiGrid

The multiGrid question allows you to group multiple questions into a single table. This is often useful when you are asking a set of simple qustions repeatedly.

The response for this question is an array of responses corresponding to the columns of the grid, so that the first item in the array corresponds to the response in the first column and so on.

PropertyDescription
columnsAn array of column descriptions. You can use a string here or a column object as described below.
rowsAn array of row descriptions. You can use a string here or a row object as described below.
shuffleWhether to randomize the order of the rows.
columnStemCssCSS object for all the column stems.
columnStemHideHide the column stem row.
rowStemCssCSS object for the row stems.
rowStemHideHide the row stem column.
checkboxTypeCustomize the type of checbox we use. checkMark: the default check style. xMark: use an X instead of the check. colorMark: fill the checkbox with a dark background.
cellLabelsShow the column label within the grid cells.
requiredRequire all subquestions in the multigrid to be full
multiGrid.columns

If you set a string instead of a column object it will be treated as if you set only the stem and all other values will be set by default.

PropertyDescription
stem(text) The description of this column.
valueThe value to set for this column checkboxes. Defaults to true.
typeWhat type of interface should this column have (see below, defaults to checkbox)
cssCSS object for the whole column. This is the place that you can control the column width (using the width property).
stemCssCSS object for the column stem.
requiredRequire all subquestions in the column to be full
pattern(text or regular expression) Require all subquestions in the column to match the pattern. This validation method only affects input type columns.

There are several column types at your disposal,

TypeDescription
checkboxThe default is “checkbox”.
textDisplay text of you choice (use the textProperty property to set the row property that will be used as the text). For example {type: 'text', textProperty:'rightStem'} will use the rightStem property of each row as the text content. You can use this option to present an empty cell by leaving the text empty.
dropdownDisplay a dropdown input. Use the answers property to set the options for the dropdown. For example {type:'text', answers: ['Male', 'Female']}. See the dropdown question for more answers options.
inputDisplay a text input. Note that users can input responses that may be confused with other responses (if a user inputs a 1 it may be confused with a selection of a checkbox in the first column).
multiGrid.rows

If you set a string instead of a row object it will be treated as if you set only the stem and all other values will be set by default.

PropertyDescription
stem(text) The description of this row.
nameThe name you want this row to be called within the questions object. If this is not set the grid automatically sets it according to the grid name. So that if grid.name is “myGrid” then you’re first row will be called by default “myGrid001”.
overwriteAn array of column deffinitions to overwrite. Each element of the array overwrites the corresponding column column (so that the first element in the array overwrites the first column definitions and so on). If you do not want to overwrite a specific column, simply set it to false.
requiredRequire all subquestions in the row to be full

Here is a simple example of using a multiGrid:

var multiGrid = 	{
	type: 'multiGrid',
	name:'multiGrid',
	columns: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
	rows: ['Days you work out', 'Days you go to work']
}

You can, of course have tighter control over the way things work:

var grid = 	{
	type: 'multiGrid',
	name:'multiGrid',
	columns: [
		{stem:'Gender', type:'dropdown', answers: ['Male', 'Female']},
        'Study together',
        'Work together',
		{stem:'Description', type:'input'}
	],
	rows: ['Friend 1', 'Friend 2' ]
}

Run Download

Last modified March 11, 2021: setup hugo (11980dc)