├── app ├── favicon.ico ├── components │ ├── QuizDetails.tsx │ ├── ForgetPassword.tsx │ ├── Footer.tsx │ ├── Navbar.tsx │ ├── Signin.tsx │ ├── Signup.tsx │ └── Fileinput.tsx ├── Home.module.css ├── Date.ts ├── layout.tsx ├── firebase.ts ├── page.tsx ├── createquiz │ └── page.tsx ├── studentdata │ ├── page.test.tsx │ └── page.tsx ├── login │ └── page.tsx ├── quizzes │ └── page.tsx ├── results │ └── page.tsx ├── globals.css ├── [quizid] │ └── page.tsx └── admin │ └── page.tsx ├── OOPS (Example Quiz File).xlsx ├── next.config.js ├── postcss.config.js ├── Student Data Sheet 11.12.2023 .xlsx ├── .gitignore ├── tsconfig.json ├── tailwind.config.ts ├── Dockerfile ├── LICENSE ├── .github └── workflows │ └── integrate.yml ├── package.json ├── README.md └── CONTRIBUTING.md /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SkySingh04/QuizQuest/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /OOPS (Example Quiz File).xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SkySingh04/QuizQuest/HEAD/OOPS (Example Quiz File).xlsx -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Student Data Sheet 11.12.2023 .xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SkySingh04/QuizQuest/HEAD/Student Data Sheet 11.12.2023 .xlsx -------------------------------------------------------------------------------- /app/components/QuizDetails.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | const QuizDetails = ({ quiz }: any) => ( 4 |

5 |

Score: {quiz.score}

6 |

Total Questions: {quiz.totalQuestions}

7 |

Time: {quiz.time}

8 |

Quiz ID: {quiz.quizId}

9 |

Quiz Name: {quiz.quizName}

10 |

Course: {quiz.course}

11 |

Course Code: {quiz.courseCode}

12 |

13 | ); 14 | 15 | export default QuizDetails; -------------------------------------------------------------------------------- /app/Home.module.css: -------------------------------------------------------------------------------- 1 | /* Home.module.css */ 2 | .hoverEffect { 3 | position: relative; 4 | } 5 | 6 | .hoverEffect::before { 7 | content: ''; 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | right: 0; 12 | bottom: 0; 13 | border: 2px solid transparent; /* Set the initial border */ 14 | transition: border-color 0.5s ease; 15 | } 16 | 17 | .hoverEffect:hover::before { 18 | border-color: #ffd700; /* Set the border color on hover */ 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /app/Date.ts: -------------------------------------------------------------------------------- 1 | function formatDateTime(date : any ) { 2 | var hours = date.getHours(); 3 | var minutes = date.getMinutes(); 4 | var ampm = hours >= 12 ? 'pm' : 'am'; 5 | hours = hours % 12; 6 | hours = hours ? hours : 12; // the hour '0' should be '12' 7 | minutes = minutes < 10 ? '0'+minutes : minutes; 8 | var strTime = hours + ':' + minutes + ' ' + ampm; 9 | return (date.getMonth()+1) + "/" + date.getDate() + "/" + date.getFullYear() + " " + strTime; 10 | } 11 | 12 | function formatDate(date : any){ 13 | return (date.getMonth()+1) + "." + date.getDate() + "." + date.getFullYear() + " " ; 14 | } 15 | 16 | export {formatDate, formatDateTime}; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | customBlue: '#6096B4', 13 | customCyan: '#93BFCF', 14 | customGray: '#BDCDD6', 15 | customBeige: '#EEE9DA', 16 | customViolet:'#2B2E4A' 17 | }, 18 | backgroundImage: { 19 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 20 | 'gradient-conic': 21 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 22 | }, 23 | }, 24 | }, 25 | plugins: [require("daisyui")], 26 | 27 | } 28 | export default config 29 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Poppins } from 'next/font/google' 3 | import './globals.css' 4 | import Navbar from './components/Navbar' 5 | import Footer from './components/Footer' 6 | import { Toaster } from 'react-hot-toast' 7 | const poppins = Poppins({ weight: "400" , subsets: ["latin"] , display: "swap" }) 8 | 9 | export const metadata: Metadata = { 10 | title: 'QuizQuest', 11 | description: 'QuizQuest is a quiz app for everyone.', 12 | } 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: { 17 | children: React.ReactNode 18 | }) { 19 | return ( 20 | 21 | 22 | 23 | 24 | {children} 25 |

26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Use the official Node.js 14 image as the base image 2 | FROM node:14 3 | 4 | # Set the working directory inside the container 5 | WORKDIR /app 6 | 7 | # Copy package.json and package-lock.json to the working directory 8 | COPY package*.json ./ 9 | 10 | # Install dependencies 11 | RUN npm install 12 | 13 | # Copy the rest of the application code to the working directory 14 | COPY . . 15 | 16 | # Build the Next.js app 17 | RUN npm run build 18 | 19 | # Expose the port that the app will run on 20 | EXPOSE 3000 21 | 22 | # Set the environment variables for Firebase 23 | ENV FIREBASE_API_KEY=${FIREBASE_API_KEY} 24 | ENV FIREBASE_AUTH_DOMAIN=${FIREBASE_AUTH_DOMAIN} 25 | ENV FIREBASE_PROJECT_ID=${FIREBASE_PROJECT_ID} 26 | ENV FIREBASE_STORAGE_BUCKET=${FIREBASE_STORAGE_BUCKET} 27 | ENV FIREBASE_MESSAGING_SENDER_ID=${FIREBASE_MESSAGING_SENDER_ID} 28 | ENV FIREBASE_APP_ID=${FIREBASE_APP_ID} 29 | 30 | # Start the app 31 | CMD ["npm", "start"] -------------------------------------------------------------------------------- /app/firebase.ts: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAuth } from "firebase/auth"; 4 | import { getFirestore } from 'firebase/firestore'; 5 | // TODO: Add SDKs for Firebase products that you want to use 6 | // https://firebase.google.com/docs/web/setup#available-libraries 7 | 8 | // Your web app's Firebase configuration 9 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional 10 | const firebaseConfig = { 11 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, 12 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, 13 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, 14 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, 15 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, 16 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, 17 | measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID, 18 | }; 19 | 20 | // Initialize Firebase 21 | const app = initializeApp(firebaseConfig); 22 | const auth = getAuth(app); 23 | const db = getFirestore(app); 24 | 25 | export {auth , db}; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Akash Singh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/integrate.yml: -------------------------------------------------------------------------------- 1 | name : NextJS Continuous Integration 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Install dependencies 17 | run: npm ci 18 | - name: Build 19 | run: npm run build 20 | env: 21 | NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }} 22 | NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }} 23 | NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }} 24 | NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }} 25 | NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }} 26 | NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }} 27 | NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }} 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quizapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.11.1", 13 | "@emotion/styled": "^11.11.0", 14 | "@fortawesome/fontawesome-svg-core": "^6.5.1", 15 | "@fortawesome/free-solid-svg-icons": "^6.5.1", 16 | "@fortawesome/react-fontawesome": "^0.2.0", 17 | "@mui/icons-material": "^5.14.18", 18 | "@mui/material": "^5.14.18", 19 | "@types/jspdf": "^2.0.0", 20 | "firebase": "^10.5.2", 21 | "next": "14.0.1", 22 | "react": "^18", 23 | "react-dom": "^18", 24 | "react-dropzone": "^14.2.3", 25 | "react-hot-toast": "^2.4.1", 26 | "react-icons": "^5.2.0", 27 | "uuid": "^9.0.1", 28 | "xlsx": "^0.18.5" 29 | }, 30 | "devDependencies": { 31 | "@types/node": "^20", 32 | "@types/react": "^18", 33 | "@types/react-dom": "^18", 34 | "@types/uuid": "^9.0.6", 35 | "autoprefixer": "^10.0.1", 36 | "daisyui": "^3.9.4", 37 | "postcss": "^8", 38 | "tailwindcss": "^3.3.0", 39 | "typescript": "^5" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /app/components/ForgetPassword.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, ChangeEvent, FormEvent } from "react"; 2 | 3 | interface ForgotPasswordDialogProps { 4 | onClose: () => void; 5 | onSendEmail: (email: string) => void; 6 | } 7 | 8 | const ForgotPasswordDialog: React.FC = ({ 9 | onClose, 10 | onSendEmail, 11 | }) => { 12 | const [email, setEmail] = useState(""); 13 | 14 | const handleEmailChange = (e: ChangeEvent) => { 15 | setEmail(e.target.value); 16 | }; 17 | 18 | const handleSubmit = (e: FormEvent) => { 19 | e.preventDefault(); 20 | // Call the onSendEmail function and pass the email as an argument 21 | onSendEmail(email); 22 | // Close the dialog 23 | onClose(); 24 | }; 25 | 26 | return ( 27 |

28 |

Forgot Password

29 | 40 |

41 | ); 42 | }; 43 | 44 | export default ForgotPasswordDialog; 45 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FaUserCog, FaUserGraduate } from 'react-icons/fa'; // Import icons from Font Awesome 3 | import Link from 'next/link'; 4 | import styles from './Home.module.css'; // Import CSS file for styling 5 | 6 | export default function Home() { 7 | return ( 8 |

