BSIT Course Selector

An example of using JSON and dynamic creation of controls

by Ron Eaglin

HTML

<h1>
BSIT Quick Class Advisor 
</h1>
<br/>
If you have taken a class in this list - or an equivalent to the course, then click the checkbox. Available courses will automatically be enabled.
<br/>
<div id="message">

</div>
<table>
<tr><th>All Courses</th><th>Available</th><th>Completed</th><th>Needed</th></tr>
<tr>
<td>
<div id = "all">

</div>  
</td>
<td valign="top">
  <div id="available">  </div>
</td>
<td valign="top">
  <div id="taken"></div>

</td></tr>
</table>
<div id="box"></div>

CSS

input:enabled + label {
  margin: 20px auto;
  background: rgb(255, 255, 0);
}

input:disabled + label {
  opacity: 0.5;
  background: rgb(255, 0, 0);
}

input[type="checkbox"]:checked + label {
  background: rgb(153, 204, 102);
  font-weight: bold;
}

JavaScript

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

  createListAll();
  createListAvailable();
});

var courselist = [{
  "Course": "MAC1105",
  "Name": "College Algebra",
  "PRMet" : "true",
  "taken" : "false"
}, {
  "Course": "MAC1114",
  "Name": "Trigonometry",
  "PreReq": ["MAC1105"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "MAC1140",
  "Name": "PreCalculus",
  "PreReq": ["MAC1105"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "MAC2311",
  "Name": "Calculus",
  "PreReq": ["MAC1140", "MAC1114"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "COT3100",
  "Name": "Discrete Analaysis",
  "PreReq": ["MAC1105"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "COP1000",
  "Name": "Principles of Programming",
  "PRMet" : "true",
  "taken" : "false"
}, {
  "Course": "COP2800",
  "Name": "Java Programming",
  "PreReq": ["COP1000"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "CTS3348",
  "Name": "Linux Administration",
  "PreReq": ["COP1000"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "CET3116",
  "Name": "Digital Technology",
  "PreReq": ["MAC1105"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "EET3086",
  "Name": "Electrical Circuits",
  "PreReq": [ "MAC1114"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "ENC1101",
  "Name": "Composition",
  "PRMet" : "true",
  "taken" : "false"
}, {
  "Course": "GEB3213",
  "Name": "Business Writing",
  "PreReq": ["ENC1101"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "CIS4250",
  "Name": "Ethics in Computing",
  "PreReq": ["GEB3213"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "COP3530",
  "Name": "Data Structures",
  "PreReq": ["COT3100", "COP2800"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "CEN3722",
  "Name": "Human Computer Interfaces",
  "PreReq": ["COP2800"],
  "PRMet" : "false",
  "taken" : "false"
}, {
  "Course": "COP4708",
...