Skip to content

Commit

Permalink
Merge pull request #3 from sky-ash/codespace
Browse files Browse the repository at this point in the history 
Codespace
  • Loading branch information
@sky-ash
sky-ash authored Oct 30, 2024
2 parents f5c1901 + 7623721 commit 21283dc
Show file tree
Hide file tree
Showing 11 changed files with 243 additions and 140 deletions.
4 changes: 4 additions & 0 deletions .devcontainer/devcontainer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,22 @@
"postAttachCommand": {
"server": "npm start"
},
/*
"customizations": {
"codespaces": {
"openFiles": [
"src/App.jsx"
]
}
},
*/
/*
"portsAttributes": {
"3000": {
"label": "Application",
"onAutoForward": "openPreview"
}
},
*/
"forwardPorts": [3000]
}
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 6 additions & 10 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Start from './pages/Start';
import Path from './pages/Path';
import Lecture from './pages/Lecture';
import Settings from './pages/Settings';
import Navigation from './components/Navigation';
import { lightTheme, darkTheme } from './theme';

export default function App() {
Expand All @@ -24,15 +23,12 @@ export default function App() {
<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
<CssBaseline />
<Router basename="/heatpath">
<Container maxWidth="sm" style={{ marginTop: '2rem', paddingBottom: '4rem' }}>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/path" element={<Path />} />
<Route path="/lecture/:id" element={<Lecture />} />
<Route path="/settings" element={<Settings darkMode={darkMode} setDarkMode={setDarkMode} />} />
</Routes>
</Container>
<Navigation />
<Routes>
<Route path="/" element={<Start />} />
<Route path="/path" element={<Path />} />
<Route path="/lecture/:id" element={<Lecture />} />
<Route path="/settings" element={<Settings darkMode={darkMode} setDarkMode={setDarkMode} />} />
</Routes>
</Router>
</ThemeProvider>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import CancelIcon from '@mui/icons-material/Cancel';

export default function Card({ card, nextCard, prevCard, onCardCompletion, currentCardIndex, unlockedCards, totalCards }) {

const [answers, setAnswers] = useState([]);
const [answers, setAnswers] = useState([]);
const [correctness, setCorrectness] = useState([]);

useEffect(() => {
Expand Down Expand Up @@ -85,7 +85,7 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
Fill out the following words in the empty fields: {card.words.join(', ')}
</Typography>

<Box mt={2} display="flex" justifyContent="space-between">
<Box display="flex" justifyContent="space-between" alignItems="center">
<Button
variant="contained"
color="secondary"
Expand Down
78 changes: 51 additions & 27 deletions src/components/Navigation.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,67 @@
// src/components/Navigation.jsx

import React from 'react';
import { Box, Button, IconButton } from '@mui/material';
import { Box, Fab, Button, IconButton, AppBar, Toolbar } from '@mui/material';
import { useLocation, Link } from 'react-router-dom';
import SettingsIcon from '@mui/icons-material/Settings';
import HomeIcon from '@mui/icons-material/Home';
import AppsIcon from '@mui/icons-material/Apps';

export default function Navigation() {

/*
const location = useLocation();
if (location.pathname === '/') {
return null; // Do not render the footer on the home page
}
*/

/*
const StyledFab = styled(Fab)({
position: 'absolute',
zIndex: 1,
top: -30,
left: 0,
right: 0,
margin: '0 auto',
});
*/

return (
<Box
position="fixed"
bottom={0}
left={0}
right={0}
bgcolor="background.paper"
p={2}
display="flex"
justifyContent="space-between"
boxShadow={3}
>
<Link to="/" style={{ textDecoration: 'none' }}>
<Button variant="contained" color="primary">
Home
</Button>
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0,
}}>

<Link to="/path">
<Fab color="primary"
sx={{ position: 'absolute', zIndex: 1,
margin: '0 auto', top: -20,
left: 0, right: 0, }}>
<AppsIcon />
</Fab>
</Link>
<Link to="/path" style={{ textDecoration: 'none' }}>
<Button variant="contained" color="primary">
Path
</Button>
</Link>
<Link to="/settings" style={{ textDecoration: 'none' }}>
<IconButton color="primary">
<SettingsIcon />
</IconButton>
</Link>
</Box>

<Toolbar>

<Link to="/" sx={{alignItems: 'flex-start'}}>
<IconButton color="primary">
<HomeIcon />
</IconButton>
</Link>

<Box sx={{flexGrow: 1}} />

<Link to="/settings" sx={{alignItems: 'flex-end'}}>
<IconButton color="primary">
<SettingsIcon />
</IconButton>
</Link>

</Toolbar>

</AppBar>
);
}
152 changes: 90 additions & 62 deletions src/components/Quiz.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Typography, Button, Box, Radio, RadioGroup, FormControlLabel, FormContr
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
import { useNavigate } from 'react-router-dom';
import { Replay, TurnLeft } from '@mui/icons-material';
import { right, bottom, left, top, position, display } from '@mui/system';

export default function Quiz({ quiz, lectureId, handleReviewCards }) {
const [selectedAnswers, setSelectedAnswers] = useState(Array(quiz.length).fill(null));
Expand Down Expand Up @@ -55,70 +57,96 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
};

return (
<Box className="container">
{!showResult ? (
<>
<Typography variant="h6" gutterBottom>
{quiz[currentQuestion].question}
</Typography>
<FormControl component="fieldset">
<RadioGroup value={selectedAnswers[currentQuestion] || ''} onChange={handleAnswerSelect}>
{quiz[currentQuestion].options.map((option, i) => (
<FormControlLabel
key={i}
value={option}
control={<Radio />}
label={option}
/>
))}
</RadioGroup>
</FormControl>
<Box mt={2}>
<Button variant="contained" color="primary" onClick={handleNextQuestion}>
{currentQuestion < quiz.length - 1 ? 'Next' : 'Submit Quiz'}
</Button>
</Box>
</>
) : (
<Box>
<Typography variant="h5" gutterBottom>
Your Score: {score}%
</Typography>
<Box mt={2}>
{quiz.map((q, index) => (
<Box key={index} display="flex" alignItems="center">
<Typography variant="body1">
{q.question}: {selectedAnswers[index]}
</Typography>
{selectedAnswers[index] === q.correctAnswer ? (
<CheckCircleIcon style={{ color: 'green', marginLeft: '0.5rem' }} />
) : (
<CancelIcon style={{ color: 'red', marginLeft: '0.5rem' }} />
)}
</Box>
<Box>
{!showResult ? (
<>
<Typography variant="h6" gutterBottom>

{quiz[currentQuestion].question}

</Typography>

<FormControl component="fieldset">
<RadioGroup value={selectedAnswers[currentQuestion] || ''} onChange={handleAnswerSelect}>

{quiz[currentQuestion].options.map((option, i) => (
<FormControlLabel
key={i}
value={option}
control={<Radio />}
label={option}
/>
))}
</Box>
{score >= 80 ? (
<>
<Typography variant="h6" color="primary" gutterBottom>
Congratulations! You passed the quiz.
</Typography>
<Button variant="contained" color="secondary" onClick={handleReturnToPath} style={{ marginLeft: '1rem' }}>
Return to Path
</Button>
</>
) : (
<>
<Typography variant="h6" color="error" gutterBottom>
Unfortunately, you didn't pass. Please try again.

</RadioGroup>
</FormControl>

<Box p='16px' sx={{ position: 'fixed', bottom: 0, right: 0, marginBottom: '4rem'}}>
<Button variant="contained" p={2}
color="primary"
onClick={handleNextQuestion}>

{currentQuestion < quiz.length - 1 ? 'Next' : 'Submit Quiz'}

</Button>
</Box>
</>
) : (
<Box>
<Typography variant="h5" gutterBottom>
Your Score: {score}%
</Typography>

{score >= 80 ? (
<Typography variant="h6" color="primary" gutterBottom>
Congratulations! You passed the quiz.
</Typography>
) : (
<Typography variant="h6" color="error" gutterBottom>
Unfortunately, you didn't pass. Please try again.
</Typography>
)}

<Box mt={2} className="card" p={2} boxShadow={3} borderRadius={2} bgcolor="background.paper">
{quiz.map((q, index) => (

<Box key={index}
display="flex"
alignItems="center"
sx={{marginBottom: '1rem', marginTop: '1rem' }}>

{selectedAnswers[index] === q.correctAnswer ? (
<CheckCircleIcon style={{ color: 'green', marginLeft: '1rem', marginRight: '1.5rem' }} />
) : (
<CancelIcon style={{ color: 'red', marginLeft: '1rem', marginRight: '1.5rem' }} />
)}

<Typography variant="body1">
{q.question}: {selectedAnswers[index]}
</Typography>
<Button variant="contained" color="primary" onClick={handleReviewCards}>
Review Cards
</Button>
</>
)}

</Box>
))}
</Box>
)}
</Box>

{score >= 80 ? (
<Button variant="contained"
color="primary"
onClick={handleReturnToPath}
endIcon={<TurnLeft />}>
Return to Path
</Button>
) : (
<Button variant="contained"
color="primary"
onClick={handleReviewCards}
endIcon={<Replay />}>
Review Cards
</Button>
)}

</Box>
)}
</Box>
);
}
Loading

0 comments on commit 21283dc

Please sign in to comment.