9 | {/* Cards Section */} 10 |

11 | {/* Admin Card */} 12 | 13 |

14 | {/* Font Awesome icon */} 15 |

Admin Dashboard

16 |

Manage quizzes and view user data.

17 |

18 | 19 | 20 | {/* Student Card */} 21 | 22 |

23 | {/* Font Awesome icon */} 24 |

Student Dashboard

25 |

Take quizzes and track your progress.

26 |

27 | 28 |

29 |

30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import React from 'react'; 3 | import { IconButton } from '@mui/material'; 4 | import GitHubIcon from '@mui/icons-material/GitHub'; 5 | import LinkedInIcon from '@mui/icons-material/LinkedIn'; 6 | import InstagramIcon from '@mui/icons-material/Instagram'; 7 | 8 | const Footer = () => { 9 | 10 | return ( 11 | 45 | ); 46 | }; 47 | 48 | export default Footer; 49 | -------------------------------------------------------------------------------- /app/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useEffect, useState } from 'react'; 3 | import { onAuthStateChanged } from 'firebase/auth'; 4 | import {auth} from '../firebase'; 5 | import { useRouter } from 'next/navigation'; 6 | import { signOut } from 'firebase/auth'; 7 | import toast from 'react-hot-toast'; 8 | 9 | const Navbar = () => { 10 | const [user, setUser] = useState(null); // Use state to track the user's authentication state 11 | const router = useRouter(); 12 | 13 | // Add a useEffect to listen for changes in the user's authentication state 14 | useEffect(() => { 15 | const unsubscribe = onAuthStateChanged(auth, (user:any) => { 16 | setUser(user); // Update the user state when the authentication state changes 17 | }); 18 | 19 | // Clean up the subscription when the component unmounts 20 | return () => { 21 | unsubscribe(); 22 | }; 23 | }, []); 24 | 25 | const handlesignOut = () => { 26 | // Sign out the user 27 | signOut(auth).then(() => { 28 | // Sign-out successful. 29 | toast.success("Sign out successful"); 30 | router.push(`/`); 31 | 32 | }).catch((error) => { 33 | // An error happened. 34 | console.log(error); 35 | toast.error("Unable to sign out") 36 | }); 37 | 38 | // After successful sign-out, you can also clear the user state if needed 39 | setUser(null); 40 | 41 | router.push(`/`); 42 | }; 43 | 44 | return ( 45 |

46 |

47 | 48 | QUIZ QUEST {/* Add your logo here */} 49 | 50 |

51 |

52 |

Home
57 | Sign Out 58 |
Login

67 |

68 |

69 | ); 70 | } 71 | 72 | export default Navbar; 73 | -------------------------------------------------------------------------------- /app/components/Signin.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from 'react'; 3 | import { useRouter } from "next/navigation"; 4 | import {auth} from '../firebase'; 5 | import { signInWithEmailAndPassword } from 'firebase/auth'; 6 | import toast from "react-hot-toast"; 7 | function SignInForm() { 8 | const router = useRouter(); 9 | 10 | const [error, setError] = useState(null); 11 | 12 | const [state, setState] = React.useState({ 13 | email: "", 14 | password: "" 15 | }); 16 | const handleChange = (evt : any) => { 17 | const value = evt.target.value; 18 | setState({ 19 | ...state, 20 | [evt.target.name]: value 21 | }); 22 | }; 23 | 24 | const handleSubmit = (event :React.FormEvent) => { 25 | event.preventDefault(); 26 | const data = new FormData(event.currentTarget); 27 | let email = data.get('email') as string; 28 | let password = data.get('password') as string; 29 | signInWithEmailAndPassword(auth, email, password) 30 | .then((userCredential) => { 31 | // Signed in 32 | toast.success("Sign in successful"); 33 | router.push(`/`); 34 | }) 35 | .catch((error) => { 36 | const errorCode = error.code; 37 | const errorMessage = error.message; 38 | console.log(errorCode); 39 | console.log(errorMessage); 40 | toast.error("Sign in failed"); 41 | setError(errorMessage); // Set the error message 42 | 43 | }); 44 | } 45 | 46 | return ( 47 |

48 | 73 |

74 | ); 75 | } 76 | 77 | export default SignInForm; 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QuizQuest 2 | 3 | ## Overview 4 | 5 | QuizQuest is a comprehensive quiz management system designed to simplify the creation, management, and completion of quizzes. It provides a user-friendly interface and integrates Firebase authentication and Firestore database, ensuring secure access and management of quizzes for both admin and student roles. 6 | 7 | 8 | ## Contributing 9 | 10 | - Please check the [Contributions](https://github.com/Akash-Singh04/QuizQuest/blob/master/CONTRIBUTING.md) file for instructions on how to get started with the project on your local system 11 | - Contributions are welcome! Feel free to fork the repository, make improvements, and create pull requests. 12 | - Please view the list of open issues at [Issues](https://github.com/Akash-Singh04/QuizQuest/issues). Any contributions to them are welcome. 13 | 14 | 15 | ## Tech Stack 16 | 17 | - **Next.js**: Full Stack framework for building the web application. 18 | - **Typescript**: Ensuring type safety and improved development experience. 19 | - **Firebase**: Authentication, Firestore database for secure data storage. 20 | - **Tailwind CSS**: Utilized for styling and responsive design. 21 | 22 | 23 | ## Deployment 24 | 25 | The live deployment of QuizQuest can be accessed at [QuizQuest](https://quiz-quest-delta.vercel.app/). 26 | 27 | ## Features 28 | 29 | ### Admin Panel 30 | 31 | - **Quiz Data Upload**: Admins can upload Excel files containing quiz data for automatic quiz generation. 32 | - **Manage Quizzes*: Admins can easily delete, lock or download quiz data. 33 | - **Manage Results: Admins can easily download specific quiz results. 34 | - **Interactive UI**: User-friendly interface for entering quiz details and managing quiz data. 35 | - **Firebase Integration**: Firebase Firestore database integration for storing quiz data securely. 36 | 37 | ### Student Dashboard 38 | 39 | - **User Authentication**: Students can securely log in using Firebase authentication. 40 | - **Quiz Access**: Access available quizzes, view details, and track completion status. 41 | - **Quiz Timer**: Quizzes automatically submit after specific time. 42 | - **Quiz Safety**: Students need to answer all questions to submit the quiz. 43 | - **Real-time Updates**: Firebase ensures real-time updates for quiz status and progress tracking. 44 | 45 | 46 | 47 | ## Authors 48 | 49 | * [**Akash Singh**](https://github.com/Akash-Singh04) 50 | 51 | See also the list of [contributors](https://github.com/Akash-Singh04/QuizQuest/contributors) who participated in this project. 52 | 53 | ## License 54 | 55 | This project is licensed under the [MIT License](LICENSE). 56 | -------------------------------------------------------------------------------- /app/createquiz/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState , useEffect} from "react"; 3 | import FileInput from "../components/Fileinput" 4 | import { onAuthStateChanged } from 'firebase/auth'; 5 | import { auth } from '../firebase'; 6 | import { getFirestore, collection, addDoc } from 'firebase/firestore'; 7 | import {db} from '../firebase'; 8 | import { useRouter } from "next/navigation"; 9 | import toast from "react-hot-toast"; 10 | 11 | function QuizGenerator() { 12 | const [excelData, setExcelData] = useState(null); 13 | const [fileName, setFileName] = useState(""); 14 | const [user, setUser] = useState(auth.currentUser); 15 | const router = useRouter(); 16 | // User authentication state 17 | useEffect(() => { 18 | // Check the user's authentication state 19 | onAuthStateChanged(auth, (user) => { 20 | if (user) { 21 | // console.log(user.providerData[0].email) 22 | if (user.providerData[0].email === 'admindsce@dsce.com' || user.providerData[0].email === 'testadmin@dsce.com'){ 23 | setUser(user as any); 24 | } 25 | else{ 26 | alert("Unauthorized :(") 27 | router.push('/login'); 28 | } 29 | } 30 | 31 | else { 32 | // Redirect unauthenticated users to the login page 33 | router.push('/login'); 34 | } 35 | }); 36 | }, []); 37 | 38 | 39 | const handleFileUpload = async (data : any) => { 40 | setExcelData(data); 41 | setFileName(data.fileName); 42 | const filteredQuizData = data.quizData.filter((entry : any) => { 43 | return ( 44 | entry.questionNumber && // Ensure questionNumber is not null 45 | entry.question && // Ensure question is not null 46 | entry.options && // Ensure options is not null 47 | entry.correctAnswer // Ensure correctAnswer is not null 48 | ); 49 | }); 50 | 51 | // Update the original quizData object with the filtered data 52 | data.quizData = filteredQuizData; 53 | // console.log("data" + data); 54 | // console.log("excel " + excelData); 55 | if (data) { 56 | try { 57 | const quizCollection = collection(db, 'quizzes'); // 'quizzes' is the collection name 58 | 59 | // Add the quiz data to Firestore 60 | // console.log(data) 61 | const docRef = await addDoc(quizCollection, {data}); 62 | toast.success("Quiz added successfully"); 63 | 64 | // console.log('Quiz data added with ID: ', docRef.id); 65 | } catch (error) { 66 | console.error('Error adding quiz data: ', error); 67 | toast.error("Quiz addition failed"); 68 | } 69 | } 70 | }; 71 | 72 | return ( 73 |

74 | 75 | {fileName &&

Uploaded File: {fileName}

} 76 | {/* Display and configure the generated quiz here */} 77 |

78 | ); 79 | } 80 | 81 | export default QuizGenerator; 82 | -------------------------------------------------------------------------------- /app/studentdata/page.test.tsx: -------------------------------------------------------------------------------- 1 | // import { renderHook, act } from '@testing-library/react-hooks'; 2 | // import { useRouter } from 'next/router'; 3 | // import { auth, db, updateDoc, arrayUnion } from 'firebase/firestore'; 4 | // import toast from 'react-hot-toast'; 5 | // import { formatDateTime } from '../Date'; 6 | // import { Quiz } from '../[quizid]/page'; 7 | 8 | // jest.mock('react', () => ({ 9 | // ...jest.requireActual('react'), 10 | // useState: jest.fn(), 11 | // useEffect: jest.fn(), 12 | // })); 13 | 14 | // jest.mock('next/router', () => ({ 15 | // useRouter: jest.fn(), 16 | // })); 17 | 18 | // jest.mock('firebase/firestore', () => ({ 19 | // auth: { currentUser: { uid: 'testUid' } }, 20 | // db: jest.fn(), 21 | // updateDoc: jest.fn(), 22 | // arrayUnion: jest.fn(), 23 | // })); 24 | 25 | // jest.mock('react-hot-toast', () => ({ 26 | // success: jest.fn(), 27 | // })); 28 | 29 | // jest.mock('../Date', () => ({ 30 | // formatDateTime: jest.fn(), 31 | // })); 32 | 33 | // describe('Quiz', () => { 34 | // it('handleQuizSubmit', async () => { 35 | // const useStateMock = (initState: any) => [initState, jest.fn()]; 36 | // (useRouter as jest.Mock).mockReturnValue({ push: jest.fn() }); 37 | // (formatDateTime as jest.Mock).mockReturnValue('testDateTime'); 38 | // (useState as jest.Mock) 39 | // .mockImplementationOnce(() => useStateMock([{ question: 'testQuestion', correctAnswer: 'testAnswer' }])) // questions 40 | // .mockImplementationOnce(() => useStateMock(['testAnswer'])) // selectedOptions 41 | // .mockImplementationOnce(() => useStateMock('testQuizId')) // quizId 42 | // .mockImplementationOnce(() => useStateMock('testQuizName')) // quizName 43 | // .mockImplementationOnce(() => useStateMock('testCourse')) // course 44 | // .mockImplementationOnce(() => useStateMock('testCourseCode')); // courseCode 45 | 46 | // const { result } = renderHook(() => Quiz()); 47 | // await act(async () => { 48 | // await result.current.handleQuizSubmit(); 49 | // }); 50 | 51 | // expect(updateDoc).toHaveBeenCalledWith( 52 | // { __collection__: 'users', id: 'testUid' }, 53 | // { 54 | // quizData: [ 55 | // { 56 | // score: 1, 57 | // totalQuestions: 1, 58 | // selectedOptions: ['testAnswer'], 59 | // correctAnswers: ['testAnswer'], 60 | // fetchedQuestions: [{ question: 'testQuestion', correctAnswer: 'testAnswer' }], 61 | // quizId: 'testQuizId', 62 | // quizName: 'testQuizName', 63 | // course: 'testCourse', 64 | // courseCode: 'testCourseCode', 65 | // time: 'testDateTime', 66 | // }, 67 | // ], 68 | // } 69 | // ); 70 | // expect(useRouter().push).toHaveBeenCalledWith('/results'); 71 | // expect(toast.success).toHaveBeenCalledWith('Quiz Submitted Succesfully!'); 72 | // }); 73 | // }); -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Getting Started 2 | 3 | 1. Clone the repository: 4 | 5 | ```bash 6 | git clone https://github.com/Akash-Singh04/QuizQuest.git 7 | ``` 8 | 9 | 2. Install dependencies: 10 | 11 | ```bash 12 | cd QuizQuest 13 | npm install 14 | ``` 15 | 16 | 3. Firebase Configuration Setup 17 | - Contact [@kind.of.akash](https://www.instagram.com/kind.of.akash/) on Instagram to get the .env file containing the firebase configurations. After getting the env file skip to step (d). 18 | - Alternatively Contact [@kind.of.akash](https://www.instagram.com/kind.of.akash/) on Instagram to get collaborator access to the firebase project that contains the User Authentication and Firebase Firestore Database. An email will be sent with the invitaion for the same. 19 | 20 | 4. Steps to Set Firebase Environment Variables 21 | 22 | a. After Getting Collaborator Access: 23 | - Visit the Firebase Console 24 | - Navigate to the project settings. 25 | 26 | b. Retrieve Firebase Configuration: 27 | - In the Firebase project settings, locate and select the "General" tab. 28 | - Scroll down to the "Your apps" section and click on Quiz-Quest 29 | 30 | c. Copy Configuration Details: 31 | - After creating the web app, you'll get a configuration object containing keys like `apiKey`, `authDomain`, `projectId`, etc. 32 | - Copy these configuration details. 33 | 34 | d. Environment Variable Setup: 35 | - Create a `.env.local` file in the root directory of your project (ensure it's added to `.gitignore` for security). 36 | - Add the Firebase configuration details as environment variables: 37 | 38 | ```env 39 | NEXT_PUBLIC_FIREBASE_API_KEY="YOUR_FIREBASE_API_KEY" 40 | NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="YOUR_FIREBASE_AUTH_DOMAIN" 41 | NEXT_PUBLIC_FIREBASE_PROJECT_ID="YOUR_FIREBASE_PROJECT_ID" 42 | NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="YOUR_FIREBASE_STORAGE_BUCKET" 43 | NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="YOUR_FIREBASE_MESSAGING_SENDER_ID" 44 | NEXT_PUBLIC_FIREBASE_APP_ID="YOUR_FIREBASE_APP_ID" 45 | NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="YOUR_FIREBASE_MEASUREMENT_ID" // (Optional, for Analytics) 46 | ``` 47 | 48 | e. Usage in Project: 49 | - Access these environment variables in your code as `process.env.VARIABLE_NAME`. 50 | 51 | f. Restart Server: 52 | - After setting environment variables, restart the development server to apply the changes. 53 | 54 | ###### Note: 55 | - Ensure that you replace `"YOUR_FIREBASE_XXX"` placeholders with the actual values from your Firebase project configuration. 56 | - Remember to keep your `.env.local` file private and do not expose sensitive credentials in your code repository. 57 | 58 | 5. Run the project: 59 | 60 | ```bash 61 | npm run dev 62 | ``` 63 | 6. Access the project locally at `http://localhost:3000`. 64 | 65 | ## Questions or Need Help? 66 | 67 | If you have any questions or need further assistance, feel free to open an issue or reach out to [Akash-Singh04](https://github.com/Akash-Singh04). 68 | 69 | We appreciate your contributions and look forward to your involvement in improving Quiz-Quest! 70 | 71 | # Please view the list of open issues at [Issues](https://github.com/Akash-Singh04/QuizQuest/issues). Any contributions to them are welcome. 72 | -------------------------------------------------------------------------------- /app/login/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import SignInForm from "../components/Signin"; 4 | import SignUpForm from "../components/Signup"; 5 | import ForgotPasswordDialog from "../components/ForgetPassword"; 6 | import { getAuth, sendPasswordResetEmail } from "firebase/auth"; 7 | const auth = getAuth(); 8 | export default function App() { 9 | const [type, setType] = useState("signIn"); 10 | const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false); 11 | const [status, setStatus] = useState(""); 12 | const handleOnClick = (text: any) => { 13 | if (text !== type) { 14 | setType(text); 15 | return; 16 | } 17 | }; 18 | 19 | const handleForgotPasswordClick = () => { 20 | setForgotPasswordOpen(true); 21 | }; 22 | 23 | const handleCloseForgotPassword = () => { 24 | setForgotPasswordOpen(false); 25 | }; 26 | 27 | const handleSendEmail = (email: string) => { 28 | // Implement your logic to send the email here 29 | // console.log("Sending email to:", email); 30 | sendPasswordResetEmail(auth, email) 31 | .then(() => { 32 | console.log("Email sent successfully"); 33 | setStatus("Email Sent Successfully, Please Check your mail"); 34 | }) 35 | .catch((error) => { 36 | const errorCode = error.code; 37 | const errorMessage = error.message; 38 | console.log(errorCode, errorMessage); 39 | setStatus("Error Sending Email , Please Check The Email Provided"); 40 | }); 41 | // You can make an API call or trigger the email sending process 42 | }; 43 | 44 | const containerClass = 45 | "container " + (type === "signUp" ? "right-panel-active" : ""); 46 | return ( 47 |

