diff --git a/README.md b/README.md
index f3e8be2..e958254 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,7 @@ Now, once you've forked this repo and got a local version up on your computer, f
 - [Satoshi's Converter](/submissions/Almopt.html) - By: [Almopt](https://github.com/Almopt)
 - [Tic tac toe](./submissions/sherawat-Lokesh.html) -By: [sherawat-Lokesh](https://github.com/sherawat-Lokesh)
 - [House Garbage Management website](/submissions/Fly0w.html) - By: [Fly0w](https://github.com/Fly0w)
+- [Ultimate Trivia](/submissions/rdcorrigan.html) - By: [Ryan Corrigan](https://github.com/rdcorrigan)
 
 
 ## One Last Thing!
diff --git a/submissions/rdcorrigan.html b/submissions/rdcorrigan.html
new file mode 100644
index 0000000..a464165
--- /dev/null
+++ b/submissions/rdcorrigan.html
@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ultimate Trivia</title>
+</head>
+<body>
+    <style>
+        html {
+            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Arial, sans-serif;
+            scroll-behavior: smooth;
+        }
+        body {
+            background-color: rgb(187, 187, 191);
+        }
+        main {
+            margin: 0rem auto 2rem auto;
+            max-width: 650px;
+        }
+        h1, h2, h3, footer {
+            text-align: center;
+        }
+        h1 {
+            font-size: 4rem;
+            text-decoration: underline;
+            text-transform: uppercase;
+        }
+        h2 {
+            font-weight:700;
+        }
+        div {
+            padding: 0px 0 0px 0;
+        }
+        p {
+            font-size: 22px;
+            font-weight: 700;
+        }
+        input {
+            margin-left: 15px;
+        }
+        label {
+            font-size: 18px;
+            line-height: 3rem;
+            text-align: center;
+        }
+        button {
+            background: white;
+            border-color: black;
+            border-radius: 1rem;
+            border-width: 5px;
+            font-size: 1rem;
+            font-weight: bold;
+            line-height: 3rem;
+            margin-top: 2rem;
+            padding: 0 7px;
+        }
+        button:hover {
+            color: white;
+            background: black;
+            border-color: white;
+            border-width: 5px;
+        }
+        div > button {
+            line-height: 2rem;
+        }
+        #reset {
+            float: right;
+        }
+        #submit {
+            line-height: 3rem;
+            margin: 2% 0 0% 0%;
+        }
+        #backToTop {
+            float: right;
+            line-height: 3rem;
+            margin: 2% 0% 0% 2%;
+        }
+        .message {
+            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+            font-size: 4rem;
+            padding: 5% 0% 5% 0%;
+        }
+        .results {
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-top: 1.5rem;
+        }
+        ul {
+            list-style: none;
+        }
+        footer {
+            font-family:fantasy;
+            font-size: 2rem;
+            font-style: oblique;
+            margin-top: 2rem;
+        }
+    </style>
+    <main>
+    <h1>Ultimate Trivia</h1>
+    <h2>Welcome to the ultimate trivia challenge.</h2>
+    <h3>Test your knowledge with 20 random trivia questions.</h3>
+    <button type="button" id="reset">Reset All</button>
+    <button type="button" id="background">Change Background</button>
+    <form id="form">
+        <div>
+            <p>1. What state is propane in at standard temperature and pressure?</p>
+            <div><input type="radio" id="1a" name="q1" value="A"><label id="L1a" for="1a">A) Liquid</label>
+            <div><input type="radio" id="1b" name="q1" value="B"><label id="L1b" for="1b">B) Gas</label>
+            <div><input type="radio" id="1c" name="q1" value="C"><label id="L1c" for="1c">C) Solid</label>
+            <div><input type="radio" id="1d" name="q1" value="D"><label id="L1d" for="1d">D) Plasma</label>
+            <div id="divC1"><button type="button" id="check1">Check Answer</button></div>
+        </div>
+        <div>
+            <p>2. Pi, the mathematical constant equal to approx 3.14159, is what kind of number?</p>
+            <div><input type="radio" id="2a" name="q2" value="A"><label id="L2a" for="2a">A) Rational</label>
+            <div><input type="radio" id="2b" name="q2" value="B"><label id="L2b" for="2b">B) Natural</label>
+            <div><input type="radio" id="2c" name="q2" value="C"><label id="L2c" for="2c">C) Complex</label>
+            <div><input type="radio" id="2d" name="q2" value="D"><label id="L2d" id="L1a" for="2d">D) Irrational</label>
+            <div id="divC2"><button type="button" id="check2">Check Answer</button></div>
+        </div>
+        <div>
+            <p>3. What is the only food that cannot go bad?</p>
+            <div><input type="radio" id="3a" name="q3" value="A"><label id="L3a" for="3a">A) Dark chocolate</label>
+            <div><input type="radio" id="3b" name="q3" value="B"><label id="L3b" for="3b">B) Canned tuna</label>
+            <div><input type="radio" id="3c" name="q3" value="C"><label id="L3c" for="3c">C) Honey</label>
+            <div><input type="radio" id="3d" name="q3" value="D"><label id="L3d" for="3d">D) Peanut butter</label>
+            <div id="divC3"><button type="button" id="check3">Check Answer</button></div>
+        </div>
+        <div>
+            <p>4. Where in your body is the deltoid muscle situated?</p>
+            <div><input type="radio" id="4a" name="q4" value="A"><label id="L4a" for="4a">A) Shoulder</label>
+            <div><input type="radio" id="4b" name="q4" value="B"><label id="L4b" for="4b">B) Lower back</label>
+            <div><input type="radio" id="4c" name="q4" value="C"><label id="L4c" for="4c">C) Brain</label>
+            <div><input type="radio" id="4d" name="q4" value="D"><label id="L4d" for="4d">D) Legs</label>
+            <div id="divC4"><button type="button" id="check4">Check Answer</button></div>
+        </div>
+        <div>
+            <p>5. What is the most visited tourist attraction in the world?</p>
+            <div><input type="radio" id="5a" name="q5" value="A"><label id="L5a" for="5a">A) Colosseum</label>
+            <div><input type="radio" id="5b" name="q5" value="B"><label id="L5b" for="5b">B) Statue of Liberty</label>
+            <div><input type="radio" id="5c" name="q5" value="C"><label id="L5c" for="5c">C) Eiffel Tower</label>
+            <div><input type="radio" id="5d" name="q5" value="D"><label id="L5d" for="5d">D) Great Wall of China</label>
+            <div id="divC5"><button type="button" id="check5">Check Answer</button></div>
+        </div>
+        <div>
+            <p>6. In the medical term arthritis, what does the suffix -itis mean?</p>
+            <div><input type="radio" id="6a" name="q6" value="A"><label id="L6a" for="6a">A) Abnormality</label>
+            <div><input type="radio" id="6b" name="q6" value="B"><label id="L6b" for="6b">B) Infection or Inflammation</label>
+            <div><input type="radio" id="6c" name="q6" value="C"><label id="L6c" for="6c">C) Painful</label>
+            <div><input type="radio" id="6d" name="q6" value="D"><label id="L6d" for="6d">D) Difficulty</label>
+            <div id="divC6"><button type="button" id="check6">Check Answer</button></div>
+        </div>
+        <div>
+            <p>7. What element does the chemical symbol Au stand for?</p>
+            <div><input type="radio" id="7a" name="q7" value="A"><label id="L7a" for="7a">A) Gold</label>
+            <div><input type="radio" id="7b" name="q7" value="B"><label id="L7b" for="7b">B) Magnesium</label>
+            <div><input type="radio" id="7c" name="q7" value="C"><label id="L7c" for="7c">C) Silver</label>
+            <div><input type="radio" id="7d" name="q7" value="D"><label id="L7d" for="7d">D) Argon</label>
+            <div id="divC7"><button type="button" id="check7">Check Answer</button></div>
+        </div>
+        <div>
+            <p>8. Which fast food restaurant has the largest number of retail locations in the world?</p>
+            <div><input type="radio" id="8a" name="q8" value="A"><label id="L8a" for="8a">A) KFC</label>
+            <div><input type="radio" id="8b" name="q8" value="B"><label id="L8b" for="8b">B) McDonald's</label>
+            <div><input type="radio" id="8c" name="q8" value="C"><label id="L8c" for="8c">C) Wendy's</label>
+            <div><input type="radio" id="8d" name="q8" value="D"><label id="L8d" for="8d">D) Subway</label>
+            <div id="divC8"><button type="button" id="check8">Check Answer</button></div>
+        </div>
+        <div>
+            <p>9. What is the longest line of constant latitude of the Earth?</p>
+            <div><input type="radio" id="9a" name="q9" value="A"><label id="L9a" for="9a">A) Prime Meridian</label>
+            <div><input type="radio" id="9b" name="q9" value="B"><label id="L9b" for="9b">B) Tropic of Cancer</label>
+            <div><input type="radio" id="9c" name="q9" value="C"><label id="L9c" for="9c">C) Arctic Circle</label>
+            <div><input type="radio" id="9d" name="q9" value="D"><label id="L9d" for="9d">D) Equator</label>
+            <div id="divC9"><button type="button" id="check9">Check Answer</button></div>
+        </div>
+        <div>
+            <p>10. Which Asian country has the only non-rectangular flag in the world?</p>
+            <div><input type="radio" id="10a" name="q10" value="A"><label id="L10a" for="10a">A) Pakistan</label>
+            <div><input type="radio" id="10b" name="q10" value="B"><label id="L10b" for="10b">B) Brunei</label>
+            <div><input type="radio" id="10c" name="q10" value="C"><label id="L10c" for="10c">C) Nepal</label>
+            <div><input type="radio" id="10d" name="q10" value="D"><label id="L10d" for="10d">D) Myanmar</label>
+            <div id="divC10"><button type="button" id="check10">Check Answer</button></div>
+        </div>
+        <div>
+            <p>11. What is the oldest soft drink in the United States?</p>
+            <div><input type="radio" id="11a" name="q11" value="A"><label id="L11a" for="11a">A) Dr. Pepper</label>
+            <div><input type="radio" id="11b" name="q11" value="B"><label id="L11b" for="11b">B) 7-Up</label>
+            <div><input type="radio" id="11c" name="q11" value="C"><label id="L11c" for="11c">C) Pepsi</label>
+            <div><input type="radio" id="11d" name="q11" value="D"><label id="L11d" for="11d">D) Coca Cola</label>
+            <div id="divC11"><button type="button" id="check11">Check Answer</button></div>
+        </div>
+        <div>
+            <p>12. What US president was elected to office for a record 4 terms?</p>
+            <div><input type="radio" id="12a" name="q12" value="A"><label id="L12a" for="12a">A) John Fitzgerald Kennedy</label>
+            <div><input type="radio" id="12b" name="q12" value="B"><label id="L12b" for="12b">B) Franklin Delano Roosevelt</label>
+            <div><input type="radio" id="12c" name="q12" value="C"><label id="L12c" for="12c">C) Thomas Woodrow Wilson</label>
+            <div><input type="radio" id="12d" name="q12" value="D"><label id="L12d" for="12d">D) Richard Milhous Nixon</label>
+            <div id="divC12"><button type="button" id="check12">Check Answer</button></div>
+        </div>
+        <div>
+            <p>13. What is the highest-grossing video game franchise to date?</p>
+            <div><input type="radio" id="13a" name="q13" value="A"><label id="L13a" for="13a">A) Call of Duty</label>
+            <div><input type="radio" id="13b" name="q13" value="B"><label id="L13b" for="13b">B) Mario</label>
+            <div><input type="radio" id="13c" name="q13" value="C"><label id="L13c" for="13c">C) Pokemon</label>
+            <div><input type="radio" id="13d" name="q13" value="D"><label id="L13d" for="13d">D) Final Fantasy</label>
+            <div id="divC13"><button type="button" id="check13">Check Answer</button></div>
+        </div>
+        <div>
+            <p>14. What is the name of the coffee shop in the sitcom Friends?</p>
+            <div><input type="radio" id="14a" name="q14" value="A"><label id="L14a" for="14a">A) Central Park Coffee</label>
+            <div><input type="radio" id="14b" name="q14" value="B"><label id="L14b" for="14b">B) Java Park</label>
+            <div><input type="radio" id="14c" name="q14" value="C"><label id="L14c" for="14c">C) Central Perk</label>
+            <div><input type="radio" id="14d" name="q14" value="D"><label id="L14d" for="14d">D) Central Park Roastery</label>
+            <div id="divC14"><button type="button" id="check14">Check Answer</button></div>
+        </div>
+        <div>
+            <p>15. Which three U.S. Presidents passed away on the 4th of July?</p>
+            <div><input type="radio" id="15a" name="q15" value="A"><label id="L15a" for="15a">A) None died on the 4th of July</label>
+            <div><input type="radio" id="15b" name="q15" value="B"><label id="L15b" for="15b">B) Washington, Adams and Lincoln</label>
+            <div><input type="radio" id="15c" name="q15" value="C"><label id="L15c" for="15c">C) Madison, Hayes and Ford</label>
+            <div><input type="radio" id="15d" name="q15" value="D"><label id="L15d" for="15d">D) Jefferson, Adams and Monroe</label>
+            <div id="divC15"><button type="button" id="check15">Check Answer</button></div>
+        </div>
+        <div>
+            <p>16. “Cirque du Soleil” started in which country?</p>
+            <div><input type="radio" id="16a" name="q16" value="A"><label id="L16a" for="16a">A) Russia</label>
+            <div><input type="radio" id="16b" name="q16" value="B"><label id="L16b" for="16b">B) Canada</label>
+            <div><input type="radio" id="16c" name="q16" value="C"><label id="L16c" for="16c">C) France</label>
+            <div><input type="radio" id="16d" name="q16" value="D"><label id="L16d" for="16d">D) USA</label>
+            <div id="divC16"><button type="button" id="check16">Check Answer</button></div>
+        </div>
+        <div>
+            <p>17. Is the Tasmanian Devil living, extinct, mythological or a folk tale?</p>
+            <div><input type="radio" id="17a" name="q17" value="A"><label id="L17a" for="17a">A) Living</label>
+            <div><input type="radio" id="17b" name="q17" value="B"><label id="L17b" for="17b">B) Folk tale</label>
+            <div><input type="radio" id="17c" name="q17" value="C"><label id="L17c" for="17c">C) Extinct</label>
+            <div><input type="radio" id="17d" name="q17" value="D"><label id="L17d" for="17d">D) Mythological</label>
+            <div id="divC17"><button type="button" id="check17">Check Answer</button></div>
+        </div>
+        <div>
+            <p>18. Which country's national animal is a unicorn?</p>
+            <div><input type="radio" id="18a" name="q18" value="A"><label id="L18a" for="18a">A) Denmark</label>
+            <div><input type="radio" id="18b" name="q18" value="B"><label id="L18b" for="18b">B) Wales</label>
+            <div><input type="radio" id="18c" name="q18" value="C"><label id="L18c" for="18c">C) Scotland</label>
+            <div><input type="radio" id="18d" name="q18" value="D"><label id="L18d" for="18d">D) New Zealand</label>
+            <div id="divC18"><button type="button" id="check18">Check Answer</button></div>
+        </div>
+        <div>
+            <p>19. What sport has been played on the moon?</p>
+            <div><input type="radio" id="19a" name="q19" value="A"><label id="L19a" for="19a">A) Football</label>
+            <div><input type="radio" id="19b" name="q19" value="B"><label id="L19b" for="19b">B) Golf</label>
+            <div><input type="radio" id="19c" name="q19" value="C"><label id="L19c" for="19c">C) Frisbee</label>
+            <div><input type="radio" id="19d" name="q19" value="D"><label id="L19d" for="19d">D) Soccer</label>
+            <div id="divC19"><button type="button" id="check19">Check Answer</button></div>
+        </div>
+        <div id="div20">
+            <p>20. Mycology is the scientific study of what?</p>
+            <div><input type="radio" id="20a" name="q20" value="A"><label id="L20a" for="20a">A) Blood</label></div>
+            <div><input type="radio" id="20b" name="q20" value="B"><label id="L20b" for="20b">B) Flowers</label></div>
+            <div><input type="radio" id="20c" name="q20" value="C"><label id="L20c" for="20c">C) Cancer Cells</label></div>
+            <div><input type="radio" id="20d" name="q20" value="D"><label id="L20d" for="20d">D) Fungi</label></div>
+            <div id="lastCheck"><button type="button" id="check20">Check Answer</button></div>
+        </div>
+        <button id="submit" type="button">Submit Answers</button>
+        <button id="backToTop" type="button">Back to Top</button>
+        </form>
+        </main>
+    <script>
+        // VARIABLE DECLARATIONS
+        const body = document.querySelector('body'),
+            submit = document.getElementById('submit'),
+            toTop = document.getElementById('backToTop'),
+            reset = document.getElementById("reset"),
+            background = document.getElementById("background"),
+            check1 = document.getElementById("check1"),
+            check2 = document.getElementById("check2"),
+            check3 = document.getElementById("check3"),
+            check4 = document.getElementById("check4"),
+            check5 = document.getElementById("check5"),
+            check6 = document.getElementById("check6"),
+            check7 = document.getElementById("check7"),
+            check8 = document.getElementById("check8"),
+            check9 = document.getElementById("check9"),
+            check10 = document.getElementById("check10"),
+            check11 = document.getElementById("check11"),
+            check12 = document.getElementById("check12"),
+            check13 = document.getElementById("check13"),
+            check14 = document.getElementById("check14"),
+            check15 = document.getElementById("check15"),
+            check16 = document.getElementById("check16"),
+            check17 = document.getElementById("check17"),
+            check18 = document.getElementById("check18"),
+            check19 = document.getElementById("check19"),
+            check20 = document.getElementById("check20"),
+            answerKey = ['B', 'D', 'C', 'A', 'C', 
+                        'B', 'A', 'D', 'D', 'C', 
+                        'A', 'B', 'A', 'C', 'D', 
+                        'B', 'A', 'C', 'B', 'D'],
+            ul1 = document.createElement('ul'),
+            ul2 = document.createElement('ul'),
+            checkMark = "\u2705", redCross = "\u274C";
+            let numWrong = 0, message;
+        // CHECK FUNCTION INPUT DATA
+        const checkFunc1 = () => {
+            const input = document.forms.form.elements.q1.value;
+            if (input === 'A') document.getElementById('L1a').append(redCross);
+            if (input === 'C') document.getElementById('L1c').append(redCross);
+            if (input === 'D') document.getElementById('L1d').append(redCross);
+            document.getElementById('L1b').append(checkMark);}
+        const checkFunc2 = () => {
+            const input = document.forms.form.elements.q2.value;
+            if (input === 'A') document.getElementById('L2a').append(redCross);
+            if (input === 'B') document.getElementById('L2b').append(redCross);
+            if (input === 'C') document.getElementById('L2c').append(redCross);
+            document.getElementById('L2d').append(checkMark);}
+        const checkFunc3 = () => {
+            const input = document.forms.form.elements.q3.value;
+            if (input === 'A') document.getElementById('L3a').append(redCross);
+            if (input === 'B') document.getElementById('L3b').append(redCross);
+            if (input === 'D') document.getElementById('L3d').append(redCross);
+            document.getElementById('L3c').append(checkMark);}
+        const checkFunc4 = () => {
+            const input = document.forms.form.elements.q4.value;
+            if (input === 'B') document.getElementById('L4b').append(redCross);
+            if (input === 'C') document.getElementById('L4c').append(redCross);
+            if (input === 'D') document.getElementById('L4d').append(redCross);
+            document.getElementById('L4a').append(checkMark);}
+        const checkFunc5 = () => {
+            const input = document.forms.form.elements.q5.value;
+            if (input === 'A') document.getElementById('L5a').append(redCross);
+            if (input === 'B') document.getElementById('L5b').append(redCross);
+            if (input === 'D') document.getElementById('L5d').append(redCross);
+            document.getElementById('L5c').append(checkMark);}
+        const checkFunc6 = () => {
+            const input = document.forms.form.elements.q6.value;
+            if (input === 'A') document.getElementById('L6a').append(redCross);
+            if (input === 'C') document.getElementById('L6c').append(redCross);
+            if (input === 'D') document.getElementById('L6d').append(redCross);
+            document.getElementById('L6b').append(checkMark);}
+        const checkFunc7 = () => {
+            const input = document.forms.form.elements.q7.value;
+            if (input === 'B') document.getElementById('L7b').append(redCross);
+            if (input === 'C') document.getElementById('L7c').append(redCross);
+            if (input === 'D') document.getElementById('L7d').append(redCross);
+            document.getElementById('L7a').append(checkMark);}
+        const checkFunc8 = () => {
+            const input = document.forms.form.elements.q8.value;
+            if (input === 'A') document.getElementById('L8a').append(redCross);
+            if (input === 'B') document.getElementById('L8b').append(redCross);
+            if (input === 'C') document.getElementById('L8c').append(redCross);
+            document.getElementById('L8d').append(checkMark);}
+        const checkFunc9 = () => {
+            const input = document.forms.form.elements.q9.value;
+            if (input === 'A') document.getElementById('L9a').append(redCross);
+            if (input === 'B') document.getElementById('L9b').append(redCross);
+            if (input === 'C') document.getElementById('L9c').append(redCross);
+            document.getElementById('L9d').append(checkMark);}
+        const checkFunc10 = () => {
+            const input = document.forms.form.elements.q10.value;
+            if (input === 'A') document.getElementById('L10a').append(redCross);
+            if (input === 'B') document.getElementById('L10b').append(redCross);
+            if (input === 'D') document.getElementById('L10d').append(redCross);
+            document.getElementById('L10c').append(checkMark);}
+        const checkFunc11 = () => {
+            const input = document.forms.form.elements.q11.value;
+            if (input === 'B') document.getElementById('L11b').append(redCross);
+            if (input === 'C') document.getElementById('L11c').append(redCross);
+            if (input === 'D') document.getElementById('L11d').append(redCross);
+            document.getElementById('L11a').append(checkMark);}
+        const checkFunc12 = () => {
+            const input = document.forms.form.elements.q12.value;
+            if (input === 'A') document.getElementById('L12a').append(redCross);
+            if (input === 'C') document.getElementById('L12c').append(redCross);
+            if (input === 'D') document.getElementById('L12d').append(redCross);
+            document.getElementById('L12b').append(checkMark);}
+        const checkFunc13 = () => {
+            const input = document.forms.form.elements.q13.value;
+            if (input === 'B') document.getElementById('L13b').append(redCross);
+            if (input === 'C') document.getElementById('L13c').append(redCross);
+            if (input === 'D') document.getElementById('L13d').append(redCross);
+            document.getElementById('L13a').append(checkMark);}
+        const checkFunc14 = () => {
+            const input = document.forms.form.elements.q14.value;
+            if (input === 'A') document.getElementById('L14a').append(redCross);
+            if (input === 'B') document.getElementById('L14b').append(redCross);
+            if (input === 'D') document.getElementById('L14d').append(redCross);
+            document.getElementById('L14c').append(checkMark);}
+        const checkFunc15 = () => {
+            const input = document.forms.form.elements.q15.value;
+            if (input === 'A') document.getElementById('L15a').append(redCross);
+            if (input === 'B') document.getElementById('L15b').append(redCross);
+            if (input === 'C') document.getElementById('L15c').append(redCross);
+            document.getElementById('L15d').append(checkMark);}
+        const checkFunc16 = () => {
+            const input = document.forms.form.elements.q16.value;
+            if (input === 'A') document.getElementById('L16a').append(redCross);
+            if (input === 'C') document.getElementById('L16c').append(redCross);
+            if (input === 'D') document.getElementById('L16d').append(redCross);
+            document.getElementById('L16b').append(checkMark);}
+        const checkFunc17 = () => {
+            const input = document.forms.form.elements.q17.value;
+            if (input === 'B') document.getElementById('L17b').append(redCross);
+            if (input === 'C') document.getElementById('L17c').append(redCross);
+            if (input === 'D') document.getElementById('L17d').append(redCross);
+            document.getElementById('L17a').append(checkMark);}
+        const checkFunc18 = () => {
+            const input = document.forms.form.elements.q18.value;
+            if (input === 'A') document.getElementById('L18a').append(redCross);
+            if (input === 'B') document.getElementById('L18b').append(redCross);
+            if (input === 'D') document.getElementById('L18d').append(redCross);
+            document.getElementById('L18c').append(checkMark);}
+        const checkFunc19 = () => {
+            const input = document.forms.form.elements.q19.value;
+            if (input === 'A') document.getElementById('L19a').append(redCross);
+            if (input === 'C') document.getElementById('L19c').append(redCross);
+            if (input === 'D') document.getElementById('L19d').append(redCross);
+            document.getElementById('L19b').append(checkMark);}
+        const checkFunc20 = () => {
+            const input = document.forms.form.elements.q20.value;
+            if (input === 'A') document.getElementById('L20a').append(redCross);
+            if (input === 'B') document.getElementById('L20b').append(redCross);
+            if (input === 'C') document.getElementById('L20c').append(redCross);
+            document.getElementById('L20d').append(checkMark);}
+        // SUBMIT ANSWERS BUTTON FUNCTION
+        const submitAnswers = () => {
+            const input1 = document.forms.form.elements.q1.value,
+            input2 = document.forms.form.elements.q2.value,
+            input3 = document.forms.form.elements.q3.value,
+            input4 = document.forms.form.elements.q4.value,
+            input5 = document.forms.form.elements.q5.value,
+            input6 = document.forms.form.elements.q6.value,
+            input7 = document.forms.form.elements.q7.value,
+            input8 = document.forms.form.elements.q8.value,
+            input9 = document.forms.form.elements.q9.value,
+            input10 = document.forms.form.elements.q10.value,
+            input11 = document.forms.form.elements.q11.value,
+            input12 = document.forms.form.elements.q12.value,
+            input13 = document.forms.form.elements.q13.value,
+            input14 = document.forms.form.elements.q14.value,
+            input15 = document.forms.form.elements.q15.value,
+            input16 = document.forms.form.elements.q16.value,
+            input17 = document.forms.form.elements.q17.value,
+            input18 = document.forms.form.elements.q18.value,
+            input19 = document.forms.form.elements.q19.value,
+            input20 = document.forms.form.elements.q20.value;
+        // USERS ANSWERS ARRAY
+        const usersAnswers = [input1, input2, input3, input4,
+                            input5, input6, input7, input8, 
+                            input9, input10, input11, input12,
+                            input13, input14, input15, input16,
+                            input17, input18, input19, input20]
+        // CREATE LISTS OF CORRECT/INCORRECT ANSWERS
+        for (let i=0; i<20; i++) {
+            const li = document.createElement('li');
+            let corrText, incorrText;
+            if (usersAnswers[i] === answerKey[i]) {
+                if (i < 9) {
+                    corrText = document.createTextNode(`0${i+1}. ${usersAnswers[i]}`);    
+                } else {
+                    corrText = document.createTextNode(`${i+1}. ${usersAnswers[i]}`);
+                }
+                li.appendChild(corrText);
+                ul1.appendChild(li);
+            } else {
+                if (i < 9) {
+                    incorrText = document.createTextNode(`0${i+1}. Answered: ${usersAnswers[i]} || Correct Answer: ${answerKey[i]}`);
+                } else {
+                    incorrText = document.createTextNode(`${i+1}. Answered: ${usersAnswers[i]} || Correct Answer: ${answerKey[i]}`);
+                }
+                li.appendChild(incorrText);
+                ul2.appendChild(li);
+                numWrong++;
+            }
+        }
+        // 20 POSSIBLE SCORE MESSAGES
+        switch (numWrong) {
+        case 20:
+            message = document.createTextNode("Score: 0%! Oh dear."); break;
+        case 19:
+            message = document.createTextNode("Score: 5%! At least you got one."); break;
+        case 18:
+            message = document.createTextNode("Score: 10%! Nice try."); break;
+        case 17:
+            message = document.createTextNode("Score: 15%! Not bad."); break;
+        case 16:
+            message = document.createTextNode("Score: 20%! No worries, some tough questions."); break;
+        case 15:
+            message = document.createTextNode("Score: 25%! That's decent."); break;
+        case 14:
+            message = document.createTextNode("Score: 30%! You did your best."); break;
+        case 13:
+            message = document.createTextNode("Score: 35%! Good effort."); break;
+        case 12:
+            message = document.createTextNode("Score: 40%! Not bad at all."); break;
+        case 11:
+            message = document.createTextNode("Score: 45%! Almost half correct."); break;
+        case 10:
+            message = document.createTextNode("Score: 50%! Half correct, not too shabby."); break;
+        case 9:
+            message = document.createTextNode("Score: 55%! Over half correct, well done."); break;
+        case 8:
+            message = document.createTextNode("Score: 60%! You know a thing or two."); break;
+        case 7:
+            message = document.createTextNode("Score: 65%! That's a respectable result."); break;
+        case 6:
+            message = document.createTextNode("Score: 70%! Good job friend."); break;
+        case 5:
+            message = document.createTextNode("Score: 75%! A very good effort indeed."); break;
+        case 4:
+            message = document.createTextNode("Score: 80%! I'm impressed."); break;
+        case 3:
+            message = document.createTextNode("Score: 85%! You're a trivia buff."); break;
+        case 2:
+            message = document.createTextNode("Score: 90%! Wow, you know your stuff."); break;
+        case 1:
+            message = document.createTextNode("Score: 95%! Almost aced it."); break;
+        case 0:
+            message = document.createTextNode("Score: 100%! You're a genius!"); break;
+      }
+       // APPEND CORRECT ANSWERS
+        const appendDiv = document.querySelector('#div20'), 
+        divCorrect = document.createElement('div'),
+        userCorrect = document.createTextNode("Correct Answers: ");
+        divCorrect.setAttribute('class', 'results');
+        divCorrect.append(userCorrect, ul1);
+        if (numWrong < 20) {
+            appendDiv.appendChild(divCorrect);
+        }
+        // APPEND INCORRECT ANSWERS
+        const divIncorrect = document.createElement('div'), 
+        userIncorrect = document.createTextNode("Incorrect Answers: ");
+        divIncorrect.setAttribute('class', 'results');
+        divIncorrect.append(userIncorrect, ul2);
+        if (numWrong > 0) {
+            appendDiv.appendChild(divIncorrect);
+        }
+        // APPEND RESULTS + MESSAGE
+        const divMessage = document.createElement('div'), 
+        classMessage = divMessage.setAttribute('class', 'message');
+        divMessage.appendChild(message);
+        appendDiv.appendChild(divMessage);
+        // APPEND FOOTER THANKS MESSAGE
+        const footerThanks = document.createElement('footer'), 
+        classThanks = footerThanks.setAttribute('class', 'thanks'),
+        messageThanks = document.createTextNode("Thanks for playing!");
+        footerThanks.appendChild(messageThanks);
+        appendDiv.appendChild(footerThanks);
+    }
+    // SCROLL MESSAGE INTO VIEW
+    const scrollToBottom = () => {
+        window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
+    }
+    // SCROLL BACK TO TOP
+    const scrollToTop = () => {
+        window.scrollTo({ left: 0, top:0, behavior: "smooth" });
+    }
+    // RANDOM BACKGROUND GENERATOR BUTTON
+    const componentToHex = (c) => {
+    const hex = c.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+    }
+    const rgbToHex = (r,g,b) => {
+        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+    }
+    const backgroundButton = () => {
+        function randomNum(maxLimit = 256) {
+            let num = Math.random() * maxLimit;
+            num = Math.floor(num);
+            return num;
+        }
+        const rhex1 = rgbToHex(randomNum(),randomNum(),randomNum()), 
+            rhex2 = rgbToHex(randomNum(),randomNum(),randomNum());
+        color1 = rhex1;
+        color2 = rhex2;
+        randomGradient(color1,color2);
+    };
+    const randomGradient = (c1,c2) => {
+        body.style.background = 'linear-gradient(to right, ' + c1 + ',' + c2 + ')';
+    }
+    check1.addEventListener('click', checkFunc1, {once: true});
+    check2.addEventListener('click', checkFunc2, {once: true});
+    check3.addEventListener('click', checkFunc3, {once: true});
+    check4.addEventListener('click', checkFunc4, {once: true});
+    check5.addEventListener('click', checkFunc5, {once: true});
+    check6.addEventListener('click', checkFunc6, {once: true});
+    check7.addEventListener('click', checkFunc7, {once: true});
+    check8.addEventListener('click', checkFunc8, {once: true});
+    check9.addEventListener('click', checkFunc9, {once: true});
+    check10.addEventListener('click', checkFunc10, {once: true});
+    check11.addEventListener('click', checkFunc11, {once: true});
+    check12.addEventListener('click', checkFunc12, {once: true});
+    check13.addEventListener('click', checkFunc13, {once: true});
+    check14.addEventListener('click', checkFunc14, {once: true});
+    check15.addEventListener('click', checkFunc15, {once: true});
+    check16.addEventListener('click', checkFunc16, {once: true});
+    check17.addEventListener('click', checkFunc17, {once: true});
+    check18.addEventListener('click', checkFunc18, {once: true});
+    check19.addEventListener('click', checkFunc19, {once: true});
+    check20.addEventListener('click', checkFunc20, {once: true});
+    background.addEventListener('click', backgroundButton);
+    reset.addEventListener('click', location.reload.bind(location));
+    submit.addEventListener('click', submitAnswers, {once: true});
+    submit.addEventListener('click', scrollToBottom);
+    toTop.addEventListener('click', scrollToTop);
+    </script>
+</body>
+</html>
\ No newline at end of file
