BSET Auto-Advisor

This is a little automatic advising tool to help BSET students see the pre-requisite relationships

by wooozy

HTML

<h1>
Welcome to your Photography Course Advisor
</h1>


<input type="checkbox" id="MGF2106" onclick="CC();" /> 
<label for='MGF2106'>Survey in Mathematics</label><br/>

<input type="checkbox" id="ENC1101" onclick="CC();" /> 
<label for='ENC1101'>English 1</label><br/>
<input type="checkbox" id="PGY1115" onclick="CC();" disabled />
<label for='PGY1115'>Color Theory and Processes</label><br/>
<input type="checkbox" id="PGY2000" onclick="CC();" disabled /> 
<label for='PGY2000'>History and Aesthetics Photography</label><br/>
<input type="checkbox" id="PGY2107" onclick="CC();" disabled> 
<label for='PGY2107'>Commercial/Illustration Photography</label><br/>
<input type="checkbox" id="PGY2210" onclick="CC();" disabled>
<label for='PGY2210'>Professional Studio Portraiture</label><br/>
<input type="checkbox" id="PGY2650" onclick="CC();" disabled>
<label for='PGY2650'>Editoral Photography</label><br/>
<input type="checkbox" id="PGY2750" onclick="CC();" disabled>
<label for='PGY2750'>Introduction to Video Production</label><br/>

<input type="checkbox" id="SPC2608" onclick="CC();" disabled> 
<label for='SPC2608'>Oral Communications/ Research/ Presentation Skills</label><br/>
<input type="checkbox" id="PGY2210" onclick="CC();" disabled> 
<label for='PGY2210'>Professional Studio Portraiture</label><br/>
<input type="checkbox" id="PGY2273" onclick="CC();" disabled> <label for='PGY2273'>Professional Photographic Business Practices</label><br/>
<input type="checkbox" id="ARH2050" onclick="CC();" disabled> 
<label for='ARH2050'>Survey of Art History</label><br/>
<input type="checkbox" id="DEP2004" onclick="CC();" disabled> 
<label for='DEP2004'>Developmental Psychology</label><br/>

<input type="checkbox" id="SYG2000" onclick="CC();" disabled> 
<label for='SYG2000'>Introduction to Sociology</label><br/>
<input type="checkbox" id="PSY1012" onclick="CC();" disabled> 
<label for='PSY1012'>General Psychology</label><br/>
<input type="checkbox" id="PGY2107" onclick="CC();" disabled>...

CSS

input:enabled + label { 
  margin: 20px auto;
  background:rgb(270,360,10);
  color:#000;
}

input:disabled + label{
  opacity:0.5;
  background:rgb(100,200,100);
  color:#000;
}
input[type="checkbox"]:checked + label {
  background:rgb(157,330,260);
  font-weight:bold;
  color:#000;
}

JavaScript

// The first course is course to take, followed
// by an array of pre-requisites

var courses = [
 ['PGY1115', ['ENC1101']],
 ['MGF2106', ['ENC1101']],
 ['PGY2000', ['MGF2106','ENC1101']],
 ['PGY2107', ['PGY2000']],
 ['PGY2650', ['MGF2106']],
 ['PGY2750', ['PGY2650']],
 ['SPC2608', ['ENC1101']],
 ['PGY2273', ['PGY2210']],
 ['PGY2210', ['ENC1101']],
 ['ARH2050', ['ENC1101', 'MGF2106']],
 ['DEP2004', ['ENC1101']],
 ['SYG2000', ['PGY2210']], 
 ['PGY2107', ['PGY2273']],
 ['PSY2107', ['ENC1101']],
 ['PSY1101', ['ENC1101', 'MGF2106']],
 ['PGY2806', ['PGY2273']]
]
  
function pr(item, index) {
   // item[0] is the course in question
   var checked = true;
   
   // item[1]  is the array of pre-requisites
   var elementId = item[1][0];
   
   // Goes through the list of pre-requisites
   // to see if each one is met if any are not met
   // then pre-requisites are not met
   for (var i=0; i<item[1].length; i++){
     elementId = item[1][i];  
     if (!isChecked(elementId)) {
       checked=false;
     }
   }  
   // and if all are met - enables taking courses
   if (checked) Enable(item[0]) 
   else Disable(item[0]);
}

function CC()
{
  courses.forEach(pr);
}

function isChecked(item) {
  return (document.getElementById(item).checked == true);
}

function Enable(selection){
 document.getElementById(selection).disabled = false;
}

function Disable(selection){
 document.getElementById(selection).disabled = true;
}