48 |

49 | 50 | 51 |

52 |

53 |

54 |

Welcome Back!

55 |

56 | To keep connected with us please login with your personal info 57 |

58 | 65 | 72 |

73 |

74 |

Hello, Friend!

75 |

Enter your personal details and start journey with us

76 | 83 | 90 |

91 |

92 |

93 |

94 | {forgotPasswordOpen && ( 95 |

96 | 100 |

101 | )} 102 |

103 | 104 |

{status}

105 |

106 |

107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /app/components/Signup.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from 'react'; 3 | import { useRouter } from "next/navigation"; 4 | import { doc , setDoc} from 'firebase/firestore'; // Import Firestore functions 5 | import { auth, db } from '../firebase'; 6 | import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'; 7 | import toast from "react-hot-toast"; 8 | 9 | function SignUpForm() { 10 | const router = useRouter(); 11 | const [error, setError] = useState(null); 12 | const handleSubmit = async (event: React.FormEvent) => { 13 | event.preventDefault(); 14 | const data = new FormData(event.currentTarget); 15 | let email = data.get('email') as string; 16 | let password = data.get('password') as string; 17 | let usn = data.get('USN') as string; 18 | 19 | // Validate USN format 20 | const usnRegex = /^1DS[A-Z0-9]{7}$/; 21 | if (!usnRegex.test(usn)) { 22 | setError("USN must be of the form 1DS followed by seven alphanumeric characters."); 23 | return; 24 | } 25 | 26 | // Validate USN length 27 | if (usn.length !== 10) { 28 | setError("USN must be 10 digits long."); 29 | return; 30 | } 31 | 32 | try { 33 | const userCredential = await createUserWithEmailAndPassword(auth, email, password); 34 | const user = userCredential.user; 35 | 36 | const userData = { 37 | uid: user.uid, 38 | email: user.email, 39 | displayName: data.get('firstName') + ' ' + data.get('lastName'), 40 | USN: usn, 41 | quizData: [] 42 | } 43 | 44 | // Create a user document in Firestore 45 | const userDocRef = doc(db, 'users', user.uid); 46 | setDoc(userDocRef, userData) 47 | .then(() => { 48 | // console.log('User document created with UID: ', user.uid); 49 | }) 50 | .catch((error) => { 51 | console.error('Error creating user document: ', error); 52 | toast.error("Sign up failed"); 53 | }); 54 | 55 | // You can also update the user's profile 56 | await updateProfile(user, { 57 | displayName: data.get('firstName') + ' ' + data.get('lastName'), 58 | }); 59 | toast.success("Sign up successful"); 60 | 61 | router.push(`/`); 62 | } catch (error : any) { 63 | const errorCode = error.code; 64 | const errorMessage = error.message; 65 | console.log(errorCode, errorMessage); 66 | toast.error("Sign up failed"); 67 | setError(errorMessage); // Set the error message 68 | } 69 | }; 70 | 71 | return ( 72 |

