function logItType(output) {
  console.log(typeof output, ";", output);
}

// define a function to hold data for a Person
function Person(name, per1, per2, per3, per4, per5) {
  this.name = name;
  this.per1 = per1;
  this.per2 = per2;
  this.per3 = per3;
  this.per4 = per4;
  this.per5 = per5;
  this.role = "";
}

// define a setter for role in Person data
Person.prototype.setRole = function(role) {
  this.role = role;
}

// define a JSON conversion "method" associated with Person
Person.prototype.toJSON = function() {
  const obj = {name: this.name, per1: this.per1, per2: this.per2, per3: this.per3, per4: this.per4, per5: this.per5, role: this.role};
  const json = JSON.stringify(obj);
  return json;
}

// make a new Person and assign to variable teacher
var teacher = new Person("Mrs. C", "Chemistry 1", "Chemistry 2", "Ap Chemistry", "Physics 1", "Physics 2");  // object type is easy to work with in JavaScript

// output of Object and JSON/string associated with Teacher
teacher.setRole("Teacher");   // set the role

// define a student Array of Person(s)
var freshmen = [ 
  new Person("Jaden", "AP Calculus AB", "Spanish 3", "World History 1", "AP Chemistry", "AP Computer Science Principles"),
];

var sophomores = [ 
  new Person("Ethan", "AP Statistics", "Civics", "AP Government", "AP English Language", "Offroll"),
];

var juniors = [ 
  new Person("Orlando", "AP Calc BC", "Ceramics", "AP US History", "AP Biology", "AP Computer Science A"),
];

var seniors = [ 
  new Person("Colin", "Pre-Calculus", "AP Art", "APEC", "Phyiscs", "APMT"),
];

// define a classroom and build Classroom objects and json
function Classroom(teacher, freshmen, sophomores, juniors, seniors){ // 1 teacher, many student
  // start Classroom with Teacher
  teacher.setRole("Teacher");
  this.teacher = teacher;
  this.classroom = [teacher];
  // add each Student to Classroom
  this.freshmen = freshmen;
  this.freshmen.forEach(freshman => { freshman.setRole("Freshman"); this.classroom.push(freshman); });

  this.sophomores = sophomores;
  this.sophomores.forEach(sophomore => { sophomore.setRole("Sophomore"); this.classroom.push(sophomore); });

  this.juniors = juniors;
  this.juniors.forEach(junior => { junior.setRole("Junior"); this.classroom.push(junior); });

  this.seniors = seniors;
  this.seniors.forEach(senior => { senior.setRole("Senior"); this.classroom.push(senior); });
  // build json/string format of Classroom
  this.json = [];
  this.classroom.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined teacher and students
compsci = new Classroom(teacher, freshmen, sophomores, juniors, seniors);

values = ["name", "role", "per1", "per2", "per3", "per4", "per5"]
// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "border: 5px solid blue;"
  );


  // HTML Body of Table is build as a series of concatenations (+=)
  var body = "";
  // Heading for Array Columns
  body += "<tr>";
  for (let i = 0; i < values.length; i++) {
    body += "<th>" + values[i] + "</th>";
  }
  body += "</tr>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row of compsci.classroom) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + row.name + "</td>";
    body += "<td>" + row.role + "</td>";
    body += "<td>" + row.per1 + "</td>";
    body += "<td>" + row.per2 + "</td>";
    body += "<td>" + row.per3 + "</td>";
    body += "<td>" + row.per4 + "</td>";
    body += "<td>" + row.per5 + "</td>";

    // tr to end line
    body += "<tr>";
  }

   // Build and HTML fragment of div, table, table body
  return (
    "<div style='" + style + "'>" +
      "<table>" +
        body +
      "</table>" +
    "</div>"
  );

};

// IJavaScript HTML processor receive parameter of defined HTML fragment
$$.html(compsci._toHtml());