questions typeof

src/App.css

@@ -288,16 +288,16 @@
 }
 .prueba_body{
   padding: 15px;
-  background-color:red;
-  width : '100%';
+  background: r;
+  background-color: red;
+  width: '100%';
   min-height: 95vh;
-  display:flex;
+  display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  align-content: space-around;
-}
+  align-items: stretch;
+  justify-content: flex-start;
+  align-content: flex-start;}
 
 .quiz_title_text{
   display: flex;

src/Components/HomeUser/TestCard.jsx

@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom'
 export function TestCard(props) {
 
     let { test } = props;
-    console.log('TEST: ', test)
+
     return (
         <Card className="card_test" elevation={0} sx={{ maxWidth: 500, maxHeight : 500 }}>
             <CardActionArea>

src/Components/Test/Cleaver/Header.jsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import CardMedia from '@mui/material/CardMedia';
+import Card from '@mui/material/Card';
+
+export function Header() {
+
+  return (
+    <Card sx={{ display: 'flex' }}>
+      <CardMedia
+        component="img"
+        sx={{ width: '100%', height: 200 }}
+        image={"https://static6.depositphotos.com/1000674/642/i/950/depositphotos_6427644-stock-photo-taking-a-test.jpg"}
+        alt="Live from space album cover"
+      />
+    </Card>
+  );
+}

src/Components/Test/Cleaver/Question.jsx

@@ -6,41 +6,64 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Avatar from '@mui/material/Avatar';
-// import Stack from '@mui/material/Stack';
-// 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 Checkbox from '@mui/material/Checkbox';
 import { deepPurple } from '@mui/material/colors';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 
-function Radio() {
-  return(
-    <div>
-    <Checkbox {...label} defaultChecked />
-      <Checkbox {...label} />
-    </div>
-  )
-}
+function CheckboxesGroup(props) {
+
+  const [checked, setChecked] = React.useState([0]);
+
+  const handleToggle = (value) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
 
+    setChecked(newChecked);
+  };
 
-function Response ({resp}) {
   return (
-    <FormControl>
-      <RadioGroup
-        aria-labelledby="demo-radio-buttons-group-label"
-        defaultValue="female"
-        name="radio-buttons-group"
-      >
-        {
-        resp.map(a => <FormControlLabel value="female" control={<Radio />} label={a.nombre} />)
-        }
-      </RadioGroup>
-    </FormControl>
-  )
+    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+      {props.quiz.map((value) => {
+        const labelId = `checkbox-list-label-${value.id}`;
+        return (
+          <ListItem key={value.id}>
+            <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
+              <ListItemText id={labelId} primary={value.nombre} />
+              <ListItemIcon>
+                <Checkbox
+                  edge="start"
+                  checked={checked.indexOf(value) !== -1}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{ 'aria-labelledby': labelId }}
+                  />
+              </ListItemIcon>
+              <ListItemIcon>
+                <Checkbox
+                  edge="start"
+                  checked={false}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{ 'aria-labelledby': labelId }}
+                  />
+              </ListItemIcon>
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
 }
 
 export function Question({ quiz }) {
@@ -49,24 +72,22 @@ export function Question({ quiz }) {
     <Card sx={{ minWidth: 275, margin: 5 }}>
       <CardContent>
 
-        <Typography sx={{ fontSize: 17 }} color="text.secondary" gutterBottom>
+        <div sx={{ fontSize: 17 }}>
           <div className="quiz_title_text">
             <Avatar sx={{ bgcolor: deepPurple[500] }}>{id}</Avatar>
-            <p style={{ paddingLeft: 15 }}>
+            <Typography style={{ paddingLeft: 15 }}>
               {instrucciondepregunta}
-            </p>
+            </Typography>
           </div>
-        </Typography>
-
-
-        <Typography variant="body2">
-          <Response resp={respuestas}/>
-        </Typography>
+        </div>
 
+        <div variant="body2">
+          <CheckboxesGroup quiz={respuestas}/>
+        </div>
       </CardContent>
 
       <CardActions>
-        <Button size="small">Learn More</Button>
+        <Button size="small">Siguiente Pregunta</Button>
       </CardActions>
 
     </Card>

src/Pages/Prueba.jsx

@@ -6,6 +6,7 @@ import toast, { Toaster } from 'react-hot-toast';
 import { useParams } from 'react-router-dom'
 import useAuth from '../Auth/useAuth.js';
 import { Cleaver } from './Pruebas/Cleaver';
+import { Header } from '../Components/Test/Cleaver/Header';
 
 export function Prueba() {
 
@@ -60,15 +61,18 @@ export function Prueba() {
   }
 
   return (
-    <div className="content-section">
+    <div  className="content-section">
       <div className="main">
         <Box >
+          <Paper>
+            <Header/>
+          </Paper>
           <Paper className="prueba_body" elevation={1}>
             <h1>{data?.nombre}</h1>
             <Divider />
             <Typography style={{ marginTop: 15, textAlign: 'center' }}>{data?.decription}</Typography>
             <Divider style={{ marginTop: 15 }} />
-            <Button onClick={CreateAssign}>Inicar Prueba</Button>
+            <Button  variant="contained" onClick={CreateAssign}>Inicar Prueba</Button>
           </Paper>
         </Box>
         <Toaster

src/Pages/Pruebas/Cleaver.jsx

@@ -1,9 +1,4 @@
 import React, { useMemo} from 'react'
-import {
-  Box, 
-  // Paper,
-  LinearProgress
-} from '@mui/material'
 
 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
@@ -15,55 +10,20 @@ export function Cleaver() {
   let auth = useAuth();
   let token = useMemo(() => auth.getToken(), [auth])
 
-  const [progress, setProgress] = React.useState(0);
   const [questions, setQuestions] = React.useState([]);
-  const [buffer, setBuffer] = React.useState(10);
-
-  const progressRef = React.useRef(() => {});
-
   React.useEffect(() => {
-
     let rest = new Service(`/prueba/findid/1`)
     rest.get(token.toString())
       .then(({data}) => { 
-        console.log("RESP: ", data)
-        setQuestions(data.questions)
+        setQuestions(data.questions.slice(0,3))
       })
       .catch( e => console.log("ERROR: ", e))
-
-    const timer = setInterval(() => {
-      progressRef.current();
-    }, 500);
-
-    return () => {
-      clearInterval(timer);
-    };
   }, [token]);
 
-
-  React.useEffect(() => {
-    progressRef.current = () => {
-      if (progress > 100) {
-        setProgress(0);
-        setBuffer(10);
-      } else {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setProgress(progress + diff);
-        setBuffer(progress + diff + diff2);
-      }
-    };
-  });
-
   return (
     <div className="content-section">
       <div className="main">
-        <Box sx={{ width: '100%' , magin : 5}}>
-          <LinearProgress style={{ margin : 5}} variant="buffer" value={progress} valueBuffer={buffer} />
-        </Box>
-        {
-        questions.map( e => (<Question key={e.id} quiz={e}/>) )
-      }
+        { questions.map( (e,i) => (<Question key={i} quiz={e}/>) ) }
       </div>
     </div>
   )

src/Utils/MenuItems.js

@@ -18,6 +18,11 @@ export const UserItems = [
         route : 'pruebas',
         title : 'Pruebas'
     },
+    {
+        icon : <Star/>,
+        route : 'prueba/:id',
+        title : 'Test Actual'
+    },
 ]