An online quiz platform where users can take quizzes across various categories, create their own quizzes, and engage in real-time chat discussions. Administrators can manage and create new quizzes, view analytics, and moderate user interactions and users overall.
If you want to host the website and Swagger documentation locally, follow these steps:
htdocs
directory within the XAMPP installation directory.http://localhost/your-website-folder
.
Front end is built using the techonlogies listed below, the website itself is a single page application (SPA) in which all content is loaded initially and swapped when user clicks on a link. The website is responsive to both tablet and mobile devices using css media queries and break points. The folder structures includes data folder which holds random fun fact displayed to user. Images folder holds various avatars and banners for quizzes and such. Library folder holds the SPA plugin. Scripts folder holds javascript files for ajax calls and logic for quiz grading and displaying various modals. Stylesheets folder is a group of css filles that hold design for specific view. Utils folder contains some constants that are used through various scripts, modal function which returns a modal based on the type of error and message, and invalid session which checks returns the user to login page.
- HTML5
- CSS3 and Bootstrap5
- Javascript and Jquery ### External libraries used:
- Jquery validation plugin
- Highcharts JS
- Jquery SPA ### Front end project structure ``` βββ πfrontend βββ πdata βββ facts.json βββ πimages βββ 404banner.svg βββ authbanner.png βββ πavatars
βββ avatar1.svg
βββ avatar2.svg
βββ avatar3.svg
βββ avatar4.svg
βββ avatar5.svg
βββ avatar6.svg
βββ avatar7.svg
βββ avatar8.svg
βββ avatar9.svg βββ πdashboard-banners
βββ leaderboard.png
βββ manageusers.png
βββ profilebanner.png
βββ quizbanner.png
βββ quizhistory.png
βββ settings.png
βββ stats.png βββ emptybox.svg βββ favicon.png βββ πquiz-type-banners
βββ geography.svg
βββ history.svg
βββ languages.svg
βββ literature.svg
βββ math.svg
βββ movies.svg
βββ music.svg
βββ science.svg
βββ sport.svg βββ index.css βββ index.html βββ πlibrary βββ πspap
βββ app.js
βββ jquery.spapp.min.js βββ πscripts βββ analyticsFunctions.js βββ authFunctions.js βββ dashboardFunctions.js βββ leaderboardFunctions.js βββ pageFunctions.js βββ profileFunctions.js βββ quizHistoryFunctions.js βββ quizManagementFunctions.js βββ quizRender.js βββ quizReviewFunctions.js βββ quizSearchFunctions.js βββ userManagement.js βββ πstylesheets βββ analytics.css βββ authentication.css βββ dashboard.css βββ leaderboard.css βββ profile.css βββ quiz.css βββ quizHistory.css βββ quizManagement.css βββ quizReview.css βββ quizSearch.css βββ userManagement.css βββ πutils βββ constants.js βββ invalidSession.js βββ modal.js βββ πviews βββ analytics.html βββ dashboard.html βββ error_404.html βββ leaderboard.html βββ login.html βββ profile.html βββ quiz.html βββ quizHistory.html βββ quizManagement.html βββ quizReview.html βββ quizSearch.html βββ register.html βββ userManagement.html ``` # Backend The backend is built using PHP with the Flight PHP framework, and a MySQL database. The backend follows a DAO (Data Access Object) pattern to manage database interactions, and it is structured similarly to an MVC (Model-View-Controller) architecture. The DAO pattern separates data access logic from business logic. The dao folder contains data access objects for authentication, quizzes, history, and user management.The routes folder defines the API endpoints for authentication, history, quizzes, and user routes.The services folder implements business logic for authentication, history, quizzes, and user services.The utils folder includes utility functions like authentication middleware.The public folder contains the API documentation generated by Swagger OpenAPI. # Backend is built using:
- PHP (Flight PHP framework)
- MySQL # Authentication The platform uses JWT for authentication. Upon login, a token is generated and sent to the client, which must include this token in the Authorization header for requests. The app also has 2 roles included, user and admin. Admin has access to routes like deletion of users and quizzes, promotion of user and creating new quizzes. ### Backend project structure ``` βββ πrest βββ .htaccess βββ composer.json βββ composer.lock βββ config.php βββ πdao βββ AuthDao.class.php βββ BaseDao.class.php βββ HistoryDao.class.php βββ QuizDao.class.php βββ UserDao.class.php βββ index.php βββ πpublic βββ πv1
βββ πdocs
βββ doc_setup.php
βββ index.php
βββ oauth2-redirect.html
βββ swagger-ui-bundle.js
βββ swagger-ui-bundle.js.map
βββ swagger-ui-standalone-preset.js
βββ swagger-ui-standalone-preset.js.map
βββ swagger-ui.css
βββ swagger-ui.css.map
βββ swagger-ui.js
βββ swagger-ui.js.map
βββ swagger.php βββ πroutes βββ authRoutes.php βββ historyRoutes.php βββ quizRoutes.php βββ userRoutes.php βββ πservices βββ AuthService.class.php βββ HistoryService.class.php βββ QuizService.class.php βββ UserService.class.php βββ πutils βββ authMiddleware.php βββ however.php ``` # Database The database is built using SQL, the code for creating and some default data insertion can be found in the database folder, along with the ER diagram in pdf folder and mwb format.Below is the ER diagram.