A11

COP4813

by Alan Harris

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h1>Class Planner BSIT</h1>

<p>
  The yellow boxes are courses with prereqs met that you can drag/drop. The grey boxes are courses that do not have prereqs met and cannot be dragged and dropped.
</p>

<div style="clear:left;">

  <div class="whitebox">

    <input type="button" value="Undo" id="undo" class="button" />
  </div>

  <br/>
  <br/>
  <div style="clear:left">
    <table>
      <tr>
        <th>All Courses</th>
        <th>Drag Completed Courses Here</th>
        <th>Drag to Make Schedule</th>

      </tr>
      <tr>

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

          </div>
        </td>


        <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="available"> </div>
          <div id="semester1" class="semester">
            Spring 2019<br><br>
            <div id="semester1hours" class="hours">
              Semester Hours: 0

              <br>
            </div>
            <br>
            <div id="semesterclasses1" class="semesterclasses">
            </div>

            <br/>
          </div>
          <br/>
          <div id="semester2" class="semester">
            Fall 2020<br><br>

            <div id="semester2hours" class="hours">
              Semester Hours: 0
              <br>
            </div>
            <div id="semesterclasses2" class="semesterclasses">
            </div>

            <br/>
          </div>
          <br/>
          <div id="semester3" class="semester">
            Summer...

CSS

body {
  background-color: #006666;
}

p {
  color: white;
  font-size: 19px;
}

h1 {
  float: center;
  position: relative;
  text-align: center;
  margin: 1em 0 0.5em 0;
  color: black;
  font-size: 42px;
}

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:focus {
  border: 1px solid black;
  padding: 4px 4px;
}

#undo {
  background-color: grey;
  border: 1px solid black;
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  margin: 4px 2px;
}

#undo:hover {
  background-color: black;
}

.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: lightgrey;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left
}

.ui-dialog-titlebar {
  position: relative;
  background-color: lightblue;
  border-radius: 15px;
  border: solid;
}

.ui-dialog-buttonset {
  position: relative;
  background-color: lightblue;
  border-radius: 15px;
  border: solid;
}

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

.semester {
  border-radius: 15px;
  border: solid;
  background: grey;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.completed {
  border-radius: 15px;
  border: solid;
  background: grey;
  padding:...

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,
 ...