| 
12 | Quizzes Page | Dashboard Page
13 | 
| 
14 | Selected Quiz in Dashboard | Add/Update Questions
15 | 
| 
16 | Player Screen | Finish Quiz
17 | 
| 
18 | Attempts Screen | Statistics Screen
19 | 
| 
20 | View All Questions Screen | Question Statistics
21 | 
| 
22 |
23 | Running it Locally:
24 | 1. Go to Clerk Dashboard and create an application.
25 | 2. Go to Clerk Dashboard > Your Application > Paths > Change the paths as in this image.
26 | 
27 | 4. Make a MongoDB cluster and copy its connection string.
28 | 5. Copy Frontend API Key and Backend API Key.
29 | 6. Backend env.
30 | - DB_PASSWORD=
19 |
31 |
32 |
33 |
46 | {id && (
47 |
48 |
49 | Status
50 |
64 |
65 |
66 | )}
67 |
68 | {
81 | setFieldValue("tags", values.tags.concat(chip));
82 | }}
83 | onDelete={(chip, indexChip) => {
84 | const tags = values.tags.filter((_, i) => i !== indexChip);
85 | setFieldValue("tags", tags);
86 | }}
87 | />
88 |
89 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/src/components/AddQuestionsSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { useMediaQuery } from "@material-ui/core";
2 | import { useEffect, useState } from "react";
3 | import { BsLayoutSidebarInset } from "react-icons/bs";
4 | import { IQuestion } from "../shared/interfaces";
5 | import { SidebarQuestion } from "./SidebarQuestion";
6 |
7 | interface Props {
8 | questions: IQuestion[];
9 | }
10 |
11 | export const AddQuestionsSidebar: React.FC
43 |
70 | );
71 | };
72 |
--------------------------------------------------------------------------------
/src/components/ConfirmSubmitModal.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@material-ui/core";
2 | import { useEffect, useState } from "react";
3 | import { IResponse } from "../shared/interfaces";
4 |
5 | interface Props {
6 | handleConfirmSubmitModalClose: () => void;
7 | isQuizCorrectAnsLoading: boolean;
8 | setFetchCorrectAns: React.Dispatch setExpanded((p) => !p)}
45 | className="w-8 h-8 p-2 flex justify-center items-center cursor-pointer hover:bg-gray-200 rounded-full"
46 | >
47 |
49 |
50 | {questions.length > 0 ? (
51 | questions.map((question, index) => (
52 |
69 | No Questions Added Yet.
66 | 67 | )} 68 |34 | Submit Quiz 35 |
36 |
37 |
54 | 38 | Are you sure you want to submit? 39 |
40 |
41 |
48 | {marked === 0 && (
49 | 42 | Questions Attempted: {marked} 43 |
44 |45 | Questions Unattempted: {unmarked} 46 |
47 |50 | Sorry can't allow you to omit for all questions. 51 |
52 | )} 53 |
55 |
69 |
70 | );
71 | };
72 |
--------------------------------------------------------------------------------
/src/components/DeleteModal.tsx:
--------------------------------------------------------------------------------
1 | import { Backdrop, Box, Button, Fade, Modal } from "@material-ui/core";
2 | import { modalStyle } from "../shared/constants";
3 |
4 | interface IDeleteModal {
5 | deleteModalActive: boolean;
6 | handleDeleteModalClose: () => void;
7 | deleteLoading: boolean;
8 | onDelete: () => void;
9 | resource: string;
10 | confirmMessage?: string;
11 | informMessage?: string;
12 | modalTitle?: string;
13 | }
14 |
15 | export const DeleteModal = ({
16 | deleteModalActive,
17 | handleDeleteModalClose,
18 | deleteLoading,
19 | onDelete,
20 | resource,
21 | confirmMessage = "Are you sure?",
22 | informMessage = `You want to delete this ${resource || "resource"}.`,
23 | modalTitle = `Delete ${resource || "Resource"}`,
24 | }: IDeleteModal) => (
25 |
56 |
57 |
68 |
58 |
66 |
67 | 39 | {modalTitle} 40 |
41 |
42 |
45 | {confirmMessage}
43 |{informMessage}
44 |
46 |
62 |
47 |
50 |
61 |
51 |
59 |
60 |
403 | }
413 | >
414 | Download
415 |
416 |
425 |
429 |
433 |
437 |
438 |
439 | );
440 | };
441 |
442 | const StyledMenu = styled((props: MenuProps) => (
443 |
455 | ))(({ theme }) => ({
456 | "& .MuiPaper-root": {
457 | borderRadius: 6,
458 | marginTop: theme.spacing(6),
459 | minWidth: 180,
460 | boxShadow: "0 5px 20px rgba(0,0,0,0.07)",
461 | "& .MuiMenu-list": {
462 | padding: "4px 0",
463 | },
464 | "& .MuiMenuItem-root": {
465 | "& .MuiSvgIcon-root": {
466 | fontSize: 18,
467 | color: theme.palette.text.secondary,
468 | marginRight: theme.spacing(1.5),
469 | },
470 | "&:active": {
471 | backgroundColor: alpha(
472 | theme.palette.primary.main,
473 | theme.palette.action.selectedOpacity
474 | ),
475 | },
476 | },
477 | },
478 | }));
479 |
--------------------------------------------------------------------------------
/src/components/EmptyResponse.tsx:
--------------------------------------------------------------------------------
1 | import EmptyMail from "../assets/illustations/200_EMPTY_RESPONSE.png";
2 | import { emptyResponseMessages } from "../shared/constants";
3 |
4 | interface Props {
5 | resource:
6 | | "Quiz"
7 | | "Attempt"
8 | | "Dashboard Quizes"
9 | | "Quiz Questions"
10 | | "All Active Quizes"
11 | | "All Active Filtered Quizes"
12 | | "Responses";
13 | }
14 |
15 | export const EmptyResponse: React.FC
41 | {img && (
42 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/ErrorMessage.tsx:
--------------------------------------------------------------------------------
1 | import SadFace from "../assets/illustations/500.png";
2 | import { errorMessages } from "../shared/constants";
3 | import HandStop from "./../assets/illustations/403.png";
4 | import Response404 from "./../assets/illustations/404.png";
5 | interface IProps {
6 | statusCode: number;
7 | message?: string | undefined;
8 | resource?: "Quiz" | "Question" | "Attempt" | "Questions";
9 | }
10 |
11 | export const ErrorMessage: React.FC
43 | 
48 |
49 | )}
50 | {text &&
51 | text.map((text, i) => (
52 | 56 | {text} 57 |
58 | ))} 59 |
23 | {notFound ? (
24 | <>
25 |
26 |
27 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/src/components/FinishQuiz.tsx:
--------------------------------------------------------------------------------
1 | import { IOption } from "../shared/interfaces";
2 | import { EmptyResponse } from "./EmptyResponse";
3 | import { Option } from "./Option";
4 | interface Props {
5 | responses: any;
6 | score: number;
7 | as: "AFTER_QUIZ_RESPONSE" | "AUTHOR_CHECK_RESPONSE" | "USER_CHECK_RESPONSE";
8 | quizDeleted?: boolean;
9 | }
10 |
11 | export const ShowResponses: React.FC
28 | 
33 |
34 | 35 | {message || errorMessages.notFound(resource)} 36 |
37 | 38 | ) : auth403 ? ( 39 | <> 40 |
41 | 
46 |
47 | 48 | {message || errorMessages.auth403} 49 |
50 | 51 | ) : ( 52 | <> 53 |
54 | 
59 |
60 | 61 | {errorMessages.default} 62 |
63 | 64 | )} 65 |
24 | {AFTER_QUIZ_RESPONSE && (
25 |
102 |
103 | );
104 | };
105 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Logo from "../assets/logos/White-Black-Circle.png";
3 |
4 | export const Footer = () => (
5 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/components/GridWrapper.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ColDef,
3 | ColumnApi,
4 | GridApi,
5 | GridReadyEvent,
6 | RowSelectedEvent,
7 | } from "ag-grid-community";
8 | import { AgGridReact } from "ag-grid-react";
9 | import { useEffect, useState } from "react";
10 |
11 | interface Props {
12 | list: any[];
13 | colDefs: ColDef[];
14 | loading: boolean;
15 | setSelected?: React.Dispatch26 | Thank you for playing this Quiz 27 |
28 | )} 29 | {quizDeleted && ( 30 |31 | This Quiz has been Deleted. 32 |
33 | )} 34 |35 | Here is {AUTHOR_CHECK_RESPONSE ? "his" : "your"} score: {score} 36 |
37 | 38 |
39 |
101 |
40 | {responses.length > 0 && (
41 | <>
42 |
75 | {responses.length > 0 ? (
76 |
43 |
51 | Correct Answer
44 | 50 |
52 |
60 | {AUTHOR_CHECK_RESPONSE ? "His" : "Your"} Response
53 | 59 |
61 |
72 |
73 | )}
74 | 62 | {AUTHOR_CHECK_RESPONSE ? "He" : "You"} chose correct option 63 |
64 | 65 | 71 |
77 |
95 | ) : (
96 | <>
97 | Answers
78 | {responses.map((resp: any, i: number) => ( 79 |
80 |
93 | ))}
94 | {resp.title}
81 |
82 | {resp.options.map((option: IOption, i: number) => (
83 |
90 | ))}
91 |
92 |
74 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/src/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import { useMatch } from "react-router-dom";
2 | import { NavBar } from "./NavBar";
3 |
4 | interface Props {}
5 |
6 | export const Layout: React.FC
12 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import { Backdrop, Box, Fade, Modal } from "@material-ui/core";
2 | import { modalStyle } from "../shared/constants";
3 |
4 | interface Props {
5 | open: boolean;
6 | onClose: () => void;
7 | }
8 |
9 | export const ModalSkeleton: React.FC
20 | {children}
21 |
22 |
10 |
14 | 
15 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Option.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | option: { value: string };
3 | selectedOption?: string;
4 | onClick?: () => void;
5 | disabled?: boolean;
6 | correctAns?: string;
7 | }
8 |
9 | export const Option: React.FCQuizco
16 | 17 |
18 |
19 |
20 |
30 |
31 |
32 |
33 |
44 |
45 | 21 | Sign Up 22 |
23 | 24 | 25 |26 | Sign In 27 |
28 | 29 |34 | Quizes 35 |
36 | 37 | 38 |39 | Dashboard 40 |
41 | 42 |
50 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/src/components/QuizCard.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useMatch, useNavigate } from "react-router-dom";
3 | import { IQuiz } from "../shared/interfaces";
4 | import { ModalSkeleton } from "./Modal";
5 | import { QuizModalContents } from "./QuizModalContents";
6 |
7 | interface Props extends IQuiz {
8 | onSelect?: () => void;
9 | score?: number;
10 | deleted?: boolean;
11 | redirect?: string;
12 | selected?: boolean;
13 | }
14 |
15 | export const QuizCard: React.FC{questions && questions[activeIndex].title}
51 |
52 | {questions &&
53 | questions[activeIndex].options.map((option: IOption, i: number) => (
54 |
62 |
63 | {
65 | setActiveIndex((p: number) => p - 1);
66 | }}
67 | disabled={activeIndex === 0}
68 | title="Previous Question"
69 | />
70 |
71 | {
73 | setActiveIndex((p) => p + 1);
74 | }}
75 | title="Next Question"
76 | disabled={activeIndex === questions?.length - 1}
77 | />
78 |
79 |
40 | onSelect
41 | ? onSelect()
42 | : redirect
43 | ? navigate(redirect)
44 | : handleQuizModalActive()
45 | // : navigate(`/quizes/${_id}`)
46 | }
47 | className={`relative shadow-md px-10 py-8 rounded-md bg-white cursor-pointer ${
48 | selected ? " border-2 border-teal-500" : ""
49 | }`}
50 | style={{ boxShadow: "15px 15px 54px -10px #0000001f" }}
51 | >
52 | {isDashboardPage && (
53 |
97 | 64 | {status} 65 |
66 | )} 67 |68 | {title} 69 |
70 |71 | {description.length > 200 72 | ? description.slice(0, 200) + "..." 73 | : description} 74 |
75 | {(score === 0 || score) && ( 76 |77 | Score : {score} 78 |
79 | )} 80 |
81 | {tags.map((tag, i) => (
82 |
96 | 92 | {tag} 93 |
94 | ))} 95 |
26 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { useMediaQuery } from "@material-ui/core";
2 | import { Dispatch, SetStateAction, useEffect, useState } from "react";
3 | import { BsLayoutSidebarInset } from "react-icons/bs";
4 | import { IQuestion, IResponse } from "../shared/interfaces";
5 |
6 | interface Props {
7 | questions: IQuestion[];
8 | activeIndex?: number;
9 | setActiveIndex: Dispatch
27 |
77 |
28 |
62 | {title}
29 |{description}
30 |
31 |
38 | 32 | Number of times People played this Quiz:{" "} 33 |
34 | 35 | {attemptsCount} 36 | 37 |
39 |
44 |
45 | Number of Questions:
40 | 41 | {questionsCount} 42 | 43 |
46 | {tags.map((tag, i) => (
47 |
61 | 57 | {tag} 58 |
59 | ))} 60 |
63 |
76 |
64 |
67 |
68 |
75 |
41 |
82 | );
83 | };
84 |
--------------------------------------------------------------------------------
/src/components/SidebarQuestion.tsx:
--------------------------------------------------------------------------------
1 | import { useSnackbar } from "notistack";
2 | import { useState } from "react";
3 | import { AiFillDelete, AiFillEdit } from "react-icons/ai";
4 | import { useQueryClient } from "react-query";
5 | import { useNavigate, useParams } from "react-router-dom";
6 | import {
7 | errorMessages,
8 | loadingMessages,
9 | successMessages,
10 | } from "../shared/constants";
11 | import { IQuestion } from "../shared/interfaces";
12 | import { useDeleteQuestion } from "../shared/queries";
13 | import { DeleteModal } from "./DeleteModal";
14 |
15 | interface SidebarProps {
16 | index: number;
17 | expanded: boolean;
18 | showQuestions: boolean;
19 | question: IQuestion;
20 | expandQuestion: string;
21 | setExpandQuestion: React.Dispatch setExpanded((p) => !p)}
43 | className="w-8 h-8 p-2 flex justify-center items-center cursor-pointer hover:bg-gray-200 rounded-full"
44 | >
45 |
47 |
48 | {questions?.map((quiz, index) => (
49 |
81 | {
52 | setActiveIndex(index);
53 | if (isMobile) {
54 | setExpanded(false);
55 | }
56 | }}
57 | className={`items-center transition-all duration-300 cursor-pointer flex mb-4 ${
58 | activeIndex === index ? "" : ""
59 | }`}
60 | >
61 |
79 | ))}
80 | 68 | {index + 1} 69 |
70 | 71 | {expanded && showQuestions && ( 72 |73 | {quiz.title.length > 60 74 | ? quiz.title.slice(0, 60) + "..." 75 | : quiz.title} 76 |
77 | )} 78 |
75 |
128 | );
129 | };
130 |
--------------------------------------------------------------------------------
/src/components/Svgs.tsx:
--------------------------------------------------------------------------------
1 | export const Loader: React.FC<{
2 | height?: number;
3 | width?: number;
4 | color?: string;
5 | fullScreen?: boolean;
6 | halfScreen?: boolean;
7 | }> = ({ height, width, color, fullScreen, halfScreen }) => {
8 | return (
9 | {
77 | setExpanded(true);
78 | setExpandQuestion(question._id);
79 | }}
80 | className={`transition-all duration-300 cursor-pointer flex`}
81 | >
82 |
96 | {expanded && (
97 | 85 | {index + 1} 86 |
87 | 88 | {expanded && showQuestions && ( 89 |90 | {question.title.length > 60 91 | ? question.title.slice(0, 60) + "..." 92 | : question.title} 93 |
94 | )} 95 |
101 |
126 | )}
127 |
102 |
125 |
106 |
108 |
118 | navigate(`/quizes/${id}/questions/${question._id}`)
119 | }
120 | className="p-2 bg-indigo-600 rounded-full mr-4 cursor-pointer"
121 | >
122 |
124 |
19 |
60 |
61 | );
62 | };
63 |
64 | interface DefaultSVgProps {
65 | height: number;
66 | width: number;
67 | color: string;
68 | }
69 |
70 | export const LandingSvg: React.FC
23 |
27 | 24 | Available Filters 25 |
26 |
52 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/pages/Attempts.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@material-ui/core";
2 | import { useEffect, useState } from "react";
3 | import { EmptyResponse } from "../components/EmptyResponse";
4 | import { ErrorMessage } from "../components/ErrorMessage";
5 | import { QuizCard } from "../components/QuizCard";
6 | import { Loader } from "../components/Svgs";
7 | import { IAttempt } from "../shared/interfaces";
8 | import { useMyAttempts } from "../shared/queries";
9 | import { endpoints } from "../shared/urls";
10 |
11 | interface Props {}
12 |
13 | export const Attempts: React.FC
53 |
87 |
55 |
86 |
56 |
82 | Add Question
57 | 58 |
59 |
69 | {data?.questions.length < 10 && isAllowed ? (
70 |
78 | ) : (
79 |
80 | )}
81 | {data?.questions.length} / 10 Added
60 |
61 |
67 |
68 |
83 |
85 |
38 |
76 | );
77 | };
78 |
--------------------------------------------------------------------------------
/src/pages/CreateQuiz.tsx:
--------------------------------------------------------------------------------
1 | import { QuizForm } from "../components/forms/QuizForm";
2 | import { useCreateQuiz } from "../shared/queries";
3 |
4 | interface Props {}
5 |
6 | export const CreateQuiz: React.FC39 | My Attempts 40 |
41 | 42 | {isLoading || isFetching ? ( 43 |
47 | {data?.attempts.map((attempt: IAttempt) => (
48 |
56 |
57 | {totalPages > 1 &&
58 | Array.from(Array(totalPages).keys()).map((loader, index) => (
59 |
67 | ))}
68 |
69 |
70 | ) : (
71 | <>
72 |
10 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/src/pages/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@material-ui/core";
2 | import { useSnackbar } from "notistack";
3 | import { useEffect, useState } from "react";
4 | import { useQueryClient } from "react-query";
5 | import { useNavigate } from "react-router-dom";
6 | import { DeleteModal } from "../components/DeleteModal";
7 | import { EmptyResponse } from "../components/EmptyResponse";
8 | import { ErrorMessage } from "../components/ErrorMessage";
9 | import { QuizCard } from "../components/QuizCard";
10 | import { Loader } from "../components/Svgs";
11 | import { errorMessages, successMessages } from "../shared/constants";
12 | import { IQuiz } from "../shared/interfaces";
13 | import { useDeleteQuiz, useQuizes } from "../shared/queries";
14 | import { endpoints } from "../shared/urls";
15 |
16 | interface Props {}
17 |
18 | export const Dashboard: React.FCCreate a Quiz
11 |
12 |
18 |
86 |
200 | );
201 | };
202 |
--------------------------------------------------------------------------------
/src/pages/Landing.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from "react-router-dom";
2 | import Active from "../assets/illustations/Active.png";
3 | import AddQuestions from "../assets/illustations/Add Questions.png";
4 | import Create from "../assets/illustations/Create.png";
5 | import EcoFriendly from "../assets/illustations/ecofriendly.png";
6 | import LandingIllustration from "../assets/illustations/landing.png";
7 | import Stats from "../assets/illustations/Stats.png";
8 | import Logo from "../assets/logos/White-Purple-Circle.png";
9 | import { Footer } from "../components/Footer";
10 | import { useStats } from "../shared/queries";
11 |
12 | export const Landing = () => {
13 | const navigate = useNavigate();
14 | const { data, isError } = useStats();
15 |
16 | return (
17 | Dashboard
87 |
88 |
111 | {data?.quizes.length > 0 && (
112 | 89 | My Quizes 90 |
91 |
92 |
99 |
100 |
110 |
101 |
108 |
109 |
113 |
160 | )}
161 | {isLoading || isFetching ? (
162 | 117 | {`${ 118 | selectedQuiz 119 | ? `Selected Quiz : ${selectedQuiz.title}` 120 | : "Select a Quiz" 121 | }`} 122 |
123 |
124 | {selectedQuiz && (
125 |
159 |
126 |
157 | )}
158 |
127 |
135 |
136 |
137 |
140 |
141 |
142 |
145 |
146 |
147 |
156 |
165 | {data?.quizes.map((quiz: IQuiz) => (
166 | setSelectedQuiz(quiz)}
168 | selected={selectedQuiz?._id === quiz._id}
169 | key={quiz._id}
170 | {...quiz}
171 | />
172 | ))}
173 |
174 | ) : (
175 |
178 | {totalPages > 1 &&
179 | Array.from(Array(totalPages).keys()).map((loader, index) => (
180 |
188 | ))}
189 |
190 | {deleteModalActive && (
191 |
18 |
134 | );
135 | };
136 |
137 | /*
138 | Make your own quiz and test yourself
139 | */
140 |
141 | const AppUseData = [
142 | {
143 | id: "1",
144 | imgsrc: Create,
145 | label: "Create a Quiz",
146 | },
147 | {
148 | id: "2",
149 | imgsrc: AddQuestions,
150 | label: "Add Questions to your Quiz",
151 | },
152 | {
153 | id: "3",
154 | imgsrc: Active,
155 | label: "Set status of Quiz to Active",
156 | },
157 | {
158 | id: "4",
159 | imgsrc: Stats,
160 | label: "Checkout Statistics",
161 | },
162 | ];
163 |
--------------------------------------------------------------------------------
/src/pages/PlayerScreen.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@material-ui/core";
2 | import { useSnackbar } from "notistack";
3 | import { useEffect, useState } from "react";
4 | import { useParams } from "react-router-dom";
5 | import { ConfirmSubmitModalContent } from "../components/ConfirmSubmitModal";
6 | import { EmptyResponse } from "../components/EmptyResponse";
7 | import { ErrorMessage } from "../components/ErrorMessage";
8 | import { ShowResponses } from "../components/FinishQuiz";
9 | import { ModalSkeleton } from "../components/Modal";
10 | import { Player } from "../components/Player";
11 | import { Sidebar } from "../components/Sidebar";
12 | import { Loader } from "../components/Svgs";
13 | import { errorMessages } from "../shared/constants";
14 | import { IQuestion, IResponse } from "../shared/interfaces";
15 | import {
16 | useQuizQuestionCorrectAns,
17 | useQuizQuestions,
18 | useSaveScore,
19 | } from "../shared/queries";
20 |
21 | interface Props {}
22 |
23 | export const PlayerScreen: React.FC
19 |
59 | {!isError && (
60 |
23 |
58 |
24 |
32 |
25 | 
30 |
31 |
33 |
57 |
34 |
39 |
41 | Quizco
40 |42 | Quiz Builder and Assessment Tool 43 |
44 |45 | Using Quizco, it’s super fast and easy to create a quiz - perfect 46 | for revision guides, driving theory practice and trivia. 47 |
48 |
49 |
55 |
56 |
66 |
91 | )}
92 |
93 |
67 |
72 | 68 | {data?.users}+ 69 |
70 |Users
71 |
73 |
81 | 74 | {data?.quizes}+ 75 |
76 | 77 |78 | Quizes Created 79 |
80 |
82 |
90 | 83 | {data?.timesQuizesPlayed}+ 84 |
85 | 86 |87 | Times Quizes Played 88 |
89 |
94 |
117 |
118 | 95 | Everything You Need to Build and Manage Your Quiz 96 |
97 |
98 | {AppUseData.map((useData) => (
99 |
116 |
103 |
114 | ))}
115 |
104 | 
109 |
110 | 111 | {useData.label} 112 |
113 |
119 |
131 |
132 |
133 |
120 | 
125 |
126 | 127 | Save resources and money by avoiding print-out quiz sheets and test 128 | papers. Users can complete your paperless quiz via Quizco. 129 |
130 |
122 |
124 | );
125 | }
126 |
127 | return isLoading || isFetching ? (
128 |
134 |
215 | );
216 | };
217 |
--------------------------------------------------------------------------------
/src/pages/QuizResponse.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useLocation, useParams } from "react-router-dom";
3 | import { ErrorMessage } from "../components/ErrorMessage";
4 | import { ShowResponses } from "../components/FinishQuiz";
5 | import { Loader } from "../components/Svgs";
6 | import { useMyAttemptById } from "../shared/queries";
7 |
8 | interface Props {}
9 |
10 | export const QuizResponse: React.FC
135 | {!quizEnd ? (
136 | <>
137 |
214 |
144 |
191 |
198 |
199 |
200 | ) : (
201 | <>
202 | {isQuizCorrectAnsLoading || isSaveScoreLoading ? (
203 |
145 |
180 | 146 | Question {activeIndex + 1} 147 |
148 | {!quizEnd && ( 149 |
150 |
168 | )}
169 |
170 | {!quizEnd && (
171 |
178 | )}
179 | 151 | {response?.filter((resp) => resp.response !== "").length}/{" "} 152 | {data?.questions.length} Completed 153 |
154 |
155 |
167 | resp.response !== "")
160 | .length /
161 | data?.questions.length) *
162 | 100
163 | }%`,
164 | }}
165 | >
166 |
44 | {isLoading || isFetching ? (
45 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/src/pages/Quizes.tsx:
--------------------------------------------------------------------------------
1 | import { Button, IconButton } from "@material-ui/core";
2 | import * as React from "react";
3 | import { useState } from "react";
4 | import { FcClearFilters } from "react-icons/fc";
5 | import { RiFilterFill } from "react-icons/ri";
6 | import { EmptyResponse } from "../components/EmptyResponse";
7 | import { ErrorMessage } from "../components/ErrorMessage";
8 | import { FiltersForm } from "../components/forms/FiltersForm";
9 | import { ModalSkeleton } from "../components/Modal";
10 | import { QuizCard } from "../components/QuizCard";
11 | import { Loader } from "../components/Svgs";
12 | import { globalColors } from "../shared/constants";
13 | import { IQuiz } from "../shared/interfaces";
14 | import { useQuizes } from "../shared/queries";
15 | import { endpoints } from "../shared/urls";
16 |
17 | export const Quizes = () => {
18 | const [searchTerm, setSearchTerm] = useState
56 |
103 |
111 |
112 | );
113 | };
114 |
--------------------------------------------------------------------------------
/src/pages/SignIn.tsx:
--------------------------------------------------------------------------------
1 | import { SignIn } from "@clerk/clerk-react";
2 |
3 | export const SignInPage = () => (
4 | <>
5 |
57 |
69 |
70 | {isLoading || isFetching ? (
71 | All Quizes
58 |
59 |
60 |
62 | {(searchTerm || tag) && (
63 |
64 |
66 | )}
67 |
68 |
74 | {data?.quizes.map((quiz: IQuiz) => (
75 |
78 | ) : (
79 |
80 |
88 | )}
89 |
90 | {totalPages > 1 &&
91 | Array.from(Array(totalPages).keys()).map((loader, index) => (
92 |
100 | ))}
101 |
102 |
18 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/pages/UpdateQuiz.tsx:
--------------------------------------------------------------------------------
1 | import { useUser } from "@clerk/clerk-react";
2 | import { useParams } from "react-router-dom";
3 | import { ErrorMessage } from "../components/ErrorMessage";
4 | import { QuizForm } from "../components/forms/QuizForm";
5 | import { Loader } from "../components/Svgs";
6 | import { useQuiz, useUpdateQuiz } from "../shared/queries";
7 |
8 | interface Props {}
9 |
10 | export const UpdateQuiz: React.FC19 | Update Question 20 |
21 |
22 | {isLoading ? (
23 | <>
24 |
30 |
26 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/pages/UserProfile.tsx:
--------------------------------------------------------------------------------
1 | import { UserProfile } from "@clerk/clerk-react";
2 |
3 | export const UserProfilePage = () => {
4 | return Update a Quiz
27 | {isLoading || isFetching ? ( 28 |
31 |
38 | )}
39 |
108 |
133 | );
134 | };
135 |
--------------------------------------------------------------------------------
/src/pages/stats/StatisticsByQuiz.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@material-ui/core";
2 | import {
3 | ColDef,
4 | ColumnApi,
5 | GridApi,
6 | ICellRendererParams,
7 | } from "ag-grid-community";
8 | import { useEffect, useState } from "react";
9 | import { useNavigate, useParams } from "react-router-dom";
10 | import { DownloadButton } from "../../components/Dropdown";
11 | import { GridWrapper } from "../../components/GridWrapper";
12 | import { IStatsByQuiz } from "../../shared/interfaces";
13 | import { useStatsByQuizId } from "../../shared/queries";
14 |
15 | interface Props {}
16 |
17 | export const StatisticsByQuiz: React.FC
109 |
122 | 110 | Please click on Question 111 | (highlited) to view Question 112 | Statistics. 113 |
114 |
123 |
132 |
57 | 
62 |
63 | ),
64 | },
65 | {
66 | headerName: "First Name",
67 | field: "firstName",
68 | },
69 | {
70 | headerName: "Last Name",
71 | field: "lastName",
72 | },
73 | {
74 | headerName: "Email",
75 | field: "email",
76 | minWidth: 250,
77 | },
78 | {
79 | headerName: "1st Attempt Score",
80 | field: "score",
81 | },
82 | {
83 | headerName: "Max Attempts",
84 | field: "maxAttempts",
85 | },
86 | {
87 | headerName: "View Attempt",
88 | field: "view_attempt",
89 | cellRendererFramework: (params: ICellRendererParams) => (
90 |
91 |
102 | ),
103 | },
104 | ];
105 |
106 | return (
107 | 93 | navigate(`/dashboard/attempts/${params.data.attemptId}`, { 94 | state: { from: "STATISTICS" }, 95 | }) 96 | } 97 | className="text-indigo-600 hover:underline cursor-pointer" 98 | > 99 | View Attempt 100 |
101 |
108 |
136 | );
137 | };
138 |
--------------------------------------------------------------------------------
/src/pages/stats/StatisticsByQuizQuestionsId.tsx:
--------------------------------------------------------------------------------
1 | import { useParams } from "react-router-dom";
2 | import { ErrorMessage } from "../../components/ErrorMessage";
3 | import { Loader } from "../../components/Svgs";
4 | import { IOptionWithFrequency } from "../../shared/interfaces";
5 | import { useStatsByQuizIdByQuestionId } from "../../shared/queries";
6 |
7 | interface Props {}
8 |
9 | export const StatisticsByQuizQuestionsId: React.FC
109 |
126 |
110 |
118 |
125 |
127 |
135 |
30 |
126 |
127 | );
128 | };
129 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 31 | Question Statistics 32 |
33 | 34 | {isLoading ? ( 35 |
44 |
61 |
45 |
48 | Total Responses
46 |{data?.totalResponses}
47 |
49 |
52 | Total Correct Responses
50 |{data?.totalCorrectResponses}
51 |
53 |
56 | Total Empty Responses (Omitted)
54 |{data?.totalEmptyResponses}
55 |
57 |
60 | Total Incorrect
58 |{data?.totalIncorrectResponses}
59 |{data?.question.title}
62 | 63 |
64 | {data?.question?.options.map((option: IOptionWithFrequency) => {
65 | const percentage =
66 | (option.frequency / data?.totalResponses) * 100;
67 | return (
68 |
102 |
73 |
99 | );
100 | })}
101 |
77 |
89 |
90 |
91 |
95 | 92 | {option.value} 93 |
94 |96 | {Math.round(percentage)}% 97 |
98 |
106 |
107 | Percentage of users omitted this question :
108 |
109 |
116 | 110 | {Math.round( 111 | (data?.totalEmptyResponses / data?.totalResponses) * 100 112 | )} 113 | % 114 |
115 |
120 | Total :
121 |
123 |
124 | )}
125 | 100%
122 |