BSET -EET Course Selector

An example of using JSON and dynamic creation of controls

by Ron Eaglin

HTML

<h1>
  BSET-EET Quick Class Advisor
</h1>
<p>
This quick advisor allows for quick planning of course schedules. <br/><br/>To use the planner first check all courses that you 
have previously completed. If you have taken a course equivalent to a specific you should check that course. 
Once you have completed checking all courses you have taken you can plan course directly by clicking on a course 
in any semester or use the automated tools to plan a draft schedule. You can create a printable schedule after completing
your plans. This tool is meant to be a preliminary tool to help students in planning and students should still seek regular advising.
</p>
<table>
<tr>
  <td><input type="button" value="Fill Out Form and Click for Printable Schedule" id="print"  class="printbutton"/><br/><br/>
  <input type="button" value="Create a Part Time Schedule (~6 hours/term)" id="hour_6"  class="printbutton"/><br/><br/>
  <input type="button" value="Create a Full Time Schedule (>12 hours/term)" id="hour_12"  class="printbutton"/>
</td>
<td style="padding: 10px;">
  <div id="output">
  
  </div>
</td>
</tr><tr></tr></table>
<br/>If you have taken a class - click the course in the first column. To plan a class - click the semester
<br/>
<div id="message">

</div>
<table border="1" id="ctable">
  <tbody>
<tr style="font-size: 30px; background-color:#99ff99;" >
  <td>Click If Courses Taken</td>
  <td colspan="6">Click to Schedule Class in Semester</td>
</tr>
  </tbody>
</table>
<div id="box"></div>
For best results use Chrome Browser, tested in Firefox OK, does not work in Edge browser

CSS

th {
  width: 30px;
  font-size: 22px;
}

.printbutton {
  font-size: 22px;
  background-color: lightblue;
  border-radius: 12px;
}

.semester_container .tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.semester_container:hover .tooltiptext {
  visibility: visible;
}

.grouprow {
  font-size: 30px;
  position: center;
  margin-left: 100px;
  background-color: lightblue;
}
.grouprow {
  font-size: 30px;
  position: center;
  margin-left: 100px;
  background-color: lightblue;
}

.hoverhide {
  visibility: hidden;
}

.taken_container:hover>.hoverhide {
  visibility: visible;
}

.taken_container {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.semester_container {
  display: block;
  position: relative;
  width: 20px;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.taken_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.semester_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #99ff99;
}

.checkmark2 {
  position: absolute;
  left: 15px;
  top: 0;
  height: 20px;
  width: 35px;
  background-color: #99ff99;
}

/* On mouse-over, add a grey background color */

.taken_container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background...

JavaScript

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready

  //createListAll();
  createListAvailable();
  checkAll();
  setAllCheckboxes();
});

// The code starts with the concepts of Course Groups. These are logical groupings of 
// the courses that make it easy to organize the course listings. Note that they have
// Title - Shows up in the first columnas a title for the group
// Courses - Array of courses using the same text as courselist - Course
var semesters = ["Fall 2019", "Spring 2020", "Summer 2020", "Fall 2020", "Spring 2021", "Summer 2021"]

var coursegroups = [{
    "Title": "Basic Pre-requisites",
    "Courses": ["COP1000", "ENC1101"],
    "Hours": 9
  }, {
    "Title": "Prerequisite -  Core Mathematics Requirements - Complete all",
    "Courses": ["MAC1105", "MAC1114", "STA2023"],
    "Hours": 9
  }, {
    "Title": "Complete Technical or Engineering Math Sequence",
    "Courses": [],
    "Note" : "Engineering Math Sequence used for Graduate Programs",
    "Hours": 0
  },{
    "Title": "Prerequisite - Technical Math Option - Complete all",
    "Courses": ["EGN2045", "EGN3046"],
    "Hours": 7
  }, {
    "Title": "Prerequisite - Engineering Math Option (complete all)",
    "Courses": ["MAC1140", "MAC2311", "MAC2312", "MAC2313", "MAP2302"],
    "Hours": 15
  }, {
    "Title": "Prerequisite - Physics Requirement - Pick one",
    "Courses": ["PHY2048", "PHY1053"],
    "Hours": 3
  }, {
    "Title": "Programming Requirement - Pick one",
    "Courses": ["COP2800", "COP2360", "EGN3214"],
    "Hours": 3
  },{
    "Title": "Program Specific Pre-requisite Courses",
    "Courses": ["EET1011","EET3085", "EET1021", "EET1141", "CET3116"]
  },{
    "Title": "Program Course Requirements Complete all",
    "Courses": ["ETS3543", "ETI3116", "ETP4240", "EET3716", "CET3198",
      "EGN3613", "EET4158", "EET4732", "ETI4448", "ETG4950"],
    "Hours": 42
  }, {
    "Title": "Mechanics Course - Pick one",
    "Courses": ["ETG3541",...