A website which teachers can use for creating and publish quizzes, and students can use to attend quizzes online.
View Demo
.
Design Link
·
Report Bug
·
Request Feature
Table of Contents
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.
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.
To get a local copy up and running follow these simple example steps.
- npm
npm install npm@latest -g
- Create a free account at Cloudinary
- Clone the repo
git clone https://github.com/GSG-G11/Quizzer.git
- Install NPM packages
npm install
- In the project root folder, rename
.env.examplefile to.envand fill in the environment variablesSECRET_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>'
- In the
clientfolder, renmae.env.examplefile to.envand fill in the environment variablesREACT_APP_CLOUDINARY_UPLOAD_PRESET='<Your cloudinary upload preset>' REACT_APP_CLOUDINARY_CLOUD_NAME='<Your cloudinary cloud name>'
- 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.
- 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.
- 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 Codebutton. - 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 nowbutton, 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
Submitbutton 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
Emailwill 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
Detailsbutton, 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
Submitbutton, 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.
- 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.
- 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).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
- Zaher J. Abuamro - @zaher-aa - [email protected]
- Amjad Yahia Hassan - @amjed-98 - [email protected]
- Khaled El Khudary - @khaled-samy - [email protected]
- Muhammad Abdulhadi - @Mu7ammadAbed - [email protected]
Project Link: https://github.com/GSG-G11/Quizzer