Leopardy Capstone Project

Description

Leopardy is a website where users can create a game after the style of the Jeopardy! Gameshow. The website would be incredibly useful to provide an entertaining in-person competition or for self-quizzing in education.

Distinctiveness and Complexity

This project is an incredibly unique implementation of online educational games popularized during the COVID pandemic. It was mainly inspired by the website jeopardylabs.com, which I felt needed more modern styling. Therefore, from the beginning, this project is distinct from the course projects. Inspired by the need for better styling, I dedicated much of my time to produce a visually pleasing, minimalist graphical interface for the game. Further evidence of the website's distinctiveness is that it even employs techniques not even practiced in this course (including WYSIWYG editors, Django messages, and simple search engines).

My greatest challenges came in implementing the editing and gameplay interfaces, since these require much integration with API via javascript on the front-end and Python on the back-end. I also implemented customization of color themes and a WYSIWYG editor. The only drawback for the editor is that, while it still functions on small screens, since there is much content on a Jeopardy game, it is hard to edit. However, I did not count that as a huge deal since this game is supposed to be shown to large audiences and displayed on a large screen. Afterward, I made text responsive to screen size to make it easier to edit. I even added an alert warning that it would be more difficult to edit on a small device. After more or less completing a basic aesthetic user interface, I created a website around the UIs. Nonetheless, I endeavored to give the website complex functions as well, including adding a smooth animation on the homepage and implementing a simple yet effective search system. In addition, I created an explore page that mirrors common website styles.

My project consists of a simple website in which users can create a game that simulates a Jeopardy! gameshow. One game consists of five columns with five rows. Each row corresponds to a different point value and each column corresponds to a different category of questions. (To make the game more comprehensible, I deviated from the traditional Jeopardy! prompt of giving the answer and asking for a question.) Once the users have finished creating a Jeopardy game, they can access a new page to play the game. The presenter can create teams, change their names, and assign points to each team. By clicking a question tab, a modal pops up with the question and a button to reveal the answer. Once a question is answered, the input field for each team automatically updates, allowing the presenter to increment that amount.

I envision this game to be played in a physical setting, where one presenter, say the teacher, asks these questions and physical teams compete for points, where the online points serve as a record. However, future improvements could include creating a fully remote, online version of this game, similar to the popular teaching resources Kahoot! or even Gimkit.

Files

Static

• css/styles.css provides styles for game.html and edit.html, unique UI interfaces for editing the game templates. The other HTML webpages rely solely on Bootstrap for styling.
• img/ Folder which contains all the images used in the project, including favicon.ico.
• js/scripts.js provides JS code for game.html and edit.html.
• js/smallscreen.js provides JS code which shows a warning message when trying to edit or play on a small screen.

Templates

• edit.html is the editing UI of the Jeopardy game.
• explore.html is a page where users can access popular or selected jeopardies, or search for jeopardies by title.
• game.html is the UI which displays the Jeopardy game and provides an intuitive and interactive system that reveals questions and answers.
• index.html is the homepage of the website, providing some basic marketing info. I included a little text animation that reveals an adjective of 'Jeopardy.'
• layout.html is the layout of normal (meaning not game.html and edit.html) HTML webpages. The file includes Bootstrap links.
• login.html is the login page, asking for the username and password.
• profile.html is the page that displays the logged in user's information as well as published and draft games.
• search.html is the search page that simply looks for games with titles that match the query.
• signup.html is the sign up page that asks for a username, password, and email to create a new user.

jeopardy/ *.py files

• admin.py registers all the models.
• models.py initializes all the models, User, Game, Column, and Question.
• urls.py holds all the urls of the app.
• views.py holds all the functions for the webpages.
  • views.index renders the homepage.
  • views.profile renders the profile page.
  • views.create_game creates a game and redirects to the editing interface.
  • views.edit_game renders the editing interface.
  • views.explore renders the explore page and loads the top three most visited games.
  • views.search renders the search page and also cleans a query, queries the database, and returns a jeopardy by relevancy.
  • views.play_game renders the gameplay interface.
  • views.signup_user creates a new user (with validation) if the request method is POST. It renders the signup page if the request method is GET and the user is signed out.
  • views.login_user logs in a user if the request method is POST. It renders the login page if the request method is GET and the user is signed out.
  • views.logout_user logs a user out.
  • views.get_question returns an JSON of info about a Question model if the method if GET. If the request is PUT, the website updates a Question model.
  • views.save_game saves edits to a game in the editing interface.

How to Run

1. Make sure Python is installed on your device.
2. Navigate to repository folder.
3. Create and activate a virtual environment (https://docs.python.org/3/tutorial/venv.html#creating-virtual-environments).
4. Download requirements:

pip install requirements.txt

5. Navigate into the leopardy/ app directory:

cd leopardy

6. Start the server:

python manage.py runserver

7. The program will require you to create a new user to access the features of the website.