Added ui Components

web-app/frontend/src/components/activities/ActivityContainer.css

@@ -19,8 +19,6 @@
 
   margin-right: 10px;
 
-  border: solid gainsboro;
-  border-radius: 5px;
   padding: 5px;
 }
 #activity-container-item-1 {
@@ -33,6 +31,7 @@
   border: solid gainsboro;
   border-radius: 5px;
   padding: 5px;
+  background-color: lightgray;
 }
 
 .activity-container-navigator-item {

web-app/frontend/src/components/activities/ActivityContainer.jsx

 import React, { useState, useEffect } from "react";
 import "./ActivityContainer.css";
-import { PictureConcept, Arithmetic } from "../index";
+import { PictureConcept, Arithmetic, ColourNumbers, DigitSpan } from "../index";
 
 const ActivityContainer = () => {
   const [currentActivityNo, setCurrentActivityNo] = useState(1);
@@ -34,7 +34,7 @@ const ActivityContainer = () => {
             setCurrentActivityNo(3);
           }}
         >
-          Activity Name
+          Colour Numbers
         </div>
         <div
           className="activity-container-navigator-item"
@@ -42,7 +42,7 @@ const ActivityContainer = () => {
             setCurrentActivityNo(4);
           }}
         >
-          Activity Name
+          Digit Span
         </div>
       </div>
       <div id="activity-container-item-1">
@@ -52,6 +52,12 @@ const ActivityContainer = () => {
         {currentActivityNo === 2 && (
           <Arithmetic nextActivity={nextActivityHandler} />
         )}
+        {currentActivityNo === 3 && (
+          <ColourNumbers nextActivity={nextActivityHandler} />
+        )}
+        {currentActivityNo === 4 && (
+          <DigitSpan nextActivity={nextActivityHandler} />
+        )}
       </div>
     </div>
   );

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.css

+.new{
+    padding-top: 10%;
+}
\ No newline at end of file

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.jsx

+import React from "react";
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import "./ColourNumbers.css";
+import { lightBlue, yellow } from '@mui/material/colors';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+
+const Item = styled(Paper)(({ theme }) => ({
+    textAlign: 'center',
+    color: theme.palette.text.primary,
+    height: 60,
+    lineHeight: '60px',
+    textDecorationColor: "black",
+    fontWeight: 'Bold'
+  }));
+
+
+const ColourNumbers = ({ nextActivity }) => {
+  return (
+    <div className="new">
+      <Grid container>
+        <Grid item xs={16} >
+            <Box
+              sx={{
+                p: 2,
+                bgcolor: 'background.default',
+                display: 'grid',
+                gridTemplateColumns: { md: '1fr 1fr 1fr 1fr 1fr' },
+                gap: 6,
+              }}
+            >
+              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => (
+                <Item key={value} 
+                elevation={24}
+                sx={value % 2 ? {bgcolor: lightBlue[900]} : {bgcolor: yellow[500]}}>
+                  {`${value}`}
+                </Item>
+              ))}
+            </Box>
+        </Grid>
+    </Grid>
+    </div>
+  );
+};
+
+export default ColourNumbers;
\ No newline at end of file

web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.css

+.container{
+    padding-top: 20%;
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file

web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.jsx

+import React, { useState } from "react";
+import { green, red } from '@mui/material/colors';
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import MicSharpIcon from '@mui/icons-material/MicSharp';
+import MicOffSharpIcon from '@mui/icons-material/MicOffSharp';
+import Button from '@mui/material/Button';
+import "./DigitSpan.css";
+
+
+
+const DigitSpan = ({ nextActivity }) => {
+
+    const [buttonClicked, setButtonClicked] = useState(1);
+
+  return (
+    <div className="container">
+      <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
+      {buttonClicked === 1 && (
+          <Avatar sx={{ bgcolor: green[500], width: 100, height: 100}}
+          onClick={()=> {setButtonClicked(2)}}>
+          <MicSharpIcon sx={{ fontSize: 60 }}/>
+        </Avatar>
+        )}
+      {buttonClicked === 2 && (
+          <Avatar sx={{ bgcolor: red[500], width: 100, height: 100 }}
+          onClick={()=> {setButtonClicked(1)}}>
+          <MicOffSharpIcon sx={{ fontSize: 60 }}/>
+        </Avatar>
+        )}
+    </Stack>
+      {/* <Button
+        onClick={() => {
+          nextActivity();
+        }}
+      >
+        Next
+      </Button> */}
+    </div>
+  );
+};
+
+export default DigitSpan;
\ No newline at end of file

web-app/frontend/src/components/index.js

@@ -10,3 +10,5 @@ export { default as ActivityContainer } from "./activities/ActivityContainer";
 export { default as PictureConcept } from "./activities/reasoningIqEval/pictureConcept/PictureConcept";
 export { default as Arithmetic } from "./activities/reasoningIqEval/arithmetic/Arithmetic";
 export { default as ImageRow } from "./activities/reasoningIqEval/pictureConcept/ImageRow";
+export { default as ColourNumbers } from "./activities/knowledgeIqEval/colourNumbers/ColourNumbers";
+export { default as DigitSpan } from "./activities/knowledgeIqEval/digitSpan/DigitSpan";

web-app/package-lock.json

+{
+  "lockfileVersion": 1
+}