63 | Next
64 | {theme.direction === 'rtl' ? : }
65 |
66 | }
67 | backButton={
68 |
72 | }
73 | />
74 |
75 | );
76 | };
77 | export default Carousel;
78 |
--------------------------------------------------------------------------------
/src/pages/home/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from '@mui/styles';
2 |
3 | export default makeStyles((theme) => ({
4 | imgSize: {
5 | width: '4rem',
6 | height: '4rem',
7 | marginRight: '1rem',
8 | },
9 | homePage: {
10 | backgroundColor:
11 | theme.palette.mode === 'dark'
12 | ? theme.palette.common.black
13 | : theme.palette.grey[200],
14 | },
15 | heading: {
16 | fontSize: '3.2rem',
17 | textAlign: 'center',
18 | marginBottom: '2rem',
19 | },
20 | sectionHeading: {
21 | fontSize: '2.6rem',
22 | width: '85%',
23 | border: '0px solid red',
24 | margin: '1rem auto',
25 | fontWeight: '600',
26 | // color: theme.palette.grey[600],
27 | color: theme.palette.primary.main,
28 | border: '0px solid red',
29 | },
30 | carouselSection: {
31 | padding: '4rem',
32 | backgroundColor:
33 | theme.palette.mode === 'dark'
34 | ? theme.palette.grey[900]
35 | : theme.palette.grey[100],
36 | marginBottom: '3rem',
37 | },
38 | examListSection: {
39 | paddingTop: '4rem',
40 | paddingBottom: '4rem',
41 | border: '0px solid red',
42 | padding: '4rem',
43 | backgroundColor:
44 | theme.palette.mode === 'dark'
45 | ? theme.palette.grey[900]
46 | : theme.palette.grey[100],
47 | },
48 | announcementSection: {
49 | backgroundColor:
50 | theme.palette.mode === 'dark'
51 | ? theme.palette.grey[900]
52 | : 'rgb(26, 178, 115,.09)',
53 | },
54 | announcementCard: {
55 | padding: '1rem',
56 | borderTop: `0px solid ${
57 | theme.palette.mode === 'dark'
58 | ? theme.palette.common.black
59 | : theme.palette.grey[300]
60 | }`,
61 | borderBottom: `2px solid ${
62 | theme.palette.mode === 'dark'
63 | ? theme.palette.common.black
64 | : theme.palette.grey[300]
65 | }`,
66 | margin: '1rem',
67 | },
68 | announcementContainer: {
69 | margin: '0 auto',
70 | paddingTop: '2rem',
71 | '& > div': { width: '85%', margin: '0 auto', marginTop: '3rem' },
72 | '& > :nth-child(2)': {
73 | borderTop: `0px solid ${
74 | theme.palette.mode === 'dark'
75 | ? theme.palette.common.black
76 | : theme.palette.grey[300]
77 | } !important`,
78 | },
79 | '& > :last-child': {
80 | borderBottom: `0px solid ${
81 | theme.palette.mode === 'dark'
82 | ? theme.palette.common.black
83 | : theme.palette.grey[300]
84 | } !important`,
85 | },
86 | },
87 | announcementCardDesc: {
88 | width: '87%',
89 | margin: '0 auto',
90 | },
91 | announcementCardButtonDiv: {
92 | marginTop: '2rem',
93 | marginBottom: '2.6rem',
94 | width: '87%',
95 | margin: '0 auto',
96 | },
97 | }));
98 |
--------------------------------------------------------------------------------
/src/components/text-input-field/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TextField, Typography, Button, InputAdornment, IconButton } from '@mui/material';
3 | import Visibility from '@mui/icons-material/Visibility';
4 |
5 | const TextInputField = ({
6 | label,
7 | placeholder,
8 | disabled = false,
9 | required,
10 | name,
11 | type,
12 | color,
13 | onChange,
14 | value,
15 | fullWidth,
16 | row = '',
17 | rowMax = '',
18 | multiline,
19 | style = {},
20 | labelStyle = {},
21 | labelClassName,
22 | className,
23 | variant,
24 | showActionBtn = false,
25 | actionBtnText = '',
26 | actionOnClick = () => {},
27 | endIcon,
28 | startIcon,
29 | endIconOnClick = () => {},
30 | startIconOnClick = () => {},
31 | InputPropsStyle = {},
32 | }) => {
33 | return (
34 |
35 |
36 | {label}
37 | {required ? * : null}
38 |
39 |
40 |
41 |
62 | startIconOnClick(e)}>
63 | {startIcon}
64 |
65 |
66 | ),
67 | endAdornment: endIcon && (
68 |
69 | endIconOnClick(e)}>
70 | {endIcon}
71 |
72 |
73 | ),
74 | }}
75 | />
76 |
77 | {/* Password */}
78 | {showActionBtn && (
79 |
82 | )}
83 |
84 |
35 |
36 |
37 |
38 | {cardDetails.name !== null ? cardDetails.name : '-'}{' '}
39 |
40 |
41 |
49 | {cardDetails.tags.slice(0, 3).map((tag) => (
50 |
51 | ))}
52 |
53 |
65 |
71 |
72 | {new Date(cardDetails.startTime).toDateString()}
73 |
74 |
75 |
76 | )}
77 |
78 | );
79 | };
80 | export default ExamDetailsCard2;
81 |
82 | const Tag = ({ tag }) => {
83 | const classes = useStyles();
84 | return (
85 |
86 | #{tag}
87 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/components/exam-details-card/index.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { useState } from 'react';
3 | import { Box, Card, CardContent, Button, Typography } from '@mui/material';
4 | import { useHistory } from 'react-router-dom';
5 |
6 |
7 | const ExamDetailsCard = (props) => {
8 |
9 | const history = useHistory();
10 | const { fullWidth, width, data, cardDetails, ...rest } = props;
11 |
12 |
13 | // -----------------------------------------------------
14 | // Time Manupulation
15 | // -----------------------------------------------------
16 | let a = new Date(cardDetails.startTime);
17 | var StartTime = a.toDateString();
18 | var start = a.toLocaleTimeString();
19 |
20 | var addMins = new Date(a.getTime() + cardDetails.duration * 60000);
21 | var event = new Date(addMins);
22 | var end = event.toLocaleTimeString();
23 |
24 |
25 | const redirectToExamDetailsPage = () => {
26 | history.push(`/exam/${cardDetails.id}`);
27 | }
28 |
29 |
30 | return (
31 |
32 |
33 | {cardDetails.name !== null ? cardDetails.name : '-'}
34 |
35 | {cardDetails.startTime !== null ? StartTime : '-'}
36 |
37 |
38 |
39 | Duration
40 |
41 | {cardDetails.duration !== null ? `${cardDetails.duration} mins` : '-'}
42 |
43 |
44 |
45 | No. of Participants
46 |
47 | {cardDetails.numberOfParticipants !== null ? cardDetails.numberOfParticipants : '-'}
48 |
49 |
50 |
51 | Status
52 |
53 | SCHEDULED
54 |
55 |
56 |
57 | Exam Timing
58 |
59 | {cardDetails.timing !== null ? `${start} - ${end}` : '-'}
60 |
61 |
62 |
63 | Exam Visibility
64 |
65 | PUBLIC
66 |
67 |
68 |
69 |
70 |
73 |
74 |
75 |
76 | );
77 | };
78 |
79 |
80 | export default ExamDetailsCard;
81 |
--------------------------------------------------------------------------------
/src/app.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useMemo, useEffect } from 'react';
2 | import { Switch, Route, useLocation, Redirect } from 'react-router-dom';
3 | import { useSelector, useDispatch } from 'react-redux';
4 | import { SnackbarProvider } from 'notistack';
5 | import CreateExam from 'pages/exam-creation';
6 | import { createTheme, ThemeProvider } from '@mui/material/styles';
7 | import { CssBaseline, Paper, Slide } from '@mui/material';
8 | import Navbar from 'components/navbar';
9 | import Register from 'layouts/register';
10 | import Login from 'layouts/login';
11 | import User from 'pages/profile/User';
12 | import Home from 'pages/home';
13 | import GiveExam from 'pages/give-exam';
14 | import ExamDetails from 'pages/exam-details';
15 | import getDesignTokens from 'utilities/theme';
16 | import { getCurrentUser } from 'api/user';
17 | import { setUserAndToken } from 'redux/slices/auth';
18 | import ConfirmationDialog from 'components/dialog/confirmation';
19 |
20 | const App = () => {
21 | const location = useLocation();
22 | const dispatch = useDispatch();
23 | const { user } = useSelector((state) => state.auth);
24 | const [themeMode, setThemeMode] = useState(localStorage.getItem('theme') || 'light');
25 |
26 | useEffect(() => {
27 | fetchCurrentUser();
28 | }, []);
29 |
30 | const fetchCurrentUser = async () => {
31 | try {
32 | const res = await getCurrentUser();
33 | dispatch(setUserAndToken({ user: res.data.data }));
34 | } catch (err) {
35 | console.error(err);
36 | }
37 | };
38 |
39 | // The dark mode switch would invoke this method
40 | const colorMode = useMemo(
41 | () => ({
42 | toggleColorMode: () => {
43 | setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
44 | },
45 | }),
46 | []
47 | );
48 |
49 | const toggleTheme = () => {
50 | setThemeMode((t) => {
51 | const newMode = t === 'light' ? 'dark' : 'light';
52 | localStorage.setItem('theme', newMode);
53 | return newMode;
54 | });
55 | };
56 |
57 | // Update the theme only if the mode changes
58 | const theme = useMemo(() => createTheme(getDesignTokens(themeMode)), [themeMode]);
59 |
60 | return (
61 |
62 |
70 |
71 |
72 | {!location.pathname.includes('/give') && }
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | {/* /exam/:id */}
81 |
82 |
83 |
84 |
85 |
86 |
87 | );
88 | };
89 |
90 | export default App;
91 |
--------------------------------------------------------------------------------
/src/pages/home/arrows.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useTheme } from '@emotion/react';
3 |
4 | import { VisibilityContext } from 'react-horizontal-scrolling-menu';
5 | import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
6 | import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
7 | import { Box, Card, CardContent, Button, Typography } from '@mui/material';
8 |
9 | function Arrow({ children, disabled, onClick }) {
10 | const theme = useTheme();
11 | return (
12 |
27 | {children}
28 |
29 | );
30 | }
31 |
32 | export function LeftArrow() {
33 | const {
34 | isFirstItemVisible,
35 | scrollPrev,
36 | visibleItemsWithoutSeparators,
37 | initComplete,
38 | } = React.useContext(VisibilityContext);
39 |
40 | const [disabled, setDisabled] = React.useState(
41 | !initComplete || (initComplete && isFirstItemVisible)
42 | );
43 | React.useEffect(() => {
44 | // NOTE: detect if whole component visible
45 | if (visibleItemsWithoutSeparators.length) {
46 | setDisabled(isFirstItemVisible);
47 | }
48 | }, [isFirstItemVisible, visibleItemsWithoutSeparators]);
49 |
50 | return (
51 | scrollPrev()}>
52 |
65 |
66 |
67 |
68 | );
69 | }
70 |
71 | export function RightArrow() {
72 | const { isLastItemVisible, scrollNext, visibleItemsWithoutSeparators } =
73 | React.useContext(VisibilityContext);
74 |
75 | // console.log({ isLastItemVisible });
76 | const [disabled, setDisabled] = React.useState(
77 | !visibleItemsWithoutSeparators.length && isLastItemVisible
78 | );
79 | React.useEffect(() => {
80 | if (visibleItemsWithoutSeparators.length) {
81 | setDisabled(isLastItemVisible);
82 | }
83 | }, [isLastItemVisible, visibleItemsWithoutSeparators]);
84 |
85 | return (
86 | scrollNext()}>
87 |
100 |
101 |
102 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/src/pages/exam-creation/question-types/mcq.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Grid, Typography, Box, Button } from '@mui/material';
3 | import { makeStyles } from '@mui/styles';
4 | import Bullet from '@mui/icons-material/FiberManualRecord';
5 | import TextInputField from 'components/text-input-field';
6 |
7 | const useStyles = makeStyles((theme) => ({
8 | labelSmall: {
9 | fontSize: '1.4rem',
10 | },
11 | }));
12 |
13 | const MCQ = (props) => {
14 | const classes = useStyles();
15 | const { currentQuestion, setCurrentQuestion } = props;
16 |
17 | const [newOption, setNewOption] = useState('');
18 | const [newCorrectOption, setNewCorrectOption] = useState('');
19 |
20 | const addNewOption = () => {
21 | if (!newOption || !newOption.trim()) return;
22 | setCurrentQuestion((q) => ({ ...q, options: [...q.options, { id: q.options.length + 1 || 1, data: newOption }] }));
23 | setNewOption('');
24 | };
25 |
26 | const addCorrectOption = () => {
27 | if (!newCorrectOption || !newCorrectOption.trim()) return;
28 | if (currentQuestion.type === 'mcq' && currentQuestion.correctOption?.length >= 1) return;
29 | setCurrentQuestion((q) => ({ ...q, correctOption: [...q.correctOption, +newCorrectOption] }));
30 | setNewCorrectOption('');
31 | };
32 |
33 | return (
34 |
35 |
36 |
37 | Available Options :
38 |
39 | setNewOption(e.target.value)}
45 | showActionBtn
46 | fullWidth
47 | actionBtnText='Add'
48 | actionOnClick={(e) => addNewOption()}
49 | />
50 |
51 | {currentQuestion.options &&
52 | currentQuestion.options.length != 0 &&
53 | currentQuestion.options.map((item, index) => (
54 |
55 | {index + 1}) {item.data}
56 |
57 | ))}
58 |
59 |
60 |
61 |
62 |
63 | {`Correct Option${currentQuestion.type === 'multipleOptions' ? 's' : ''}:`}
64 |
65 | setNewCorrectOption(e.target.value)}
73 | fullWidth
74 | showActionBtn
75 | actionBtnText='Add'
76 | actionOnClick={(e) => addCorrectOption()}
77 | />
78 |
79 | {currentQuestion.correctOption &&
80 | currentQuestion.correctOption.length != 0 &&
81 | currentQuestion.correctOption.map((item, index) => (
82 |
83 | {item}
84 |
85 | ))}
86 |
87 |
88 |
89 | );
90 | };
91 |
92 | export default MCQ;
93 |
--------------------------------------------------------------------------------
/src/pages/home/exams-horizontal-scroll-section.jsx:
--------------------------------------------------------------------------------
1 | import { LeftArrow, RightArrow } from './arrows';
2 | import { useState } from 'react';
3 | import ExamDetailsCard2 from 'components/exam-details-card2';
4 | import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
5 | import { Box, Card, CardContent, Button, Typography } from '@mui/material';
6 |
7 | const ExamsHorizontalScrollSection = ({ allData }) => {
8 | //swipable states===============================
9 |
10 | const elemPrefix = 'test';
11 | const getId = (index) => `${elemPrefix}${index}`;
12 |
13 | const getItems = () => {
14 | return allData.map((data, id) => {
15 | data[id] = id;
16 | return data;
17 | });
18 | };
19 |
20 | const [items, setItems] = useState(getItems);
21 | const [selected, setSelected] = useState([]);
22 | const [position, setPosition] = useState(0);
23 |
24 | const isItemSelected = (id) => !!selected.find((el) => el === id);
25 |
26 | const handleClick =
27 | (id) =>
28 | ({ getItemById, scrollToItem }) => {
29 | const itemSelected = isItemSelected(id);
30 |
31 | setSelected((currentSelected) =>
32 | itemSelected
33 | ? currentSelected.filter((el) => el !== id)
34 | : currentSelected.concat(id)
35 | );
36 | };
37 | //==============================================
38 |
39 | const [showFilters, setShowFilters] = useState(false);
40 | const [selectedFilters, setSelectedFilters] = useState({
41 | startDate: null,
42 | examVisibility: null,
43 | examStatus: null,
44 | });
45 |
46 | const handleFilterChange = (e) =>
47 | setSelectedFilters((f) => ({ ...f, [e.target.name]: e.target.value }));
48 | const hideFilters = () => setShowFilters(false);
49 |
50 | return (
51 | }
63 | RightArrow={}
64 | onWheel={onWheel}
65 | >
66 | {/* array.map(() => {}) */}
67 | {allData &&
68 | allData.map((Obj, id) => (
69 |
86 | ))}
87 |
88 | );
89 | };
90 |
91 | function onWheel(apiObj, ev) {
92 | console.log(apiObj, 'sss', ev);
93 | const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15;
94 |
95 | if (isThouchpad) {
96 | ev.stopPropagation();
97 | return;
98 | }
99 |
100 | if (ev.deltaY < 0) {
101 | apiObj.scrollNext();
102 | } else if (ev.deltaY > 0) {
103 | apiObj.scrollPrev();
104 | }
105 | }
106 |
107 | export default ExamsHorizontalScrollSection;
108 |
--------------------------------------------------------------------------------
/src/pages/exam-creation/page3.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useDispatch } from 'react-redux';
2 | import { makeStyles, useTheme } from '@mui/styles';
3 | import { Typography, Button, Paper, Grid } from '@mui/material';
4 | import { showConfirmation } from 'redux/slices/confirmation-dialog';
5 | import MCQSingle from 'layouts/questionType-result/mcq-single';
6 | import MCQMultiple from 'layouts/questionType-result/mcq-multiple';
7 | import FillBlanks from 'layouts/questionType-result/fill-blanks';
8 | import DomPurify from 'dompurify';
9 | import '../../index.css';
10 | import commonStyle from '../../common-style.js';
11 |
12 | const useStyles = makeStyles((theme) => ({}));
13 |
14 | const Page3 = (props) => {
15 | const { questions, handleSubmitExamData } = props;
16 |
17 | const dispatch = useDispatch();
18 | const classes = useStyles();
19 | const theme = useTheme();
20 | const classes2 = commonStyle();
21 |
22 | const handleSubmit = () => {
23 | dispatch(
24 | showConfirmation({
25 | title: 'Create Exam',
26 | content: 'Are you sure you want to create this exam?',
27 | primaryBtnText: 'Yes',
28 | secondaryBtnText: 'No',
29 | onPrimaryBtnClick: handleSubmitExamData,
30 | // onSecondaryBtnClick: () => console.log('do nothing'),
31 | })
32 | );
33 | };
34 |
35 | console.log('All_Questions ==> ', questions);
36 |
37 | return (
38 |
39 |
PREVIEW
40 |
41 | {questions && questions.length > 0 && (
42 |
43 | {questions.map((eachQues, idx) => {
44 | return (
45 | -
46 | {/* ==================== MAIN QUESTION BODY ==================== */}
47 |
48 |
54 |
55 |
{`Marks: ${eachQues.marks}`}
56 |
{`Negative Marks: ${eachQues.negMarks}`}
57 |
58 |
59 | {eachQues.type === 'multipleOptions' && (
60 |
61 | )}
62 |
63 | {eachQues.type === 'mcq' && (
64 |
65 | )}
66 |
67 | {eachQues.type === 'fillInTheBlanks' && }
68 |
69 |
71 | );
72 | })}
73 |
74 | )}
75 |
76 |
77 |
80 |
83 |
84 |
41 | {/* ------------- CAROUSAL PART -------------------- */}
42 |
45 |
46 | {/* ------------- SECOND PART -------------------- */}
47 |
48 | Events and Contests
49 |
50 |
51 |
52 | {/* ------------- THIRD PART -------------------- */}
53 |
54 | More Exams
55 |
56 |
57 |
58 |
59 | {/* ------------------- LAST ANNOUNCEMENT SECTION ------------------- */}
60 |
61 |
62 | Announcements
63 | {new Array(3).fill(0).map((announcement) => (
64 |
65 |
71 |
{' '}
79 |
New Exam
80 |
{new Date().toDateString()}
81 |
82 |
83 | Registrations for the 1st stages of the Indian Computing
84 | Olympiad 2022 - ZIO (Zonal Informatics Olympiad) & ZCO (Zonal
85 | Computing Olympiad) are ongoing.
86 |
87 |
88 |
89 |
90 |
94 |
143 | {false && !isFullScreen ? (
144 |
145 | ) : (
146 |
147 | {page === 1 && }
148 | {page === 2 && (
149 |
158 | )}
159 |
160 | )}
161 |
38 |
54 |
55 |
56 |
57 |
*/}
58 |
59 |
60 |
61 |
62 |
63 |
64 | Your Score
65 |
66 |
67 |
68 |
69 | COMPLETED AT
70 |
71 | {new Date(examScoresDetails.finishTime).toDateString()} , {new Date(examScoresDetails.finishTime).toLocaleTimeString()}
72 |
73 |
74 |
75 |
76 | RANK
77 |
78 | {examScoresDetails.rank !== null ? ` Position ${examScoresDetails.rank}` : '-'}
79 |
80 |
81 |
82 |
83 | SCORE ACHIEVED
84 |
85 | {examScoresDetails.totalScore !== null ? examScoresDetails.totalScore : '-'}
86 |
87 |
88 |
89 |
90 |
91 |
92 |
96 | Top 5 Performers
97 |
98 |
99 |
100 |
101 |
102 |
103 | Rank
104 | Name
105 | Achieved Score
106 | Completed At
107 |
108 |
109 |
110 |
111 | {examScoresDetails.topPerformers &&
112 | examScoresDetails.topPerformers.map((user) => (
113 |
117 | {user.rank}
118 | {user.name}
119 | {user.totalScore}
120 |
121 | {' '}
122 | {new Date(user.finishTime).toDateString()} , {new Date(user.finishTime).toLocaleTimeString()}{' '}
123 |
124 |
125 | ))}
126 |
127 |
128 |
129 |
130 | );
131 | };
132 |
133 | export default Scores;
134 |
--------------------------------------------------------------------------------
/src/pages/exam-creation/page2.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { useHistory, useParams } from 'react-router-dom';
3 | import { makeStyles, useTheme } from '@mui/styles';
4 | import { Grid, Button } from '@mui/material';
5 | import TextEditor from 'components/text-editor';
6 | import TextInputField from 'components/text-input-field';
7 | import DropdownField from 'components/dropdown-field';
8 | import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
9 | import SaveIcon from '@mui/icons-material/Save';
10 | import PrintIcon from '@mui/icons-material/Print';
11 | import ShareIcon from '@mui/icons-material/Share';
12 | import AddIcon from '@mui/icons-material/Add';
13 | import { getQuestionTypes } from 'api/exam';
14 | import MCQ from './question-types/mcq';
15 | import FillBlanks from './question-types/fill-blanks';
16 |
17 | const actions = [
18 | {
19 | icon: ,
20 | name: 'Copy',
21 | onClick: () => {
22 | alert(1);
23 | },
24 | },
25 | { icon: , name: 'Save', onClick: () => {} },
26 | { icon: , name: 'Print', onClick: () => {} },
27 | { icon: , name: 'Share', onClick: () => {} },
28 | ];
29 |
30 | const useStyles = makeStyles((theme) => ({
31 | heading: {
32 | fontSize: '3.2rem',
33 | textAlign: 'center',
34 | marginBottom: '2rem',
35 | },
36 | bubble: {
37 | display: 'flex',
38 | justifyContent: 'center',
39 | alignItems: 'center',
40 | width: 50,
41 | minWidth: 0,
42 | height: 50,
43 | margin: '1rem',
44 | borderRadius: '50%',
45 | background: theme.palette.mode === 'dark' ? theme.palette.grey[600] : theme.palette.grey[400],
46 | color: theme.palette.common.white,
47 | },
48 | }));
49 |
50 | const Page2 = (props) => {
51 | const { questions, handleQuestionsChange } = props;
52 |
53 | const classes = useStyles();
54 | const theme = useTheme();
55 |
56 | console.log(questions);
57 | const [questionTypes, setQuestionTypes] = useState([]);
58 | const [currentQuestion, setCurrentQuestion] = useState(null);
59 |
60 | useEffect(() => {
61 | fetchQuestionTypes();
62 | if (questions.length === 0) {
63 | addNewQuestion();
64 | } else {
65 | setCurrentQuestion(questions[0]);
66 | }
67 | }, []);
68 |
69 | useEffect(() => {
70 | if (currentQuestion && !isNaN(currentQuestion.id)) {
71 | handleQuestionsChange(currentQuestion);
72 | }
73 | }, [currentQuestion]);
74 |
75 | const fetchQuestionTypes = async () => {
76 | const res = await getQuestionTypes();
77 | setQuestionTypes(res.data.data);
78 | };
79 |
80 | const addNewQuestion = () => {
81 | setCurrentQuestion({
82 | id: questions.length,
83 | type: 'mcq',
84 | question: '',
85 | options: [],
86 | correctOption: [],
87 | marks: 2,
88 | negMarks: 1,
89 | });
90 | };
91 |
92 | return (
93 |
94 | {/* EDITOR SECTION */}
95 | {currentQuestion && (
96 |
97 |
98 |
99 | setCurrentQuestion((q) => ({ ...q, type: e.target.value }))}
107 | />
108 |
109 |
110 |
111 |
119 | setCurrentQuestion((q) => ({
120 | ...q,
121 | marks: +e.target.value < 0 ? 0 : +e.target.value,
122 | }))
123 | }
124 | />
125 |
126 |
127 |
128 |
136 | setCurrentQuestion((q) => ({
137 | ...q,
138 | negMarks: +e.target.value < 0 ? 0 : +e.target.value,
139 | }))
140 | }
141 | />
142 |
143 |
144 |
145 | setCurrentQuestion((q) => ({ ...q, question: value }))} />
146 |
147 | )}
148 |
149 | {/* OPTION SECTION */}
150 | {currentQuestion && (
151 |
152 | {(currentQuestion.type === 'mcq' || currentQuestion.type === 'multipleOptions') && (
153 |
154 | )}
155 |
156 | {currentQuestion.type === 'fillInTheBlanks' && }
157 |
158 | )}
159 |
160 | {/* BUTTONS -- FOR QUESTION NUMBER */}
161 |
162 |
163 | {questions.map((ques, i) => (
164 |
173 | ))}
174 |
175 |
178 |
110 | {`Marks: ${3}`}
111 | {`Negative Marks: ${1}`}
112 |
113 |
114 | {/* ==================== MAIN QUESTION BODY ==================== */}
115 |
116 |
117 |
118 | {currentQuestion.type === 'multipleOptions' && (
119 |
125 | )}
126 |
127 | {currentQuestion.type === 'mcq' && (
128 |
134 | )}
135 |
136 | {currentQuestion.type === 'fillInTheBlanks' && (
137 |
138 | )}
139 |
140 |
144 |
151 |
152 |
159 |
160 |
167 |
168 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 | {questions.map((q, i) => (
186 |
199 | ))}
200 |
201 |
202 |
203 |
204 |
205 | );
206 | };
207 |
208 | export default Page2;
209 |
--------------------------------------------------------------------------------
/src/pages/profile/profile-section.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { useHistory, useParams } from 'react-router-dom';
3 | import { useSelector } from 'react-redux';
4 | import { Grid, Typography, Button, Box, TextField, Modal, Container, Paper, Tabs, Tab } from '@mui/material';
5 | import { makeStyles, useTheme } from '@mui/styles';
6 | import { DialogActions, DialogContent, DialogTitle, Dialog } from 'components/dialog';
7 | import TextInputField from 'components/text-input-field';
8 | import CropImageDialog from './crop-image';
9 | import EditIcon from '@mui/icons-material/Edit';
10 | import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
11 | import UserIcon from 'assets/icons/user.png';
12 | import Visibility from '@mui/icons-material/Visibility';
13 | import VisibilityOff from '@mui/icons-material/VisibilityOff';
14 |
15 | const useStyles = makeStyles((theme) => ({
16 | name: {
17 | fontSize: '2.5rem',
18 | fontWeight: 600,
19 | color: theme.palette.primary.main,
20 | marginTop: '1rem',
21 | },
22 | title: {
23 | fontWeight: '700',
24 | fontSize: '1.4rem',
25 | },
26 | subTitleKey: {
27 | fontSize: '1.5rem',
28 | fontWeight: 500,
29 | color: theme.palette.primary.main,
30 | },
31 | subTitleValue: {
32 | fontSize: '1.5rem',
33 | fontWeight: 500,
34 | width: '100%',
35 | },
36 | labelSmall: {
37 | fontSize: '1.5rem',
38 | },
39 | profileImage: {
40 | borderRadius: '50%',
41 | width: 150,
42 | height: 150,
43 | },
44 | }));
45 |
46 | const types = ['image/png', 'image/jpeg', 'image/jpg'];
47 |
48 | const Profile = () => {
49 | const classes = useStyles();
50 |
51 | const { user } = useSelector((state) => state.auth);
52 |
53 | const [imageCropped, setimageCropped] = useState(null);
54 | const [fileselect, setfileselect] = useState(null);
55 | const [editDialogOpen, setEditDialogOpen] = useState(false);
56 | const [imageDialogOpen, setImageDialogOpen] = useState(false);
57 | const [showPassword, setShowPassword] = useState(false);
58 |
59 | useEffect(() => {
60 | if (fileselect) setImageDialogOpen(true);
61 | }, [fileselect]);
62 |
63 | const handleClickShowPassword = () => {
64 | setShowPassword((s) => !s);
65 | };
66 |
67 | const handleEditDialogOpen = () => setEditDialogOpen(true);
68 | const handleEditDialogClose = () => setEditDialogOpen(false);
69 |
70 | const handleChange = (e) => {
71 | let selectedFile = e.target.files[0];
72 | setfileselect(URL.createObjectURL(selectedFile));
73 | };
74 |
75 | return (
76 | <>
77 | {/* ----------------------------- EDIT PROFILE MODAL PART ---------------------------------------------- */}
78 |
142 | {/* -------------------------------------------------------------------------------------- */}
143 |
144 |
145 |
154 |
163 |
164 | 
165 |
173 |
176 |
177 |
178 |
179 | {user.name}
180 |
181 |
182 | {user.email}
183 |
184 |
185 |
186 |
187 | Bio:
188 |
189 |
190 | {user.bio}
191 |
192 |
193 | Gender:
194 |
195 |
196 | {user.gender}
197 |
198 |
199 | School/College:
200 |
201 |
202 | {user.institution}
203 |
204 |
205 | Phone:
206 |
207 |
208 | {user.phoneNumber}
209 |
210 |
211 | Date of Birth:
212 |
213 |
214 | {new Date(user.dob)?.toDateString()}
215 |
216 |
217 | Address:
218 |
219 |
220 | {user.address}
221 |
222 |
223 |
224 |
225 |
228 |
229 |
230 |
231 | );
232 | };
233 |
234 | export default Profile;
235 |
--------------------------------------------------------------------------------
/src/pages/exam-details/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import {
3 | Container,
4 | Grid,
5 | Typography,
6 | Box,
7 | Tab,
8 | Tabs,
9 | Button,
10 | Paper,
11 | } from "@mui/material";
12 | import { useTheme } from "@mui/styles";
13 | import { useHistory, useLocation } from "react-router-dom";
14 | import { useSelector, useDispatch } from "react-redux";
15 | import useStyles from "./styles";
16 | import {
17 | getExamDetails,
18 | registerInExam,
19 | getUserExamRegisterStatus,
20 | getExamResult,
21 | getExamScores,
22 | } from "api/exam";
23 | import { showConfirmation } from "redux/slices/confirmation-dialog";
24 | import DomPurify from "dompurify";
25 | import { useSnackbar } from "notistack";
26 | import { getUnitsFromDuration } from "utilities/functions";
27 | import About from "./tab-content/about";
28 | import Scores from "./tab-content/scores";
29 | import Result from "./tab-content/result";
30 |
31 | let timerInterval;
32 |
33 | const TabPanel = (props) => {
34 | const { children, value, index, ...other } = props;
35 | return (
36 |
37 | {value === index && (
38 |
39 | {children}
40 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | const a11yProps = (index) => {
47 | return {
48 | id: `vertical-tab-${index}`,
49 | fontWeight: "bold",
50 | };
51 | };
52 |
53 | const Exam_Details = () => {
54 | const history = useHistory();
55 | const location = useLocation();
56 | const classes = useStyles();
57 | const { enqueueSnackbar } = useSnackbar();
58 | const dispatch = useDispatch();
59 | const theme = useTheme();
60 | const examId = location.pathname.split("/")[2];
61 |
62 | const { user } = useSelector((state) => state.auth);
63 | const [value, setValue] = useState(0);
64 | const [examData, setExamData] = useState({});
65 | const [registerStatus, setRegisterStatus] = useState(false);
66 | const [resultDetails, setResultDetails] = useState(null);
67 | const [examScores, setExamScores] = useState(null);
68 | const cleanDescription = DomPurify.sanitize(examData.description);
69 |
70 | // Timer states
71 | const [remainingTime, setRemainingTime] = useState({
72 | days: null,
73 | hours: null,
74 | minutes: null,
75 | seconds: null,
76 | });
77 |
78 | useEffect(() => {
79 | if (!examData?.startTime) return;
80 | const duration = new Date(examData.startTime) - Date.now();
81 | if (duration < 0) {
82 | return setRemainingTime({ days: 0, hours: 0, minutes: 0, seconds: 0 });
83 | }
84 | const dd = getUnitsFromDuration(duration);
85 | console.log(duration, dd);
86 | setRemainingTime({
87 | days: dd.days,
88 | hours: dd.hours,
89 | minutes: dd.minutes,
90 | seconds: dd.seconds,
91 | });
92 | }, [examData.startTime]);
93 |
94 | useEffect(() => {
95 | if (
96 | remainingTime.days === null ||
97 | remainingTime.hours === null ||
98 | remainingTime.minutes === null ||
99 | remainingTime.seconds === null
100 | ) {
101 | return;
102 | }
103 |
104 | clearInterval(timerInterval);
105 | timerInterval = setInterval(() => {
106 | if (remainingTime.seconds > 0) {
107 | setRemainingTime((t) => ({ ...t, seconds: t.seconds - 1 }));
108 | }
109 | if (remainingTime.seconds === 0) {
110 | if (remainingTime.minutes === 0) {
111 | if (remainingTime.hours === 0) {
112 | if (remainingTime.days === 0) {
113 | // Timer has finished
114 | clearInterval(timerInterval);
115 | } else {
116 | setRemainingTime((t) => ({
117 | ...t,
118 | days: t.days - 1,
119 | hours: 23,
120 | minutes: 59,
121 | seconds: 59,
122 | }));
123 | }
124 | } else {
125 | setRemainingTime((t) => ({
126 | ...t,
127 | hours: t.hours - 1,
128 | minutes: 59,
129 | seconds: 59,
130 | }));
131 | }
132 | } else {
133 | setRemainingTime((t) => ({
134 | ...t,
135 | minutes: t.minutes - 1,
136 | seconds: 59,
137 | }));
138 | }
139 | }
140 | }, 1000);
141 |
142 | return () => {
143 | clearInterval(timerInterval);
144 | };
145 | }, [remainingTime]);
146 |
147 | // -------------------------------------
148 | // FETCH ALL EXAMS DATA
149 | // -------------------------------------
150 | useEffect(async () => {
151 | fetchExamDetails();
152 | checkRegisterStatus();
153 | fetchResult();
154 | fetchScores();
155 | window.scrollTo(0, 0);
156 | }, []);
157 |
158 | const fetchResult = async () => {
159 | try {
160 | const res = await getExamResult(examId);
161 | console.log(res);
162 | if (res.data.data) setResultDetails(res.data.data);
163 | } catch (err) {
164 | // enqueueSnackbar(err.message, { variant: 'error' });
165 | console.error(err);
166 | }
167 | };
168 |
169 | const fetchScores = async () => {
170 | try {
171 | const res = await getExamScores(examId);
172 | setExamScores(res.data.data);
173 | } catch (err) {
174 | // enqueueSnackbar(err.message, { variant: 'error' });
175 | console.error(err);
176 | }
177 | };
178 |
179 | const checkRegisterStatus = async () => {
180 | try {
181 | const res = await getUserExamRegisterStatus(examId);
182 | setRegisterStatus(!!res.data.data.registered);
183 | } catch (err) {
184 | enqueueSnackbar(err.message, { variant: "error" });
185 | }
186 | };
187 |
188 | const fetchExamDetails = async () => {
189 | try {
190 | const res = await getExamDetails(examId);
191 | setExamData(res.data.data);
192 | } catch (err) {
193 | enqueueSnackbar(err.message, { variant: "error" });
194 | }
195 | };
196 |
197 | const handleChange = (event, newValue) => {
198 | setValue(newValue);
199 | };
200 |
201 | const registerUserInExam = async () => {
202 | try {
203 | const res = await registerInExam({ examId });
204 | if (res.status === 200) {
205 | setRegisterStatus(true);
206 | }
207 | } catch (err) {
208 | enqueueSnackbar(err.message, { variant: "error" });
209 | }
210 | };
211 |
212 | const redirectToGiveExam = () => {
213 | history.push(`/exam/${examId}/give`);
214 | };
215 |
216 | const TextPair = ({ heading, value }) => {
217 | return (
218 |
219 |
223 | {heading}
224 |
225 | {value}
226 |
227 | );
228 | };
229 |
230 | const JoinCardText = ({ heading, value }) => {
231 | return (
232 |
233 |
234 |
237 | {heading}:
238 |
239 |
240 |
241 |
242 | {value}
243 |
244 |
245 |
246 | );
247 | };
248 |
249 | const getTypography = (text = "", style = {}) => {
250 | return (
251 |
256 | {text}
257 |
258 | );
259 | };
260 |
261 | const getButton = (text = "", type = "") => {
262 | return (
263 |
293 | );
294 | };
295 |
296 | const JoinRegisterSection = () => {
297 | if (!examData.startTime) return null;
298 | if (
299 | remainingTime.days === null ||
300 | remainingTime.hours === null ||
301 | remainingTime.minutes === null ||
302 | remainingTime.seconds === null
303 | )
304 | return null;
305 | const startTime = new Date(examData.startTime);
306 | const endTime = new Date(+startTime + examData.duration);
307 | const remain = Math.abs(
308 | remainingTime.days * 86400000 -
309 | remainingTime.hours * 3600000 -
310 | remainingTime.minutes * 60000 -
311 | remainingTime.seconds * 1000
312 | );
313 | // If days,hours,minutes,seconds are zeros, then remain = 0, and startTime - remain = 0, so currentTime should be Date.now()
314 | const currentTime = remain === 0 ? Date.now() : +startTime - remain;
315 | if (currentTime < startTime) {
316 | // before exam
317 | if (!user) {
318 | return (
319 | <>
320 | {getTypography("Login to register for exam")}
321 |
322 |
323 | );
324 | } else {
325 | if (!registerStatus) {
326 | return (
327 | <>
328 | {getButton("Register", "register")}
329 |
330 |
331 | );
332 | } else {
333 | return (
334 | <>
335 | {getTypography("You have registered")}
336 |
337 |
338 | );
339 | }
340 | }
341 | } else if (currentTime >= startTime && currentTime < endTime) {
342 | if (!user) {
343 | return getTypography("Login to enter exam");
344 | }
345 | // user has not registered
346 | else if (!registerStatus) {
347 | return getTypography("You have not registered for this exam");
348 | } else {
349 | return getButton("Enter Exam", "start");
350 | }
351 | } else if (currentTime >= endTime) {
352 | // after exam
353 | return getTypography("Exam has ended", {
354 | color: "crimson",
355 | fontWeight: "900",
356 | });
357 | }
358 | };
359 |
360 | const CountdownTimer = () => {
361 | return (
362 |
363 | {`${remainingTime.days} days ${remainingTime.hours} hours ${remainingTime.minutes} minutes ${remainingTime.seconds} seconds`}
364 |
365 | );
366 | };
367 |
368 | const getExamDurationFormatted = () => {
369 | if (!examData.duration) return null;
370 | const { days, hours, minutes, seconds } = getUnitsFromDuration(
371 | examData.duration
372 | );
373 | let duration = "";
374 | if (days > 0) {
375 | duration += days === 1 ? `${days} day ` : `${days} days `;
376 | }
377 | if (hours > 0) {
378 | duration += hours === 1 ? `${hours} hour ` : `${hours} hours `;
379 | }
380 | if (minutes > 0) {
381 | duration += minutes === 1 ? `${minutes} minute ` : `${minutes} minutes `;
382 | }
383 | if (seconds > 0) {
384 | duration += seconds === 1 ? `${seconds} second ` : `${seconds} seconds `;
385 | }
386 | return duration;
387 | };
388 |
389 | return (
390 | <>
391 | {/* ----------- Banner ----------- */}
392 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 | {examData.name !== null ? examData.name : "-"}
410 |
411 |
412 | {" "}
413 | Author : {examData.user?.name}
414 |
415 |
416 |
417 |
418 | {/*-------------------------------------------------- */}
419 | {/* INFORMATION */}
420 | {/*-------------------------------------------------- */}
421 |
422 |
426 |
430 |
434 |
442 |
443 |
444 | {/*-------------------------------------------------- */}
445 | {/* EXAM TIME DISPLAY CARD */}
446 | {/*-------------------------------------------------- */}
447 |
448 |
452 |
453 |
461 |
462 |
466 |
467 |
468 | {/* Timer Part */}
469 |
470 |
471 |
472 |
473 |
478 |
484 |
489 |
495 |
501 |
506 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 | FAQ's
527 |
528 |
529 |
530 | Discussions
531 |
532 |