hi

bst.html

@@ -46,7 +46,7 @@ <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="1" max="4" value="3" step="1" class="slider2" name="numnodes" id="numnodes" onchange="initnums();">
+        <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>

css/index.css

@@ -569,7 +569,7 @@ input:checked + .slider:before {
 .feedbackspacer {
   width: 100%;
   margin-top: -45px;
-  background-color: var(--bg);
+  background-color: rgba(0,0,0,0);
   text-align: center;
   padding-bottom: 10px;
 }
@@ -581,5 +581,7 @@ input:checked + .slider:before {
   margin: 0.5%;
   margin-bottom: 10px;
   font-size: 150%;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
   float: left;
 }

exercise.html

@@ -17,6 +17,7 @@
         <li class="headername">Binary Tree Exercises</li>
       </ul>
       <ul class="nav-items navcenter" id="nav">
+        <li><a class="larget" onclick="resettree();">Reset Tree</a></li>
         <li><a class="larget" onclick="openel('sharetree'); createshareURL(); openscreen();">Share Tree</a></li>
         <li><a class="larget"  href="./index.html">Binary Tree Builder</a></li>
         <li><a class="larget" id='header2' href="./bst.html">BST Classification</a></li>
@@ -116,7 +117,7 @@ <h3 style="font-size: 15px; margin-bottom: 0px; margin-top: 0px;" id="animwait">
 
     <div class="wrong" id="wr">
       <h1>Incorrect!</h1>
-      <h5 id="explanation" style="color: black; font-size: 25px; font-weight: bolder; border-radius: 25px; background-color: var(--bg);">Explanation</h5>
+      <h5 id="explanation" style="color: var(--contrast); font-size: 25px; font-weight: bolder; border-radius: 25px; background-color: var(--bg);">Explanation</h5>
 
       <div class="close" onclick="closeel('wr'); lightup()">Light up Animation</div>
       <div class="close" onclick="closeel('wr');">Close</div>
@@ -158,7 +159,7 @@ <h3 style="margin-bottom: 0px; font-size: 25px;">Tree type</h3>
       <h1 style='font-size: 25px; margin: 10px;'>How to use</h1>
       <h5 style='font-size: 15px; margin: 10px;'>1. Use the left/right buttons to add nodes and delete button to remove nodes.</h5>
       <h5 style='font-size: 15px; margin: 10px;'>2. Build a binary tree that meets the specifications of the prompt.</h5>
-      <h5 style='font-size: 15px; margin: 10px;'>3. Click "check" to verify answer.</h5>
+      <h5 style='font-size: 15px; margin: 10px;'>3. Click "Check" to verify answer.</h5>
       <h5 style='font-size: 15px; margin: 10px;'>4. Click "Light-up animation" to see a light up animation of traversal</h5>
       <h5 style='font-size: 15px; margin: 10px;'>5. Click "Share Tree" share your tree with someone else</h5>
       <div class="close" onclick="closeinstructions(); closescreen();">Close</div>

index.html

@@ -104,10 +104,10 @@ <h1 style="margin-bottom: 0px; font-size: 25px;">Generate random tree</h1>
 
       <h3 style="margin-bottom: 0px; font-size: 25px;">Max number of levels</h3>
       <select class='guess' name="numnodes" id="numnodes" onchange="initnums();">
-        <option value=1>1</option>
         <option value=2>2</option>
         <option value=3>3</option>
         <option value=4>4</option>
+        <option value=5>5</option>
       </select>
 
       <h3 style="margin-bottom: 0px; font-size: 25px;">Tree type</h3>

js/bst.js

@@ -475,7 +475,7 @@ function reversearr(arr){
 function genbst(){
     // suppose u have an arr
     //let arr = [1,7,9,15,20,23,32,45,55,62,64,75,88,99];
-    let arr = genlist(document.getElementById('numnodes').value);
+    let arr = genlist(document.getElementById('numnodes').value-1);
 
     console.log('arr before ',arr);
     // arr = reversearr(arr);
@@ -876,7 +876,7 @@ function getrandtree(){
 
 function addlevel75(root, level){
 
-    if (level >= document.getElementById('numnodes').value-1){
+    if (level >= document.getElementById('numnodes').value-2){
         return;
     }
     let newnode;
@@ -979,26 +979,29 @@ function forcedark(){
 
 }
 
+// toggle the angle of the connectors
 function toggleangle(override){
     var r = document.querySelector(':root');
 
+    // see the elapsed time since toggle was last clicked
     let endtime = new Date();
     var timediff = endtime - lasttoggle; 
     lasttoggle = endtime;
 
+    // prevent a double click of this
     if (timediff < 333 && !override){
-        console.log('returned');
+        // console.log('returned');
         return;
     }
 
     if (angle == 'cornered'){
-        // make light
+        // make curved
         angle = 'curved';
         localStorage.setItem('btangle','curved');
         document.getElementById('lines').textContent = "Lines: (Curved)";
         r.style.setProperty('--br', '25px');
     } else {
-        // make dark
+        // make cornered
         angle = 'cornered';
         localStorage.setItem('btangle','cornered');
         document.getElementById('lines').textContent = "Lines: (Cornered)";
@@ -1007,7 +1010,6 @@ function toggleangle(override){
 }
 
 
-
 function preorderwithnullpointers(node){
     if (node == null){
         return "NULL";

js/exercise.js

@@ -402,6 +402,7 @@ function toggletheme(override){
         r.style.setProperty('--contrast', 'black');
         r.style.setProperty('--main', '#0d6efd');
         r.style.setProperty('--slight', 'rgb(220,220,220)');
+        r.style.setProperty('--bgslight', 'rgba(255,255,255,0.6);');
     } else {
         // make dark
         theme = 'dark';
@@ -411,6 +412,7 @@ function toggletheme(override){
         r.style.setProperty('--contrast', 'white');
         r.style.setProperty('--main', '#0d6efd');
         r.style.setProperty('--slight', 'rgb(40, 40, 40)');
+        r.style.setProperty('--bgslight', 'rgba(0,0,0,0.6);');
     }
 }
 
@@ -510,7 +512,9 @@ function drawspaces(leftmargin,arr){
 
     thedisp.innerHTML = ""; // reset
 
-    if (0 < setarray.length && arr[0].toUpperCase() == setarray[0]){
+    if (spaceon <= 0){
+        clr = "var(--bg)";
+    } else if (0 < setarray.length && String(arr[0]).toUpperCase() == setarray[0]){
         clr = "rgb(0,255,0)";
     } else {
         clr = "red";
@@ -523,7 +527,7 @@ function drawspaces(leftmargin,arr){
         let clr;
         if (spaceon <= i){
             clr = "var(--bg)";
-        } else if (i < setarray.length && arr[i].toUpperCase() == setarray[i]){
+        } else if (i < setarray.length && String(arr[i]).toUpperCase() == setarray[i]){
             clr = "rgb(0,255,0)";
         } else {
             clr = "red";
@@ -837,9 +841,7 @@ function openscreen(){
     let el = document.getElementById("screen");
     el.style.display = "block";
     el.style.opacity = 0.4;
-
-    let res = document.getElementById("res");
-    res.style.opacity = 0.4;
+
     stayingup = true;
 }
 
@@ -1152,6 +1154,32 @@ function verifyexercise(){
     }
 }
 
+function resettree(){
+    localStorage.removeItem('binarytreestorage');
+    root = new treenode('root',null,null);
+
+
+    leftbuttons = [];
+    delnodes = [];
+
+    // i know having a set capacity generally isnt good but im confident this will be more than enough
+    // could be increased but may impact performance if there are a bunch of not used really
+    nodearr = [root,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
+
+    disabled = false;
+
+    // intialx
+    x = 50;
+    y = 0;
+
+    rnzindex = 10;
+    stayingup = false;
+
+
+
+    redrawtree();
+}
+
 
 
 
@@ -1215,7 +1243,7 @@ redrawtree();
 
 // update the count without interfereing with the stuff
 (async () => {
-    fetch((`https://skparabapi-1-x8164494.deta.app/increment?key=binarytree`))
+    fetch((`https://skparabapi-1-x8164494.deta.app/increment?key=exercise`))
       .then(response => {
           return response.json();
       })

js/index.js

@@ -841,7 +841,7 @@ function getrandtree(){
 
 function addlevel75(root, level){
 
-    if (level >= document.getElementById('numnodes').value-1){
+    if (level >= document.getElementById('numnodes').value-2){
         return;
     }
     let newnode;