Reveiew functionality added

package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^4.1.17",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-new-window": "^0.1.3",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/Problem/Problem.js

@@ -57,7 +57,7 @@ const Problem = (props) => {
     return (
         <>
 
-            <Box position="relative" minHeight={{ base: "450px", md: "500px", lg: "auto" }} mt={{ md: "60px", lg: "160px" }} width={{ base: "100%", md: "80%", lg: "90%" }} mx="auto" borderWidth="2px" p="30px" borderRadius="lg">
+            <Box shadow="md" position="relative" minHeight={{ base: "450px", md: "500px", lg: "auto" }} mt={{ md: "60px", lg: "160px" }} width={{ base: "100%", md: "80%", lg: "90%" }} mx="auto" borderWidth="2px" p="30px" borderRadius="lg">
                 <Box borderRadius="lg" p="10px">
                     <Text fontSize={{ base: '20px', md: '24px', lg: '26px' }}>{currentQuestion}</Text>
                 </Box>
@@ -69,7 +69,7 @@ const Problem = (props) => {
 
 
                                 return (
-                                    <Box borderWidth="2px" borderRadius="md" pl={{ base: '10px', md: '12px', lg: '40px' }} >
+                                    <Box key={index} borderWidth="2px" borderRadius="md" pl={{ base: '10px', md: '12px', lg: '40px' }} >
                                         <Radio colorScheme="green" name={"problem" + setCurrentProblemIndex} value={choice} isFullWidth >
                                             <Text fontSize={{ base: '16px', md: '20px', lg: '20px' }} padding={["5px", "8px", "10px"]} >{choice}</Text>
                                         </Radio>

src/components/Result/Result.js

@@ -1,7 +1,7 @@
 import { Container, Box, Heading, Text, Button } from "@chakra-ui/react"
 import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-
+import Demo from "../ReviewWindow/ReviewWindow";
 
 import showWarningOnExit from "../../customFunctions";
 import { userSliceActions } from "../../store/user-slice";
@@ -12,13 +12,20 @@ const Result = (props) => {
 
 
     useEffect(() => {
-
         window.removeEventListener('beforeunload', showWarningOnExit);
     }, [])
 
+    useEffect(() => {
+        window.addEventListener('focus', toggleReviewWindowHandler);
+    }, [])
+
+    const [review, setReview] = useState(false)
+
     const dispatch = useDispatch();
 
+
     const name = useSelector(state => state.name)
+    const topic = useSelector(state => state.topic)
     const responses = useSelector(state => state.responses);
     const problems = useSelector(state => state.questions);
     const isNegativeScoreAllowed = useSelector(state => state.negativeScoreAllowed);
@@ -50,9 +57,12 @@ const Result = (props) => {
     }
 
     const menuLinkHandler = () => {
-
         window.location.href = "/"
-        // history.replace('/');
+    }
+
+    const toggleReviewWindowHandler = () => {
+        console.log('Toggling');
+        setReview(prevState => !prevState);
     }
 
 
@@ -65,13 +75,14 @@ const Result = (props) => {
 
             <Box d="flex" justifyContent="space-evenly"><Heading as="h3" fontSize="3xl" d="inline" justify="center">Your Score: </Heading><Heading d="inline" as="h3" fontSize="3xl" color="teal">{score} / 100</Heading></Box>
 
+
             <Box mt="40px">
                 <Text fontSize="xl">Correct Response: {correct}</Text>
                 <Text fontSize="xl">Incorrect Response: {incorrect}</Text>
                 <Text fontSize="xl">Unattempted Problems: {unattempted} </Text>
                 <Box mt="100px">
                     <Box d="flex" justifyContent="space-between" padding="20px">
-                        <Button colorScheme="teal" size="md" className="reviewBtn">Review Responses</Button>
+                        <Button colorScheme="teal" size="md" className="reviewBtn" onClick={toggleReviewWindowHandler}>Review Responses</Button>
                         <Button colorScheme="teal" size="md" className="menuDirectBtn" onClick={menuLinkHandler}>Main Menu</Button>
                     </Box>
 
@@ -82,6 +93,7 @@ const Result = (props) => {
                 </Box>
             </Box>
 
+            {review && < Demo title='Quiz Results' name={name} responses={responses} topic={topic} problems={problems} onExit={toggleReviewWindowHandler} copyStyles features={{ width: window.innerWidth, height: window.innerHeight }} />}
         </Container >
     );
 }

src/components/ReviewWindow/ReviewWindow.js

@@ -0,0 +1,62 @@
+import { Box, Stack, StackDivider, Text, Heading, Center, VStack } from '@chakra-ui/react';
+import { Divider } from "@chakra-ui/react"
+import { useEffect } from 'react';
+
+import NewWindow from 'react-new-window'
+
+const Demo = (props) => {
+
+    useEffect(() => {
+        window.addEventListener('onunload', () => {
+            console.log('Changing')
+        })
+    }, [])
+
+    return (
+        < NewWindow >
+            <Box>
+                <VStack spacing={2} mt={{ base: "10px", md: "20px" }}>
+                    <Center><Heading color="teal">Test Results</Heading></Center>
+                    <Divider orientation="horizontal" />
+                    <Stack direction={{ base: 'row', md: 'column' }} spacing={{ base: '2', md: '1' }}>
+                        <Text fontSize={{ base: "xl", md: '2xl' }}>{props.name}</Text>
+                        <Text fontSize={{ base: "xl", md: '2xl' }}>{props.topic}</Text>
+                        <Text fontSize={{ base: "xl", md: '2xl' }}>{props.score}</Text>
+                    </Stack>
+                </VStack>
+                <Stack divider={<StackDivider borderColor="gray.200" />} direction="column" spacing="24px">
+                    {
+                        props.problems.map((problem, i) => {
+                            return (
+                                <Box p={5} shadow="md" borderWidth="1px" padding="5px">
+                                    <Box className="questionDiv" >
+                                        {problem.ques}
+                                    </Box>
+                                    <Box>
+                                        <VStack spacing={3}>
+                                            {
+                                                problem.choices.map((choice, j) => {
+                                                    return (
+                                                        <Box borderWidth="3px">
+                                                            {choice}
+                                                        </Box>
+                                                    )
+                                                })
+                                            }
+                                        </VStack>
+                                        <VStack spacing={5}>
+                                            <Box>Correct Answer: {problem.answer}</Box>
+                                            <Box>Your choice: {props.responses[i] !== -1 ? props.responses[i] : 'Unattempted'}</Box>
+                                        </VStack>
+                                    </Box>
+                                </Box>
+                            )
+                        })
+                    }
+                </Stack>
+            </Box>
+        </NewWindow >
+    )
+}
+
+export default Demo;

src/components/ReviewWindow/test.js

@@ -0,0 +1,11 @@
+import { Box, Stack, StackDivider, Text, Heading, Center, VStack } from '@chakra-ui/react';
+import { Divider } from "@chakra-ui/react"
+import { useEffect } from 'react';
+
+const Test = (props) => {
+    return (
+
+    );
+}
+
+export default Test;

src/components/Welcome/Welcome.js

@@ -10,7 +10,6 @@ import { fetchQuestions } from "../../store/user-actions";
 import { Container, Heading } from "@chakra-ui/react"
 
 import { useHistory } from "react-router";
-import { MoonIcon } from "@chakra-ui/icons";
 
 
 const Welcome = (props) => {
@@ -36,7 +35,7 @@ const Welcome = (props) => {
     useEffect(() => {
         dispatch(userSliceActions.resetQuiz());
         // dispatch(userSliceActions.setQuizState(false))
-    }, [])
+    }, [dispatch])
 
     useEffect(() => {
         if (name === '' && nameIsTouched) {
@@ -114,12 +113,12 @@ const Welcome = (props) => {
                     <Input className={nameError ? 'name-input invalid' : 'name-input'} placeholder="Enter your name" id="nameInput" name="nameInput" value={name} mt={30} onInput={nameChangeHandler} autoFocus />
 
                     <Select placeholder="Select a topic" mt={30} ref={topicRef} >
-                        <option value="gk">General Knowledge</option>
-                        <option value="animals">Animals</option>
-                        <option value="politics">Politics</option>
-                        <option value="computers">Computers</option>
-                        <option value="vehicles">Vehicles</option>
-                        <option value="sports">Sports</option>
+                        <option value="General Knowledge">General Knowledge</option>
+                        <option value="Animals">Animals</option>
+                        <option value="Politics">Politics</option>
+                        <option value="Computers">Computers</option>
+                        <option value="Vehicles">Vehicles</option>
+                        <option value="Sports">Sports</option>
                     </Select>
                 </FormControl>
                 <Checkbox

src/store/user-actions.js

@@ -6,13 +6,13 @@ export const fetchQuestions = (topic) => {
 
     let topicCode = undefined;
     switch (topic) {
-        case 'gk': topicCode = 9; break;
-        case 'animals': topicCode = 27; break;
-        case 'sports': topicCode = 21; break;
-        case 'politics': topicCode = 24; break;
-        case 'vehicles': topicCode = 28; break;
-        case 'computers': topicCode = 18; break;
-        default: alert('Incorrect Topic Chosen'); return; break;
+        case 'General Knowledge': topicCode = 9; break;
+        case 'Animals': topicCode = 27; break;
+        case 'Sports': topicCode = 21; break;
+        case 'Politics': topicCode = 24; break;
+        case 'Vehicles': topicCode = 28; break;
+        case 'Computers': topicCode = 18; break;
+        default: alert('Incorrect Topic Chosen'); return;
     }
 
     return (dispatch) => {

src/store/user-slice.js

@@ -31,6 +31,7 @@ const userSlice = createSlice({
             state.questions = undefined;
             state.responses = [];
             state.isQuizRunning = false;
+            state.topic = undefined;
         },
         toggleNegativeMarking(state) {
             state.negativeScoreAllowed = !state.negativeScoreAllowed;