QuizzCards (CS50 Web Final Project)

Video Demo: QuizzCards (CS50 Web Final Project) - Demo

Description: A web based quiz card app that offers card creation and multiple choice style testing. Written for my Final CS50W Project.

Home Page: QuizzCards - GitHub

Author: Luke Melaia

Quizzcards is web based quiz card app, for creating question and answer cards. That users can use to test themselves on various programming related topics. Each card has a question, answer, and two decoy (or incorrect) answers. Users can create new cards, or use the existing cards by clicking on them, to test themselves, or simply show the answer. QuizzCards also provides user registration and login.

New users, who have not logged in or do not have an account can still access all quiz cards, and test themselves using the cards. Logged in users, or users who have created an account get a "create" button, which they can use to create new cards.

The site comes pre-setup with roughly 50 cards, all with programming related questions, 1 correct answer, and 2 incorrect answers. As well as an admin account, with the following credentials:

username: admin password: admin

It's strongly recommended you change these credentials immediately if you plan to use the website.

Screenshots

Desktop Card View

Desktop Home Page / All Cards

Mobile Home Page / All Cards

Distinctiveness and Complexity

I believe this project is sufficiently distinct from all other projects as: It is not a commerce website, nor a social media website, and the main project idea doesn't take inspiration from any of the other projects. It's based on a quiz/test style site, which no other project is similar to, and the idea was thought up myself, from a similar que card demo shown in class.

I believe this project is sufficiently complex to qualify, as it includes elements from previous projects, to build a website that is ultimately more complex than any other individual project, with unique elements of its own. As we'll as being written from scratch, and implementing all common website design features. Culminating in a complete website that can be used as-is, by anyone.

Additionally, this web application utilizes Django, with 2 models, and is mobile responsive, with some elements (such as card testing and answer showing) written in front-end JavaScript.

How to Run

This site is setup to run out the box.

• Clone this repo such that all files are available.
• CD into the quizzcards_project directory, where manage.py is located.
• Run python .\manage.py runserver

The website should now be accessible at http://127.0.0.1:8000/ or http://localhost:8000/

Project Files

QuizzCards consists of several files, in multiple languages, all of which provide certain functionality. Below is a list of the files which matter the most in the development of this website:

• quizzcards_project
  • quizzcards
    • static folder - holds static unchanging resources used by the site.
    • templates folder - holds html pages.
    • admin.py - Allows the database models to be modified in the admin panel.
    • models.py - Defines the database data structures used by the website.
    • urls.py - Defines what urls the site uses, and what pages/views they load.
    • views.py - Holds most of the backend logic, as well what pages should do what, and how they're accessed. Further documentation can be found in the file itself.
  • quizzcards_project
    • settings.py - Sets up some django settings, such as user auth, and csrf token.
    • urls.py - Includes the project urls from a different urls file.
  • db.sqlite3 - Holds all the website data, such as users and cards.

Included Libraries

Apart from Django, this project relies on no additional libraries.