Skip to content

amjed-98/Quizzer-App

 
 

Repository files navigation

Contributors Forks Stargazers Issues MIT License


Logo

Quizzer

A platform to help teachers create online Exams for their students and receive the mark via email.

View Demo . Design Link · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

(back to top)

Problem

Due to the technological development across the years and the presence of events such as the Covid-19 pandemic, direct communication with people has become rare, and online services have got more audiences than any time ever, so, online services have begun to rise, but most of these services are complex and not user-friendly, therefore there was an urgent need for platforms and websites that provide various services online.

Solution

Build a quiz maker website Quizzer to create tests and pass them to the appropriate people. One of the biggest features of the app is the simplicity and user-friendly experience.

Built With

Database Schema

image

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • npm
    npm install npm@latest -g

Installation

  1. Create a free account at Cloudinary
  2. Clone the repo
    git clone https://github.com/GSG-G11/Quizzer.git
  3. Install NPM packages
    npm install
  4. In the project root folder, rename .env.example file to .env and fill in the environment variables
    SECRET_KEY='<your secret key>'
    DEV_DB_URL=postgres://<username>:<password>@localhost:<port || 5432>/<development database>
    TEST_DB_URL=postgres://<username>:<password>@localhost:<port || 5432>/<test database>
    APP_MAIL='<your email>'
    MAIL_PASSWORD='<your password>'
  5. In the client folder, renmae .env.example file to .env and fill in the environment variables
    REACT_APP_CLOUDINARY_UPLOAD_PRESET='<Your cloudinary upload preset>'
    REACT_APP_CLOUDINARY_CLOUD_NAME='<Your cloudinary cloud name>'

(back to top)

Usage

User Stories

As a user who wants to attend exams:

  • I can create a new account.
  • I can log into my account.
  • I want to see all public exams.
  • I want see the leaderboard.
  • I want to search for public exams by name.
  • I want to search for private exams by exam code sent to me by my teacher.
  • I want to attend exams.
  • I want to see my profile.
  • I want to see all exams that I've attended with thier results.

As a user who wants to create exams:

  • I can create a new account.
  • I can login to my account.
  • I want to see all exams that I've created with the number of students that attended this exam.
  • I want to see the exam code.
  • I want to be able to create a new exam.
  • I can specify the exam title, description, and duration.
  • I can create a multiple choice, true or false, and/or a short answer exam.
  • I want to be able to delete an exam.
  • I want to see students marks for a specific exam.
  • I want to see my profile.

User Journey

As a STUDENT

  • once your visit our app you'll notice a navbar that has a login button, when clicking it a modal will appear asking you to continue as a student or a teacher, choose student.
  • Then you can log into your account by filling up the login form or if you don't have an account yet, click on signup to create a new account.
  • After you login you'll be faced with a page containing quizzes where you can try to test your knowledge in a specific field, also you'll see an Enter Code button.
  • When clicking this button a form will appear asking you to enter a private quiz code.
  • After entering the code, if the quiz code is valid, You'll be navigated to a page containing the quiz details, and if it's invalid, an error message will appear to inform you that this enrollment code is invalid.
  • In the quiz details page, you'll see the quiz information like the title of the quiz, who created this quiz, a description/instructions for this quiz, and the duration of this quiz.
  • When clicking on Enroll now button, the quiz will start, be aware that you can't attend a private quiz more than once.
  • Throughout the quiz questions, you can navigate forward/backward between questions.
  • When finishing answering questions, click on the Submit button to submit your answers.
  • If the time limit finishes, the quiz will be sumitted authomaticlly.
  • After submitting the quiz, a modal will appear informing you with your result, also an Email will be sent to you with further details about your submittion.
  • If you want to test your knowledge in a specific field, go to the home page and you'll see quizzes from different fields.
  • When clicking on the Details button, you'll be navigated to a page containing further information about this quiz.
  • If you click Enroll now, the quiz will start with a specific time limit.
  • After answering all the questions, you can submit your answers by clicking on the Submit button, or if the time finishes, the quiz will be submitted authomaticlly.
  • After submitting your answers, a modal will appear informing you with your results.
  • In the navbar you can see Leaderboard, when clicking on it, you'll be navigated to a page containing the top results of people attended public quizzes.
  • If users have attended a quiz and they need thier name to be in the leaderboard but theire result is low, they can attend the quiz more than once to get the a higher score and be in the leaderboard.

As a TEACHER

  • once your visit our app you'll notice a navbar that has a login button, when clicking it a modal will appear asking you to continue as a student or a teacher, choose teacher.
  • Then you can log into your account by filling up the login form or if you don't have an account yet, click on signup to create a new account.
  • After you login you'll be faced with a table containing your created quizzes.
  • And since you don't have any quizzes yet, go ahead and click on create Quiz button to create a quiz.
  • A quiz has a title, descriptions/instaruction for students, and a time limit (number of minutes before the quiz is submited automatically).
  • After you provide these information, click on add question button and you'll be navigated to another page containing a modal with three categories of questions to choose from: Multiple Choice, True or false, and short answer.
  • After you pick one, a form will appear telling you to type the question and the neccessary answer(s).
  • If you want to change the type of the question while creating it, simply click on the select box at the top of add question form to choose a new type for your question.
  • If you wan't to add another question, you simply click on add question button to add another question.
  • After you finish adding question, you can click on create quiz button to generate your quiz, and then you'll automaticlly be navigated to your dashboard where you can see your newly created quizzes with an auto generated enrollment code, you can copy this code and send it to your students so they can enroll into your quiz.
  • And for some reason you decided you want to delete an exam, you can click on the trash icon in the action column, you'll be promted with a confirmation modal warning you and making sure you wan't to proceed with this action.
  • You can also go to your profile, by clicking on the person icon on the top right of navbar, there you can add or edit your profile picture, name, and summary about yourself by clicking on the edit profile button.

(back to top)

Roadmap

  • Store user score and send him/her an email.
  • Create a new quiz (backend).
  • Create a new quiz (frontend).

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Our Great Contributors

Our Great Team Leader

Project Link: https://github.com/GSG-G11/Quizzer

(back to top)

Acknowledgments

(back to top)

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.1%
  • CSS 3.0%
  • Other 1.9%