CTATTable

CTATTable

This component is useful for generating a table of CTATTextAreas. This is particularly useful when the tutor needs to adjust the size of the table dynamically, for example if different logic problems use the same interface but a different number of variables or expressions in a truth table.

Code

<div id="table1" class="CTATTable"
   data-ctat-num-rows="3" data-ctat-num-cols="4" data-ctat-has-header="false" 
   style="width:150px; height:120px;"></div>

Running Example

CTAT Table Example

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATTable.
• data-ctat-num-rows: Required. Specifies the number of rows in the table.
• data-ctat-num-cols: Required. Specifies the number of columns in the table.
• data-ctat-has-header: true or false. Default is false. Determines whether or not the first row of the table should be treated as a header row (header cells can be styled separately from the rest of the table).

Action-Input

Action	Input	Notes
addRow	N/A	Adds a new row to the bottom of the table
addColumn	N/A	Adds a new column to the right side of the table

Styling

.CTATTable {
	/*display: table;*/
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.CTATTable .CTATTextArea textarea {
	width: 95%;
	height: 100%;
	outline: none;
	box-shadow: none;
	border: none;
}
.CTATTable textarea.CTAT--hint {
	-moz-box-shadow: 0px 0px 15px 5px yellow;
	-webkit-box-shadow: 0px 0px 15px 5px yellow;
	box-shadow: 0px 0px 15px 5px yellow;
	background-color: yellow;
}
.CTATTable--row {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex: none;
}
.CTATTable--cell {
	flex: none;
	border: 1px solid black;
	overflow: hidden;
	width: 4em;
	height: 1.2em;
}
.CTATTable--headers {
	flex: none;
}
.CTATTable--header textarea{
	background-color: linen;
	text-align: center;
	font-weight: bold;
}