Advisor

BSN(from scratch)

by Alan Harris

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col">
    <h1>
    Bachelor's of Nursing Advisor
    </h1>
    <br>
      <button id="instruction">
      Instructions
      </button>
      <br><br>
      <div id="instructPrint">
      
      </div>
    </div>
  </div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class=".d none col-sm-4">
Available courses: <br><br>
  <div id="courses"></div>
  
</div>
<div class="col-4" id="completeCourses">

Courses completed: <br><br>
<div id=completed>

</div>
</div>
<div class="col-4" id="sp19">Spring 2019</div>



</div>
</div>

<div class="container-fluid">
<div class="row justify-content-end">
<div class=".d-none"></div>

<div class="col-4" id="su19">

Summer 2019



</div>
<div class="col-4" id="fa19">



Fall 2019


</div>
</div>
</div>

<div class="container-fluid">
<div class="row justify-content-end">
<div class=".d-none"></div>
<div class="col-4" id="sp20">




Spring 2020


</div>
<div class="col-4" id="su20">



Summer 2020

</div>

</div>
</div>


<div class="container-fluid">
<div class="row justify-content-end">
<div class=".d-none"></div>
<div class="col-4 col-sm-4" id="fa20">Fall 2020</div>
<div class="col-4" id="sp21">Spring 2021</div>

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

CSS

.container-fluid { 
  margin-top: 20px;
}
.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 1s;
}

body {
background:#f8f9fa;
}

h1 {
  text-align:center;
}

.col-4 {
  border: solid 1px #6c757d;
  padding: 10px;
}



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

.classAvailable {
  border: solid;
  background: lightgreen;
  width: 180px;
  height: 60px;
}

.classAvailable:hover {
  border: double;
  background: green;
  
}

.classNotAvailable {
  border: solid;
  background: lightgrey;
  width: 180px;
  height: 60px;
}

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

body {
  background-color:lightgrey;
}

JavaScript

$(document).ready(function(){
	showCourses();
  setDropTargets();
});


$('#instruction').click(function () {
	document.getElementById('instructPrint').innerHTML = "The green boxes are draggable to the desired courses completed or semester column. The grey boxes are courses with missing pre-reqs."
});




var startdrag;

var semesters = [
  [],  // semesters[0] - previously taken courses
  [],  // semesters[1] - index of courses taken semester 1 
  [],  // semesters[2] - same for semester 2
  [],
  [],
  []
]; // Array of array of courses taken for each semester


var programCourses = [{
	"courseID" : "NUR3065",
  "courseName" : "Health Assessment",
  "preReq" : "[NUR3125]",
  "hours" : 3,
  "semester" : 0,
  "preReqMet" : false,
  "taken" : false,
  "required" : true,
  "offered" : "Fall, Spring",
  "description" : "This course prepares students to complete a holistic assessment on individuals across the lifespan with a focus on health promotion and disease prevention. Emphasis is on risk assessment, health history and physical examination, psychosocial, cultural, developmental and functional assessment. Focus will be placed on the national goals and objectives of Healthy People 2020."
	},
  {
  "courseID" : "NUR3125",
  "courseName" : "Pathophysiology",
  "preReq" : "[BSC1085C, BSC1086C, MCB1010C]",
  "coReq" : "[CHM1025C]", //also CHM1045C
  "hours" : 3,
  "semester" : 0,
  "preReqMet" : false,
  "taken" : false,
  "required" : true,
  "offered" : "Fall, Spring",
  "description" : "This course examines the cellular adaptations in organ systems as it relates to the manifestation of disease and alteration in human function. The course covers advanced study of pathophysiology and symptomology across the lifespan."
  },
  {
  "courseID" : "NUR3145",
  "courseName" : "Pharmacology",
  "preReq" : "[MGF2106, NUR3065]", //Also MAC1105 to replace MGF2106
  "coReq" : "[STA2023]",
  "semester" : 0,
  "hours" : 2,
  "preReqMet" : false,
  "taken" : false,
  "required" :...