Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielzlatanov/quizzer
Create, manage, and fill out quizzes
https://github.com/danielzlatanov/quizzer
access-control authentication back4app crud data-structure lit-html netlify pagejs quiz-app quiz-editor quiz-management single-page-app user-authentication user-registration vanilla-javascript
Last synced: 25 days ago
JSON representation
Create, manage, and fill out quizzes
- Host: GitHub
- URL: https://github.com/danielzlatanov/quizzer
- Owner: danielzlatanov
- Created: 2023-04-12T10:49:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-16T17:30:37.000Z (about 1 year ago)
- Last Synced: 2023-11-16T18:26:46.944Z (about 1 year ago)
- Topics: access-control, authentication, back4app, crud, data-structure, lit-html, netlify, pagejs, quiz-app, quiz-editor, quiz-management, single-page-app, user-authentication, user-registration, vanilla-javascript
- Language: JavaScript
- Homepage: https://quizzer-spa.netlify.app/
- Size: 1.31 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://quizzer-spa.netlify.app/)**
_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)*
```javascript
{
name: String,
users: Relation,
roles: Relation
}
```
* Sessions *(private)*
```javascript
{
user: Pointer
}
```
* Users *(private)*
```javascript
{
email: String,
username: String,
password: String(hidden)
}
```
* Questions
```javascript
{
text: String,
answers: Array,
correctIndex: Number,
quiz: Pointer,
owner: Pointer
}
```
* Quizzes
```javascript
{
title: String,
topic: String,
description: String,
questionCount: Number,
owner: Pointer
}
```
* Solutions
```javascript
{
title: String,
correct: Number,
total: Number,
quiz: Pointer,
owner: Pointer
}
```
### Basic app flowchart
## Access the app [here](https://quizzer-spa.netlify.app/)
