Monday, October 14, 2019

EmojiPages - The Challenges of User Interfaces

EmojiPages - A study in CSS and Javascript

EmojiPages is a website, created by brittanyrw that is essentially a game. It has a listing of books and plays represented by emojis that react when clicked to display the actual title. The main problem with the game is that the user has to play it themselves. They have to have the patience to guess what the emojis represent and handle the revealing moment that shows what it actually represents. My issue was to take care of this process for the user, by introducing a quiz game mode.

Choosing the Issue

This issue challenges me in 2 ways. Firstly, I have never created a basic javascript + html site before. I have no idea what the pitfalls and challenges will be. I have never created a reactive web page without using a framework or bootstrap. I will also need to use jQuery, which I have little to no experience with. Secondly, I have the opportunity to create my own UI, without guidelines except for functionality. The only requirements I have are the following:

  • A button or link from the homepage to the page where the game is.
  • A button or link back to the homepage from the page where the game is.
  • The user should be guessing the song name.
  • On game start, randomly sort the cards and display them to the user. Up to you if you will display one at at time or all at once. The user should type their guess into an input box. Up to you if it will check their guess after they click away from the input or they have to press a submit button.
  • At the end of the game, show the user their score.

Preparation to Create the Quiz Mode

First, I needed to understand the kind of website I was working with. When I learned the site was essentially built from javascript and html files, I thought that this issue would be easy. However, what I would soon realize is that the project uses jQuery, something that I became familiar with as I worked. I also had to learn how the app populates the card display, as it is done programmatically through jQuery, and is a very complex html hierarchy.

The environment on the other hand was very simple to set up. All I had to do was clone my fork and use visual studio as my text editor. I would keep the html pages up in my browser to monitor the UI side of things.

The Solution and Pull Request

My Setup

I added a quiz.js file to handle quiz logic and jQuery functions, a quiz.html to display the new quiz page, and I added to the main.css file with the css styling for my buttons and UI. Aside from that, I made alterations to the index.html file, which handles the main page of the app, to add a navbar to navigate between the 2 pages.


In the quiz.html and index.html, I added the code pictured below to add a navbar into the app. This navbar is responsive when the mouse hovers over it, indicates which page you are on (pink button), and fits with the pre-existing style of the app. It simply navigates between the two html files.

The Quiz UI - quiz.html

The quiz uses many jQuery commands to switch and change the display, according to the needs of the quiz. By default, there are 4 sections: the header, the card display, the filter, and the footer. The header is constant, and displays some information about the quiz, as well as the navbar and the contribute button.

The Header and The Filter
The filter is pictured above, labeled as Number of Books. This is a drop-down menu that filters the number of books to be quizzed on, from 5 to 50 at varying intervals, the code for which is shown below.
The Filter Code
The card display is just a div in the quiz.html file, it is filled programmatically by quiz.js.

The Card Display

The final part of the quiz.html page is the footer. The footer is changed programmatically through jQuery, however by default it shows the number of books selected and has a reactive button to submit your answers. Later it will be changed to display the score and give the user the option to tweet their score.

The Footer

The Quiz Logic - quiz.js

This is where the html document is edited heavily once the page is finished loading. There are many parts to this file, however I will summarize the functionality and show some examples of the code.

  1. The first part I worked on was to programmatically generate the cards from the data.js file, shuffle them, and display them in the div labeled "books". This part is largely recycled from emojipages main page, with a few additions in the shuffle function. I also added an editable div that functions as the text bar to enter your answer into. I added a variable to store a shortened, shuffled array, in order to provide functionality to the Number of Books filter.

  2. The second addition I made was the submission process. The user must type the title of the books based on the emojis into the editable divs in order to answer. They must then press submit and see their score. Green boxes indicate correct answers, and add to your score. Red boxes indicate incorrect answers, and will display the correct answer instead of yours.
  3. Entered a few titles
  4. Your score will be tallied and the footer will be changed using jQuery to show you your score, give you the chance to try again, and add a tweet button. The try again button simply reloads the quiz. 
The code for submission and footer
Indication of correct and incorrect answers, buttons change at the bottom

Interaction with brittanyrw

My interaction with Brittany was very different from pacdiv. I only talked to her once, and for the most part the only responses I've had are from bots. She has bots managing her three projects, and although she has many contributors on those projects, emojipages is her smallest with approx. 100 contributors as of writing. I'd imagine she's very busy and hasn't had time to take a look at my pull request, however I wish she would. At time of writing it's been 5 days. I'm going to try to get a hold of her again, as she still hasn't reviewed my pull request.

Problems that I had in this process

This project was an interesting experience and is still ongoing, however some of my issues so far have been:
  • My pull request has been submitted for 5 days and has not been reviewed yet.
  • Learning responsive css, jQuery, and html was a challenge, especially as I had to unlearn a few things first
  • Balancing this project with my courses (I have a capstone project that is moving very slowly + midterms)
  • Understanding where to draw the line on what files need to be touched. (ie creating new files instead of editing old ones, in order to avoid merge conflicts)
I continue to be optimistic about Hacktoberfest, as I look for my last 2 issues.

No comments:

Post a Comment