Debugging and Modifications

Author: LukeMcM89

assets/script.js

@@ -38,7 +38,7 @@ function showResults() {
 
         const answerContainer = answerContainers[questionNumber];
         const selector = `input[name=question${questionNumber}]:checked`;
-        const userAnswer = (answerContainer.querySelector(selector)|| {}).value;
+        const userAnswer = (answerContainer.querySelector(selector) || {}).value;
 
         if(userAnswer === currentQuestion.correctAnswer){
 
@@ -66,7 +66,7 @@ function showSlide(n) {
     if(currentSlide === 0) {
         previousButton.style.display = 'none';
     }
-}
+
     else {
         previousButton.style.display = 'inline-block';
     }
@@ -99,49 +99,49 @@ const myQuestions = [
     {
         question: "During which period of the Mesozoic Era did the Tyrannosaurus rex live?",
         answers: {
-            a: "Cretaceous"
-            b: "Jurassic"
-            c: "Triassic"
+            a: "Cretaceous",
+            b: "Jurassic",
+            c: "Triassic",
             d: "None of the Above"
         },
         correctAnswer: "a"
     },
     {
         question: "More than a hundred years ago, a paleontologist from the American Museum of Natural History discovered the first fossils of <em>Tyrannosaurus rex<em>. Who found the fossils and where?",
             answers: {
-                a: "Luke McMurtrie in Richmond, Virginia"
-                b: "Barnum Brown in Hell Creek, Montana, U.S.A."
-                c: "Dr. Ian Malcolm along the coast of the Osa Peninsula, Costa Rica"
+                a: "Luke McMurtrie in Richmond, Virginia",
+                b: "Barnum Brown in Hell Creek, Montana, U.S.A.",
+                c: "Dr. Ian Malcolm along the coast of the Osa Peninsula, Costa Rica",
                 d: "Dr. John Hammond in the Gobi Desert, Northern China"
             },
             correctAnswer: "b" 
     },
     {
         question: "T.Rex grew much bigger and much faster than humans. How many pounds (kilograms) do scientists maintain they gained per DAY?",
             answers: {
-                a: "1 pound (0.5 kilograms)"
-                b: "4.6 pounds (2.1 kilograms"
-                c: "2 pounds (1 kilogram)"
+                a: "1 pound (0.5 kilograms)",
+                b: "4.6 pounds (2.1 kilograms",
+                c: "2 pounds (1 kilogram)",
                 d: "13 pounds (5.9 kilograms)"
             },
             correctAnswer: "b"
     },
     {
         question: "What color do paleontologists, scientists and scholars believe the Tyrannosaurus rex was?",
             answers: {
-                a: "We don't know"
-                b: "Greyish-Blue"
-                c: "Blood-Red"
+                a: "We don't know",
+                b: "Greyish-Blue",
+                c: "Blood-Red",
                 d: "Brown"
             },
             correctAnswer: "a"
     },
     {
         question: "At a goliath 40 feet long and 13 feet tall at the hip, Sue, the largest Tyrannosaurus rex specimen ever discovered, is currently on display at which museum?",
             answers: {
-                a: "Black Hills Institue of Geological Research"
-                b: "California Museum of Natural History"
-                c: "The Vatican Museum"
+                a: "Black Hills Institue of Geological Research",
+                b: "California Museum of Natural History",
+                c: "The Vatican Museum",
                 d: "Field Museum of Natural History in Chicago"
             },
             correctAnswer: "d"

assets/style.css

@@ -30,41 +30,45 @@ h1 {
     display: inline-block;
 }
 
-
-
-html, body, .wrapper {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+.answers label {
+    display: block;
+    margin-bottom: 10px;
 }
 
+button {
+    font-family: 'Work Sans', sans-serif;
+    font-size: 21px;
+    background-color: grey;
+    color: white;
+    border: 0px;
+    border-radius: 3px;
+    padding: 17px;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
 
+button:hover {
+    background-color: yellow;
+}
 
-.wrapper {
-    padding-top: 30px;
-    padding-left: 20px;
-    padding-right: 20px;
+.slide {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 0px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.5s;
 }
 
-header {
-    text-align: center;
-    padding: 20px;
-    padding-top: 0px;
-    color:rgb(35, 121, 197)
+.active-slide {
+    opacity: 1;
+    z-index: 2;
 }
 
-h2 {
-    text-align: center;
+.quiz-container {
+    position: relative;
+    height: 200px;
+    margin-top: 40px;
 }
 
-.card {
-    background-color: burlywood;
-    border-radius: 5px;
-    border-width: 1px;
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
-    color: black;
-    font-size: 18px;
-    margin: 0 auto;
-    max-width: 800px;
-    padding: 30px 40px;
-}

index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <h1>Tyrannosaurus rex Quiz</h1>
+    <h1>Tyrannosaurus Rex Timed Quiz</h1>
     <div class="quiz-container">
     <div id="quiz"></div>
     </div>