kevin-chen / trivia-web-app

❓ Building a Jeopardy style web application for Capital One Software Engineering Summit Winter 2020

Trivia Me This

Capital One Winter 2020 Software Engineering Summit

Link to depolyed website: http://trivia.kev-chen.me

Link to Heroku depolyment: https://trivia-capital-one.herokuapp.com/

Link to GitHub repository: https://github.com/kevin-chen/trivia-web-app

Link to challenge: https://www.mindsumo.com/contests/jeopardy-api

Prompt

To build a web app to find trivia questions by category, time, and difficulty

To complete this challenge, build a web application that:

• has a search function that displays results in an intuitive, responsive, mobile friendly, easy to navigate interface.
• gives users the ability to refine search results by:
  • date or timeframe aired (you can search by a day, a week, a month)
  • trivia category
  • level of difficulty of the question
  • any other smart searching criteria you see fit

Optional: You may want to include these bonus features:

• Game board simulation with the categories and questions in the proper place (as it would be organized in the game with easier questions on top)
• Marking or saving questions into a "favorites" collection

Tech Stack

Front-End

• HTML/CSS
• Bootstrap
• JavaScript

Back-End

• Python/Django

APIs

• JService API for trivia information
• Requests to parse JSON data

Implemented Features

Time spent: 15 hours spent in total

The following required functionality is completed:

• Searching page with search function displayed search results page
• Ability to search with filters (category, airdate, difficulty)

The following bonus stretch features are implemented:

• Audio background music
• Trivia game with scorekeeping
• Automatic dropdown category search
• Banner notifications (search successful, game response)
• Sample random trivia questions on homepage
• Specific trivia questions by category, airdate, and difficulty
• UI Design (Flipping Cards) / Show Answer Button (no hover on mobile)
• Learn more button for each trivia card
• Custom URL and 404 Not Found / 500 Internal Server Error

Future Features

• Make menu options more asthetic
• Make website more dynamic in other platforms (mobile and web)
• Improve searching algorithm for faster results

Searching Algorithm:

In order to search through the many categories that JService provides, the application first searches through all the possible 1000 categories using the /Categories endpoint with a HTTP Request to get JSON trivia information from JService. While the program is searching through each matching category, it looks through the questions/clues of that category for other search filters such as date/timeframe aired and level of difficulty. If these criteria are a match, the clues are appended to a list which would be displayed on the search results page.

• Python and the web framework, Django to organize the project, redirect between pages, send requests with the JService endpoint, filter trivia questions by category, airdate, and level of difficulty

• HTML & CSS to display web pages with Bootstrap designs and allows user interactions

• JavaScript to develop a small trivia game, control audio features, and provide support for category search dropdown

Challenges

• Parsing API data from JService in an efficient manner
• Passing data from one page to another using Django forms
• Styling flipping cards for each trivia question/clue
• Dynamic sizing for various pages and elements
• Implementing automatic dropdown for category searches

Video Walkthrough

Here's a walkthrough of implemented user functions:

Features

Home Page

Game Page

Search Page

Search Results

Journey

First

Second

Third

Fourth

Fifth

Sixth

Seventh

Copyright 2019 Kevin Chen