/Quiz-App

Primary LanguageJavaScript

QuizD

QuizD is a fun quiz game where users can create their own accounts and play through publicly available and shared private quizzes. Each quiz consists of several multiple choice questions which are randomly shuffled every round. Once users complete a quiz, they will be redirected to the My Results page, where they can view their scores and share them with anyone that has the link.

Every user can create their own quizzes, and keep them public or mark them as "Private" so that only people with the direct links to their quizzes can play them. During quiz creation, users are prompted to enter valid quiz titles and have at least 2 options for answers, otherwise appropriate error messages will be displayed and the users will be stopped from proceeding further.

This project was made with jQuery, NodeJS, Express, postgreSQL, SASS, Bootstrap, and Fontawesome.

Screenshots

Registration Page

Login Page

My Quizzes

My Results

Create New Quiz

Getting Started

  1. Create the .env by using .env.example as a reference: cp .env.example .env
  2. Update the .env file with your correct local information
  • username: labber
  • password: labber
  • database: midterm
  1. Install dependencies: npm i
  2. Fix to binaries for sass: npm rebuild node-sass
  3. Reset database: npm run db:reset
  • Check the db folder to see what gets created and seeded in the SDB
  1. Run the server: npm run local
  • Note: nodemon is used, so you should not have to restart your server
  1. Visit http://localhost:8080/

Warnings & Tips

  • Do not edit the layout.css file directly, it is auto-generated by layout.scss.
  • Split routes into their own resource-based file names, as demonstrated with users.js and widgets.js.
  • Split database schema (table definitions) and seeds (inserts) into separate files, one per table. See db folder for pre-populated examples.
  • Use helper functions to run your SQL queries and clean up any data coming back from the database. See db/queries for pre-populated examples.
  • Use the npm run db:reset command each time there is a change to the database schema or seeds.
    • It runs through each of the files, in order, and executes them against the database.
    • Note: you will lose all newly created (test) data each time this is run, since the schema files will tend to DROP the tables and recreate them.

Dependencies

  • Node 10.x or above
  • NPM 5.x or above
  • PG 6.x
  • Express 4.17.1
  • Bcryptjs 2.4.3
  • Bootstrap 5.3.2
  • SASS 1.35.1

Future Developments

Some ideas for future app features include:

  • More default public quizzes available for all users
  • Implementing different subject categories and difficulty levels, with help from open-source quiz database APIs like Open Trivia Database (https://opentdb.com/api_config.php)
  • Currently, the shared private quiz links do not expire. We could implement time limits for each link (e.g. 24 hours, 1 week, etc.) and have each shared link expire after the determined time