BSIT Course Selector v2

An example of using JSON and dynamic creation of controls

by ClarenceDowns

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="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">

        </div>
      </td>
      <td valign="top">
        <div id="available"> </div>
        <div id="semester1" class="semester">
 ...

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
}

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

.whatcanitake {
  border-radius: 15px;
  border: solid;
  background: white;
  padding: 20px;
  height: 400px;
  width: 600px;
  text-align:...

JavaScript

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

  //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,
  "offered": "Spring, Fall, Summer",
  "details": "Students should take MAC1105 as a pre-requisite for admission into the program"
}, {
  "Course": "MAC1114",
  "Name": "Trigonometry",
  "PreReq": ["MAC1105"],
  "PRMet": false,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "offered": "Spring, Fall, Summer",
  "details": "Taken as a pre-requisite to the MAC2311 Calculus requirement"
}, {
  "Course": "MAC1140",
  "Name": "Pre-Calculus",
  "PreReq": ["MAC1105"],
  "PRMet": false,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "offered": "Spring, Fall, Summer",
  "details": "Taken as a pre-requisite to the MAC2311 Calculus requirement"
}, {
  "Course": "MAC2311",
  "Name": "Calculus",
  "PreReq": ["MAC1140", "MAC1114"],
  "PRMet": false,
  "taken": false,
  "semester": 0,
  "hours": 4,
  "required": true,
  "program": false,
  "offered": "Spring, Fall, Summer",
  "details": "MAC2311 C or higher is a graduation requirement, can also sub EGN2045"
}, {
  "Course": "STA2023",
  "Name": "Statistics",
  "PreReq": ["MAC1105"],
  "PRMet": false,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
 ...