Code Monkey home page Code Monkey logo

quizzer's Introduction

Quizzer

Quizzer is a single-page application - a system for creating, managing, and filling out quizzes.

Getting started

You can access the deployed application by clicking here: Quizzer

If you wish to run Quizzer locally:

  • No need to install any dependencies! All libraries are imported from CDN.
  • Simply open the root of the project and start index.html using a server of your choice.

Functionality

  • User registration
  • Ability to view and solve quizzes created by other users
  • Various topics related to quizzes
  • Keeping statistics for each user/quiz/question/solution
  • Interactive quiz editor
  • Pleasant UX

Technologies

  • HTML, CSS, Javascript
  • lit-html, page.js - (libraries)
  • Netlify (deployment platform), Back4app (BaaS platform)

Views

  • Welcome/Home page - initial screen, info about total quizzes and topics, the most recent quiz is shown
  • Login/Register page - register with email, username and password
  • Browse quizzes page - list of all created quizzes, each one can be accessed
  • Quiz Details page - additional description, quiz statistics, author information and start the quiz button
  • Quiz Contest mode - answering questions, each question is in a separate view, the ability to move freely from question to question, answers are kept throughout, can restart the quiz, submit answers button appears either on the last question or when the quiz is filled out entirely (checks and warns about unfilled questions)
  • Quiz Results page - results summary, ability to review wrong questions and see correct answers
  • Profile page - information about user's created quizzes and his solutions (date, quiz title, score)
  • Create page - the ability to create a new quiz prior to the editor, top 3 most popular quizzes are shown (sorted by solutions count)
  • Quiz Editor - integrated editor for quizzes, questions, and answers with proper validation

Access control

  • Guests can register, view the catalog, and quiz details
  • Registered users can solve quizzes, view their results, and create/edit quizzes
  • Only the creator of a given quiz can edit or delete it
  • Any registered user can solve someone else's quiz

Implementation

Data structure & Back4app collections

  • Roles (private)
{
     name: String,
     users: Relation<User>,
     roles: Relation<Role>
}
  • Sessions (private)
{
     user: Pointer<User>
}
  • Users (private)
{
     email: String,
     username: String,
     password: String(hidden)
}
  • Questions
{
     text: String,
     answers: Array<String>,
     correctIndex: Number,
     quiz: Pointer<Quiz>,
     owner: Pointer<User>
}
  • Quizzes
{
     title: String,
     topic: String,
     description: String,
     questionCount: Number,
     owner: Pointer<User>
}
  • Solutions
{
     title: String,
     correct: Number,
     total: Number,
     quiz: Pointer<Quiz>,
     owner: Pointer<User>
}

Basic app flowchart

quizzer-spa(1)(1)

Access the app here

quizzer-preview

quizzer's People

Contributors

danielzlatanov avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.