73 | 117 |

118 | ); 119 | } 120 | 121 | export default SignUpForm; 122 | -------------------------------------------------------------------------------- /app/quizzes/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState, useEffect } from 'react'; 3 | import Link from 'next/link'; 4 | import { collection, getDocs } from 'firebase/firestore'; 5 | import { auth } from "../firebase"; 6 | import { db } from '../firebase'; 7 | import { onAuthStateChanged } from 'firebase/auth'; 8 | import { useRouter } from 'next/navigation'; 9 | 10 | async function fetchQuizData() { 11 | const querySnapshot = await getDocs(collection(db, 'quizzes')); 12 | const quizData: any = []; 13 | querySnapshot.forEach((doc) => { 14 | if (!doc.data().data.isDeleted && !doc.data().data.isLocked) { 15 | quizData.push(doc.data()); 16 | } 17 | }); 18 | return quizData; 19 | } 20 | 21 | async function fetchUserData() { 22 | const userCollection = collection(db, 'users'); 23 | const querySnapshot = await getDocs(userCollection); 24 | const userData: any = []; 25 | querySnapshot.forEach((doc) => { 26 | userData.push(doc.data()); 27 | }); 28 | const currentUserData = userData.filter((entry: any) => { 29 | return ( 30 | entry.uid == auth.currentUser?.uid 31 | ); 32 | }); 33 | // console.log(currentUserData); 34 | return userData; 35 | } 36 | 37 | // StudentPage component 38 | const StudentPage = () => { 39 | const router = useRouter(); 40 | 41 | const [user, setUser] = useState(auth.currentUser); 42 | const [userData, setUserData] = useState([]); 43 | 44 | useEffect(() => { 45 | // Check the user's authentication state 46 | onAuthStateChanged(auth, (user) => { 47 | if (user) { 48 | setUser(user as any); 49 | } else { 50 | // Redirect unauthenticated users to the login page 51 | router.push('/login'); 52 | } 53 | }); 54 | }, []); 55 | 56 | const [quizzes, setQuizzes] = useState([]); 57 | 58 | // Fetch quiz data from Firestore 59 | useEffect(() => { 60 | async function fetchData() { 61 | const data = await fetchQuizData(); 62 | const userData = await fetchUserData(); 63 | setQuizzes(data); 64 | setUserData(userData); 65 | } 66 | fetchData(); 67 | }, []); 68 | 69 | return ( 70 |

71 | {/* Quiz Cards Section */} 72 |

73 |

Join the quiz challenge and unlock your potential!

74 |

75 | {quizzes.map((quiz: any) => { 76 | const userAttempts: any = userData.find( 77 | (data: any) => data.uid === auth.currentUser?.uid 78 | ); 79 | 80 | const isQuizAttempted = 81 | userAttempts && 82 | userAttempts.quizData.some((attempt: any) => attempt.quizId === quiz.data.id); 83 | 84 | return ( 85 |

90 | {isQuizAttempted ? ( 91 |

92 |

Quiz Name: {quiz.data.quizName}

93 |

Course: {quiz.data.course}

94 |

Course Code: {quiz.data.courseCode}

95 |

This quiz has been attempted.

96 |

97 | ) : ( 98 | 101 |

102 |

Quiz Name: {quiz.data.quizName}

103 |

Course: {quiz.data.course}

104 |

Course Code: {quiz.data.courseCode}

105 |

106 | 107 | )} 108 |

109 | ); 110 | })} 111 |

112 |

113 |

114 | ); 115 | }; 116 | 117 | export default StudentPage; 118 | -------------------------------------------------------------------------------- /app/results/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import React from 'react'; 3 | import { collection, getDocs} from 'firebase/firestore'; 4 | import { auth, db } from '../firebase'; // Import Firestore and auth 5 | import { onAuthStateChanged } from 'firebase/auth'; 6 | import { useRouter } from 'next/navigation'; 7 | import { useEffect, useState } from 'react'; 8 | 9 | export default function Page() { 10 | const router = useRouter(); 11 | const [quizResults, setQuizResults] = useState ([]); 12 | const [user, setUser] = useState(auth.currentUser); 13 | const [score, setScore] = useState(0); 14 | const [questionlength, setQuestionlength] = useState(0); 15 | const [selectedOptions, setSelectedOptions] = useState([]); 16 | const [correctAnswers, setCorrectAnswers] = useState([]); 17 | const [fetchedQuestions, setFetchedQuestions] = useState([]); 18 | 19 | 20 | async function fetchQuizResults(){ 21 | const user = auth.currentUser 22 | const user_id = user?.uid 23 | const querySnapshot = await getDocs(collection(db , 'users')); 24 | querySnapshot.forEach((doc) => { 25 | if(doc.id == user_id){ 26 | // doc.data() is never undefined for query doc snapshots 27 | setQuizResults(doc.data() as any) 28 | const quizData = doc.data().quizData 29 | const lastQuiz = quizData[quizData.length - 1]; 30 | // const quizScore = lastQuiz.score; 31 | // setScore(quizScore) 32 | const questionLength = lastQuiz.totalQuestions 33 | setQuestionlength(questionLength) 34 | // const quizQuestions = lastQuiz.questions; 35 | // setQuestionlength(quizQuestions.totalQuestions) 36 | const quizSelectedOptions = lastQuiz.selectedOptions; 37 | setSelectedOptions(quizSelectedOptions) 38 | const quizCorrectAnswers = lastQuiz.correctAnswers; 39 | setCorrectAnswers(quizCorrectAnswers) 40 | const quizScore = lastQuiz.score; 41 | setScore(quizScore) 42 | const quizFetchedQuestions = lastQuiz.fetchedQuestions; 43 | setFetchedQuestions(quizFetchedQuestions) 44 | }}); 45 | 46 | } 47 | // User authentication state 48 | useEffect(() => { 49 | // Check the user's authentication state 50 | onAuthStateChanged(auth, (user) => { 51 | if (user) { 52 | 53 | setUser(user as any); 54 | fetchQuizResults(); 55 | } else { 56 | // Redirect unauthenticated users to the login page 57 | router.push('/login'); 58 | } 59 | }); 60 | }, []); 61 | // Retrieve user details 62 | const displayName = user?.providerData[0].displayName ; 63 | 64 | 65 | 66 | return ( 67 |

