-
Notifications
You must be signed in to change notification settings - Fork 0
/
bst.html
152 lines (120 loc) · 6.63 KB
/
bst.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
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='og:viewport' content='width=device-width,initial-scale=1'>
<meta name="og:description" content="BST classification">
<title>BST Classification</title>
<link rel="stylesheet" href="css/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="./assets/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Finlandica&display=swap" rel="stylesheet">
</head>
<body>
<nav id="nav1">
<ul class="nav-items navleft">
<li class="headername">BST Classification</li>
</ul>
<ul class="nav-items navcenter" id="nav">
<li><a class="larget" id='header2' href="./index.html">Binary Tree Builder</a></li>
<li><a class="larget" id='header2' href="./exercise.html">Exercises</a></li>
<li><a class="larget" onclick="openel('sharetree'); createshareURL();">Share this Tree</a></li>
</ul>
<ul class="nav-items navright">
<li title="Settings"><a onclick="openprefs();"><img src="assets/settings.png" height="30px" class="logo"></a></li>
<li title="Help"><a onclick="openel('instructions');" ><img src="assets/help.png" height="30px" class="logo" style="cursor: help;"></a></li>
<li title="Report bug"><a href="https://github.com/skparab1/binarytree/issues/new" target="_blank"><img src="assets/reportbuggy.png" height="30px" class="logo"></a></li>
</ul>
</nav>
<div class="fullwidth">
<h1 id='head' style="font-size: 50px; color: rgba(0,0,0,0);">e</h1>
</div>
<div id="treeholder">
</div>
<div id="connectors">
</div>
<div id='res' class="results" style="width: 33%; margin-left: 33%;" onmouseenter="raiseresults();" onmouseleave="lowerresults();">
<h1 style="margin-bottom: 0px;">Problem type</h1>
<h3 style="margin-bottom: 0px;" id="levelsdisplay">Max number of levels</h3>
<div class="slide2container">
<input type="range" min="2" max="5" value="4" step="1" class="slider2" name="numnodes" id="numnodes" onchange="initnums();">
</div>
<h3 style="margin-bottom: 0px;">Tree type</h3>
<input type="checkbox" id="alphabetical" name="alphabetical" value="alphabetical" onchange="updatetreetype();">
<label for="vehicle1" style="color: var(--contrast)"> Alphabetical</label><br>
<input type="checkbox" id="numeric" name="numeric" value="numeric" onchange="updatetreetype();">
<label for="vehicle2" style="color: var(--contrast)"> Numeric</label><br>
</div>
<div class="clickbuttons">
<div class="checkbutton" id='correct' onclick="iscorrect();" style="margin-left: 30%">Is bst</div>
<div class="checkbutton" id='wrong' onclick="iswrong();" style="margin-left: 45%; margin-top: -33px;">Not bst</div>
<div class="checkbutton" id='next' onclick="location.reload();" style="margin-left: 60%; margin-top: -33px;">Next</div>
</div>
<div class="largenotif" id="solutions">
<h1 >Solutions</h1>
<h5 id="preordersol">Pre order: </h5>
<h5 id="inordersol">In order: </h5>
<h5 id="postordersol">Post order: </h5>
<div class="close" onclick="closesolutions();">Close</div>
</div>
<div class="wrong" id="wr">
<h1>Wrong!</h1>
<h5 id="explanation" style="color: rgb(242, 0, 0); font-size: 15px; font-weight: bolder; background-color: var(--bg); border-radius: 25px;">Explanation</h5>
<h3 class="smalltext" id="bstdisp1"></h3>
<div class="myProgress">
<div class="myBar" id="bstcorrect1"></div>
</div>
<h3 class="smalltext" id="notbstdisp1"></h3>
<div class="myProgress">
<div class="myBar" id="notbstcorrect1"></div>
</div>
<div class="close" onclick="closeel('wr');">Close</div>
</div>
<div class="wrong" id="corr">
<h1>Correct!</h1>
<h3>Good job!</h3>
<h3 class="smalltext" id="bstdisp2"></h3>
<div class="myProgress">
<div class="myBar" id="bstcorrect2"></div>
</div>
<h3 class="smalltext" id="notbstdisp2"></h3>
<div class="myProgress">
<div class="myBar" id="notbstcorrect2"></div>
</div>
<div class="close" onclick="closeel('corr');">Close</div>
<div class="close" onclick="location.reload();">Next</div>
</div>
<div class="largenotif" id="instructions" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;">
<h1 style='font-size: 25px; margin: 10px;'>How to use</h1>
<h5 style='font-size: 15px; margin: 10px;'>1. Evaluate the binary tree to determine whether it is a binary search tree.</h5>
<h5 style='font-size: 15px; margin: 10px;'>2. Press answer buttons indicating your answer. Or, use keyboard shortcuts (W = Is BST, S = Not BST, A = Close, D = Next)</h5>
<h5 style='font-size: 15px; margin: 10px;'>3. Modify the problem type using the slider and checkboxes in the problem type panel.</h5>
<h5 style='font-size: 15px; margin: 10px;'>4. Click "Share Tree" share your tree with someone else</h5>
<div class="close" onclick="closeinstructions();">Close</div>
</div>
<div class="largenotif" id="preferences" style="height: 60%;">
<h1 style="font-size: 25px;">Settings</h1>
<h3 style="font-size: 15px; margin-bottom: 5px;" id="theme">Theme: (Dark)</h3>
<label class="switch" onclick="toggletheme();">
<input type="checkbox">
<span class="slider round"></span>
</label>
<h3 style="font-size: 15px; margin-bottom: 5px;" id="lines">Lines: (Cornered)</h3>
<label class="switch" onclick="toggleangle();">
<input type="checkbox">
<span class="slider round"></span>
</label>
<a href="https://github.com/skparab1/binarytree/issues/new" target="_blank"><div class="close" style="margin-bottom: 10px;">Report bug</div></a>
<div class="close" onclick="closeprefs();">Close</div>
</div>
<div class="largenotif" id="sharetree" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;">
<h1 style='font-size: 25px; margin: 10px;'>Share Tree</h1>
<h5 style='font-size: 15px; margin: 18px;'>Send the following URL to someone to share your tree with them.</h5>
<div id="copysharelink" class="coolbutton" onclick="copyshare()">Copy link</div>
<h5 id="shareurldisp" style='font-size: 20px; margin: 15px; padding: 10px; border-radius: 25px; color: var(--main); background-color: var(--bg);'></h5>
<div class="close" onclick="closeel('sharetree');">Close</div>
</div>
<script src="js/bst.js"></script>
</body>
</html>