forked from Bruce114996/w4111.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
fd.html
140 lines (129 loc) · 4.31 KB
/
fd.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html>
<link href="./files/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.row {
margin-top: 1em;
}
</style>
<body>
<div class="container">
<div class="row"><div class="col-md-12">
<h3>Functional Dependency Problem Generator</h3>
<div class="row"><div class="col-md-7">
<p>
We have generated 99 random functional dependency problems for you to have practice with.
You can press ← or → on the keyboard to go to the previous or next problem.
</p>
<p>See a bug? Please let us know on piazza!</p>
<button class="btn btn-primary" id="btn">Click to Toggle Answer</button>
<button class="btn btn-primary" id="btnprev">←</button>
<button class="btn btn-primary" id="btnrand">Go to random question</button>
<button class="btn btn-primary" id="btnnext">→</button>
</div>
<div class="col-md-5">
<div id="legend">
<table class="table table-striped condensed small">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
<div class="row"><div class="col-md-12">
<h2>Problem <span id="probIdx"></span> out of <span id="probCount"></span></h2>
<div id="problem"></div>
</div></div>
</div>
<div class="row">
<div class="col-md-12"><center>Designed for Normalization lectures in Columbia's <a href="https://w4111.github.io">W4111</a></center></div>
</div>
</body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="row">
<div class="col-md-4">
<h4>Info</h4>
<table class="table condensed"><tbody>
<tr><td>Relation</td><td> {{prob.relation}}</td></tr>
<tr>
<td><div>Functional Deps</td>
<td>
{{#each prob.fds}}
<div>{{this}}</div>
{{/each}}
</td>
</tr>
<tr>
<td>Is BCNF?</td>
<td><span class="sol" style="display:none">{{solution.is_bcnf}}</span></td>
</tr>
<tr>
<td>Is 3NF?</td>
<td><span class="sol" style="display:none">{{solution.is_3nf}}</span></td>
</tr>
</tbody></table>
</div>
<div class="col-md-2" >
<h3>Minimal FDs</h3>
<small>List the minimal closure for the functional dependencies</small>
<div class="sol" style="display: none">
{{#each solution.minfds}}
<div>{{this}}</div>
{{/each}}
</div>
</div>
<div class="col-md-6" >
<h3>Decomposition</h3>
<h4>BCNF using FDs</h4>
<small>List the BCNF decomposition using the provided functional dependencies:</small>
<div>
<span class="sol" style="display:none">{{#each solution.bcnf.orig}} <span class='relation'>{{this}}</span> {{/each}}</span>
</div>
<br/>
<h4>BCNF using Minimal Cover</h4>
<small>List the BCNF decomposition using the minimal closure of the functional deps (this is just to give you more decomposition exercises):</small>
<div>
<span class="sol" style="display:none">{{#each solution.bcnf.minfds}} <span class='relation'>{{this}}</span> {{/each}}</span>
</div>
<br/>
<h4>3NF</h4>
<small>List the 3NF decomposition:</small>
<div>
<span class="sol" style="display:none">{{#each solution.tnf}} <span class='relation'>{{this}}</span> {{/each}}</span>
</div>
</div>
</div>
</script>
<style>
.sol {
font-size: larger;
}
small {
color: gray;
}
.relation{
display: block;
}
</style>
<script src="./files/js/underscore.js"></script>
<script src="./files/js/jquery.js"></script>
<script src="./files/js/handlebars.js"></script>
<script src="./files/js/bootstrap.min.js"></script>
<script src="./files/js/fd.js"></script>
<script>
$(function() {
setupKeyEvents();
loadProblem(probIdx);
$("#btn").click(function() {
isHidden = !isHidden;
updateSolHidden();
})
});
</script>
</html>