68 |

69 |

Quiz Results

70 |

71 | User: {displayName || 'User Not Found'} 72 |

73 |

74 | Score: {score}/{questionlength || 'Score Not Found'} 75 |

76 | 77 | 78 | {fetchedQuestions.map((question:any, index : any) => ( 79 |

80 |

Question {index + 1}:

81 |

{question.question}

82 |

83 | {question.options.map((option:any, optionIndex:any) => ( 84 |

97 |

98 | {selectedOptions && selectedOptions[index] === option ? ( 99 | selectedOptions[index] === correctAnswers[index] ? ( 100 | ✓ 101 | ) : ( 102 | ✗ 103 | ) 104 | ) : null} 105 | {option} 106 |

107 |

108 | ))} 109 |

110 |

111 | ))} 112 |

113 |

114 | ); 115 | } 116 | -------------------------------------------------------------------------------- /app/studentdata/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState, useEffect } from 'react'; 3 | import { onAuthStateChanged } from 'firebase/auth'; 4 | import { auth, db } from '../firebase'; 5 | import { collection, getDocs } from 'firebase/firestore'; 6 | import { useRouter } from 'next/navigation'; 7 | import * as XLSX from 'xlsx'; 8 | import QuizDetails from '../components/QuizDetails'; 9 | import {formatDate} from '../Date'; 10 | import toast from 'react-hot-toast'; 11 | 12 | const AdminPage = () => { 13 | const [user, setUser] = useState(auth.currentUser); 14 | const router = useRouter(); 15 | const [userData, setUserData] = useState([]); 16 | 17 | useEffect(() => { 18 | onAuthStateChanged(auth, (user) => { 19 | if (user) { 20 | if (user.providerData[0].email === 'admindsce@dsce.com' || user.providerData[0].email === 'testadmin@dsce.com') { 21 | setUser(user); 22 | } else { 23 | alert('Unauthorized :('); 24 | router.push('/login'); 25 | } 26 | } else { 27 | router.push('/login'); 28 | } 29 | fetchAdminData(); 30 | }); 31 | }, []); 32 | 33 | async function fetchAdminData() { 34 | try { 35 | const querySnapshot = await getDocs(collection(db, 'users')); 36 | const userDataArray: any = []; 37 | querySnapshot.forEach((doc) => { 38 | const data = doc.data(); 39 | if (data.email === 'admindsce@dsce.com' || data.email === 'testadmin@dsce.com') { 40 | // Exclude admin user 41 | } else { 42 | userDataArray.push(data); 43 | } 44 | }); 45 | setUserData(userDataArray); 46 | } catch (error) { 47 | console.error('Error fetching admin data:', error); 48 | toast.error('Error fetching admin data'); 49 | } 50 | } 51 | 52 | function calculateTotalScore(quizData: any) { 53 | let totalScore = 0; 54 | let totalQuestions = 0; 55 | 56 | quizData.forEach((quiz: any) => { 57 | totalScore += quiz.score; 58 | totalQuestions += quiz.totalQuestions; 59 | }); 60 | 61 | return `${totalScore} / ${totalQuestions}`; 62 | } 63 | 64 | const handleDownloadExcel = () => { 65 | var d = new Date(); 66 | var n = formatDate(d); 67 | // Flatten the userData array and include details for each quiz 68 | const flatData = userData.map(user => { 69 | const userFlat = { 70 | 'User ID': user.uid, 71 | 'USN': user.USN, 72 | 'Email': user.email, 73 | 'Student Name': user.displayName, 74 | 'Total Score': calculateTotalScore(user.quizData), 75 | // Flatten quizData array 76 | ...user.quizData.reduce((acc : any, quiz : any, index : any) => ({ 77 | ...acc, 78 | [` ${quiz.quizName} `]: `${quiz.score} / ${quiz.totalQuestions}`, 79 | [`${quiz.quizName} Time`]: quiz.time, 80 | [`${quiz.quizName} Quiz ID`]: quiz.quizId, 81 | [`${quiz.quizName} Course`]: quiz.course, 82 | [`${quiz.quizName} Course Code`]: quiz.courseCode, 83 | }), {}), 84 | }; 85 | return userFlat; 86 | }); 87 | 88 | // Create Excel sheet 89 | const ws = XLSX.utils.json_to_sheet(flatData); 90 | const wb = XLSX.utils.book_new(); 91 | XLSX.utils.book_append_sheet(wb, ws, `Student Data Sheet ${n}` ); 92 | const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); 93 | saveAsExcelFile(excelBuffer, `Student Data Sheet ${n} .xlsx`); 94 | }; 95 | 96 | const saveAsExcelFile = (buffer: any, fileName: string) => { 97 | const blob = new Blob([buffer], { type: 'application/octet-stream' }); 98 | const link = document.createElement('a'); 99 | link.href = window.URL.createObjectURL(blob); 100 | link.download = fileName; 101 | link.click(); 102 | }; 103 | 104 | return ( 105 |

106 |

Admin Page

107 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | {userData.map((user: any) => ( 127 | 128 | 129 | 130 | 131 | 132 | 144 | 145 | 146 | ))} 147 | 148 |

User ID	USN	Email	Display Name	Quiz Data	Total Score
{user.uid}	{user.USN}	{user.email}	{user.displayName}	133 \| {user.quizData.map((quiz: any, index: any) => ( 134 \| 135 \| 136 \| 137 \| {quiz.quizName}: {quiz.score} / {quiz.totalQuestions} 138 \| 139 \| 140 \| 141 \| 142 \| ))} 143 \|	{calculateTotalScore(user.quizData)}

149 |

150 | ); 151 | }; 152 | 153 | export default AdminPage; 154 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: -webkit-linear-gradient(to right, #2B2E4A, #1F4172); 22 | background: linear-gradient(to right, #2B2E4A, #1F4172); 23 | background-repeat: no-repeat; 24 | background-size: cover; 25 | background-position: 0 0; 26 | } 27 | 28 | .App { 29 | font-family: sans-serif; 30 | text-align: center; 31 | } 32 | 33 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); 34 | 35 | 36 | .loginbody { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | flex-direction: column; 41 | font-family: "Montserrat", sans-serif; 42 | height: 100vh; 43 | margin: -20px 0 50px; 44 | } 45 | 46 | h1 { 47 | font-weight: bold; 48 | margin: 0; 49 | } 50 | 51 | h2 { 52 | text-align: center; 53 | } 54 | 55 | p { 56 | font-size: 14px; 57 | font-weight: 100; 58 | line-height: 20px; 59 | letter-spacing: 0.5px; 60 | margin: 20px 0 30px; 61 | } 62 | 63 | span { 64 | font-size: 12px; 65 | } 66 | 67 | a { 68 | font-size: 14px; 69 | text-decoration: none; 70 | margin: 15px 0; 71 | } 72 | 73 | .loginbutton { 74 | border-radius: 20px; 75 | border: 1px solid black; 76 | color: #ffffff; 77 | font-size: 12px; 78 | font-weight: bold; 79 | padding: 12px 45px; 80 | letter-spacing: 1px; 81 | text-transform: uppercase; 82 | transition: transform 80ms ease-in; 83 | } 84 | 85 | .loginbutton:active { 86 | transform: scale(0.95); 87 | } 88 | 89 | .loginbutton:focus { 90 | outline: none; 91 | } 92 | 93 | button.ghost { 94 | background-color: transparent; 95 | border-color: #ffffff; 96 | } 97 | 98 | .loginform { 99 | display: flex; 100 | align-items: center; 101 | justify-content: center; 102 | flex-direction: column; 103 | padding: 0 50px; 104 | height: 100%; 105 | text-align: center; 106 | } 107 | 108 | input { 109 | border: none; 110 | padding: 12px 15px; 111 | margin: 8px 0; 112 | width: 100%; 113 | } 114 | 115 | .container { 116 | background-color: black; 117 | border-radius: 10px; 118 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 119 | position: relative; 120 | overflow: hidden; 121 | width: 768px; 122 | max-width: 100%; 123 | min-height: 480px; 124 | } 125 | 126 | .form-container { 127 | position: absolute; 128 | top: 0; 129 | height: 100%; 130 | transition: all 0.6s ease-in-out; 131 | } 132 | 133 | .sign-in-container { 134 | left: 0; 135 | width: 50%; 136 | z-index: 2; 137 | } 138 | 139 | .container.right-panel-active .sign-in-container { 140 | transform: translateX(100%); 141 | } 142 | 143 | .sign-up-container { 144 | left: 0; 145 | width: 50%; 146 | opacity: 0; 147 | z-index: 1; 148 | } 149 | 150 | .container.right-panel-active .sign-up-container { 151 | transform: translateX(100%); 152 | opacity: 1; 153 | z-index: 5; 154 | animation: show 0.6s; 155 | } 156 | 157 | @keyframes show { 158 | 0%, 159 | 49.99% { 160 | opacity: 0; 161 | z-index: 1; 162 | } 163 | 164 | 50%, 165 | 100% { 166 | opacity: 1; 167 | z-index: 5; 168 | } 169 | } 170 | 171 | .overlay-container { 172 | position: absolute; 173 | top: 0; 174 | left: 50%; 175 | width: 50%; 176 | height: 100%; 177 | overflow: hidden; 178 | transition: transform 0.6s ease-in-out; 179 | z-index: 100; 180 | } 181 | 182 | .container.right-panel-active .overlay-container { 183 | transform: translateX(-100%); 184 | } 185 | 186 | .overlay { 187 | background: #2B2E4A; 188 | background: -webkit-linear-gradient(to right, #0F4C75, #3282B8); 189 | background: linear-gradient(to right, #0F4C75, #3282B8); 190 | background-repeat: no-repeat; 191 | background-size: cover; 192 | background-position: 0 0; 193 | color: #ffffff; 194 | position: relative; 195 | left: -100%; 196 | height: 100%; 197 | width: 200%; 198 | transform: translateX(0); 199 | transition: transform 0.6s ease-in-out; 200 | } 201 | 202 | .container.right-panel-active .overlay { 203 | transform: translateX(50%); 204 | } 205 | 206 | .overlay-panel { 207 | position: absolute; 208 | display: flex; 209 | align-items: center; 210 | justify-content: center; 211 | flex-direction: column; 212 | padding: 0 40px; 213 | text-align: center; 214 | top: 0; 215 | height: 100%; 216 | width: 50%; 217 | transform: translateX(0); 218 | transition: transform 0.6s ease-in-out; 219 | } 220 | 221 | .overlay-left { 222 | transform: translateX(-20%); 223 | } 224 | 225 | .container.right-panel-active .overlay-left { 226 | transform: translateX(0); 227 | } 228 | 229 | .overlay-right { 230 | right: 0; 231 | transform: translateX(0); 232 | } 233 | 234 | .container.right-panel-active .overlay-right { 235 | transform: translateX(20%); 236 | } 237 | 238 | /* Add this to your CSS or SCSS file */ 239 | .hover\:tilt:hover { 240 | transform: perspective(1000px) rotateY(-40deg); 241 | transition: transform 0.3s ease; 242 | } 243 | 244 | .hover1\:tilt:hover { 245 | transform: perspective(1000px) rotateY(40deg); 246 | transition: transform 0.3s ease; 247 | } 248 | 249 | /* Add this CSS in your stylesheet or component */ 250 | .forgot-password-dialog { 251 | position: fixed; 252 | top: 50%; 253 | left: 13%; 254 | transform: translate(-50%, -50%); 255 | background-color: #1F4172; 256 | padding: 20px; 257 | border-radius: 8px; 258 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 259 | z-index: 10000; 260 | width: 300px; 261 | } 262 | 263 | 264 | 265 | .forgot-password-dialog h2 { 266 | margin-top: 0; 267 | font-size: 24px; 268 | } 269 | 270 | .forgot-password-dialog form { 271 | display: flex; 272 | flex-direction: column; 273 | } 274 | 275 | .forgot-password-dialog label { 276 | margin-bottom: 8px; 277 | } 278 | 279 | .forgot-password-dialog input { 280 | padding: 8px; 281 | margin-bottom: 16px; 282 | border-radius: 4px; 283 | border: 1px solid #ccc; 284 | } 285 | 286 | .forgot-password-dialog button { 287 | padding: 8px 16px; 288 | background-color: #007bff; 289 | color: #fff; 290 | border: none; 291 | border-radius: 4px; 292 | cursor: pointer; 293 | } 294 | 295 | .forgot-password-dialog button:hover { 296 | background-color: #0056b3; 297 | } 298 | 299 | -------------------------------------------------------------------------------- /app/components/Fileinput.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import * as XLSX from "xlsx"; 3 | import { useDropzone } from "react-dropzone"; 4 | import { v4 as uuidv4 } from 'uuid'; 5 | import { useRouter } from "next/navigation"; 6 | 7 | interface FileInputProps { 8 | onFileUpload: (data: any) => void; 9 | } 10 | 11 | interface QuizInfo { 12 | quizName: string; 13 | course: string; 14 | courseCode: string; 15 | id: string; 16 | isDeleted: boolean; 17 | isLocked: boolean; 18 | customTimer: number; 19 | } 20 | 21 | interface QuizData { 22 | questionNumber: string; 23 | question: string; 24 | options: string[]; 25 | correctAnswer: string; 26 | } 27 | 28 | function FileInput({ onFileUpload }: FileInputProps) { 29 | const router = useRouter(); 30 | const [excelData, setExcelData] = useState(null); 31 | const [quizInfo, setQuizInfo] = useState({ 32 | quizName: "", 33 | course: "", 34 | courseCode: "", 35 | id: uuidv4(), 36 | isDeleted: false, 37 | isLocked: false, 38 | customTimer: 0, // Default value in seconds 39 | } as QuizInfo); 40 | const [quizGenerated, setQuizGenerated] = useState(false); 41 | const [viewQuizData, setViewQuizData] = useState(false); 42 | const [fileName, setFileName] = useState(""); 43 | const [timerInput, setTimerInput] = useState({ minutes: "", seconds: "" }); 44 | 45 | const onDrop = (acceptedFiles: any) => { 46 | const file = acceptedFiles[0]; 47 | const reader = new FileReader(); 48 | 49 | reader.onload = (e) => { 50 | const data = e.target?.result; 51 | const workbook = XLSX.read(data, { type: "binary" }); 52 | const worksheet = workbook.Sheets[workbook.SheetNames[0]]; 53 | const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); 54 | const quizData = condenseExcelData(excelData); 55 | const fileName = file.name; 56 | 57 | setExcelData(quizData as any); 58 | setFileName(fileName); 59 | }; 60 | 61 | reader.readAsBinaryString(file); 62 | }; 63 | 64 | const condenseExcelData = (data: any) => { 65 | const quizData: QuizData[] = []; 66 | for (let i = 1; i < data.length; i++) { 67 | const questionNumber = data[i][0]; 68 | const question = data[i][1]; 69 | const options = [data[i][2], data[i][3], data[i][4], data[i][5]]; 70 | const correctAnswer = data[i][6]; 71 | quizData.push({ 72 | questionNumber, 73 | question, 74 | options, 75 | correctAnswer, 76 | }); 77 | } 78 | 79 | return quizData; 80 | }; 81 | 82 | const handleInputChange = (e: any) => { 83 | const { name, value } = e.target; 84 | setQuizInfo({ 85 | ...quizInfo, 86 | [name]: value, 87 | }); 88 | }; 89 | 90 | const handleTimerInputChange = (e: React.ChangeEvent) => { 91 | const { name, value } = e.target; 92 | setTimerInput({ 93 | ...timerInput, 94 | [name]: value, 95 | }); 96 | }; 97 | 98 | const { getRootProps, getInputProps } = useDropzone({ onDrop }); 99 | 100 | const generateQuiz = () => { 101 | if (quizInfo.quizName && quizInfo.course && quizInfo.courseCode && excelData) { 102 | const totalSeconds = (parseInt(timerInput.minutes) * 60) + parseInt(timerInput.seconds); 103 | onFileUpload({ ...quizInfo, customTimer: totalSeconds, quizData: excelData, fileName }); 104 | setQuizGenerated(true); 105 | router.push("/"); 106 | } else { 107 | alert("Please fill in all fields and upload an Excel file."); 108 | } 109 | }; 110 | 111 | const toggleViewQuizData = () => { 112 | if (excelData) { 113 | setViewQuizData(!viewQuizData); 114 | } else { 115 | alert("Please upload an Excel file to view quiz data."); 116 | } 117 | }; 118 | 119 | return ( 120 |

121 |

122 | 130 | 138 | 146 | 154 | 162 |

163 |

Upload Excel File

164 |

168 | 169 |

Drag & drop an Excel file here, or click to select one

170 | {fileName && ( 171 |

172 | Uploaded File: {fileName} 173 |

174 | )} 175 |

176 | {viewQuizData && ( 177 |

178 |

Quiz Data:

179 |

{JSON.stringify(excelData, null, 2)}

180 |

181 | )} 182 | {quizGenerated && ( 183 |

184 |

Successfully Generated Quiz!

185 |

186 | )} 187 |

188 | {!viewQuizData && ( 189 | 195 | )} 196 | {viewQuizData && ( 197 | 203 | )} 204 | 210 |

211 | {viewQuizData && ( 212 |

213 |

Successfully Generated Quiz!

214 | {/* Render your quiz data here */} 215 |

216 | )} 217 |

218 | ); 219 | } 220 | 221 | export default FileInput; 222 | -------------------------------------------------------------------------------- /app/[quizid]/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState, useEffect } from 'react'; 3 | import { onAuthStateChanged } from 'firebase/auth'; 4 | import { useRouter, useSearchParams } from 'next/navigation'; 5 | import { collection, getDocs, arrayUnion, updateDoc, doc } from 'firebase/firestore'; 6 | import { auth, db } from '../firebase'; 7 | import { formatDateTime } from '../Date'; 8 | import toast from 'react-hot-toast'; 9 | 10 | // Define a type for your quiz question 11 | type QuizQuestion = { 12 | question: string; 13 | options: string[]; 14 | correctAnswer: string; 15 | }; 16 | 17 | function Quiz() { 18 | const router = useRouter(); 19 | const searchParams = useSearchParams(); 20 | const quizId: any = searchParams.get('id'); 21 | const quizName: any = searchParams.get('name'); 22 | const course: any = searchParams.get('course'); 23 | const courseCode: any = searchParams.get('coursecode'); 24 | const [user, setUser] = useState(null); // User authentication state 25 | const [questions, setQuestions] = useState([]); // Provide type annotation for questions 26 | const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); 27 | const [selectedOptions, setSelectedOptions] = useState<(string | null)[]>([]); 28 | const [score, setScore] = useState(0); 29 | const [isFinalQuestion, setIsFinalQuestion] = useState(false); 30 | const [isTimeUp, setIsTimeUp] = useState(false); 31 | const [timeLeft, setTimeLeft] = useState(0); // Time limit in seconds 32 | 33 | // Function to shuffle an array 34 | function shuffleArray(array: any[]) { 35 | for (let i = array.length - 1; i > 0; i--) { 36 | const j = Math.floor(Math.random() * (i + 1)); 37 | [array[i], array[j]] = [array[j], array[i]]; 38 | } 39 | } 40 | 41 | async function fetchQuizData() { 42 | let toReturn: any = null; 43 | const quizRef = collection(db, 'quizzes'); 44 | const quizDoc = await getDocs(quizRef); 45 | if (quizDoc) { 46 | quizDoc.forEach((doc) => { 47 | const quizData = doc.data(); 48 | const reqQuiz = quizData.data.id; 49 | if (reqQuiz == quizId) { 50 | toReturn = quizData.data; 51 | // Shuffle options array for each question 52 | toReturn.quizData.forEach((question: QuizQuestion) => { 53 | shuffleArray(question.options); 54 | }); 55 | } 56 | }); 57 | return toReturn; 58 | } else { 59 | return null; 60 | } 61 | } 62 | 63 | // Update the useEffect hook where the timer is set 64 | useEffect(() => { 65 | let quizTime = 600000; // Default time if custom timer is not set 66 | async function setQuizTime() { 67 | const data = await fetchQuizData(); 68 | if (data) { 69 | quizTime = data.customTimer * 1000; // Convert seconds to milliseconds 70 | setQuestions(data.quizData); 71 | setTimeLeft(quizTime / 1000); // Time limit in seconds 72 | } 73 | } 74 | 75 | setQuizTime(); 76 | 77 | const timer = setTimeout(() => { 78 | setIsTimeUp(true); 79 | }, quizTime); 80 | 81 | const interval = setInterval(() => { 82 | setTimeLeft((prevTimeLeft) => prevTimeLeft - 1); 83 | }, 1000); // Decrease timeLeft by 1 every second 84 | 85 | // Clear the timer and the interval when the component unmounts or when the time is up 86 | return () => { 87 | clearTimeout(timer); 88 | clearInterval(interval); 89 | }; 90 | }, []); 91 | 92 | useEffect(() => { 93 | if (isTimeUp) { 94 | console.log('Time is up!'); 95 | toast.error('Time is up! Auto Submitting Quiz'); 96 | handleQuizSubmit(); 97 | } 98 | }, [isTimeUp]); 99 | 100 | useEffect(() => { 101 | // Check the user's authentication state 102 | onAuthStateChanged(auth, (user: any) => { 103 | if (user) { 104 | setUser(user); 105 | } else { 106 | // Redirect unauthenticated users to the login page 107 | router.push('/login'); 108 | } 109 | }); 110 | 111 | async function fetchData() { 112 | const data = await fetchQuizData(); 113 | if (data) { 114 | // Shuffle the questions before setting them in state 115 | shuffleArray(data.quizData); 116 | setQuestions(data.quizData); 117 | } 118 | } 119 | fetchData(); 120 | }, []); 121 | 122 | useEffect(() => { 123 | setIsFinalQuestion(currentQuestionIndex === questions.length - 1); 124 | }, [currentQuestionIndex, questions]); 125 | 126 | const handleOptionSelect = (option: string) => { 127 | const updatedOptions = [...selectedOptions]; 128 | updatedOptions[currentQuestionIndex] = option; 129 | setSelectedOptions(updatedOptions); 130 | }; 131 | 132 | const handleNextQuestion = () => { 133 | if (selectedOptions[currentQuestionIndex] === questions[currentQuestionIndex].correctAnswer) { 134 | // Increase the score if the selected option is correct 135 | setScore((prevScore) => prevScore + 1); 136 | } 137 | 138 | if (currentQuestionIndex < questions.length - 1) { 139 | setCurrentQuestionIndex(currentQuestionIndex + 1); 140 | } 141 | } 142 | 143 | const handlePreviousQuestion = () => { 144 | if (currentQuestionIndex > 0) { 145 | setCurrentQuestionIndex(currentQuestionIndex - 1); 146 | } 147 | } 148 | 149 | const handleQuizSubmit = async () => { 150 | const user = auth.currentUser; 151 | if (!user) { 152 | console.error('User not authenticated'); 153 | toast.error("User not authenticated"); 154 | return; 155 | } 156 | 157 | let myScore = 0; 158 | const correctAnswers = questions.map((question: any) => question.correctAnswer); 159 | 160 | // Check if all questions are attempted 161 | if (selectedOptions.length !== correctAnswers.length && !isTimeUp) { 162 | toast.error("Please attempt all of the questions"); 163 | return; 164 | } 165 | 166 | for (let i = 0; i < selectedOptions.length; i++) { 167 | if (selectedOptions[i] == correctAnswers[i]) { 168 | myScore = myScore + 1; 169 | } 170 | } 171 | 172 | var d = new Date(); 173 | var n = formatDateTime(d); 174 | const quizResults = { 175 | score: myScore, 176 | totalQuestions: questions.length, 177 | selectedOptions, 178 | correctAnswers: questions.map((question) => question.correctAnswer), 179 | fetchedQuestions: questions, 180 | quizId: quizId, 181 | quizName: quizName, 182 | course: course, 183 | courseCode: courseCode, 184 | time: n 185 | }; 186 | 187 | try { 188 | // Create a reference to the user's document 189 | const userDocRef = doc(db, 'users', user.uid); 190 | 191 | await updateDoc(userDocRef as any, { 192 | quizData: arrayUnion(quizResults), 193 | }); 194 | console.log(`Quiz Completed! Your Score: ${score}/${questions.length}`); 195 | toast.success('Quiz Submitted Successfully!'); 196 | // Redirect to the results page 197 | router.push(`/results`); 198 | 199 | } catch (error) { 200 | console.error('Error storing quiz results:', error); 201 | toast.error('Error storing quiz results, Check Console'); 202 | } 203 | } 204 | 205 | const currentQuestion = questions[currentQuestionIndex]; 206 | 207 | return ( 208 |

209 | {currentQuestion ? ( 210 |

211 |

Question {currentQuestionIndex + 1}:

212 |

{currentQuestion.question}

213 |

214 | {currentQuestion.options.map((option, index) => ( 215 |

handleOptionSelect(option)} 222 | > 223 | {option} 224 |

225 | ))} 226 |

227 |

228 | {currentQuestionIndex > 0 && ( 229 | 235 | )} 236 |

237 | Time left: {Math.floor(timeLeft / 60)} minutes {timeLeft % 60} seconds 238 |

239 | {isFinalQuestion ? ( 240 | 246 | ) : ( 247 | 253 | )} 254 |

255 |

256 | ) : ( 257 |

258 | )} 259 |

260 | ); 261 | } 262 | 263 | export default Quiz; 264 | -------------------------------------------------------------------------------- /app/admin/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState, useEffect } from 'react'; 3 | import { onAuthStateChanged } from 'firebase/auth'; 4 | import { auth, db } from '../firebase'; 5 | import { collection, doc, getDocs, updateDoc } from 'firebase/firestore'; 6 | import { useRouter } from 'next/navigation'; 7 | import * as XLSX from 'xlsx'; 8 | import QuizDetails from '../components/QuizDetails'; 9 | import { formatDate } from '../Date'; 10 | import toast from 'react-hot-toast'; 11 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 12 | import { faDownload } from '@fortawesome/free-solid-svg-icons'; 13 | import { faTrash } from '@fortawesome/free-solid-svg-icons'; 14 | import { faLock, faUnlock } from '@fortawesome/free-solid-svg-icons'; 15 | 16 | const AdminPage = () => { 17 | const [user, setUser] = useState(auth.currentUser); 18 | const router = useRouter(); 19 | const [userData, setUserData] = useState([]); 20 | const [quizData, setQuizData] = useState([]); 21 | const [lockStatus, setLockStatus] = useState>({}); 22 | 23 | useEffect(() => { 24 | fetchQuizData(); 25 | onAuthStateChanged(auth, (user) => { 26 | if (user) { 27 | //these are the admin user uid's. Yes i wrote it in the code. Go cry about it. 28 | if (user.uid === 'faNLMo6zT2XhXH0dTBaJQunXe9B3' || user.uid === 'BiiqrNezHSM8NTF1P5yNkkX4x8F2') { 29 | setUser(user); 30 | } else { 31 | toast.error("Unauthorized :("); 32 | router.push('/login'); 33 | } 34 | } else { 35 | router.push('/login'); 36 | } 37 | fetchAdminData(); 38 | }); 39 | }, []); 40 | 41 | async function fetchAdminData() { 42 | try { 43 | const querySnapshot = await getDocs(collection(db, 'users')); 44 | const userDataArray: any = []; 45 | querySnapshot.forEach((doc) => { 46 | const data = doc.data(); 47 | if (data.email === 'admindsce@dsce.com' || data.email === 'testadmin@dsce.com') { 48 | // Exclude admin user 49 | } else { 50 | userDataArray.push(data); 51 | } 52 | }); 53 | userDataArray.sort((a: any, b: any) => a.USN.localeCompare(b.USN)); 54 | setUserData(userDataArray); 55 | } catch (error) { 56 | console.error("Error fetching admin data: ", error); 57 | toast.error("Error fetching admin data"); 58 | 59 | } 60 | } 61 | 62 | async function fetchQuizData() { 63 | try { 64 | const querySnapshot = await getDocs(collection(db, 'quizzes')); 65 | const quizNameArray = querySnapshot.docs 66 | .filter(doc => !doc.data().data.isDeleted) 67 | .map(doc => doc.data().data.quizName); 68 | setQuizData(quizNameArray); 69 | } catch (error) { 70 | console.error('Error fetching quiz data:', error); 71 | toast.error("Error fetching quiz data") 72 | } 73 | } 74 | 75 | async function handleDeleteQuiz(quizName: string) { 76 | try { 77 | const querySnapshot = await getDocs(collection(db, 'quizzes')); 78 | const quizDoc = querySnapshot.docs.find(doc => doc.data().data.quizName === quizName); 79 | 80 | if (quizDoc) { 81 | await updateDoc(doc(db, 'quizzes', quizDoc.id), { 82 | 'data.isDeleted': true, 83 | }); 84 | fetchQuizData(); 85 | toast.success(`Quiz "${quizName}" marked as deleted.`); 86 | } else { 87 | console.error('Quiz not found:', quizName); 88 | toast.error(`Quiz "${quizName}" not found.`); 89 | } 90 | } catch (error) { 91 | console.error('Error deleting quiz:', error); 92 | toast.error(`Error marking quiz "${quizName}" as deleted.`); 93 | } 94 | }; 95 | 96 | async function handleLockUnlockQuiz(quizName: any) { 97 | const querySnapshot = await getDocs(collection(db, 'quizzes')); 98 | const quizDoc = querySnapshot.docs.find(doc => doc.data().data.quizName === quizName); 99 | 100 | if (quizDoc) { 101 | const currentLockStatus = quizDoc.data().data.isLocked; 102 | await updateDoc(doc(db, 'quizzes', quizDoc.id), { 103 | 'data.isLocked': !currentLockStatus, 104 | }); 105 | setLockStatus(prevStatus => ({ ...prevStatus, [quizName]: !currentLockStatus })); 106 | fetchQuizData(); 107 | toast.success(`Quiz "${quizName}" ${currentLockStatus ? 'unlocked' : 'locked'} successfully.`); 108 | } else { 109 | console.error('Quiz not found:', quizName); 110 | toast.error(`Quiz "${quizName}" not found.`); 111 | } 112 | }; 113 | 114 | function calculateTotalScore(quizData: any) { 115 | let totalScore = 0; 116 | let totalQuestions = 0; 117 | 118 | quizData.forEach((quiz: any) => { 119 | totalScore += quiz.score; 120 | totalQuestions += quiz.totalQuestions; 121 | }); 122 | 123 | return `${totalScore} / ${totalQuestions}`; 124 | } 125 | 126 | const handleDownloadExcel = () => { 127 | var d = new Date(); 128 | var n = formatDate(d); 129 | 130 | const sortedUserData = [...userData].sort((a: any, b: any) => a.USN.localeCompare(b.USN)); 131 | const flatData = sortedUserData.map(user => { 132 | const userFlat = { 133 | 'USN': user.USN, 134 | 'Email': user.email, 135 | 'Student Name': user.displayName, 136 | 'Total Score': calculateTotalScore(user.quizData), 137 | 138 | ...user.quizData.reduce((acc: any, quiz: any, index: any) => ({ 139 | ...acc, 140 | [` ${quiz.quizName} `]: `${quiz.score} / ${quiz.totalQuestions}`, 141 | [`${quiz.quizName} Time`]: quiz.time, 142 | [`${quiz.quizName} Quiz ID`]: quiz.quizId, 143 | [`${quiz.quizName} Course`]: quiz.course, 144 | [`${quiz.quizName} Course Code`]: quiz.courseCode, 145 | }), {}), 146 | }; 147 | return userFlat; 148 | }); 149 | 150 | const ws = XLSX.utils.json_to_sheet(flatData); 151 | const wb = XLSX.utils.book_new(); 152 | XLSX.utils.book_append_sheet(wb, ws, `Student Data Sheet ${n}`); 153 | const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); 154 | saveAsExcelFile(excelBuffer, `Student Data Sheet ${n} .xlsx`); 155 | }; 156 | 157 | // Function to handle downloading individual quiz data 158 | const handleDownloadQuiz = (quizName: any) => { 159 | const quizData = userData.map(user => { 160 | const userQuiz = user.quizData.find((quiz: any) => quiz.quizName === quizName); 161 | return { 162 | 'USN': user.USN, 163 | 'Student Name': user.displayName, 164 | 'Quiz Name': userQuiz ? userQuiz.quizName : '', 165 | 'Score': userQuiz ? `${userQuiz.score} / ${userQuiz.totalQuestions}` : '', 166 | 'Time': userQuiz ? userQuiz.time : '', 167 | 'Course': userQuiz ? userQuiz.course : '', 168 | 'Course Code': userQuiz ? userQuiz.courseCode : '', 169 | }; 170 | }).filter(user => user['Quiz Name'] !== ''); 171 | 172 | const ws = XLSX.utils.json_to_sheet(quizData); 173 | const wb = XLSX.utils.book_new(); 174 | XLSX.utils.book_append_sheet(wb, ws, `${quizName} Data`); 175 | const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); 176 | saveAsExcelFile(excelBuffer, `${quizName} Data.xlsx`); 177 | toast.success(`${quizName} Data Downloaded Successfully!`); 178 | }; 179 | 180 | const saveAsExcelFile = (buffer: any, fileName: string) => { 181 | const blob = new Blob([buffer], { type: 'application/octet-stream' }); 182 | const link = document.createElement('a'); 183 | link.href = window.URL.createObjectURL(blob); 184 | link.download = fileName; 185 | link.click(); 186 | }; 187 | 188 | return ( 189 |

190 |

Admin Page

191 | {userData.length > 0 && quizData.length > 0 && ( 192 |

193 | {quizData 194 | .map((quiz: any, index: any) => ( 195 |

196 | 202 | 209 | 215 |

216 | ))} 217 |

218 | )} 219 |

220 | 228 | 233 | Create Quiz 234 | 235 |

236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | {userData.map((user: any) => ( 248 | 249 | 250 | 251 | 252 | 264 | 265 | 266 | ))} 267 | 268 |

USN	Email	Display Name	Quiz Data	Total Score
{user.USN}	{user.email}	{user.displayName}	253 \| {user.quizData.map((quiz: any, index: any) => ( 254 \| 255 \| 256 \| 257 \| {quiz.quizName}: {quiz.score} / {quiz.totalQuestions} 258 \| 259 \| 260 \| 261 \| 262 \| ))} 263 \|	{calculateTotalScore(user.quizData)}

269 |

270 | ); 271 | }; 272 | 273 | export default AdminPage; 274 | --------------------------------------------------------------------------------

Welcome Back!

Hello, Friend!

Create Account

Join the quiz challenge and unlock your potential!

Quiz Results

Question {index + 1}:

Admin Page

Upload Excel File

Quiz Data:

Successfully Generated Quiz!

Successfully Generated Quiz!

Question {currentQuestionIndex + 1}:

Admin Page