General Education Course Selector

An example of using JSON and dynamic creation of controls

by Ron Eaglin

HTML

<h1>
  General Education 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
var semesters = ["Fall 2019", "Spring 2020", "Summer 2020", "Fall 2020", "Spring 2021", "Summer 2021"]

var coursegroups = [{
  "Title": "Communications -English",
  "Courses": ["ENC1101", "ENC1102", "SPC2608", "RTV2300"],
  "Hours": 9
}, {
  "Title": "Mathematics",
  "Courses": ["MAC1105", "MAC1114", "MAC1140", "MAC2233", "MAC2311", "STA2023",
  					  "MAC2312", "MAC2313", "MAP2302", "MGF2106", "MGF2107"],
  "Hours": 6
}, {
  "Title": "Biological Sciences",
  "Courses": ["BOT1010", "BSC1005", "BSC1010", "BSC1020", "BSC2930", "OCB2000",
  					  "BSC1085", "BSC1086"],
  "Hours": 3           
},{
  "Title": "Physical Sciences",
  "Courses": ["AST1002", "CHM1025", "CHM1045", "GLY2010", "MET2010", "OCE1001",
  					  "PHY1020", "PHY1053", "PHY2048", "PSC1121"],
  "Hours": 3
}, {
  "Title": "Humanities, Cultural and Aesthetic",
  "Courses": ["AML2050", "AML2060", "AML2600", "ENL2931", "LIT2040", "LIT2110",
    "LIT2120", "LIT2380", "LIT2602", "ARH2050", "ARH1000", "DAN1100", "HUM2210",
    "HUM2230", "MUH2110", "MUL1010", "MUL2380", "THE1000" ],
  "Hours": 3  
}, {
  "Title": "Behavioral and Social Sciences",
  "Courses": ["DEP2004", "PSY1012", "SYG2000"],
  "Hours": 3
}, {
  "Title": "Health and Wellness",
  "Courses": ["HLP1081", "HSC2400", "HUN1201", "HUN1270", "PET2084", "SLS2505"],
  "Hours": 3
}, {
  "Title": "Political, Economic, and Business",
  "Courses": ["CPO2001", "ECO2013", "ECO2023", "GEB2430", "INR2002", "PLA2880",
  	"POS2001", "POS2041", "POS2112"],
  "Hours": 3
}, {
 ...