brittanyrw · drwm-base · Oct 8, 2019 · Oct 8, 2019 · Oct 9, 2019 · Oct 9, 2019
@@ -41,6 +41,10 @@ <h2>A listing of books depicted through emojis. <img draggable="false" class="em
             </div>
         </header>
         <section class="filters">
+            <nav class="navbar">
+                <a class="nav-button active" href="index.html">Home</a>
+                <a class="nav-button" href="quiz.html">Quiz Yourself!</a>
+            </nav>
             <div class="filters-heading">
                 Filter By Genre:
             </div>
@@ -52,6 +56,7 @@ <h2>A listing of books depicted through emojis. <img draggable="false" class="em
         </section>
         <section id="books"></section>
         <section id="message"></section>
+
         <footer>
             <p>EmojiPages currently has <span></span> books and plays. 💖</p>
         </footer>
@@ -62,4 +67,4 @@ <h2>A listing of books depicted through emojis. <img draggable="false" class="em
     <script src="app.js"></script>
 </body>
 
-</html>
+</html>
@@ -101,6 +101,7 @@ h2 {
 
 .filters-heading {
   padding-right: 5px;
+  margin-left: 50px;
 }
 
 .filters-options {
@@ -119,7 +120,7 @@ h2 {
 #genre-filter {
   border-radius: 0;
   border: 0;
-  padding: 10px 20px;
+  padding: 10px 30px;
   background-color: white;
   position: relative;
 }
@@ -408,3 +409,54 @@ footer img {
 .is-hidden {
   display: none;
 }
+
+.emoji-textbar {
+  min-height: 30px;
+  height: auto;
+  overflow: hidden;
+  min-width: inherit;
+  background-color: white;
+  align-self: center;
+}
+
+.wrong-answer {
+  background-color: lightcoral;
+}
+
+.right-answer {
+  background-color: lightgreen;
+}
+
+.nav-button {
+  background-color: blueviolet;
+  color: white;
+  padding: 14px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.active {
+  background-color: violet;
+}
+
+#submit {
+  padding: 10px;
+  background-color: blueviolet;
+  color: white;
+  border: none;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+.nav-button:hover, #submit:hover {
+  background-color: violet;
+}
+
+.score {
+  margin: 20px;
+}
+
+.twitter-share-button {
+  margin-left: 20px;
+}
@@ -2,4 +2,4 @@
 
 <!-- Add Closes #--- where (---) is the Issue number to the bottom of this pull request descripting. This will attach this pull request to an issue. --> 
 
-Add a descripting below of what this pull request is addressing and let us know if you need additional guidance or have questions about something. 
+# Added a Quiz Game Mode
@@ -0,0 +1,76 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-97195950-6"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-97195950-6');
+    </script>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>EmojiPages</title>
+    <meta name="description"
+        content="A listing of books depicted through emojis.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Kreon:700|Open+Sans:400,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="main.css">
+    <link rel="icon" href="favicon.ico" type="image/gif" sizes="16x16">
+</head>
+
+<body>
+    <main>
+        <header>
+            <h1>EmojiPages</h1>
+            <div class="heading-content">
+                <div class="header">
+                    <h2>Emojipages Quiz Game. <img draggable="false" class="emoji" alt="💖"
+                            src="https://twemoji.maxcdn.com/v/12.1.3/72x72/1f496.png"></h2>
+                    <p>Guess the title of the book and score points!</p>
+                </div>
+                <div class="contribute-callout">
+                    <p>Want to add to EmojiPages? Head to Github! <img draggable="false" class="emoji" alt="✨"
+                            src="https://twemoji.maxcdn.com/v/12.1.3/72x72/2728.png"></p>
+                    <a href="https://github.com/brittanyrw/emojipages" target="_blank">Contribute</a>
+                </div>
+            </div>
+        </header>
+        <section class="filters">
+            <nav class="navbar">
+                <a class="nav-button" href="index.html">Home</a>
+                <a class="nav-button active" href="quiz.html">Quiz Yourself!</a>
+            </nav>
+            <div class="filters-heading">
+                Number of Books:
+            </div>
+            <div class="filters-options">
+                <select name="genre-filter" id="genre-filter" class="book-count">
+                    <option class="number-option" value=5>5</option>
+                    <option class="number-option" value=10 selected>10</option>
+                    <option class="number-option" value=15>15</option>
+                    <option class="number-option" value=20>20</option>
+                    <option class="number-option" value=30>30</option>
+                    <option class="number-option" value=50>50</option> 
+                </select>
+            </div>
+        </section>
+        <section id="books"></section>
+        <section id="message"></section>
+
+        <footer>
+            <p>Your score will be out of <span></span>❗️</p>
+            <a class="submit-button" id="submit" target="_blank">Submit and Get Results</a>
+        </footer>
+    </main>
+    <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="data.js"></script>
+    <script src="quiz.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,121 @@
+$(document).ready(function () {
+    //create variable to store the score
+    var score = 0;
+
+    // Create a variable for the container to hold the emoji cards.
+    var emojiCardContainer = $("#books");
+
+    // Create a variable for the emoji cards.
+    var emojiCard = "";
+
+    // Create and assign a variable for number of books
+    var numOfBooks = $("select option:selected").attr("value");
+
+    // Create emoji array for selected number of emojis
+    var emojis = shuffleAndShorten(emojiItems, numOfBooks);
+
+
+    generateQuiz(numOfBooks);
+
+    //Function to run and reset quiz board
+    function generateQuiz(num) {
+      emojis = shuffleAndShorten(emojiItems, num);
+
+      // Loop through the data from the data.js file and insert parts of the data into HTML. On each loop, we are appending a new card with the HTML below.
+      for (var i in emojis) {
+        emojiCard +=
+        "<div class='emoji-card'><div class='emoji-card-wrapper'><div class='hint-container' tabindex='0'><i class='fas fa-question-circle'></i><p class='hint'><span class='type'>" + emojis[i].year +
+        "</span></p></div><div class='emoji-images' tabindex='0'>" + emojis[i].emojiImgs +
+        "</div><div class='emoji-card-title hide-card'>";
+
+        emojiCard += "<div class='title-content'><h3>" + emojiItems[i].title +
+      " (" + emojiItems[i].year + ")" + "</h3><div class='author-container'><h4>" + emojiItems[i].author + "</h4></div>";
+
+        emojiCard += "</div></div><div class='emoji-textbar' id=" + i + " contenteditable='true'>";
+
+        emojiCard += "</div></div></div>";
+      }
+
+      // Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards.
+      emojiCardContainer.html(emojiCard);
+
+      // Run Twemoji to change all emojis to Twitter emojis.
+      twemoji.parse(document.body);
+
+      // Add the count of number of shows/movies to the footer.
+      $("footer span").html(emojis.length);
+    }
+
+
+    // Display movies and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page.
+    // shuffleAndShorten added feature: shortens the array to the number specified.
+    function shuffleAndShorten(array, num) {
+      var currentIndex = array.length,
+        temporaryValue,
+        randomIndex;
+
+      while (currentIndex !== 0) {
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        temporaryValue = array[currentIndex];
+        array[currentIndex] = array[randomIndex];
+        array[randomIndex] = temporaryValue;
+      }
+
+      return array.slice(0, num);
+    }
+
+    // Display a hint (type ie tv, movie or musical) when hovering over the question mark.
+    $("#books").on("mousedown keypress", ".hint-container", function () {
+      $(this)
+        .find(".hint")
+        .addClass("hint-reveal");
+    });
+
+    // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
+    $("#books").on("mouseleave focusout", ".hint-container", function () {
+      $(this)
+        .find(".hint")
+        .removeClass("hint-reveal");
+    });
+
+    $(".book-count").change(function () {
+      numOfBooks = $("select option:selected").attr("value");
+      emojiCardContainer.html("");
+      emojiCard = "";
+      generateQuiz(numOfBooks);
+    });
+
+    // Submit and check the answers given
+    $("#submit").click(function(){
+      $(".filters-options").attr("hidden", "true");
+      $(".filters-heading").attr("hidden", "true");
+
+      //check the answers regardless of case
+      for (var j in emojis) {
+        if ($("#" + j).html().toUpperCase() === emojis[j].title.toUpperCase()) {
+          score += 1;
+          $("#" + j).addClass("right-answer");
+        }
+        else {
+          $("#" + j).addClass("wrong-answer");
+        }
+      }
+      $("footer").html("<p class='score'>Your score is <span>" +  score + " / " + numOfBooks + "</span></p>");
+      $("footer").append("<a class='submit-button' id='submit' href='quiz.html'>Try Again?</a>")
+      $("footer").append("<a href='https:/'" + "'/twitter.com/share?ref_src=twsrc%5Etfw' class='twitter-share-button' data-size='large' data-text='I scored "+ score + "/" + numOfBooks + " on Emojipages.com!' data-hashtags='Emojipages' data-show-count='false'>Tweet Your Score!</a><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>")
+
+      for (var k in emojis) {
+        $("#" + k).attr("contenteditable", "false").html(emojis[k].title);
+      }
+
+      // Expand the emoji card when clicked to reveal the song name, artist and music video link.
+      $("#books").on("click keypress", ".emoji-images", function () {
+        $(this)
+          .siblings(".emoji-card-title")
+          .toggleClass("hide-card");
+      });
+
+    });
+});
+