Inicio Explorar Axuda
Rexistro Iniciar sesión
lee
/
leemorgan-dev
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

Update routes for new modules.
Add new modules for front end courses.

Lee Morgan %!s(int64=2) %!d(string=hai) anos
pai
9f81a5bf2e
achega
d1723f897e
Modificáronse 31 ficheiros con 14211 adicións e 1 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 1 1
      routes.js
  2. 1325 0
      rubrics/fe1.html
  3. 1288 0
      rubrics/fe11.html
  4. 1204 0
      rubrics/fe12.html
  5. 1325 0
      rubrics/fe13.html
  6. 1306 0
      rubrics/fe2.html
  7. 1296 0
      rubrics/fe3.html
  8. 1238 0
      rubrics/fe4.html
  9. 1309 0
      rubrics/fe5.html
  10. 1292 0
      rubrics/fe6.html
  11. 1304 0
      rubrics/fe7.html
  12. 1323 0
      rubrics/fe8.html
  13. 0 0
      rubrics/fsf1.html
  14. 0 0
      rubrics/fsf10.html
  15. 0 0
      rubrics/fsf11.html
  16. 0 0
      rubrics/fsf12.html
  17. 0 0
      rubrics/fsf13.html
  18. 0 0
      rubrics/fsf14.html
  19. 0 0
      rubrics/fsf17.html
  20. 0 0
      rubrics/fsf18.html
  21. 0 0
      rubrics/fsf19.html
  22. 0 0
      rubrics/fsf2.html
  23. 0 0
      rubrics/fsf20.html
  24. 0 0
      rubrics/fsf21.html
  25. 0 0
      rubrics/fsf22.html
  26. 0 0
      rubrics/fsf3.html
  27. 0 0
      rubrics/fsf4.html
  28. 0 0
      rubrics/fsf5.html
  29. 0 0
      rubrics/fsf6.html
  30. 0 0
      rubrics/fsf8.html
  31. 0 0
      rubrics/fsf9.html

+ 1 - 1
routes.js
Ver ficheiro 

@@ -76,6 +76,6 @@ module.exports = function(app){
 
     app.put("/tracker", tracker.update);
 
     app.put("/tracker", tracker.update);
 
 
 
     //2u RUBRICS
 
     //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`));
 
     app.get("/2u/style", (req, res)=>res.sendFile(`${__dirname}/rubrics/style.css`));
 
 }
 
 }

+ 1325 - 0
rubrics/fe1.html
Ver ficheiro 

@@ -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>
 
+

+ 1288 - 0
rubrics/fe11.html
Ver ficheiro 

@@ -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>

+ 1204 - 0
rubrics/fe12.html
Ver ficheiro 

@@ -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>

+ 1325 - 0
rubrics/fe13.html
Ver ficheiro 

@@ -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>

+ 1306 - 0
rubrics/fe2.html
Ver ficheiro 

@@ -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>

+ 1296 - 0
rubrics/fe3.html
Ver ficheiro 

@@ -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>

+ 1238 - 0
rubrics/fe4.html
Ver ficheiro 

@@ -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>

+ 1309 - 0
rubrics/fe5.html
Ver ficheiro 

@@ -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>

+ 1292 - 0
rubrics/fe6.html
Ver ficheiro 

@@ -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>

+ 1304 - 0
rubrics/fe7.html
Ver ficheiro 

@@ -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>

+ 1323 - 0
rubrics/fe8.html
Ver ficheiro 

@@ -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>

+ 0 - 0
rubrics/mod1.html → rubrics/fsf1.html
Ver ficheiro


+ 0 - 0
rubrics/mod10.html → rubrics/fsf10.html
Ver ficheiro


+ 0 - 0
rubrics/mod11.html → rubrics/fsf11.html
Ver ficheiro


+ 0 - 0
rubrics/mod12.html → rubrics/fsf12.html
Ver ficheiro


+ 0 - 0
rubrics/mod13.html → rubrics/fsf13.html
Ver ficheiro


+ 0 - 0
rubrics/mod14.html → rubrics/fsf14.html
Ver ficheiro


+ 0 - 0
rubrics/mod17.html → rubrics/fsf17.html
Ver ficheiro


+ 0 - 0
rubrics/mod18.html → rubrics/fsf18.html
Ver ficheiro


+ 0 - 0
rubrics/mod19.html → rubrics/fsf19.html
Ver ficheiro


+ 0 - 0
rubrics/mod2.html → rubrics/fsf2.html
Ver ficheiro


+ 0 - 0
rubrics/mod20.html → rubrics/fsf20.html
Ver ficheiro


+ 0 - 0
rubrics/mod21.html → rubrics/fsf21.html
Ver ficheiro


+ 0 - 0
rubrics/mod22.html → rubrics/fsf22.html
Ver ficheiro


+ 0 - 0
rubrics/mod3.html → rubrics/fsf3.html
Ver ficheiro


+ 0 - 0
rubrics/mod4.html → rubrics/fsf4.html
Ver ficheiro


+ 0 - 0
rubrics/mod5.html → rubrics/fsf5.html
Ver ficheiro


+ 0 - 0
rubrics/mod6.html → rubrics/fsf6.html
Ver ficheiro


+ 0 - 0
rubrics/mod8.html → rubrics/fsf8.html
Ver ficheiro


+ 0 - 0
rubrics/mod9.html → rubrics/fsf9.html
Ver ficheiro