lee
/
leemorgan-dev


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407
							<!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" />
    <link href="/2u/style" rel="stylesheet"/>
    <title>Module 14 MVC 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 14 MVC 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:
                                        "Application allows users to sign up and log in",
                                    score: 5,
                                    type: "true false",
                                    message:
                                        "Application doesn't allow users to sign up and log in",
                                    status: false
                                },
                                {
                                    title: "Application includes navigation options for home, a dashboard, and the login page, and the dashboard page redirects to the login page if the user is not logged in",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application doesn't include navigation options for home, a dashboard, and the login page, and the dashboard page doesn't redirect to the login page if the user is not logged in",
                                            score: 0
                                        },
                                        {
                                            message: "Application includes navigation options for home, a dashboard, and the login page, but the dashboard page doesn't redirect to the login page if the user is not logged in",
                                            score: 2
                                        },
                                        {
                                            message: "Application includes navigation options for home, a dashboard, and the login page, and the dashboard page redirects to the login page if the user is not logged in",
                                            score: 5
                                        }
                                    ],
                                    message: "",
                                    status: false
                                },
                                {
                                    title: "Application displays all existing blog posts (post title, contents, post creator’s username, and date created) on the home page and the user's blog posts on their dashboard",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application doesn't display all existing blog posts (post title, contents, post creator’s username, and date created) on the home page and the user's blog posts on their dashboard",
                                            score: 0
                                        },
                                        {
                                            message: "Application either doesn't display all existing blog posts (post title, contents, post creator’s username, and date created) on the home page or doesn't display the user's blog posts on their dashboard",
                                            score: 2
                                        },
                                        {
                                            message: "Application displays all existing blog posts (post title, contents, post creator’s username, and date created) on the home page and the user's blog posts on their dashboard",
                                            score: 5
                                        }
                                    ],
                                    message: "",
                                    status: false
                                },
                                {
                                    title: "Application dashboard includes the option to create new blog posts, including a title and content, and both the homepage and dashboard are updated to include the new post",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application dashboard doesn't include the option to create new blog posts",
                                            score: 0
                                        },
                                        {
                                            message: "Application dashboard includes the option to create new blog posts, but is missing either the option to include a title or the content",
                                            score: 1
                                        },
                                        {
                                            message: "Application dashboard includes the option to create new blog posts, including a title and content, but doesn't update both the homepage and dashboard to include the new post",
                                            score: 2
                                        },
                                        {
                                            message: "Application dashboard includes the option to create new blog posts, including a title and content, but either doesn't update the homepage to include the new post or doesn't update the dashboard to include the new post",
                                            score: 3
                                        },
                                        {
                                            message: "Application dashboard includes the option to create new blog posts, including a title and content, and both the homepage and dashboard are updated to include the new post",
                                            score: 5
                                        }
                                    ],
                                    message: "",
                                    status: false
                                },
                                {
                                    title: "Application dashboard allows user to click into their blog posts and either update or delete them",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application dashboard doesn't allow user to click into their blog posts and either update or delete them",
                                            score: 0
                                        },
                                        {
                                            message: "Application dashboard allows user to click into their blog posts but is missing either the option to update them or delete them",
                                            score: 2
                                        },
                                        {
                                            message: "Application dashboard allows user to click into their blog posts and either update or delete them",
                                            score: 5
                                        }
                                    ],
                                    message: "",
                                    status: false
                                },
                                {
                                    title: "Application allows all users to click on existing blog posts on the home page and see the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application doesn't allow users to click on existing blog posts on the home page and see the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 0
                                        },
                                        {
                                            message: "Application allows all users to click on existing blog posts on the home page, but 4 of the following 5 items are missing: the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 1
                                        },
                                        {
                                            message: "Application allows all users to click on existing blog posts on the home page, but 3 of the following 5 items are missing: the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 2
                                        },
                                        {
                                            message: "Application allows all users to click on existing blog posts on the home page, but 2 of the following 5 items are missing: the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 3
                                        },
                                        {
                                            message: "Application allows all users to click on existing blog posts on the home page, but 1 of the following 5 items is missing: the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 4
                                        },
                                        {
                                            message: "Application allows all users to click on existing blog posts on the home page and see the post title, contents, post creator’s username, date created for that post, and any existing comments (comment, comment creator’s username, and the date it was created)",
                                            score: 5
                                        }
                                    ],
                                    message: "",
                                    status: false
                                },
                                {
                                    title:
                                        "Application allows logged in users to leave a comment on a post that they click on and updates post to include comment",
                                    score: 5,
                                    type: "true false",
                                    message:
                                        "Application doesn't allow logged in users to leave a comment on a post that they click on and doesn't update post to include comment",
                                    status: false
                                },
                                {
                                    title: "Application navigation includes a link for users to log out of application and the user is logged out automatically when they are idle on the site for more than a set time",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application navigation doesn't include a link for users to log out of application and doesn't log the user out automatically when they are idle on the site for more than a set time",
                                            score: 0
                                        },
                                        {
                                            message: "Application navigation includes a link for users to log out of application but doesn't log the user out automatically when they are idle on the site for more than a set time",
                                            score: 3
                                        },
                                        {
                                            message: "Application navigation includes a link for users to log out of application and the user is logged out automatically when they are idle on the site for more than a set time",
                                            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 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 Challenge instructions",
                                    score: 5,
                                    type: "likert",
                                    options: [
                                        {
                                            message: "Application doesn't resemble the mock-up functionality provided in Challenge instructions",
                                            score: 0
                                        },
                                        {
                                            message: "Application could resemble mock-up functionality provided with Challenge instructions much more closely",
                                            score: 2
                                        },
                                        {
                                            message: "Application could resemble mock-up functionality provided with Challenge instructions a bit more closely",
                                            score: 4
                                        },
                                        {
                                            message: "Application resembles the mock-up functionality provided in Challenge 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 >= 99.5) {
                        letterGrade = "A+";
                    } else if (roundedScore >= 94.5 && roundedScore <= 99.4) {
                        letterGrade = "A";
                    } else if (roundedScore >= 91.5 && roundedScore <= 94.4) {
                        letterGrade = "A-";
                    } else if (roundedScore >= 87.5 && roundedScore <= 91.4) {
                        letterGrade = "B+";
                    } else if (roundedScore >= 84.5 && roundedScore <= 87.4) {
                        letterGrade = "B";
                    } else if (roundedScore >= 81.5 && roundedScore <= 84.4) {
                        letterGrade = "B-";
                    } else if (roundedScore >= 77.5 && roundedScore <= 81.4) {
                        letterGrade = "C+";
                    } else if (roundedScore >= 74.5 && roundedScore <= 77.4) {
                        letterGrade = "C";
                    } else if (roundedScore >= 71.5 && roundedScore <= 74.4) {
                        letterGrade = "C-";
                    } else if (roundedScore >= 69.5 && roundedScore <= 71.4) {
                        letterGrade = "D+";
                    } else if (roundedScore >= 64.5 && roundedScore <= 69.4) {
                        letterGrade = "D";
                    } else if (roundedScore >= 61.5 && roundedScore <= 64.4) {
                        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>