/
CTATTable.html
112 lines (106 loc) · 3.47 KB
/
CTATTable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CTATTable Example</title>
<link rel="stylesheet" href="https://cdn.ctat.cs.cmu.edu/releases/current/CTAT.min.css"/>
<link rel="stylesheet" href="css/ctat_example.css"/>
<script src="https://cdn.ctat.cs.cmu.edu/releases/current/jquery.min.js"></script>
<!-- cdn.rawgit.com/CMUCTAT/CTAT/<tag>/Examples/ctat.min.js -->
<script src="https://cdn.ctat.cs.cmu.edu/releases/current/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/current/ctatloader.js"></script>
<script>
function ctatOnload ()
{
initTutor({question_file: "CTATTable.brd"});
}
function add_row(tableName)
{
var table = CTATShellTools.findComponent(tableName);
table[0].addRow();
}
function add_col(tableName)
{
var table = CTATShellTools.findComponent(tableName);
table[0].addColumn();
}
</script>
<style>
#const_table .CTATTable--row { flex: 1 1; }
#const_table .CTATTable--cell { flex: 1 1; width:inherit; height:inherit;}
</style>
</head>
<body>
<div class="tutor_window">
<a href="https://github.com/CMUCTAT/CTAT/wiki/">
<img id="CTATBanner"
alt="CTAT: Cognitive Tutor Authoring Tools"
src="skindata/CTAT_Banner.svg">
</a>
<h1>CTATTable Example</h1>
<p>A simple table example.</p>
<div>
This table will expand if 'addRow' or 'addCol' interface actions
are executed.
To change the cell size, override with:
<pre>#expanding_table .CTATTable--cell { width: x; height: y; }</pre>
<div style="display: flex;">
<div class="ctat_example" style="display:flex; flex-direction: column;">
<div id="expanding_table" class="CTATTable"
data-ctat-num-rows="5" data-ctat-num-cols="5"
data-ctat-has-header="true">
</div>
<div style="display: flex;">
<button id='add_row' onClick=add_row("expanding_table")>Add Row</button>
<button id='add_col' onClick=add_col("expanding_table")>Add Column</button>
</div>
</div>
<div class="ctat_code">
<pre>
<div id="my_table" class="CTATTable"
data-ctat-num-rows="5"
data-ctat-num-cols="5"
data-ctat-has-header="true">
</div>
</pre>
</div>
</div>
</div>
<hr/>
<div>
To have it expand to the available space if you set the width and height of the CTATTable:
<pre>#const_table .CTATTable--cell { flex: 1 1; width: inherit; height: inherit; }</pre>
Add the following to make sure the table does not grow beyond the specified height:
<pre>#const_table .CTATTable--row { flex: 1 1; }</pre>
<div class="ctat_example">
<div id="const_table" class="CTATTable"
data-ctat-num-rows="5" data-ctat-num-cols="5"
data-ctat-has-header="true"
style="width: 250px; height: 200px;">
</div>
<br>
<div style="display:flex;">
<button id='add_row_const' onClick=add_row("const_table")>Add Row</button>
<button id='add_col_const' onClick=add_col("const_table")>Add Column</button>
</div>
</div>
<div class="ctat_code">
<pre>
<div id="const_table" class="CTATTable"
data-ctat-num-rows="5"
data-ctat-num-cols="5"
data-ctat-has-header="true"
style="width: 250px; height: 200px;">
</div>
</pre>
</div>
<div id="hint-box" style="margin:3px;text-align:right;">
<div id="HintWindow" class="CTATHintWindow"></div>
<div style="float: right;">
<div id="hint-button" class="CTATHintButton"></div>
<div id="done" class="CTATDoneButton"></div>
</div>
</div>
</div>
</body>
</html>