2 năm trước cách đây · d1723f897e
--- a/routes.js
+++ b/routes.js
@@ -76,6 +76,6 @@ module.exports = function(app){
 
				     app.put("/tracker", tracker.update);
			
 
				 
			
 
				     //2u RUBRICS
			
 
				-    app.get("/2u/rubrics/:num", (req, res)=>res.sendFile(`${__dirname}/rubrics/mod${req.params.num}.html`));
			
 
				+    app.get("/2u/rubrics/:mod", (req, res)=>res.sendFile(`${__dirname}/rubrics/${req.params.mod}.html`));
			
 
				     app.get("/2u/style", (req, res)=>res.sendFile(`${__dirname}/rubrics/style.css`));
			
 
				 }
			
--- a/rubrics/fe1.html
+++ b/rubrics/fe1.html
@@ -0,0 +1,1325 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+    <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+    <title>Module 1 HTML & CSS Challenge Rubric</title>
			
 
				+    <style>
			
 
				+      *,
			
 
				+      *::before,
			
 
				+      *::after {
			
 
				+        box-sizing: border-box;
			
 
				+      }
			
 
				+
			
 
				+      html,
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+        line-height: 1.15;
			
 
				+        font-size: 100%;
			
 
				+        color: #fefefe;
			
 
				+        transition: all 0.4s;
			
 
				+      }
			
 
				+
			
 
				+      body {
			
 
				+        background-color: #fbfcfd;
			
 
				+        font-family: "Inter", sans-serif;
			
 
				+        color: #4a4a4a;
			
 
				+      }
			
 
				+
			
 
				+      #app.dark {
			
 
				+        background-color: #121212;
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      h1 {
			
 
				+        font-size: 1.9rem;
			
 
				+      }
			
 
				+
			
 
				+      h2 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      h3 {
			
 
				+        font-size: 1.2rem;
			
 
				+      }
			
 
				+
			
 
				+      h4 {
			
 
				+        font-size: 0.9rem;
			
 
				+      }
			
 
				+
			
 
				+      p,
			
 
				+      legend {
			
 
				+        font-size: 1.2rem;
			
 
				+      }
			
 
				+
			
 
				+      label {
			
 
				+        font-size: 0.9rem;
			
 
				+        line-height: 2;
			
 
				+      }
			
 
				+
			
 
				+      fieldset {
			
 
				+        border: none;
			
 
				+        padding: 0;
			
 
				+        margin-top: 0.9rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="radio"],
			
 
				+      input[type="checkbox"] {
			
 
				+        position: absolute !important;
			
 
				+        height: 1px;
			
 
				+        width: 1px;
			
 
				+        overflow: hidden;
			
 
				+        clip: rect(1px 1px 1px 1px);
			
 
				+        clip: rect(1px, 1px, 1px, 1px);
			
 
				+        white-space: nowrap;
			
 
				+      }
			
 
				+
			
 
				+      .select-lg,
			
 
				+      .select-lg option {
			
 
				+        font-family: "Inter", sans-serif;
			
 
				+        padding: 10px;
			
 
				+      }
			
 
				+
			
 
				+      .narrow {
			
 
				+        width: 800px;
			
 
				+      }
			
 
				+
			
 
				+      #app {
			
 
				+        padding: 3%;
			
 
				+        transition: all 0.4s;
			
 
				+      }
			
 
				+
			
 
				+      #app h1 {
			
 
				+        font-size: 1.9rem;
			
 
				+        font-weight: 700;
			
 
				+        line-height: 1.3;
			
 
				+      }
			
 
				+
			
 
				+      header {
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+        align-items: center;
			
 
				+      }
			
 
				+
			
 
				+      .switch-group {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        height: 2.25rem;
			
 
				+        width: 4.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"] + .toggle {
			
 
				+        height: 100%;
			
 
				+        width: 100%;
			
 
				+        background-color: #77a1db;
			
 
				+        border-radius: 1.9rem;
			
 
				+        cursor: pointer;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        padding: 0.35rem;
			
 
				+        cursor: pointer;
			
 
				+        overflow: hidden;
			
 
				+        background-position: 25% 125%;
			
 
				+        transition: all 0.5s;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:focus + .toggle {
			
 
				+        outline: rgb(59, 153, 252) auto 5px;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked + .toggle {
			
 
				+        background-color: rgb(85, 89, 204);
			
 
				+        background-size: 1rem;
			
 
				+        background-repeat: no-repeat;
			
 
				+        background-position: 25%;
			
 
				+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+        transition: all 0.5s;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"] + .toggle::after {
			
 
				+        content: "";
			
 
				+        display: block;
			
 
				+        height: 1.7rem;
			
 
				+        width: 1.7rem;
			
 
				+        border-radius: 50%;
			
 
				+        cursor: pointer;
			
 
				+        border: 4px solid #e1be64;
			
 
				+        background-color: #fddf74;
			
 
				+        transform: translateX(0rem);
			
 
				+        transition: all 0.5s;
			
 
				+        background-position: center bottom;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:hover + .toggle::after {
			
 
				+        transform: translateX(0rem) scale(1.1);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked + .toggle::after {
			
 
				+        border: 4px solid #ffffff;
			
 
				+        background-color: rgba(255, 255, 255, 0.4);
			
 
				+        transform: translateX(2.1rem);
			
 
				+        transition: all 0.5s;
			
 
				+        background-position: center;
			
 
				+        background-size: 60%;
			
 
				+        background-repeat: no-repeat;
			
 
				+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+        transform: translateX(2.1rem) scale(1.075);
			
 
				+      }
			
 
				+
			
 
				+      .card {
			
 
				+        background-color: #fff;
			
 
				+        border-radius: 6px;
			
 
				+        border-width: 0;
			
 
				+        box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+        font-size: 1.1rem;
			
 
				+        height: 100%;
			
 
				+        line-height: 1.8rem;
			
 
				+        padding: 1.5rem 2rem;
			
 
				+        width: 100%;
			
 
				+        margin-bottom: 1.9rem;
			
 
				+      }
			
 
				+
			
 
				+      .dark .card {
			
 
				+        background-color: #333333;
			
 
				+        box-shadow: none;
			
 
				+      }
			
 
				+
			
 
				+      .card h1,
			
 
				+      .card h2,
			
 
				+      .card h3,
			
 
				+      .card h4,
			
 
				+      .card h5,
			
 
				+      .card h6 {
			
 
				+        color: #4a4a4a;
			
 
				+      }
			
 
				+
			
 
				+      .dark .card h1,
			
 
				+      .dark .card h2,
			
 
				+      .dark .card h3,
			
 
				+      .dark .card h4,
			
 
				+      .dark .card h5,
			
 
				+      .dark .card h6 {
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      .card-header h2 {
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+
			
 
				+      .card .cat-score {
			
 
				+        margin-left: 20px;
			
 
				+        font-size: smaller;
			
 
				+      }
			
 
				+
			
 
				+      .card h3 {
			
 
				+        font-size: 1.2rem;
			
 
				+        font-weight: 700;
			
 
				+        line-height: 1.8em;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      .card p,
			
 
				+      .card label,
			
 
				+      .card legend {
			
 
				+        color: #7a869c;
			
 
				+        border-width: 0;
			
 
				+        display: block;
			
 
				+        font-size: 1.1rem;
			
 
				+        font-weight: 300;
			
 
				+        line-height: 1.8em;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      .card legend {
			
 
				+        display: flex;
			
 
				+        justify-content: flex-start;
			
 
				+        align-items: center;
			
 
				+      }
			
 
				+
			
 
				+      .card legend .score {
			
 
				+        font-size: smaller;
			
 
				+        margin-left: 20px;
			
 
				+        font-weight: 100;
			
 
				+        min-width: 5%;
			
 
				+      }
			
 
				+
			
 
				+      .dark .card p,
			
 
				+      .dark .card label,
			
 
				+      .dark .card legend {
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      .card label {
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+
			
 
				+      .card input[type="radio"] + label::before {
			
 
				+        content: "";
			
 
				+        height: 0.9rem;
			
 
				+        width: 0.9rem;
			
 
				+        margin-right: 0.7rem;
			
 
				+        border-radius: 50%;
			
 
				+        border: 1px solid rgb(74, 74, 74);
			
 
				+        background-color: #ffffff;
			
 
				+        display: inline-block;
			
 
				+        cursor: pointer;
			
 
				+        position: relative;
			
 
				+        top: 0.09rem;
			
 
				+      }
			
 
				+
			
 
				+      .dark .card input[type="radio"] + label::before {
			
 
				+        border: 1px solid #e2e2e2;
			
 
				+        background-color: inherit;
			
 
				+      }
			
 
				+
			
 
				+      .card input[type="radio"]:checked + label::before {
			
 
				+        background-color: rgb(47, 106, 189);
			
 
				+        border-color: rgb(47, 106, 189);
			
 
				+      }
			
 
				+
			
 
				+      .dark .card input[type="radio"]:checked + label::before {
			
 
				+        background-color: #d9d9d9;
			
 
				+        border-color: #d9d9d9;
			
 
				+      }
			
 
				+
			
 
				+      .card input[type="radio"]:checked + label {
			
 
				+        font-weight: bold;
			
 
				+        color: #4a4a4a;
			
 
				+      }
			
 
				+
			
 
				+      .dark input[type="radio"]:checked + label {
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      .card input[type="radio"]:focus + label::before {
			
 
				+        outline: rgb(59, 153, 252) auto 5px;
			
 
				+      }
			
 
				+
			
 
				+      .card legend {
			
 
				+        margin-bottom: 0.4rem;
			
 
				+      }
			
 
				+
			
 
				+      .totals {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      .totals + h2 {
			
 
				+        font-size: 1.9rem;
			
 
				+        margin-top: 0;
			
 
				+      }
			
 
				+
			
 
				+      .grade {
			
 
				+        font-size: 1.9rem;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        background-color: #fff;
			
 
				+        border: 1px solid #4a4a4a;
			
 
				+        border-radius: 6px;
			
 
				+        box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+        color: #4a4a4a;
			
 
				+        cursor: pointer;
			
 
				+        display: inline-block;
			
 
				+        font-size: 1rem;
			
 
				+        font-weight: 500;
			
 
				+        letter-spacing: 0.04em;
			
 
				+        line-height: 1.8em;
			
 
				+        margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+        outline: none;
			
 
				+        padding: 0.5rem 1.4rem;
			
 
				+        text-transform: uppercase;
			
 
				+        transition-delay: 0s;
			
 
				+        transition-duration: 0.25s;
			
 
				+        transition-property: all;
			
 
				+        transition-timing-function: ease-out;
			
 
				+        width: fit-content;
			
 
				+      }
			
 
				+
			
 
				+      .dark button {
			
 
				+        background: #d9d9d9;
			
 
				+        color: #121212;
			
 
				+        box-shadow: none;
			
 
				+      }
			
 
				+
			
 
				+      button:hover {
			
 
				+        border-color: #dbdbdb;
			
 
				+        color: #dbdbdb;
			
 
				+      }
			
 
				+
			
 
				+      .dark button:hover {
			
 
				+        color: #121212;
			
 
				+      }
			
 
				+
			
 
				+      button.copy {
			
 
				+        margin-left: 0.4rem;
			
 
				+        font-size: .8rem;
			
 
				+      }
			
 
				+
			
 
				+      button:focus {
			
 
				+        border-color: rgb(56, 56, 56);
			
 
				+        box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+        color: rgb(56, 56, 56);
			
 
				+      }
			
 
				+
			
 
				+      div[role="alert"] {
			
 
				+        color: #4a4a4a;
			
 
				+        font-size: 1.2rem;
			
 
				+        margin-bottom: 1.2rem;
			
 
				+      }
			
 
				+
			
 
				+      .dark div[role="alert"] {
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      .summary {
			
 
				+        font-size: 1.2rem;
			
 
				+        border: none;
			
 
				+        font-family: monospace;
			
 
				+        background-color: #d5d9de;
			
 
				+        padding: 0.9rem;
			
 
				+        border-radius: 6px;
			
 
				+        line-height: 1.5;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+
			
 
				+      .summary h2,
			
 
				+      .dark .summary h2 {
			
 
				+        font-size: 1.2rem;
			
 
				+        font-family: "Inter", sans-serif;
			
 
				+        margin-top: 35px;
			
 
				+        margin-bottom: 5px;
			
 
				+      }
			
 
				+
			
 
				+      .summary h2:first-of-type,
			
 
				+      .dark .summary h2:first-of-type {
			
 
				+        margin-top: 15px;
			
 
				+      }
			
 
				+
			
 
				+      .dark .summary {
			
 
				+        background: #6b6a6a;
			
 
				+        color: #e2e2e2;
			
 
				+      }
			
 
				+
			
 
				+      .summary pre,
			
 
				+      .dark .summary pre {
			
 
				+        white-space: pre-wrap;
			
 
				+        border-radius: 5px;
			
 
				+        padding: 15px;
			
 
				+        border: solid 2px rgba(0,0,0,.4);
			
 
				+      }
			
 
				+
			
 
				+      .summary pre:empty {
			
 
				+        display: none;
			
 
				+      }
			
 
				+
			
 
				+      .summary pre:empty + button {
			
 
				+        display: none;
			
 
				+      }
			
 
				+
			
 
				+      .d-none {
			
 
				+        display: none;
			
 
				+      }
			
 
				+
			
 
				+      @media (max-width: 450px) {
			
 
				+        .btn-container {
			
 
				+          text-align: center;
			
 
				+        }
			
 
				+
			
 
				+        button {
			
 
				+          width: 100%;
			
 
				+          margin: 0.5rem;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked + .toggle::after {
			
 
				+          transform: translateX(1.3rem);
			
 
				+          background-size: 50%;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+          transform: translateX(1.3rem) scale(1.1);
			
 
				+          background-size: 50%;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      @media (max-width: 515px) {
			
 
				+        input[type="checkbox"]:checked + .toggle::after {
			
 
				+          transform: translateX(1.7rem);
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+          transform: translateX(1.7rem) scale(1.1);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      @media (max-width: 460px) {
			
 
				+        input[type="checkbox"]:checked + .toggle::after {
			
 
				+          transform: translateX(1.4rem);
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+          transform: translateX(1.4rem) scale(1.1);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      @media (max-width: 400px) {
			
 
				+        #app h1 {
			
 
				+          font-size: 1.6rem;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked + .toggle::after {
			
 
				+          transform: translateX(1.3rem);
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+          transform: translateX(1.3rem) scale(1.1);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      @media (max-width: 340px) {
			
 
				+        input[type="checkbox"]:checked + .toggle::after {
			
 
				+          transform: translateX(0.9rem);
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover + .toggle::after {
			
 
				+          transform: translateX(0.9rem) scale(1.075);
			
 
				+        }
			
 
				+      }
			
 
				+    </style>
			
 
				+    <script>
			
 
				+      $(function () {
			
 
				+        let $select2 = $('.select2').select2({
			
 
				+          containerCssClass: "wrap"
			
 
				+        })
			
 
				+
			
 
				+        function triggerEvent(name, val) {
			
 
				+          let selected = $("select[name='" + name + "']")
			
 
				+          let change = new Event('change', { bubbles: true })
			
 
				+          selected[0].dispatchEvent(change)
			
 
				+        }
			
 
				+
			
 
				+        $('.select2').on('select2:select', function (e) {
			
 
				+          triggerEvent(e.target.name, e.target.value)
			
 
				+        });
			
 
				+      })
			
 
				+  </script>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script>
			
 
				+      (function(window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 1 HTML & CSS HW Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application utilizes semantic HTML (articles, sections, headers, etc)",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't utilize semantic HTML",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application's HTML elements follow logical structure independent of styling and positioning",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application HTML elements do not follow logical structure independent of styling and positioning",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application's icon and image elements all have accessible `alt` attributes",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application's icon and image image elements do not have accessible `alt` attributes",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Very few of the application's icon and image elements have accessible `alt` attributes",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Most of the application's icon and image elements have accessible `alt` attributes",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's icon and image elements all have accessible `alt` attributes",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application's heading attributes appear in sequential order",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application's heading attributes do not appear in sequential order",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application's title element is concise and descriptive",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application's title element is not concise and descriptive",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application's links all function correctly",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application's links do not function correctly",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Very few of the application's links function correctly",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Most of the application's links function correctly",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's links all function correctly",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application's CSS selectors and properties are consolidated and organized to follow semantic structure",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application's CSS selectors and properties are not consolidated and organized to follow semantic structure",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS selectors and properties are either not consolidated or organized to follow semantic structure",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS selectors and properties could be better consolidated or better organized to follow semantic structure",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS selectors and properties are consolidated and organized to follow semantic structure",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application's CSS file is properly commented",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application's CSS file contains no comments",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS file contains very few comments",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS file contains some comments, but should have more",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application's CSS file is properly commented",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application resembles (at least 90%) screenshots provided in HW instructions",
			
 
				+                  score: 15,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application does not resemble screenshots provided with HW instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble screenshots provided with HW instructions much more closely",
			
 
				+                      score: 5
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble screenshots provided with HW instructions a bit more closely",
			
 
				+                      score: 10
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles (at least 90%) screenshots provided in HW instructions",
			
 
				+                      score: 15
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function() {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+          .forEach(category => {
			
 
				+            category.score = 0;
			
 
				+            category.questions.forEach(question => {
			
 
				+              question.category = category.title;
			
 
				+              question.status = false;
			
 
				+              question.id = this.questions.length;
			
 
				+              question.flagged = category.title === "Academic Integrity";
			
 
				+              question.bonus = category.title === "Bonus";
			
 
				+              if (question.type === "likert") {
			
 
				+                question.message = question.options[0].message.split(" - ").pop();
			
 
				+              };
			
 
				+
			
 
				+              let messageObj = {
			
 
				+                message : question.message,
			
 
				+                category : question.category
			
 
				+              };
			
 
				+
			
 
				+              question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+              this.questions.push(question);
			
 
				+              category.score += question.score;
			
 
				+            });
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function() {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function(radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+            
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message : question.message,
			
 
				+                category : category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+          
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+           
			
 
				+           question.message = newMessage;
			
 
				+
			
 
				+           let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+          
			
 
				+          
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function() {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function() {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function() {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+          
			
 
				+          this.model.categories
			
 
				+          .filter(category => category.title !== "Academic Integrity")
			
 
				+          .map(category => {
			
 
				+            let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+            let summaryName = summary + "-summary";
			
 
				+            return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+          
			
 
				+          this.model.categories
			
 
				+          .filter(category => category.title !== "Academic Integrity")
			
 
				+          .map(category => {
			
 
				+            let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+            let buttonName = "copyButton-" + button;
			
 
				+            return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+          `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+          `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+        }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function() {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+          .filter(category => category.title !== "Academic Integrity")
			
 
				+          .map(category => {
			
 
				+            let score = category.score;
			
 
				+            let title = category.title;
			
 
				+            let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+            return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+            .filter(messageObj => messageObj.category === category.title)
			
 
				+            .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+            .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+            })
			
 
				+          .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function(title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+                isDarkMode ? "checked" : ""
			
 
				+              }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function() {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function() {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+          .filter(category => category.title !== "Academic Integrity")
			
 
				+          .forEach(category => {
			
 
				+            let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+            this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+            .filter(messageObj => messageObj.category === category.title)
			
 
				+            .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+            .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function() {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+            
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+            
			
 
				+            this.model.questions
			
 
				+            .filter(question => question.category !== "Academic Integrity")
			
 
				+            .forEach(question => {
			
 
				+              const id = question.id;
			
 
				+              const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+              questionScore.textContent = 0;
			
 
				+            });
			
 
				+            
			
 
				+            this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              const title = category.title
			
 
				+              const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+              const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+              categoryScore.textContent = 0;
			
 
				+              resultsCategoryScore.textContent = 0;
			
 
				+            });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+              
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+  </html>
			
 
				+  
			
--- a/rubrics/fe11.html
+++ b/rubrics/fe11.html
@@ -0,0 +1,1288 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 11 ES6 HW Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 11 ES6 Challenge Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deliverables",
			
 
				+              subtitle: null,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted a sample README generated from the application",
			
 
				+                  score: 10,
			
 
				+                  type: "true false",
			
 
				+                  message: "Student did not submit a sample README generated from the application",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted GitHub Repo containing application code",
			
 
				+                  score: 10,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Walkthrough Video",
			
 
				+              subtitle: null,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Student includes link to walkthrough video in README",
			
 
				+                  score: 10,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Student does not include link to walkthrough video in README",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Walkthrough video demonstrates how to invoke the application",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Walkthrough video does not demonstrate how to invoke the application",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Walkthrough video demonstrates all of the prompts receiving user input",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Walkthrough video doesn't demonstrate any of the prompts receiving user input",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Walkthrough video demonstrates most of the prompts receiving user input",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Walkthrough video demonstrates all of the prompts receiving user input",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Walkthrough video demonstrates a generated README that matches the user input and has a functioning table of contents",
			
 
				+                  score: 10,
			
 
				+                  type: "true false",
			
 
				+                  message: "Walkthrough video does not demonstrate a generated README that matches the user input and has a functioning table of contents",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Watch out for errors in the console from this point forward.",
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application generates a README.md file from user input",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't generate a README.md file from user input",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Generated README includes Table of Contents that links to corresponding sections",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Generated README doesn't include Table of Contents that links to corresponding sections",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Generated README includes title, description, installation, usage, contributing, and tests sections",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Generated README doesn't include title, description, installation, usage, contributing, and tests sections",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing 5 of the following 6 items or sections: title, description, installation, usage, contributing, or tests",
			
 
				+                      score: 1
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing 4 of the following 6 items or sections: title, description, installation, usage, contributing, or tests",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing 3 of the following 6 items or sections: title, description, installation, usage, contributing, or tests",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing 2 of the following 6 items or sections: title, description, installation, usage, contributing, or tests",
			
 
				+                      score: 5
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing 1 of the following 6 items or sections: title, description, installation, usage, contributing, or tests",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README includes title, description, installation, usage, contributing, and tests sections",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Generated README includes a badge and license",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Generated README doesn't include a badge and license",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README is missing either a badge or a license",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README includes a badge and license",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Generated README includes a questions section with the user's email and link to GitHub profile",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Generated README doesn't include a questions section with the user's email and link to GitHub profile",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README includes a questions section but is missing either the user's email or a link to the GitHub profile",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Generated README includes a questions section with the user's email and link to GitHub profile",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description and a link to walkthrough video",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't contain a quality README with description and a link to walkthrough video",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing either the  description or the link to the walkthrough video",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description and a link to walkthrough video",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe12.html
+++ b/rubrics/fe12.html
@@ -0,0 +1,1204 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 12 OOP Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 12 OOP Challenge Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deliverables",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted a sample HTML file generated from the application",
			
 
				+                  score: 13,
			
 
				+                  type: "true false",
			
 
				+                  message: "Student did not submit a sample HTML file generated from the application",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted GitHub Repo containing application code",
			
 
				+                  score: 12,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Watch out for errors in the console from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application prompts user for employees to add to roster (1 manager and a combination of engineers and interns)",
			
 
				+                  score: 14,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't prompt user for employees to add to the roster",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application utilizes 'Employee', 'Manager', 'Engineer', and 'Intern' classes to create employee objects as outlined in the homework instructions",
			
 
				+                  score: 12,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't utilize 'Employee', 'Manager', 'Engineer', and 'Intern' classes to create employee objects as outlined in the homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application only utilizes 1 of the following 4 classes to create employee objects as outlined in the homework instructions: 'Employee', 'Manager', 'Engineer', and 'Intern'",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application only utilizes 2 of the following 4 classes to create employee objects as outlined in the homework instructions: 'Employee', 'Manager', 'Engineer', and 'Intern'",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application only utilizes 3 of the following 4 classes to create employee objects as outlined in the homework instructions: 'Employee', 'Manager', 'Engineer', and 'Intern'",
			
 
				+                      score: 9
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application utilizes 'Employee', 'Manager', 'Engineer', and 'Intern' classes to create employee objects as outlined in the homework instructions",
			
 
				+                      score: 12
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "All 4 application tests pass",
			
 
				+                  score: 12,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "None of the 4 application tests pass",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Only 1 of the 4 application tests pass",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Only 2 of the 4 application tests pass",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Only 3 of the 4 application tests pass",
			
 
				+                      score: 9
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "All 4 application tests pass",
			
 
				+                      score: 12
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application generates an HTML document displaying the employee roster",
			
 
				+                  score: 12,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't generate an HTML document displaying the employee roster",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: 
			
 
				+                    "Repo doesn't contain a quality README with description",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe13.html
+++ b/rubrics/fe13.html
@@ -0,0 +1,1325 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+    <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+    <title>Module 13 React Challenge Rubric</title>
			
 
				+    <style>
			
 
				+        *,
			
 
				+        *::before,
			
 
				+        *::after {
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+
			
 
				+        html,
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            line-height: 1.15;
			
 
				+            font-size: 100%;
			
 
				+            color: #fefefe;
			
 
				+            transition: all 0.4s;
			
 
				+        }
			
 
				+
			
 
				+        body {
			
 
				+            background-color: #fbfcfd;
			
 
				+            font-family: "Inter", sans-serif;
			
 
				+            color: #4a4a4a;
			
 
				+        }
			
 
				+
			
 
				+        #app.dark {
			
 
				+            background-color: #121212;
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        h1 {
			
 
				+            font-size: 1.9rem;
			
 
				+        }
			
 
				+
			
 
				+        h2 {
			
 
				+            font-size: 1.6rem;
			
 
				+        }
			
 
				+
			
 
				+        h3 {
			
 
				+            font-size: 1.2rem;
			
 
				+        }
			
 
				+
			
 
				+        h4 {
			
 
				+            font-size: 0.9rem;
			
 
				+        }
			
 
				+
			
 
				+        p,
			
 
				+        legend {
			
 
				+            font-size: 1.2rem;
			
 
				+        }
			
 
				+
			
 
				+        label {
			
 
				+            font-size: 0.9rem;
			
 
				+            line-height: 2;
			
 
				+        }
			
 
				+
			
 
				+        fieldset {
			
 
				+            border: none;
			
 
				+            padding: 0;
			
 
				+            margin-top: 0.9rem;
			
 
				+        }
			
 
				+
			
 
				+        input[type="radio"],
			
 
				+        input[type="checkbox"] {
			
 
				+            position: absolute !important;
			
 
				+            height: 1px;
			
 
				+            width: 1px;
			
 
				+            overflow: hidden;
			
 
				+            clip: rect(1px 1px 1px 1px);
			
 
				+            clip: rect(1px, 1px, 1px, 1px);
			
 
				+            white-space: nowrap;
			
 
				+        }
			
 
				+
			
 
				+        .select-lg,
			
 
				+        .select-lg option {
			
 
				+            font-family: "Inter", sans-serif;
			
 
				+            padding: 10px;
			
 
				+        }
			
 
				+
			
 
				+        .narrow {
			
 
				+            width: 800px;
			
 
				+        }
			
 
				+
			
 
				+        #app {
			
 
				+            padding: 3%;
			
 
				+            transition: all 0.4s;
			
 
				+        }
			
 
				+
			
 
				+        #app h1 {
			
 
				+            font-size: 1.9rem;
			
 
				+            font-weight: 700;
			
 
				+            line-height: 1.3;
			
 
				+        }
			
 
				+
			
 
				+        header {
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				+        }
			
 
				+
			
 
				+        .switch-group {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            height: 2.25rem;
			
 
				+            width: 4.5rem;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]+.toggle {
			
 
				+            height: 100%;
			
 
				+            width: 100%;
			
 
				+            background-color: #77a1db;
			
 
				+            border-radius: 1.9rem;
			
 
				+            cursor: pointer;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            padding: 0.35rem;
			
 
				+            cursor: pointer;
			
 
				+            overflow: hidden;
			
 
				+            background-position: 25% 125%;
			
 
				+            transition: all 0.5s;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:focus+.toggle {
			
 
				+            outline: rgb(59, 153, 252) auto 5px;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked+.toggle {
			
 
				+            background-color: rgb(85, 89, 204);
			
 
				+            background-size: 1rem;
			
 
				+            background-repeat: no-repeat;
			
 
				+            background-position: 25%;
			
 
				+            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+            transition: all 0.5s;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]+.toggle::after {
			
 
				+            content: "";
			
 
				+            display: block;
			
 
				+            height: 1.7rem;
			
 
				+            width: 1.7rem;
			
 
				+            border-radius: 50%;
			
 
				+            cursor: pointer;
			
 
				+            border: 4px solid #e1be64;
			
 
				+            background-color: #fddf74;
			
 
				+            transform: translateX(0rem);
			
 
				+            transition: all 0.5s;
			
 
				+            background-position: center bottom;
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:hover+.toggle::after {
			
 
				+            transform: translateX(0rem) scale(1.1);
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked+.toggle::after {
			
 
				+            border: 4px solid #ffffff;
			
 
				+            background-color: rgba(255, 255, 255, 0.4);
			
 
				+            transform: translateX(2.1rem);
			
 
				+            transition: all 0.5s;
			
 
				+            background-position: center;
			
 
				+            background-size: 60%;
			
 
				+            background-repeat: no-repeat;
			
 
				+            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+        }
			
 
				+
			
 
				+        input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+            transform: translateX(2.1rem) scale(1.075);
			
 
				+        }
			
 
				+
			
 
				+        .card {
			
 
				+            background-color: #fff;
			
 
				+            border-radius: 6px;
			
 
				+            border-width: 0;
			
 
				+            box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+            font-size: 1.1rem;
			
 
				+            height: 100%;
			
 
				+            line-height: 1.8rem;
			
 
				+            padding: 1.5rem 2rem;
			
 
				+            width: 100%;
			
 
				+            margin-bottom: 1.9rem;
			
 
				+        }
			
 
				+
			
 
				+        .dark .card {
			
 
				+            background-color: #333333;
			
 
				+            box-shadow: none;
			
 
				+        }
			
 
				+
			
 
				+        .card h1,
			
 
				+        .card h2,
			
 
				+        .card h3,
			
 
				+        .card h4,
			
 
				+        .card h5,
			
 
				+        .card h6 {
			
 
				+            color: #4a4a4a;
			
 
				+        }
			
 
				+
			
 
				+        .dark .card h1,
			
 
				+        .dark .card h2,
			
 
				+        .dark .card h3,
			
 
				+        .dark .card h4,
			
 
				+        .dark .card h5,
			
 
				+        .dark .card h6 {
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        .card-header h2 {
			
 
				+            display: inline-block;
			
 
				+        }
			
 
				+
			
 
				+        .card .cat-score {
			
 
				+            margin-left: 20px;
			
 
				+            font-size: smaller;
			
 
				+        }
			
 
				+
			
 
				+        .card h3 {
			
 
				+            font-size: 1.2rem;
			
 
				+            font-weight: 700;
			
 
				+            line-height: 1.8em;
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        .card p,
			
 
				+        .card label,
			
 
				+        .card legend {
			
 
				+            color: #7a869c;
			
 
				+            border-width: 0;
			
 
				+            display: block;
			
 
				+            font-size: 1.1rem;
			
 
				+            font-weight: 300;
			
 
				+            line-height: 1.8em;
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        .card legend {
			
 
				+            display: flex;
			
 
				+            justify-content: flex-start;
			
 
				+            align-items: center;
			
 
				+        }
			
 
				+
			
 
				+        .card legend .score {
			
 
				+            font-size: smaller;
			
 
				+            margin-left: 20px;
			
 
				+            font-weight: 100;
			
 
				+            min-width: 5%;
			
 
				+        }
			
 
				+
			
 
				+        .dark .card p,
			
 
				+        .dark .card label,
			
 
				+        .dark .card legend {
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        .card label {
			
 
				+            display: inline-block;
			
 
				+        }
			
 
				+
			
 
				+        .card input[type="radio"]+label::before {
			
 
				+            content: "";
			
 
				+            height: 0.9rem;
			
 
				+            width: 0.9rem;
			
 
				+            margin-right: 0.7rem;
			
 
				+            border-radius: 50%;
			
 
				+            border: 1px solid rgb(74, 74, 74);
			
 
				+            background-color: #ffffff;
			
 
				+            display: inline-block;
			
 
				+            cursor: pointer;
			
 
				+            position: relative;
			
 
				+            top: 0.09rem;
			
 
				+        }
			
 
				+
			
 
				+        .dark .card input[type="radio"]+label::before {
			
 
				+            border: 1px solid #e2e2e2;
			
 
				+            background-color: inherit;
			
 
				+        }
			
 
				+
			
 
				+        .card input[type="radio"]:checked+label::before {
			
 
				+            background-color: rgb(47, 106, 189);
			
 
				+            border-color: rgb(47, 106, 189);
			
 
				+        }
			
 
				+
			
 
				+        .dark .card input[type="radio"]:checked+label::before {
			
 
				+            background-color: #d9d9d9;
			
 
				+            border-color: #d9d9d9;
			
 
				+        }
			
 
				+
			
 
				+        .card input[type="radio"]:checked+label {
			
 
				+            font-weight: bold;
			
 
				+            color: #4a4a4a;
			
 
				+        }
			
 
				+
			
 
				+        .dark input[type="radio"]:checked+label {
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        .card input[type="radio"]:focus+label::before {
			
 
				+            outline: rgb(59, 153, 252) auto 5px;
			
 
				+        }
			
 
				+
			
 
				+        .card legend {
			
 
				+            margin-bottom: 0.4rem;
			
 
				+        }
			
 
				+
			
 
				+        .totals {
			
 
				+            font-size: 1.6rem;
			
 
				+        }
			
 
				+
			
 
				+        .totals+h2 {
			
 
				+            font-size: 1.9rem;
			
 
				+            margin-top: 0;
			
 
				+        }
			
 
				+
			
 
				+        .grade {
			
 
				+            font-size: 1.9rem;
			
 
				+        }
			
 
				+
			
 
				+        button {
			
 
				+            background-color: #fff;
			
 
				+            border: 1px solid #4a4a4a;
			
 
				+            border-radius: 6px;
			
 
				+            box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+            color: #4a4a4a;
			
 
				+            cursor: pointer;
			
 
				+            display: inline-block;
			
 
				+            font-size: 1rem;
			
 
				+            font-weight: 500;
			
 
				+            letter-spacing: 0.04em;
			
 
				+            line-height: 1.8em;
			
 
				+            margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+            outline: none;
			
 
				+            padding: 0.5rem 1.4rem;
			
 
				+            text-transform: uppercase;
			
 
				+            transition-delay: 0s;
			
 
				+            transition-duration: 0.25s;
			
 
				+            transition-property: all;
			
 
				+            transition-timing-function: ease-out;
			
 
				+            width: fit-content;
			
 
				+        }
			
 
				+
			
 
				+        .dark button {
			
 
				+            background: #d9d9d9;
			
 
				+            color: #121212;
			
 
				+            box-shadow: none;
			
 
				+        }
			
 
				+
			
 
				+        button:hover {
			
 
				+            border-color: #dbdbdb;
			
 
				+            color: #dbdbdb;
			
 
				+        }
			
 
				+
			
 
				+        .dark button:hover {
			
 
				+            color: #121212;
			
 
				+        }
			
 
				+
			
 
				+        button.copy {
			
 
				+            margin-left: 0.4rem;
			
 
				+            font-size: .8rem;
			
 
				+        }
			
 
				+
			
 
				+        button:focus {
			
 
				+            border-color: rgb(56, 56, 56);
			
 
				+            box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+            color: rgb(56, 56, 56);
			
 
				+        }
			
 
				+
			
 
				+        div[role="alert"] {
			
 
				+            color: #4a4a4a;
			
 
				+            font-size: 1.2rem;
			
 
				+            margin-bottom: 1.2rem;
			
 
				+        }
			
 
				+
			
 
				+        .dark div[role="alert"] {
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        .summary {
			
 
				+            font-size: 1.2rem;
			
 
				+            border: none;
			
 
				+            font-family: monospace;
			
 
				+            background-color: #d5d9de;
			
 
				+            padding: 0.9rem;
			
 
				+            border-radius: 6px;
			
 
				+            line-height: 1.5;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+
			
 
				+        .summary h2,
			
 
				+        .dark .summary h2 {
			
 
				+            font-size: 1.2rem;
			
 
				+            font-family: "Inter", sans-serif;
			
 
				+            margin-top: 35px;
			
 
				+            margin-bottom: 5px;
			
 
				+        }
			
 
				+
			
 
				+        .summary h2:first-of-type,
			
 
				+        .dark .summary h2:first-of-type {
			
 
				+            margin-top: 15px;
			
 
				+        }
			
 
				+
			
 
				+        .dark .summary {
			
 
				+            background: #6b6a6a;
			
 
				+            color: #e2e2e2;
			
 
				+        }
			
 
				+
			
 
				+        .summary pre,
			
 
				+        .dark .summary pre {
			
 
				+            white-space: pre-wrap;
			
 
				+            border-radius: 5px;
			
 
				+            padding: 15px;
			
 
				+            border: solid 2px rgba(0, 0, 0, .4);
			
 
				+        }
			
 
				+
			
 
				+        .summary pre:empty {
			
 
				+            display: none;
			
 
				+        }
			
 
				+
			
 
				+        .summary pre:empty+button {
			
 
				+            display: none;
			
 
				+        }
			
 
				+
			
 
				+        .d-none {
			
 
				+            display: none;
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 450px) {
			
 
				+            .btn-container {
			
 
				+                text-align: center;
			
 
				+            }
			
 
				+
			
 
				+            button {
			
 
				+                width: 100%;
			
 
				+                margin: 0.5rem;
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked+.toggle::after {
			
 
				+                transform: translateX(1.3rem);
			
 
				+                background-size: 50%;
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+                transform: translateX(1.3rem) scale(1.1);
			
 
				+                background-size: 50%;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 515px) {
			
 
				+            input[type="checkbox"]:checked+.toggle::after {
			
 
				+                transform: translateX(1.7rem);
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+                transform: translateX(1.7rem) scale(1.1);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 460px) {
			
 
				+            input[type="checkbox"]:checked+.toggle::after {
			
 
				+                transform: translateX(1.4rem);
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+                transform: translateX(1.4rem) scale(1.1);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 400px) {
			
 
				+            #app h1 {
			
 
				+                font-size: 1.6rem;
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked+.toggle::after {
			
 
				+                transform: translateX(1.3rem);
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+                transform: translateX(1.3rem) scale(1.1);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 340px) {
			
 
				+            input[type="checkbox"]:checked+.toggle::after {
			
 
				+                transform: translateX(0.9rem);
			
 
				+            }
			
 
				+
			
 
				+            input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+                transform: translateX(0.9rem) scale(1.075);
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+    <script>
			
 
				+        $(function () {
			
 
				+            let $select2 = $('.select2').select2({
			
 
				+                containerCssClass: "wrap"
			
 
				+            })
			
 
				+
			
 
				+            function triggerEvent(name, val) {
			
 
				+                let selected = $("select[name='" + name + "']")
			
 
				+                let change = new Event('change', { bubbles: true })
			
 
				+                selected[0].dispatchEvent(change)
			
 
				+            }
			
 
				+
			
 
				+            $('.select2').on('select2:select', function (e) {
			
 
				+                triggerEvent(e.target.name, e.target.value)
			
 
				+            });
			
 
				+        })
			
 
				+    </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id="app"></div>
			
 
				+    <script>
			
 
				+            (function (window) {
			
 
				+                "use strict";
			
 
				+
			
 
				+                function Model() {
			
 
				+                    this.title = `Module 13 React Challenge Rubric (Coding)`;
			
 
				+                    this.categories = [
			
 
				+                        {
			
 
				+                            title: "Deployment",
			
 
				+                            subtitle: null,
			
 
				+                            score: 0,
			
 
				+                            questions: [
			
 
				+                                {
			
 
				+                                    title: "Student submitted deployed live application URL",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Application isn't deployed",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Application isn't deployed",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Student submitted application GitHub URL",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Missing GitHub submission URL",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "GitHub Repo contains application code",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "GitHub repo is empty",
			
 
				+                                    status: false
			
 
				+                                }
			
 
				+                            ]
			
 
				+                        },
			
 
				+                        {
			
 
				+                            title: "Technical Acceptance Criteria",
			
 
				+                            subtitle:
			
 
				+                                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+                            questions: [
			
 
				+                                {
			
 
				+                                    title: "Application uses React to render content",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Application doesn't use React to render content",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application has a single Header component that appears on multiple pages with a Navigation component within it that is used to conditionally render Home, Portfolio, and Contact sections",
			
 
				+                                    score: 6,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Application doesn't have a single Header component that appears on multiple pages with a Navigation component within it that is used to conditionally render Home, Portfolio, and Contact sections",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application has a single Header component that appears on multiple pages but it does not include a Navigation component",
			
 
				+                                            score: 2
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application has a single Header component that appears on multiple pages with a Navigation component within it but the navigation does not work",
			
 
				+                                            score: 4
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application has a single Header component that appears on multiple pages with a Navigation component within it that is used to conditionally render Home, Portfolio, and Contact sections",
			
 
				+                                            score: 6
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application has a single Project component that is used multiple times in the Portfolio section",
			
 
				+                                    score: 8,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Application doesn't have a single Project component that is used multiple times in the Portfolio section",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application's Home section includes a photo or avatar of the student and a bio/brand statement",
			
 
				+                                    score: 6,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Application's Home section doesn't include a photo or avatar of the student and a bio",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Home section is missing one of the following requirements: a photo or avatar of the student and a bio",
			
 
				+                                            score: 3
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Home section includes a photo or avatar of the student and a bio",
			
 
				+                                            score: 6
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application's Portfolio section includes 6 deployed projects with an image of the project and links to the deployed application and the corresponding repository",
			
 
				+                                    score: 6,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section doesn't include 6 deployed projects with an image of the project and links to the deployed application and the corresponding repository",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section includes 1 to 6 deployed projects with an image of the project, but both of the following are missing from any of the projects: a link to the deployed application and a link to the corresponding repository",
			
 
				+                                            score: 2
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section includes 1 to 6 deployed projects with an image of the project, but one of the following is missing from any of the projects: a link to the deployed application or a link to the corresponding repository",
			
 
				+                                            score: 3
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section includes 1 to 3 deployed projects with an image of the project and links to the deployed application and the corresponding repository",
			
 
				+                                            score: 4
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section includes 4 to 5 deployed projects with an image of the project and links to the deployed application and the corresponding repository",
			
 
				+                                            score: 5
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application's Portfolio section includes 6 deployed projects with an image of the project and links to the deployed application and the corresponding repository",
			
 
				+                                            score: 6
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application's Contact section includes a contact form",
			
 
				+                                    score: 6,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Application's Contact section doesn't include a contact form",
			
 
				+                                    status: false
			
 
				+                                }
			
 
				+                            ]
			
 
				+                        },
			
 
				+                        {
			
 
				+                            title: "Repository Quality",
			
 
				+                            subtitle: null,
			
 
				+                            score: 0,
			
 
				+                            questions: [
			
 
				+                                {
			
 
				+                                    title: "Repository has a unique name",
			
 
				+                                    score: 2,
			
 
				+                                    type: "true false",
			
 
				+                                    message: "Repo doesn't have a unique name",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Repository follows best practices for file structure and naming conventions",
			
 
				+                                    score: 2,
			
 
				+                                    type: "true false",
			
 
				+                                    message:
			
 
				+                                        "Code doesn't follow recommended file/folder structure",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                                    score: 2,
			
 
				+                                    type: "true false",
			
 
				+                                    message:
			
 
				+                                        "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Repository contains multiple descriptive commit messages",
			
 
				+                                    score: 2,
			
 
				+                                    type: "true false",
			
 
				+                                    message:
			
 
				+                                        "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                                    score: 5,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                                            score: 2
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                                            score: 4
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                                            score: 5
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                }
			
 
				+                            ]
			
 
				+                        },
			
 
				+                        {
			
 
				+                            title: "Application Quality",
			
 
				+                            subtitle: null,
			
 
				+                            score: 0,
			
 
				+                            questions: [
			
 
				+                                {
			
 
				+                                    title: "Application user experience is intuitive and easy to navigate",
			
 
				+                                    score: 5,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Application user experience is not intuitive and easy to navigate",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user experience could be much more intuitive and easy to navigate",
			
 
				+                                            score: 2
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user experience could be a lot more intuitive and easy to navigate",
			
 
				+                                            score: 4
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user experience is intuitive and easy to navigate",
			
 
				+                                            score: 5
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title: "Application user interface style is clean and polished",
			
 
				+                                    score: 5,
			
 
				+                                    type: "likert",
			
 
				+                                    options: [
			
 
				+                                        {
			
 
				+                                            message: "Application user interface is not clean and polished",
			
 
				+                                            score: 0
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user interface could be much better",
			
 
				+                                            score: 2
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user interface could be a bit better",
			
 
				+                                            score: 4
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            message: "Application user interface style is clean and polished",
			
 
				+                                            score: 5
			
 
				+                                        }
			
 
				+                                    ],
			
 
				+                                    message: "",
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Application uses a color scheme other than the default Boostrap color palette",
			
 
				+                                    score: 5,
			
 
				+                                    type: "true false",
			
 
				+                                    message:
			
 
				+                                        "Application has no color scheme or uses the default Bootstrap color palette",
			
 
				+                                    status: false
			
 
				+                                }
			
 
				+                            ]
			
 
				+                        },
			
 
				+                        {
			
 
				+                            title: "Academic Integrity",
			
 
				+                            subtitle:
			
 
				+                                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+                            score: 0,
			
 
				+                            questions: [
			
 
				+                                {
			
 
				+                                    title: "Application contains a low number of commits",
			
 
				+                                    score: 0,
			
 
				+                                    type: "true false",
			
 
				+                                    message: null,
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                                    score: 0,
			
 
				+                                    type: "true false",
			
 
				+                                    message: null,
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Application package.json file references a different author and/or repository",
			
 
				+                                    score: 0,
			
 
				+                                    type: "true false",
			
 
				+                                    message: null,
			
 
				+                                    status: false
			
 
				+                                },
			
 
				+                                {
			
 
				+                                    title:
			
 
				+                                        "Application package.json file references much older versions of npm packages",
			
 
				+                                    score: 0,
			
 
				+                                    type: "true false",
			
 
				+                                    message: null,
			
 
				+                                    status: false
			
 
				+                                }
			
 
				+                            ]
			
 
				+                        }
			
 
				+                    ];
			
 
				+
			
 
				+                    this.initStorage();
			
 
				+                }
			
 
				+
			
 
				+                Model.prototype.initStorage = function () {
			
 
				+                    this.score = 0;
			
 
				+                    this.questions = [];
			
 
				+                    this.messages = new Set();
			
 
				+                    this.flagged = new Set();
			
 
				+                    this.isDarkMode =
			
 
				+                        JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+                    this.categories
			
 
				+                        .forEach(category => {
			
 
				+                            category.score = 0;
			
 
				+                            category.questions.forEach(question => {
			
 
				+                                question.category = category.title;
			
 
				+                                question.status = false;
			
 
				+                                question.id = this.questions.length;
			
 
				+                                question.flagged = category.title === "Academic Integrity";
			
 
				+                                question.bonus = category.title === "Bonus";
			
 
				+                                if (question.type === "likert") {
			
 
				+                                    question.message = question.options[0].message.split(" - ").pop();
			
 
				+                                };
			
 
				+
			
 
				+                                let messageObj = {
			
 
				+                                    message: question.message,
			
 
				+                                    category: question.category
			
 
				+                                };
			
 
				+
			
 
				+                                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                                this.questions.push(question);
			
 
				+                                category.score += question.score;
			
 
				+                            });
			
 
				+                        });
			
 
				+                };
			
 
				+
			
 
				+                Model.prototype.toggleDarkMode = function () {
			
 
				+                    this.isDarkMode = !this.isDarkMode;
			
 
				+                    localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+                };
			
 
				+
			
 
				+                Model.prototype.toggleRadio = function (radio) {
			
 
				+                    const id = Number(radio.getAttribute("name"));
			
 
				+                    const question = this.questions[id];
			
 
				+                    const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                    const category = question.category;
			
 
				+                    const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+                    const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+                    question.status = !question.status;
			
 
				+
			
 
				+                    if (question.status === true) {
			
 
				+
			
 
				+                        if (!question.bonus) {
			
 
				+                            this.messages.forEach(message => {
			
 
				+                                if (message.message === question.message) {
			
 
				+                                    this.messages.delete(message);
			
 
				+                                }
			
 
				+                            })
			
 
				+                        } else {
			
 
				+                            let messageObj = {
			
 
				+                                message: question.message,
			
 
				+                                category: category
			
 
				+                            }
			
 
				+                            this.messages.add(messageObj);
			
 
				+                        }
			
 
				+
			
 
				+                        this.score += question.score;
			
 
				+
			
 
				+                        if (question.flagged) {
			
 
				+                            this.flagged.add(question.id);
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        if (question.flagged) {
			
 
				+                            this.flagged.delete(question.id);
			
 
				+                        }
			
 
				+
			
 
				+                        if (!question.bonus) {
			
 
				+                            if (question.message) {
			
 
				+                                let messageObj = {
			
 
				+                                    message: question.message,
			
 
				+                                    category: category
			
 
				+                                }
			
 
				+                                this.messages.add(messageObj);
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            this.messages.forEach(message => {
			
 
				+                                if (message.message === question.message) {
			
 
				+                                    this.messages.delete(message);
			
 
				+                                }
			
 
				+                            })
			
 
				+                        }
			
 
				+
			
 
				+                        this.score -= question.score;
			
 
				+                    }
			
 
				+
			
 
				+                    if (category !== "Academic Integrity") {
			
 
				+                        if (question.status) {
			
 
				+                            questionScore.textContent = question.score;
			
 
				+                        } else {
			
 
				+                            questionScore.textContent = 0;
			
 
				+                        }
			
 
				+
			
 
				+                        const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+                        let categoryTotal = 0;
			
 
				+
			
 
				+                        catQuestions.forEach(question => {
			
 
				+                            if (question.type === "true false") {
			
 
				+                                if (question.status) {
			
 
				+                                    categoryTotal += question.score;
			
 
				+                                }
			
 
				+                            } else {
			
 
				+                                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                                categoryTotal += parseInt(score);
			
 
				+                            }
			
 
				+                        })
			
 
				+
			
 
				+                        categoryScore.textContent = categoryTotal;
			
 
				+                        resultsCategoryScore.textContent = categoryTotal;
			
 
				+                    }
			
 
				+
			
 
				+                };
			
 
				+
			
 
				+                Model.prototype.handleSelect = function (select) {
			
 
				+                    const id = Number(select.getAttribute("name"));
			
 
				+                    const question = this.questions[id];
			
 
				+                    const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                    const oldScore = questionScore.textContent;
			
 
				+                    const category = question.category;
			
 
				+                    const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+                    const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+                    let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+                    if (newMessage === "Open this menu") {
			
 
				+                        newMessage = select[1].text.split(" - ").pop();
			
 
				+                    };
			
 
				+
			
 
				+                    if (question.type === "likert") {
			
 
				+
			
 
				+                        this.messages.forEach(item => {
			
 
				+                            if (item.message === question.message) {
			
 
				+                                this.messages.delete(item)
			
 
				+                            }
			
 
				+                        })
			
 
				+
			
 
				+                        question.message = newMessage;
			
 
				+
			
 
				+                        let messageObj = {
			
 
				+                            message: newMessage,
			
 
				+                            category: category
			
 
				+                        }
			
 
				+
			
 
				+                        this.messages.add(messageObj);
			
 
				+
			
 
				+                    };
			
 
				+
			
 
				+
			
 
				+
			
 
				+                    this.score -= parseInt(oldScore);
			
 
				+                    this.score += parseInt(select.value);
			
 
				+                    questionScore.textContent = select.value;
			
 
				+
			
 
				+                    const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+                    let categoryTotal = 0;
			
 
				+
			
 
				+                    catQuestions.forEach(question => {
			
 
				+                        if (question.type === "true false") {
			
 
				+                            if (question.status) {
			
 
				+                                categoryTotal += question.score;
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                            categoryTotal += parseInt(score);
			
 
				+                        }
			
 
				+                    })
			
 
				+
			
 
				+                    categoryScore.textContent = categoryTotal;
			
 
				+                    resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+                };
			
 
				+
			
 
				+                Model.prototype.calcGrade = function () {
			
 
				+                    const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+                    let letterGrade = "";
			
 
				+
			
 
				+                    if (roundedScore >= 97) {
			
 
				+                        letterGrade = "A+";
			
 
				+                    } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+                        letterGrade = "A";
			
 
				+                    } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+                        letterGrade = "A-";
			
 
				+                    } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+                        letterGrade = "B+";
			
 
				+                    } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+                        letterGrade = "B";
			
 
				+                    } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+                        letterGrade = "B-";
			
 
				+                    } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+                        letterGrade = "C+";
			
 
				+                    } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+                        letterGrade = "C";
			
 
				+                    } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+                        letterGrade = "C-";
			
 
				+                    } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+                        letterGrade = "D+";
			
 
				+                    } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+                        letterGrade = "D";
			
 
				+                    } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+                        letterGrade = "D-";
			
 
				+                    } else {
			
 
				+                        letterGrade = "F";
			
 
				+                    }
			
 
				+
			
 
				+                    return letterGrade;
			
 
				+                };
			
 
				+
			
 
				+                Model.prototype.hasFlags = function () {
			
 
				+                    return this.flagged.size > 0;
			
 
				+                };
			
 
				+
			
 
				+                function View(model) {
			
 
				+                    this.model = model;
			
 
				+                    this.generateHTML();
			
 
				+                    this.cacheDom();
			
 
				+                }
			
 
				+
			
 
				+                View.prototype.cacheDom = function () {
			
 
				+                    this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+                    this.radios = Array.from(
			
 
				+                        document.querySelectorAll("input[type='radio']")
			
 
				+                    );
			
 
				+
			
 
				+                    this.selects = Array.from(
			
 
				+                        document.querySelectorAll("select")
			
 
				+                    );
			
 
				+
			
 
				+                    this.totals = document.querySelector(".totals");
			
 
				+                    this.grade = document.querySelector(".grade");
			
 
				+                    this.alert = document.querySelector("div[role='alert']");
			
 
				+                    this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+                    this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+                    this.model.categories
			
 
				+                        .filter(category => category.title !== "Academic Integrity")
			
 
				+                        .map(category => {
			
 
				+                            let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+                            let summaryName = summary + "-summary";
			
 
				+                            return this[summaryName] = document.querySelector("." + summary);
			
 
				+                        })
			
 
				+
			
 
				+                    this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+                    this.model.categories
			
 
				+                        .filter(category => category.title !== "Academic Integrity")
			
 
				+                        .map(category => {
			
 
				+                            let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+                            let buttonName = "copyButton-" + button;
			
 
				+                            return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+                        })
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+                    return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+                            `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+                            `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+                        }
			
 
				+        </fieldset>`;
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+                    return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.createResults = function () {
			
 
				+                    return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+                            .filter(category => category.title !== "Academic Integrity")
			
 
				+                            .map(category => {
			
 
				+                                let score = category.score;
			
 
				+                                let title = category.title;
			
 
				+                                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                                    .filter(messageObj => messageObj.category === category.title)
			
 
				+                                    .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                                    .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+                            })
			
 
				+                            .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+                    return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${isDarkMode ? "checked" : ""
			
 
				+                        }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.generateHTML = function () {
			
 
				+                    this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+                    if (this.model.isDarkMode) {
			
 
				+                        this.wrapper.classList.add("dark");
			
 
				+                    }
			
 
				+
			
 
				+                    const survey = this.model.categories.reduce((final, current) => {
			
 
				+                        final += this.createCard(current);
			
 
				+                        return final;
			
 
				+                    }, "");
			
 
				+
			
 
				+                    const results = this.createResults();
			
 
				+
			
 
				+                    const header = this.createHeader(
			
 
				+                        this.model.title,
			
 
				+                        this.model.isDarkMode
			
 
				+                    );
			
 
				+
			
 
				+                    this.wrapper.innerHTML = header + survey + results;
			
 
				+                };
			
 
				+
			
 
				+                View.prototype.update = function () {
			
 
				+                    const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+                    this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+                    const letterGrade = this.model.calcGrade();
			
 
				+                    this.grade.textContent = letterGrade;
			
 
				+
			
 
				+                    if (this.model.hasFlags()) {
			
 
				+                        this.alert.classList.remove("d-none");
			
 
				+                    } else {
			
 
				+                        this.alert.classList.add("d-none");
			
 
				+                    }
			
 
				+
			
 
				+                    if (this.model.isDarkMode) {
			
 
				+                        this.wrapper.classList.add("dark");
			
 
				+                    } else {
			
 
				+                        this.wrapper.classList.remove("dark");
			
 
				+                    }
			
 
				+
			
 
				+                    this.model.categories
			
 
				+                        .filter(category => category.title !== "Academic Integrity")
			
 
				+                        .forEach(category => {
			
 
				+                            let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                            this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                                .filter(messageObj => messageObj.category === category.title)
			
 
				+                                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                                .join("")
			
 
				+                        })
			
 
				+
			
 
				+                };
			
 
				+
			
 
				+                function Controller(model, view) {
			
 
				+                    this.model = model;
			
 
				+                    this.view = view;
			
 
				+                    this.addEventListeners();
			
 
				+                }
			
 
				+
			
 
				+                Controller.prototype.addEventListeners = function () {
			
 
				+                    this.view.wrapper.addEventListener("change", event => {
			
 
				+                        const { target } = event;
			
 
				+
			
 
				+                        if (target.name !== "dark-mode") {
			
 
				+                            if (!target.matches("input[type='radio']")) {
			
 
				+                                this.model.handleSelect(target);
			
 
				+                            } else {
			
 
				+                                this.model.toggleRadio(target);
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        this.view.update();
			
 
				+                    });
			
 
				+
			
 
				+                    this.view.resetButton.addEventListener("click", () => {
			
 
				+                        this.model.initStorage();
			
 
				+
			
 
				+                        this.view.radios.forEach(
			
 
				+                            radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+                        );
			
 
				+
			
 
				+                        this.view.selects.forEach(
			
 
				+                            select => select.selectedIndex = null
			
 
				+                        )
			
 
				+
			
 
				+                        this.model.questions
			
 
				+                            .filter(question => question.category !== "Academic Integrity")
			
 
				+                            .forEach(question => {
			
 
				+                                const id = question.id;
			
 
				+                                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                                questionScore.textContent = 0;
			
 
				+                            });
			
 
				+
			
 
				+                        this.model.categories
			
 
				+                            .filter(category => category.title !== "Academic Integrity")
			
 
				+                            .forEach(category => {
			
 
				+                                const title = category.title
			
 
				+                                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                                categoryScore.textContent = 0;
			
 
				+                                resultsCategoryScore.textContent = 0;
			
 
				+                            });
			
 
				+
			
 
				+                        this.view.update();
			
 
				+                        window.scrollTo(0, 0);
			
 
				+                    });
			
 
				+
			
 
				+                    this.model.categories
			
 
				+                        .filter(category => category.title !== "Academic Integrity")
			
 
				+                        .forEach(category => {
			
 
				+                            let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+                            let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+                            let summaryName = title + "-summary";
			
 
				+
			
 
				+                            this.view[buttonName].addEventListener("click", () => {
			
 
				+                                const selection = window.getSelection();
			
 
				+                                const range = document.createRange();
			
 
				+                                range.selectNodeContents(this.view[summaryName]);
			
 
				+                                selection.removeAllRanges();
			
 
				+                                selection.addRange(range);
			
 
				+                                document.execCommand("copy");
			
 
				+                            });
			
 
				+                        });
			
 
				+
			
 
				+
			
 
				+                    this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+                        this.model.toggleDarkMode();
			
 
				+                        this.view.update();
			
 
				+                    });
			
 
				+                };
			
 
				+
			
 
				+                function App(Model, View, Controller) {
			
 
				+                    this.model = new Model();
			
 
				+                    this.view = new View(this.model);
			
 
				+                    this.controller = new Controller(this.model, this.view);
			
 
				+                }
			
 
				+
			
 
				+                return new App(Model, View, Controller);
			
 
				+            })(window);
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe2.html
+++ b/rubrics/fe2.html
@@ -0,0 +1,1306 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 2 Advanced CSS Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 2 Advanced CSS HW Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application includes the student's name at the top of the portfolio",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't include the student's name at the top of the portfolio",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application includes a photo or avatar of the student",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't include a photo or avatar of the student",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The application's navigation includes links to sections about them, their work, and how to contact them",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The application's navigation doesn't include links to sections about them, their work, and how to contact them",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation is missing links to 2 of the following sections: about, work, or contact",
			
 
				+                      score: 1
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation is missing a link to 1 of the following sections: about, work, or contact",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation includes links to sections about them, their work, and how to contact them",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The application's navigation links to each corresponding section on the page",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The application's navigation doesn't link to each corresponding section on the page",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to 1 of the 3 sections on the page",
			
 
				+                      score: 1
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to 2 of the 3 sections on the page",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to each corresponding section on the page",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The section about the student's work contains titled images of the student's applications (or placeholders)",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The section about the student's work doesn't contain titled images of the student's applications (or placeholders)",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The section about the student's work contains titled images for some of the student's applications (or placeholders)",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The section about the student's work contains titled images for all of the student's applications (or placeholders)",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "In the application's section about their work, the first image is larger in size than the others",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "In the application's section about their work, the first image isn't larger in size than the others",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Clicking on a featured application opens that deployed application (at least one application, in case they are using placeholders)",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Clicking on a featured application doesn't open that deployed application (at least one application, in case they are using placeholders)",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "The application adapts to the viewport with a responsive layout by resizing the page on various screens and devices",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message: "The application doesn't adapt to the viewport with a responsive layout by resizing the page on various screens and devices",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                  score: 15,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application does not resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble the mock-up functionality provided in homework instructions a lot more closely",
			
 
				+                      score: 5
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble the mock-up functionality provided in homework instructions a bit more closely",
			
 
				+                      score: 10
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 15
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe3.html
+++ b/rubrics/fe3.html
@@ -0,0 +1,1296 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 3 Bootstrap Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 3 Bootstrap Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application includes a Bootstrap Navbar",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't include a Bootstrap Navbar",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application includes a hero section with a photo or avatar of the student",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't include a hero section with a photo or avatar of the student",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The application's navigation includes links to sections about them, their work, and how to contact them",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The application's navigation doesn't include links to sections about them, their work, and how to contact them",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation is missing links to 2 of the following sections: about, work, or contact",
			
 
				+                      score: 1
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation is missing a link to 1 of the following sections: about, work, or contact",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation includes links to sections about them, their work, and how to contact them",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The application's navigation links to each corresponding section on the page",
			
 
				+                  score: 6,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The application's navigation doesn't link to each corresponding section on the page",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to 1 of the 3 sections on the page",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to 2 of the 3 sections on the page",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The application's navigation links to each corresponding section on the page",
			
 
				+                      score: 6
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The section about the student's work contains titled images of the student's applications (or placeholders)",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The section about the student's work doesn't contain titled images of the student's applications (or placeholders)",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The section about the student's work contains titled images for some of the student's applications (or placeholders)",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The section about the student's work contains titled images for all of the student's applications (or placeholders)",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application includes a footer section that includes hyperlinks with hover effects, and buttons with box shadows.",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't include a footer section that includes hyperlinks with hover effects, and buttons with box shadows.",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "The application adapts to the viewport with a responsive layout by resizing the page on various screens and devices using Bootstrap's Grid",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "The application doesn't adapt to the viewport with a responsive layout by resizing the page on various screens and devices using Bootstrap's Grid",
			
 
				+                  status: false
			
 
				+                },
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application resembles the functionality of their previous portfolio",
			
 
				+                  score: 15,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application does not resemble the functionality of their previous portfolio",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble the functionality of their previous portfolio a lot more closely",
			
 
				+                      score: 5
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble the functionality of their previous portfolio a bit more closely",
			
 
				+                      score: 10
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the functionality of their previous portfolio",
			
 
				+                      score: 15
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe4.html
+++ b/rubrics/fe4.html
@@ -0,0 +1,1238 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 4 JavaScript Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 4 JavaScript Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application calculates the total number of months in the dataset",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't calculate the total number of months in the dataset",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application calculates the net total amount of Profit/Losses over the entire period",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't calculate the net total amount of Profit/Losses over the entire period",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application calculates the average of the changes in Profit/Losses over the entire period",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't calculate the average of the changes in Profit/Losses over the entire period",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application calculates the greatest increase in Profit/Losses over the entire period (Date and Amount)",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't calculate the greatest increase in Profit/Losses over the entire period",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application calculates the greatest decrease in Profit/Losses over the entire period (Date and Amount)",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't calculate the greatest decrease in Profit/Losses over the entire period",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application prints the above Financial Analysis calculations to the console",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application doesn't print the above Financial Analysis calculations to the console",
			
 
				+                  status: false
			
 
				+                },
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 3,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for variable naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for variable names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 5,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in the challenge instructions",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions much more closely",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions a bit more closely",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe5.html
+++ b/rubrics/fe5.html
@@ -0,0 +1,1309 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 5 JavaScript Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 5 JavaScript HW Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application prompts user for password length and if they would like to include lowercased, uppercased, numeric, and special characters",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't prompt for any password options",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application prompts user for 1 of the 5 password options: password length, lowercased characters, uppercased characters, numeric characters, and special characters",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application prompts user for 2 of the 5 password options: password length, lowercased characters, uppercased characters, numeric characters, and special characters",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application prompts user for 3 of the 5 password options: password length, lowercased characters, uppercased characters, numeric characters, and special characters",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application prompts user for 4 of the 5 password options: password length, lowercased characters, uppercased characters, numeric characters, and special characters",
			
 
				+                      score: 7
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application prompts user for password length and if they would like to include lowercased, uppercased, numeric, and special characters",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application generates valid password based on provided options",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't generate valid password based on password options",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application requires minimum password length of 8 characters",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't require minimum password length of 8 character",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application requires maximum password length of 128 characters",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't require maximum password length of 128 characters",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application is free of console errors",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application has errors in the console",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application user experience is intuitive and easy to navigate",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user experience is not intuitive and easy to navigate",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be much more intuitive and easy to navigate",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be a lot more intuitive and easy to navigate",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience is intuitive and easy to navigate",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application user interface style is clean and polished",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user interface is not clean and polished",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be much better",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be a bit better",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface style is clean and polished",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions much more closely",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions a bit more closely",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe6.html
+++ b/rubrics/fe6.html
@@ -0,0 +1,1292 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 6 Web APIs Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 6 Web APIs Challenge Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "The first view of the application displays a button used to start the quiz",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message: "First view of the application doesn't display a button to start the quiz",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Clicking the 'Start Quiz' button displays a series of questions",
			
 
				+                  score: 6,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Clicking the 'Start Quiz' button doesn't display a series of questions",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Once the quiz begins, a countdown timer starts",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "A countdown timer doesn't start when the quiz begins",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "If a question is answered incorrectly, additional time is subtracted from the timer",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Additional time isn't subtracted from the timer if a question is answered incorrectly",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "The game ends when all questions have been answered or the timer reaches zero",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "The timer doesn't stop when it reaches 0 or when all questions have been answered",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "After the game ends, the user can save their initials and score to a highscores view using local storage",
			
 
				+                  score: 7,
			
 
				+                  type: "true false",
			
 
				+                  message: "Unable to save initials and score to highscores view using local storage",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application user experience is intuitive and easy to navigate",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user experience is not intuitive and easy to navigate",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be much more intuitive and easy to navigate",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be a lot more intuitive and easy to navigate",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience is intuitive and easy to navigate",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application user interface style is clean and polished",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user interface is not clean and polished",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be much better",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be a bit better",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface style is clean and polished",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions much more closely",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions a bit more closely",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe7.html
+++ b/rubrics/fe7.html
@@ -0,0 +1,1304 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 7 Third-Party APIs Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 7 Third-Party APIs Challenge Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+              {
			
 
				+                  title:
			
 
				+                    "The application displays timeblocks for standard business hours (9 a.m. to 5 p.m.)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application doesn't display timeblocks for all standard business hours",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Each timeblock contains an input field and save button",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Timeblocks don't contain an input field and save button",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Clicking a time block's save button saves the input text to local storage, allowing the text to persist when the application is refreshed",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Clicking a time block's save button doesn't save the input text to local storage",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "The current day is displayed at the top of the calendar",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "The current day isn't displayed at the top of the calendar",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Each timeblock is color coded to indicate whether it is in a past, present, or future hour",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Time blocks aren't color coded to indicate whether they are in the past, present, or future",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Time blocks are only color coded to indicate whether they are in 1 of the following: the past, present, and future",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Time blocks are only color coded to indicate whether they are in 2 of the following: the past, present, and future",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Each timeblock is color coded to indicate whether it is in a past, present, or future hour",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application user experience is intuitive and easy to navigate",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user experience is not intuitive and easy to navigate",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be much more intuitive and easy to navigate",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be a lot more intuitive and easy to navigate",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience is intuitive and easy to navigate",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application user interface style is clean and polished",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user interface is not clean and polished",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be much better",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be a bit better",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface style is clean and polished",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions much more closely",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions a bit more closely",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fe8.html
+++ b/rubrics/fe8.html
@@ -0,0 +1,1323 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+  <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
			
 
				+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
			
 
				+  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
			
 
				+  <title>Module 8 Server-Side APIs Challenge Rubric</title>
			
 
				+  <style>
			
 
				+    *,
			
 
				+    *::before,
			
 
				+    *::after {
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+
			
 
				+    html,
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+      line-height: 1.15;
			
 
				+      font-size: 100%;
			
 
				+      color: #fefefe;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      background-color: #fbfcfd;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    #app.dark {
			
 
				+      background-color: #121212;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    h4 {
			
 
				+      font-size: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    p,
			
 
				+    legend {
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      font-size: 0.9rem;
			
 
				+      line-height: 2;
			
 
				+    }
			
 
				+
			
 
				+    fieldset {
			
 
				+      border: none;
			
 
				+      padding: 0;
			
 
				+      margin-top: 0.9rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="radio"],
			
 
				+    input[type="checkbox"] {
			
 
				+      position: absolute !important;
			
 
				+      height: 1px;
			
 
				+      width: 1px;
			
 
				+      overflow: hidden;
			
 
				+      clip: rect(1px 1px 1px 1px);
			
 
				+      clip: rect(1px, 1px, 1px, 1px);
			
 
				+      white-space: nowrap;
			
 
				+    }
			
 
				+
			
 
				+    .select-lg,
			
 
				+    .select-lg option {
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      padding: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .narrow {
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    #app {
			
 
				+      padding: 3%;
			
 
				+      transition: all 0.4s;
			
 
				+    }
			
 
				+
			
 
				+    #app h1 {
			
 
				+      font-size: 1.9rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.3;
			
 
				+    }
			
 
				+
			
 
				+    header {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .switch-group {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      height: 2.25rem;
			
 
				+      width: 4.5rem;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle {
			
 
				+      height: 100%;
			
 
				+      width: 100%;
			
 
				+      background-color: #77a1db;
			
 
				+      border-radius: 1.9rem;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 0.35rem;
			
 
				+      cursor: pointer;
			
 
				+      overflow: hidden;
			
 
				+      background-position: 25% 125%;
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:focus+.toggle {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle {
			
 
				+      background-color: rgb(85, 89, 204);
			
 
				+      background-size: 1rem;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position: 25%;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMSIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjgiIGN5PSI3IiByPSIxIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSI1IiBjeT0iMTMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjUiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMyIgY3k9IjMiIHI9IjEiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEyLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
			
 
				+      transition: all 0.5s;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]+.toggle::after {
			
 
				+      content: "";
			
 
				+      display: block;
			
 
				+      height: 1.7rem;
			
 
				+      width: 1.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      border: 4px solid #e1be64;
			
 
				+      background-color: #fddf74;
			
 
				+      transform: translateX(0rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center bottom;
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:hover+.toggle::after {
			
 
				+      transform: translateX(0rem) scale(1.1);
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked+.toggle::after {
			
 
				+      border: 4px solid #ffffff;
			
 
				+      background-color: rgba(255, 255, 255, 0.4);
			
 
				+      transform: translateX(2.1rem);
			
 
				+      transition: all 0.5s;
			
 
				+      background-position: center;
			
 
				+      background-size: 60%;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMTAuMjlDMTguMzQyNyAxMS45OTIyIDE3LjcwMzkgMTMuNjE0NCAxNi42NTgyIDE0Ljk2NjhDMTUuNjEyNiAxNi4zMTkyIDE0LjIwMzUgMTcuMzQ1OCAxMi41OTU3IDE3LjkyNjVDMTAuOTg3OSAxOC41MDczIDkuMjQ3OTggMTguNjE4MSA3LjU3OTUgMTguMjQ2MUM1LjkxMTAyIDE3Ljg3NDEgNC4zODI5OSAxNy4wMzQ1IDMuMTc0MjMgMTUuODI1OEMxLjk2NTQ2IDE0LjYxNyAxLjEyNTk0IDEzLjA4OSAwLjc1MzkwNyAxMS40MjA1QzAuMzgxODc1IDkuNzUyMDIgMC40OTI3MTYgOC4wMTIwOCAxLjA3MzQ2IDYuNDA0M0MxLjY1NDIgNC43OTY1MSAyLjY4MDgzIDMuMzg3MzcgNC4wMzMyMSAyLjM0MTc1QzUuMzg1NTkgMS4yOTYxNCA3LjAwNzggMC42NTczMDUgOC43MSAwLjVDNy43MTM0MSAxLjg0ODI3IDcuMjMzODUgMy41MDk0NSA3LjM1ODUzIDUuMTgxNDFDNy40ODMyMSA2Ljg1MzM4IDguMjAzODYgOC40MjUwNiA5LjM4OTQgOS42MTA2QzEwLjU3NDkgMTAuNzk2MSAxMi4xNDY2IDExLjUxNjggMTMuODE4NiAxMS42NDE1QzE1LjQ5MDYgMTEuNzY2MiAxNy4xNTE3IDExLjI4NjYgMTguNSAxMC4yOVYxMC4yOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
			
 
				+    }
			
 
				+
			
 
				+    input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+      transform: translateX(2.1rem) scale(1.075);
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+      background-color: #fff;
			
 
				+      border-radius: 6px;
			
 
				+      border-width: 0;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.45) 0 0 30px -5px;
			
 
				+      font-size: 1.1rem;
			
 
				+      height: 100%;
			
 
				+      line-height: 1.8rem;
			
 
				+      padding: 1.5rem 2rem;
			
 
				+      width: 100%;
			
 
				+      margin-bottom: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card {
			
 
				+      background-color: #333333;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    .card h1,
			
 
				+    .card h2,
			
 
				+    .card h3,
			
 
				+    .card h4,
			
 
				+    .card h5,
			
 
				+    .card h6 {
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card h1,
			
 
				+    .dark .card h2,
			
 
				+    .dark .card h3,
			
 
				+    .dark .card h4,
			
 
				+    .dark .card h5,
			
 
				+    .dark .card h6 {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card-header h2 {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card .cat-score {
			
 
				+      margin-left: 20px;
			
 
				+      font-size: smaller;
			
 
				+    }
			
 
				+
			
 
				+    .card h3 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-weight: 700;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card p,
			
 
				+    .card label,
			
 
				+    .card legend {
			
 
				+      color: #7a869c;
			
 
				+      border-width: 0;
			
 
				+      display: block;
			
 
				+      font-size: 1.1rem;
			
 
				+      font-weight: 300;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      display: flex;
			
 
				+      justify-content: flex-start;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .card legend .score {
			
 
				+      font-size: smaller;
			
 
				+      margin-left: 20px;
			
 
				+      font-weight: 100;
			
 
				+      min-width: 5%;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card p,
			
 
				+    .dark .card label,
			
 
				+    .dark .card legend {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card label {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]+label::before {
			
 
				+      content: "";
			
 
				+      height: 0.9rem;
			
 
				+      width: 0.9rem;
			
 
				+      margin-right: 0.7rem;
			
 
				+      border-radius: 50%;
			
 
				+      border: 1px solid rgb(74, 74, 74);
			
 
				+      background-color: #ffffff;
			
 
				+      display: inline-block;
			
 
				+      cursor: pointer;
			
 
				+      position: relative;
			
 
				+      top: 0.09rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]+label::before {
			
 
				+      border: 1px solid #e2e2e2;
			
 
				+      background-color: inherit;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: rgb(47, 106, 189);
			
 
				+      border-color: rgb(47, 106, 189);
			
 
				+    }
			
 
				+
			
 
				+    .dark .card input[type="radio"]:checked+label::before {
			
 
				+      background-color: #d9d9d9;
			
 
				+      border-color: #d9d9d9;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:checked+label {
			
 
				+      font-weight: bold;
			
 
				+      color: #4a4a4a;
			
 
				+    }
			
 
				+
			
 
				+    .dark input[type="radio"]:checked+label {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .card input[type="radio"]:focus+label::before {
			
 
				+      outline: rgb(59, 153, 252) auto 5px;
			
 
				+    }
			
 
				+
			
 
				+    .card legend {
			
 
				+      margin-bottom: 0.4rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals {
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    .totals+h2 {
			
 
				+      font-size: 1.9rem;
			
 
				+      margin-top: 0;
			
 
				+    }
			
 
				+
			
 
				+    .grade {
			
 
				+      font-size: 1.9rem;
			
 
				+    }
			
 
				+
			
 
				+    button {
			
 
				+      background-color: #fff;
			
 
				+      border: 1px solid #4a4a4a;
			
 
				+      border-radius: 6px;
			
 
				+      box-shadow: rgba(155, 155, 155, 0.5) 1px 2px 3px 0;
			
 
				+      color: #4a4a4a;
			
 
				+      cursor: pointer;
			
 
				+      display: inline-block;
			
 
				+      font-size: 1rem;
			
 
				+      font-weight: 500;
			
 
				+      letter-spacing: 0.04em;
			
 
				+      line-height: 1.8em;
			
 
				+      margin: 0.75rem 1.1rem 1.1rem 0;
			
 
				+      outline: none;
			
 
				+      padding: 0.5rem 1.4rem;
			
 
				+      text-transform: uppercase;
			
 
				+      transition-delay: 0s;
			
 
				+      transition-duration: 0.25s;
			
 
				+      transition-property: all;
			
 
				+      transition-timing-function: ease-out;
			
 
				+      width: fit-content;
			
 
				+    }
			
 
				+
			
 
				+    .dark button {
			
 
				+      background: #d9d9d9;
			
 
				+      color: #121212;
			
 
				+      box-shadow: none;
			
 
				+    }
			
 
				+
			
 
				+    button:hover {
			
 
				+      border-color: #dbdbdb;
			
 
				+      color: #dbdbdb;
			
 
				+    }
			
 
				+
			
 
				+    .dark button:hover {
			
 
				+      color: #121212;
			
 
				+    }
			
 
				+
			
 
				+    button.copy {
			
 
				+      margin-left: 0.4rem;
			
 
				+      font-size: .8rem;
			
 
				+    }
			
 
				+
			
 
				+    button:focus {
			
 
				+      border-color: rgb(56, 56, 56);
			
 
				+      box-shadow: rgb(219, 219, 219) 0px 0px 0px 3px;
			
 
				+      color: rgb(56, 56, 56);
			
 
				+    }
			
 
				+
			
 
				+    div[role="alert"] {
			
 
				+      color: #4a4a4a;
			
 
				+      font-size: 1.2rem;
			
 
				+      margin-bottom: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .dark div[role="alert"] {
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary {
			
 
				+      font-size: 1.2rem;
			
 
				+      border: none;
			
 
				+      font-family: monospace;
			
 
				+      background-color: #d5d9de;
			
 
				+      padding: 0.9rem;
			
 
				+      border-radius: 6px;
			
 
				+      line-height: 1.5;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2,
			
 
				+    .dark .summary h2 {
			
 
				+      font-size: 1.2rem;
			
 
				+      font-family: "Inter", sans-serif;
			
 
				+      margin-top: 35px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .summary h2:first-of-type,
			
 
				+    .dark .summary h2:first-of-type {
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .dark .summary {
			
 
				+      background: #6b6a6a;
			
 
				+      color: #e2e2e2;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre,
			
 
				+    .dark .summary pre {
			
 
				+      white-space: pre-wrap;
			
 
				+      border-radius: 5px;
			
 
				+      padding: 15px;
			
 
				+      border: solid 2px rgba(0, 0, 0, .4);
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .summary pre:empty+button {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    .d-none {
			
 
				+      display: none;
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 450px) {
			
 
				+      .btn-container {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      button {
			
 
				+        width: 100%;
			
 
				+        margin: 0.5rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+        background-size: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 515px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.7rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.7rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 460px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.4rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.4rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 400px) {
			
 
				+      #app h1 {
			
 
				+        font-size: 1.6rem;
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(1.3rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(1.3rem) scale(1.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    @media (max-width: 340px) {
			
 
				+      input[type="checkbox"]:checked+.toggle::after {
			
 
				+        transform: translateX(0.9rem);
			
 
				+      }
			
 
				+
			
 
				+      input[type="checkbox"]:checked:hover+.toggle::after {
			
 
				+        transform: translateX(0.9rem) scale(1.075);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+  <script>
			
 
				+    $(function () {
			
 
				+      let $select2 = $('.select2').select2({
			
 
				+        containerCssClass: "wrap"
			
 
				+      })
			
 
				+
			
 
				+      function triggerEvent(name, val) {
			
 
				+        let selected = $("select[name='" + name + "']")
			
 
				+        let change = new Event('change', { bubbles: true })
			
 
				+        selected[0].dispatchEvent(change)
			
 
				+      }
			
 
				+
			
 
				+      $('.select2').on('select2:select', function (e) {
			
 
				+        triggerEvent(e.target.name, e.target.value)
			
 
				+      });
			
 
				+    })
			
 
				+  </script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"></div>
			
 
				+  <script>
			
 
				+      (function (window) {
			
 
				+        "use strict";
			
 
				+
			
 
				+        function Model() {
			
 
				+          this.title = `Module 8 Server-Side APIs Challenge Rubric (Coding)`;
			
 
				+          this.categories = [
			
 
				+            {
			
 
				+              title: "Deployment",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Student submitted deployed live application URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application loads at deployed URL (no 404, or Heroku/GH Pages error)",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Application isn't deployed",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Student submitted application GitHub URL",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "Missing GitHub submission URL",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "GitHub Repo contains application code",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message: "GitHub repo is empty",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Technical Acceptance Criteria",
			
 
				+              subtitle:
			
 
				+                "Keep your browser console open and watch out for errors from this point forward.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+              {
			
 
				+                  title:
			
 
				+                    "When a user searches for a city they are presented with current and future conditions for that city and that city is added to the search history",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "When a user searches for a city they are not presented with the current and future conditions for that city",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "When a user views the current weather conditions for a city they are presented with the city's name, the date, an icon representation of the weather conditions, the temperature, the humidity, and the wind speed",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The current weather conditions section does not contain any of the required data",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The current weather conditions section contains some of the required data",
			
 
				+                      score: 3
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The current weather conditions section contains most of the required data",
			
 
				+                      score: 6
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The current weather conditions section contains all of the required data",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ]
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "When a user view future weather conditions for that city they are presented with a 5-day forecast that displays: the date, an icon representation of weather conditions, the temperature, and the humidity",
			
 
				+                  score: 8,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "The future weather conditions section does not contain any of the required data",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The future weather conditions section contains some of the required data",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "The future weather conditions section contains all of the required data",
			
 
				+                      score: 8
			
 
				+                    }
			
 
				+                  ]
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "When a user click on a city in the search history they are again presented with current and future conditions for that city",
			
 
				+                  score: 8,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "When a user clicks on a past search they are not presented with the current and future conditions for that city",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application uses the OpenWeather API to retrieve weather data.",
			
 
				+                  score: 4,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application does not use the OpenWeather API to retrieve weather data.",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application uses localStorage to store persistent data.",
			
 
				+                  score: 4,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Application does not use localStorage to store persistent data.",
			
 
				+                  status: false
			
 
				+                },
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Repository Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Repository has a unique name",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message: "Repo doesn't have a unique name",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for file structure and naming conventions",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow recommended file/folder structure",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Code doesn't follow good practices for class/id names, indentation, lacks quality comments",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Repository contains multiple descriptive commit messages",
			
 
				+                  score: 2,
			
 
				+                  type: "true false",
			
 
				+                  message:
			
 
				+                    "Repo doesn't contain multiple descriptive commit messages",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Repo doesn't include a high quality README with screenshots, a description, link to deployed application",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 2 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository README is missing 1 of the following: description, screenshot, or link to deployed application",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Repository contains quality README with description, screenshot, link to deployed application",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Application Quality",
			
 
				+              subtitle: null,
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application user experience is intuitive and easy to navigate",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user experience is not intuitive and easy to navigate",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be much more intuitive and easy to navigate",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience could be a lot more intuitive and easy to navigate",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user experience is intuitive and easy to navigate",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application user interface style is clean and polished",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application user interface is not clean and polished",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be much better",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface could be a bit better",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application user interface style is clean and polished",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                  score: 5,
			
 
				+                  type: "likert",
			
 
				+                  options: [
			
 
				+                    {
			
 
				+                      message: "Application doesn't resemble the mock-up functionality provided in homework instructions",
			
 
				+                      score: 0
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions much more closely",
			
 
				+                      score: 2
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application could resemble mock-up functionality provided with homework instructions a bit more closely",
			
 
				+                      score: 4
			
 
				+                    },
			
 
				+                    {
			
 
				+                      message: "Application resembles the mock-up functionality provided in homework instructions",
			
 
				+                      score: 5
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  message: "",
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            {
			
 
				+              title: "Academic Integrity",
			
 
				+              subtitle:
			
 
				+                "If any of of the following are true, partner with your instructor to investigate plagiarism. Contact your SSM if you believe plagiarism has occurred.",
			
 
				+              score: 0,
			
 
				+              questions: [
			
 
				+                {
			
 
				+                  title: "Application contains a low number of commits",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application codebase appears advanced for the student, at this point in the course, or in general",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references a different author and/or repository",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                },
			
 
				+                {
			
 
				+                  title:
			
 
				+                    "Application package.json file references much older versions of npm packages",
			
 
				+                  score: 0,
			
 
				+                  type: "true false",
			
 
				+                  message: null,
			
 
				+                  status: false
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          ];
			
 
				+
			
 
				+          this.initStorage();
			
 
				+        }
			
 
				+
			
 
				+        Model.prototype.initStorage = function () {
			
 
				+          this.score = 0;
			
 
				+          this.questions = [];
			
 
				+          this.messages = new Set();
			
 
				+          this.flagged = new Set();
			
 
				+          this.isDarkMode =
			
 
				+            JSON.parse(localStorage.getItem("isDarkMode")) || false;
			
 
				+
			
 
				+          this.categories
			
 
				+            .forEach(category => {
			
 
				+              category.score = 0;
			
 
				+              category.questions.forEach(question => {
			
 
				+                question.category = category.title;
			
 
				+                question.status = false;
			
 
				+                question.id = this.questions.length;
			
 
				+                question.flagged = category.title === "Academic Integrity";
			
 
				+                question.bonus = category.title === "Bonus";
			
 
				+                if (question.type === "likert") {
			
 
				+                  question.message = question.options[0].message.split(" - ").pop();
			
 
				+                };
			
 
				+
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: question.category
			
 
				+                };
			
 
				+
			
 
				+                question.message && !question.bonus && this.messages.add(messageObj);
			
 
				+                this.questions.push(question);
			
 
				+                category.score += question.score;
			
 
				+              });
			
 
				+            });
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleDarkMode = function () {
			
 
				+          this.isDarkMode = !this.isDarkMode;
			
 
				+          localStorage.setItem("isDarkMode", this.isDarkMode);
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.toggleRadio = function (radio) {
			
 
				+          const id = Number(radio.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+
			
 
				+          question.status = !question.status;
			
 
				+
			
 
				+          if (question.status === true) {
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            } else {
			
 
				+              let messageObj = {
			
 
				+                message: question.message,
			
 
				+                category: category
			
 
				+              }
			
 
				+              this.messages.add(messageObj);
			
 
				+            }
			
 
				+
			
 
				+            this.score += question.score;
			
 
				+
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.add(question.id);
			
 
				+            }
			
 
				+          } else {
			
 
				+            if (question.flagged) {
			
 
				+              this.flagged.delete(question.id);
			
 
				+            }
			
 
				+
			
 
				+            if (!question.bonus) {
			
 
				+              if (question.message) {
			
 
				+                let messageObj = {
			
 
				+                  message: question.message,
			
 
				+                  category: category
			
 
				+                }
			
 
				+                this.messages.add(messageObj);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.messages.forEach(message => {
			
 
				+                if (message.message === question.message) {
			
 
				+                  this.messages.delete(message);
			
 
				+                }
			
 
				+              })
			
 
				+            }
			
 
				+
			
 
				+            this.score -= question.score;
			
 
				+          }
			
 
				+
			
 
				+          if (category !== "Academic Integrity") {
			
 
				+            if (question.status) {
			
 
				+              questionScore.textContent = question.score;
			
 
				+            } else {
			
 
				+              questionScore.textContent = 0;
			
 
				+            }
			
 
				+
			
 
				+            const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+            let categoryTotal = 0;
			
 
				+
			
 
				+            catQuestions.forEach(question => {
			
 
				+              if (question.type === "true false") {
			
 
				+                if (question.status) {
			
 
				+                  categoryTotal += question.score;
			
 
				+                }
			
 
				+              } else {
			
 
				+                let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+                categoryTotal += parseInt(score);
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            categoryScore.textContent = categoryTotal;
			
 
				+            resultsCategoryScore.textContent = categoryTotal;
			
 
				+          }
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.handleSelect = function (select) {
			
 
				+          const id = Number(select.getAttribute("name"));
			
 
				+          const question = this.questions[id];
			
 
				+          const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+          const oldScore = questionScore.textContent;
			
 
				+          const category = question.category;
			
 
				+          const categoryScore = document.querySelector("span[data-cat='" + category + "']");
			
 
				+          const resultsCategoryScore = document.querySelector("span[data-res-cat='" + category + "']");
			
 
				+          let newMessage = select.selectedOptions[0].text.split(" - ").pop();
			
 
				+
			
 
				+          if (newMessage === "Open this menu") {
			
 
				+            newMessage = select[1].text.split(" - ").pop();
			
 
				+          };
			
 
				+
			
 
				+          if (question.type === "likert") {
			
 
				+
			
 
				+            this.messages.forEach(item => {
			
 
				+              if (item.message === question.message) {
			
 
				+                this.messages.delete(item)
			
 
				+              }
			
 
				+            })
			
 
				+
			
 
				+            question.message = newMessage;
			
 
				+
			
 
				+            let messageObj = {
			
 
				+              message: newMessage,
			
 
				+              category: category
			
 
				+            }
			
 
				+
			
 
				+            this.messages.add(messageObj);
			
 
				+
			
 
				+          };
			
 
				+
			
 
				+
			
 
				+
			
 
				+          this.score -= parseInt(oldScore);
			
 
				+          this.score += parseInt(select.value);
			
 
				+          questionScore.textContent = select.value;
			
 
				+
			
 
				+          const catQuestions = this.categories.filter(cat => cat.title === category)[0].questions;
			
 
				+          let categoryTotal = 0;
			
 
				+
			
 
				+          catQuestions.forEach(question => {
			
 
				+            if (question.type === "true false") {
			
 
				+              if (question.status) {
			
 
				+                categoryTotal += question.score;
			
 
				+              }
			
 
				+            } else {
			
 
				+              let score = document.querySelector("select[name='" + question.id + "']").value;
			
 
				+              categoryTotal += parseInt(score);
			
 
				+            }
			
 
				+          })
			
 
				+
			
 
				+          categoryScore.textContent = categoryTotal;
			
 
				+          resultsCategoryScore.textContent = categoryTotal;
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.calcGrade = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.score));
			
 
				+
			
 
				+          let letterGrade = "";
			
 
				+
			
 
				+          if (roundedScore >= 97) {
			
 
				+            letterGrade = "A+";
			
 
				+          } else if (roundedScore >= 93 && roundedScore <= 96) {
			
 
				+            letterGrade = "A";
			
 
				+          } else if (roundedScore >= 90 && roundedScore <= 92) {
			
 
				+            letterGrade = "A-";
			
 
				+          } else if (roundedScore >= 87 && roundedScore <= 89) {
			
 
				+            letterGrade = "B+";
			
 
				+          } else if (roundedScore >= 83 && roundedScore <= 86) {
			
 
				+            letterGrade = "B";
			
 
				+          } else if (roundedScore >= 80 && roundedScore <= 82) {
			
 
				+            letterGrade = "B-";
			
 
				+          } else if (roundedScore >= 77 && roundedScore <= 79) {
			
 
				+            letterGrade = "C+";
			
 
				+          } else if (roundedScore >= 73 && roundedScore <= 76) {
			
 
				+            letterGrade = "C";
			
 
				+          } else if (roundedScore >= 70 && roundedScore <= 72) {
			
 
				+            letterGrade = "C-";
			
 
				+          } else if (roundedScore >= 67 && roundedScore <= 69) {
			
 
				+            letterGrade = "D+";
			
 
				+          } else if (roundedScore >= 63 && roundedScore <= 66) {
			
 
				+            letterGrade = "D";
			
 
				+          } else if (roundedScore >= 60 && roundedScore <= 62) {
			
 
				+            letterGrade = "D-";
			
 
				+          } else {
			
 
				+            letterGrade = "F";
			
 
				+          }
			
 
				+
			
 
				+          return letterGrade;
			
 
				+        };
			
 
				+
			
 
				+        Model.prototype.hasFlags = function () {
			
 
				+          return this.flagged.size > 0;
			
 
				+        };
			
 
				+
			
 
				+        function View(model) {
			
 
				+          this.model = model;
			
 
				+          this.generateHTML();
			
 
				+          this.cacheDom();
			
 
				+        }
			
 
				+
			
 
				+        View.prototype.cacheDom = function () {
			
 
				+          this.darkModeToggle = document.querySelector("#dark-mode");
			
 
				+
			
 
				+          this.radios = Array.from(
			
 
				+            document.querySelectorAll("input[type='radio']")
			
 
				+          );
			
 
				+
			
 
				+          this.selects = Array.from(
			
 
				+            document.querySelectorAll("select")
			
 
				+          );
			
 
				+
			
 
				+          this.totals = document.querySelector(".totals");
			
 
				+          this.grade = document.querySelector(".grade");
			
 
				+          this.alert = document.querySelector("div[role='alert']");
			
 
				+          this.summaryHeading = document.querySelector(".summary-heading");
			
 
				+          this.summary = document.querySelector(".summary");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let summary = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let summaryName = summary + "-summary";
			
 
				+              return this[summaryName] = document.querySelector("." + summary);
			
 
				+            })
			
 
				+
			
 
				+          this.resetButton = document.querySelector(".reset");
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .map(category => {
			
 
				+              let button = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + button;
			
 
				+              return this[buttonName] = document.querySelector(".copy-" + button);
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createFieldset = function ({ title, id, score, status, category, type, options }) {
			
 
				+          return `<fieldset class="input-group">
			
 
				+          <legend>
			
 
				+            <span class="title">${title}</span> ${category === "Academic Integrity" ? "" : "<span class='score'><span data-id='" + id + "' class='current-score'>0</span> / " + score + "</span>"}
			
 
				+          </legend>
			
 
				+          ${type === "true false" ?
			
 
				+              `<div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-true" value="true">
			
 
				+            <label for="${id}-true">True</label>
			
 
				+          </div>
			
 
				+          <div class="radio-group">
			
 
				+            <input type="radio" name="${id}" id="${id}-false" value="false" checked>
			
 
				+            <label for="${id}-false">False</label>
			
 
				+          </div>` :
			
 
				+              `<div class="select-group">
			
 
				+            <select name="${id}" class="select-lg select2 narrow wrap">
			
 
				+              <option value="0" selected>Open this menu</option>
			
 
				+              ${options.map(option => `<option value="${option.score}">${option.score} - ${option.message}</option>`)}
			
 
				+            </select>
			
 
				+          </div>`
			
 
				+            }
			
 
				+        </fieldset>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createCard = function ({ title, subtitle, questions, score }) {
			
 
				+          return `<div class="card">
			
 
				+          <div class="card-header"><h2>${title}</h2> ${title !== "Academic Integrity" ? "<span class='cat-score'><span data-cat='" + title + "'>0</span> / " + score + "</span>" : ""}</div>
			
 
				+          ${subtitle ? `<h3>${subtitle}</h3>` : ""}
			
 
				+          ${questions.map(child => this.createFieldset(child)).join("")}
			
 
				+          </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createResults = function () {
			
 
				+          return `<div class="card">
			
 
				+        <h2>Recommended Grade: <span class="grade">F</span></h2>
			
 
				+        <h2 class="totals">Total: (0/100)</h2>
			
 
				+        <div class="d-none" role="alert">
			
 
				+          You've selected <strong>True</strong> for one of more Academic
			
 
				+          Integrity prompts and are advised to investigate plagiarism before
			
 
				+          issuing a grade.
			
 
				+        </div>
			
 
				+        <div class="summary" aria-label="summary">
			
 
				+        ${this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .map(category => {
			
 
				+                let score = category.score;
			
 
				+                let title = category.title;
			
 
				+                let catClass = title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+                return "<h2>" + title + "<span class='cat-score'><span data-res-cat='" + title + "'>0</span> / " + score + "</span></h2><pre class='" + catClass + "'>" + [...this.model.messages]
			
 
				+                  .filter(messageObj => messageObj.category === category.title)
			
 
				+                  .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                  .join("") + "</pre><button class='copy copy-" + catClass + "'>Copy To Clipboard</button>"
			
 
				+              })
			
 
				+              .join("")}
			
 
				+        </div>
			
 
				+        <div class="btn-container">
			
 
				+          <button class="reset">Reset Form</button>
			
 
				+        </div>
			
 
				+      </div>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.createHeader = function (title, isDarkMode = false) {
			
 
				+          return `<header>
			
 
				+            <h1>${title}</h1>
			
 
				+            <div class="switch-group">
			
 
				+              <input type="checkbox" name="dark-mode" id="dark-mode" ${
			
 
				+            isDarkMode ? "checked" : ""
			
 
				+            }>
			
 
				+              <label aria-label="dark mode" for="dark-mode" class="toggle">
			
 
				+              </label>
			
 
				+            </div>
			
 
				+          </header>`;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.generateHTML = function () {
			
 
				+          this.wrapper = document.querySelector("#app");
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          }
			
 
				+
			
 
				+          const survey = this.model.categories.reduce((final, current) => {
			
 
				+            final += this.createCard(current);
			
 
				+            return final;
			
 
				+          }, "");
			
 
				+
			
 
				+          const results = this.createResults();
			
 
				+
			
 
				+          const header = this.createHeader(
			
 
				+            this.model.title,
			
 
				+            this.model.isDarkMode
			
 
				+          );
			
 
				+
			
 
				+          this.wrapper.innerHTML = header + survey + results;
			
 
				+        };
			
 
				+
			
 
				+        View.prototype.update = function () {
			
 
				+          const roundedScore = Math.min(100, Math.ceil(this.model.score));
			
 
				+          this.totals.textContent = `Total: (${roundedScore}/ 100)`;
			
 
				+
			
 
				+          const letterGrade = this.model.calcGrade();
			
 
				+          this.grade.textContent = letterGrade;
			
 
				+
			
 
				+          if (this.model.hasFlags()) {
			
 
				+            this.alert.classList.remove("d-none");
			
 
				+          } else {
			
 
				+            this.alert.classList.add("d-none");
			
 
				+          }
			
 
				+
			
 
				+          if (this.model.isDarkMode) {
			
 
				+            this.wrapper.classList.add("dark");
			
 
				+          } else {
			
 
				+            this.wrapper.classList.remove("dark");
			
 
				+          }
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let catClass = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+
			
 
				+              this[catClass + "-summary"].innerHTML = [...this.model.messages]
			
 
				+                .filter(messageObj => messageObj.category === category.title)
			
 
				+                .map(messageObj => `* ${messageObj.message}\n`)
			
 
				+                .join("")
			
 
				+            })
			
 
				+
			
 
				+        };
			
 
				+
			
 
				+        function Controller(model, view) {
			
 
				+          this.model = model;
			
 
				+          this.view = view;
			
 
				+          this.addEventListeners();
			
 
				+        }
			
 
				+
			
 
				+        Controller.prototype.addEventListeners = function () {
			
 
				+          this.view.wrapper.addEventListener("change", event => {
			
 
				+            const { target } = event;
			
 
				+
			
 
				+            if (target.name !== "dark-mode") {
			
 
				+              if (!target.matches("input[type='radio']")) {
			
 
				+                this.model.handleSelect(target);
			
 
				+              } else {
			
 
				+                this.model.toggleRadio(target);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+
			
 
				+          this.view.resetButton.addEventListener("click", () => {
			
 
				+            this.model.initStorage();
			
 
				+
			
 
				+            this.view.radios.forEach(
			
 
				+              radio => (radio.checked = radio.hasAttribute("checked"))
			
 
				+            );
			
 
				+
			
 
				+            this.view.selects.forEach(
			
 
				+              select => select.selectedIndex = null
			
 
				+            )
			
 
				+
			
 
				+            this.model.questions
			
 
				+              .filter(question => question.category !== "Academic Integrity")
			
 
				+              .forEach(question => {
			
 
				+                const id = question.id;
			
 
				+                const questionScore = document.querySelector("span[data-id='" + id + "']");
			
 
				+                questionScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.model.categories
			
 
				+              .filter(category => category.title !== "Academic Integrity")
			
 
				+              .forEach(category => {
			
 
				+                const title = category.title
			
 
				+                const categoryScore = document.querySelector("span[data-cat='" + title + "']");
			
 
				+                const resultsCategoryScore = document.querySelector("span[data-res-cat='" + title + "']");
			
 
				+                categoryScore.textContent = 0;
			
 
				+                resultsCategoryScore.textContent = 0;
			
 
				+              });
			
 
				+
			
 
				+            this.view.update();
			
 
				+            window.scrollTo(0, 0);
			
 
				+          });
			
 
				+
			
 
				+          this.model.categories
			
 
				+            .filter(category => category.title !== "Academic Integrity")
			
 
				+            .forEach(category => {
			
 
				+              let title = category.title.replace(/\s+/g, '-').toLowerCase();
			
 
				+              let buttonName = "copyButton-" + title;
			
 
				+
			
 
				+              let summaryName = title + "-summary";
			
 
				+
			
 
				+              this.view[buttonName].addEventListener("click", () => {
			
 
				+                const selection = window.getSelection();
			
 
				+                const range = document.createRange();
			
 
				+                range.selectNodeContents(this.view[summaryName]);
			
 
				+                selection.removeAllRanges();
			
 
				+                selection.addRange(range);
			
 
				+                document.execCommand("copy");
			
 
				+              });
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+          this.view.darkModeToggle.addEventListener("change", () => {
			
 
				+            this.model.toggleDarkMode();
			
 
				+            this.view.update();
			
 
				+          });
			
 
				+        };
			
 
				+
			
 
				+        function App(Model, View, Controller) {
			
 
				+          this.model = new Model();
			
 
				+          this.view = new View(this.model);
			
 
				+          this.controller = new Controller(this.model, this.view);
			
 
				+        }
			
 
				+
			
 
				+        return new App(Model, View, Controller);
			
 
				+      })(window);
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/rubrics/fsf1.html
+++ b/rubrics/fsf1.html
--- a/rubrics/fsf10.html
+++ b/rubrics/fsf10.html
--- a/rubrics/fsf11.html
+++ b/rubrics/fsf11.html
--- a/rubrics/fsf12.html
+++ b/rubrics/fsf12.html
--- a/rubrics/fsf13.html
+++ b/rubrics/fsf13.html
--- a/rubrics/fsf14.html
+++ b/rubrics/fsf14.html
--- a/rubrics/fsf17.html
+++ b/rubrics/fsf17.html
--- a/rubrics/fsf18.html
+++ b/rubrics/fsf18.html
--- a/rubrics/fsf19.html
+++ b/rubrics/fsf19.html
--- a/rubrics/fsf2.html
+++ b/rubrics/fsf2.html
--- a/rubrics/fsf20.html
+++ b/rubrics/fsf20.html
--- a/rubrics/fsf21.html
+++ b/rubrics/fsf21.html
--- a/rubrics/fsf22.html
+++ b/rubrics/fsf22.html
--- a/rubrics/fsf3.html
+++ b/rubrics/fsf3.html
--- a/rubrics/fsf4.html
+++ b/rubrics/fsf4.html
--- a/rubrics/fsf5.html
+++ b/rubrics/fsf5.html
--- a/rubrics/fsf6.html
+++ b/rubrics/fsf6.html
--- a/rubrics/fsf8.html
+++ b/rubrics/fsf8.html
--- a/rubrics/fsf9.html
+++ b/rubrics/fsf9.html