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. Cells in the table are CTATTextAreas, are graded individually, and their ids are generated in the form of <table id>.R<row number>C<column number>.

<div id="table1" class="CTATTable"
   data-ctat-num-rows="3" data-ctat-num-cols="4" data-ctat-has-header="false">
   </div>

CTATTable Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATTable and no other CTAT<component> classes.
• 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).

To set the size of the cells in the table, specify the width and height using CSS. For example:

#table1 .CTATTable--cell { width: 120px; height: 30px; }

To change the default color of a table's header row, specify the color using CSS. For example:

#table1 .CTATTable--header textarea { background-color: lightblue; }

Here is a list of the default styles included in CTAT.css that govern various aspects of the look of the table.

.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;
}

Example for mass producing the number of rows and columns for a CTATTable:

<div id="table1" class="CTATTable" data-ctat-has-header="false"
  data-ctat-num-rows="%(table-rows)%"
  data-ctat-num-cols="%(table-cols)%">
</div>