question page completed, except timer

client/package.json

@@ -3,11 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/styled": "^11.3.0",
+    "@mui/material": "^5.0.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "emotion": "^11.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

client/src/App.js

@@ -1,23 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import Homepage from './views/Homepage';
+import QuizDetail from './views/QuizDetail';
+import QuizPortal from './views/QuizPortal';
+
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Router>
+        <Switch>
+          <Route path="/quizDetails" component={QuizDetail} />
+          <Route path="/quizPortal" component={QuizPortal} />
+          <Route path="/" component={Homepage} />
+        </Switch>
+      </Router>
     </div>
   );
 }

client/src/component/Question.js

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react'
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import ResponseContext from './ResponseContext';
+
+
+export default function Question({quesId, question, choices}) 
+{
+  const { response, setResponse } = useContext(ResponseContext)
+  // console.log(response)
+  const newResponse = response;
+  const handleAnswerChange = (quesId,res) => 
+  {
+    const userResponse = {
+      questionId: quesId,
+      response: res
+    }
+    console.log(userResponse)
+      // Check if there is a response element
+    if(newResponse.length !== 0)
+    {
+      const index = newResponse.findIndex( res => (res.questionId === quesId))
+      if(index !== -1)
+        newResponse.splice(index,1)
+      newResponse.push(userResponse)
+    }
+    else
+    {
+      newResponse.push(userResponse)
+    }
+    console.log(newResponse)
+    setResponse(newResponse)
+  }
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">{question}</FormLabel>
+      <RadioGroup
+        aria-label="question"
+        name="radio-buttons-group"
+        onChange={(e) => handleAnswerChange(quesId, e.target.value)}
+      >
+        { choices.map((choice,index) => <FormControlLabel key={index} value={choice} control={<Radio />} label={choice} />)}
+
+      </RadioGroup>
+    </FormControl>
+  );
+  }

client/src/component/ResponseContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ResponseContext = createContext([]);
+
+export default ResponseContext;

client/src/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +9,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

client/src/views/Homepage.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import Button from '@mui/material/Button';
+
+export default function Homepage() {
+  return (
+    <div>
+      Welcome to the ACM Recruitments Portal
+      <Link to="/quizDetails">
+        <Button variant="contained">Take Me to Quiz</Button>
+      </Link>
+    </div>
+  )
+}

client/src/views/QuizDetail.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import Button from '@mui/material/Button';
+
+export default function QuizDetail() {
+  return (
+    <div>
+      These are the questions
+      <Link to="/quizPortal">
+        <Button variant="contained">Start Quiz</Button>
+      </Link>
+    </div>
+  )
+}

client/src/views/QuizPortal.js

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import Question from '../component/Question'
+import ResponseContext from '../component/ResponseContext'
+
+import Button from '@mui/material/Button';
+// import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+// import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+
+export default function QuizPortal() {
+  const [ response, setResponse ] = useState([])
+
+  // Assuming we have an array of { quesId, question } from server
+  const quesArr = [
+    {
+      id:1,
+      text: "Sample Question 1",
+      choices: [ "Sample Choice 1" , "Sample Choice 2" , "Sample Choice 3" , "Sample Choice 4"]
+    },
+    {
+      id:2,
+      text: "Sample Question 2",
+      choices: [ "Sample Choice 1" , "Sample Choice 2" , "Sample Choice 3" , "Sample Choice 4"]
+    },
+    {
+      id:3,
+      text: "Sample Question 3",
+      choices: [ "Sample Choice 1" , "Sample Choice 2" , "Sample Choice 3" , "Sample Choice 4"]
+    },
+  ]
+
+  // const Item = styled(Paper)(({ theme }) => ({
+  //   ...theme.typography.body2,
+  //   padding: theme.spacing(1),
+  //   // textAlign: 'center',
+  //   color: theme.palette.text.secondary,
+  // }));
+
+    return (
+    <div>
+      <ResponseContext.Provider value={{ response, setResponse }}>
+
+        <Box sx={{ flexGrow: 1 , mb: 3}}>
+          <Grid 
+          container 
+          spacing={2}
+          >
+            { quesArr.map((ques) => {
+            return (
+              <Grid item xs={8} key={ques.id} sx={{ my:1}}>
+                {/* <Item> */}
+                  <Question quesId={ques.id} question={ques.text} choices = {ques.choices} />
+                {/* </Item> */}
+              </Grid>
+            )
+          }) }
+          </Grid>
+          <Button variant="contained" onClick={() => console.log(response)}>Submit</Button>
+          <Button variant="outlined" onClick={() => console.log(response)}>Back</Button>
+        </Box>
+      </ ResponseContext.Provider>
+    </div>
+  )
+}