BSIT Course Selector

An example of using JSON and dynamic creation of controls

by Ebony McCoy

HTML

<h1>
  BSIT 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;
}

.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 */

.taken_container input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden...

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
// Hours - Total Number of hours in a category 
var semesters = ["Fall 2019", "Spring 2020", "Summer 2020", "Fall 2020", "Spring 2021", "Summer 2021"]

var coursegroups = [{
  "Title": "General Ed Prerequisites",
  "Courses": ["ENC1101"],
  "Hours": 3
}, {
  "Title": "Math Prerequisites",
  "Courses": ["MAC1105", "MAC1114", "MAC1140", "MAC2311", "STA2023"],
  "Hours" : 16
}, {
  "Title": "Technical Prerequisites",
  "Courses": ["COP1000", "COP2800", "CTS3348", "CET3116", "EET3086", "COT3100"],
  "Hours" : 19
}, {
  "Title": "Required Courses (42 hours)",
  "Courses": ["GEB3213", "CIS4250", "CEN3722", "COP3530", "COP4708",
    "COP4610", "CIS4360", "CNT3104", "CNT4007", "CNT4703",
    "CDA4101", "CEN4801", "CEN4010", "COP4813", "CIS4510" ],
  "Hours" : 42
}, {
  "Title": "Web Systems (6 hours)",
  "Courses": ["COP4709", "COP4834"],
  "Hours" : 6
}, {
  "Title": "Cybersecurity (6 hours)",
  "Courses": ["CET4860", "CET4861", "CET4862", "CET4884"],
  "Hours" : 6
}]

// This is a global array of objects courselist - it contains an object that has each 
// of the courses and informatin about the courses
// Option JSON Fields are PreReq and CoReq - both of which are arrays of the PreRequisites and CoRequeisites

var courselist = [{
  "Course": "ENC1101",
  "Name": "Composition",
  "Taken": 99,
  "Hours": 3,
  "Offering": [1, 2, 3, 4, 5, 6]
}, {
  "Course": "MAC1105",
  "Name": "College Algebra",
  "Taken": 99,
  "Hours": 3,
  "Offering": [1, 2, 3, 4, 5, 6]
}, {
  "Course": "MAC1114",
 ...