BSIT Course Selector v2

An example of using JSON and dynamic creation of controls

by Ryan Brown

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h1>BSIT QUICK CLASS PLANNER
<span class="tooltiptext" >
  This quick planner is designed to allow students to easily and quickly determine what courses they 
  need for their program of study.
  <br> &#8592;&#8592;&#8592;&#8592;&#8592;&#8592;&#8592; Drag courses left if you have taken them. 
  <br/>Drag courses courses right to create a schedule. &#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;
  <br/> To print results - click <b style="color:red">What Can I Take</b> and click the Print button.
</span></h1>

<div style="clear:left;">
  <div class="greenbox">
    Green courses are Draggable indicating pre-requisites are met
    <span class="tooltiptext">If you have met the pre-requisite by taking 
an equivalent class you should drag the associated class into the 
Completed column.</span>
  </div>
  <div class="yellowbox">
    Yellow courses mean pre-requisites are not met.
  </div>
    <div class="redbox">
    Red courses means class is no longer available because specialization has been decided.
  </div>
  <div class="whitebox">
    <input type="button" value="What Can I Take?" id="allAvailable" class="button" />
    <input type="button" value="Undo" id = "undo" class="button" />
  </div>
</div>
<br/>
<br/>
<div style="clear:left">
  <table>
    <tr>
      <th>Drag Completed Courses Here</th>
      <th>All Courses</th>
      <th>Drag Semester Plan</th>

    </tr>
    <tr>
      <td valign="top">
        <div id="completed" class="completed">
          <div class="hours">

            <div id="CompletedHours"> Hours Completed:</div>
            <div id="ProgramHours">Program Hours (48 required): </div>
          </div>
          <br/>
          <div id="completedclasses" class="completedclasses">
          <b>Completed Courses</b><br/>
          </div>
          
          <br/>

        </div>
      </td>
      <td valign="top">
        <div id="all">

       ...

CSS

h1 {
  float: left;
  position: relative;
  right: -10%;
  text-align: left;
  margin: 1em 0 0.5em 0;
  color: #343434;
  font-weight: normal;
  font-family: 'Ultra', sans-serif;
  font-size: 36px;
  line-height: 42px;
  text-shadow: 0 2px white, 0 3px #777;
}

h1 .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 12px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;
  text-shadow: none;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 1s;
}

.button,
.ui-button {
  background-color: lightblue;
  /* Green */
  border: 1;
  border-radius: 10px;
  color: black;
  padding: 5px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button:hover,
.ui-button:hover {
  background-color: #4CAF50;
  /* Green */
  border-radius: 10px;
  border: none;
  color: black;
  padding: 5px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.classAvailable {
  border-radius: 15px;
  border: solid;
  background: lightgreen;
  padding: 20px;
  width: 300px;
  height: 20px;
}

.classAvailable:hover {
  border-radius: 15px;
  border: double;
  background: green;
  padding: 20px;
  width: 300px;
  height: 20px;
}

.greenbox {
  border-radius: 15px;
  border: solid;
  background: lightgreen;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left;
}

.yellowbox {
  border-radius: 15px;
  border: solid;
  background: lightyellow;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left
}
.redbox {
  border-radius: 15px;
  border: solid;
  background: #ff3333;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left
}

.whitebox {
  border-radius: 15px;
  border: solid;
  background: lightblue;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left;
  text-align:...

JavaScript

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

  //createListAvailable();
});

// taken - has the student taken the course - true/false
// PRMet - Are the pre-requisites met - true/false
// required - Is completion of course required for graduation true/false
// semester - indicates semester course is taken -1 for previous, 1-6 for planned
// program - Is the course  part of the program 48 hours
// offered - Text of proposed semester offerings 
// details - Details of the course - displays on hover

/* var courselist = [{
  "Course": "MAC1105",
  "Name": "College Algebra",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Students should take MAC1105 as a pre-requisite for admission into the program"
}, {
  "Course": "CO1010A",
  "Name": "Coreq1",
  "PreReq": ["MAC1105"],
  	"PRMet": false,
  "CoReq": ["CO1010B"],
		"COMet": false,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Taken as a pre-requisite to the MAC2311 Calculus requirement"
},{
  "Course": "CO1010B",
  "Name": "Coreq2",

  "CoReq": ["CO1010A"],
		"COMet": false,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Trig is a co req to this class"
}];
*/


var courselist = [{

  "Course": "COP1000",
  "Name": "Principles of Computer Programming",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "This is a fundemental major pre-requisite."
  },

{
  "Course": "CGS2100",
  "Name": "Microcomputer Applications",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "This is a fundemental major pre-requisite."
  },
{
  "Course": "MAD2104",
  "Name": "Discrete Mathematics",
  "PRMet": true,
  "taken":...