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

Code

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

Running Example

CTATTable 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 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).

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

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

Mass Production

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>