Skip to content

Commit 8f5019a

Browse files
remotesynthremotesynth
committed
design updates
1 parent c5f3761 commit 8f5019a

File tree

9 files changed

+436
-90
lines changed

9 files changed

+436
-90
lines changed

‎frontend/src/App.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,29 @@ import QuizPage from './components/QuizPage';
55
import ResultPage from './components/ResultPage';
66
import LeaderboardPage from './components/LeaderboardPage';
77
import QuizBuilder from './components/QuizBuilder';
8+
import { ThemeProvider, createTheme } from '@mui/material/styles';
9+
10+
const theme = createTheme({
11+
palette: {
12+
primary: {
13+
main: '#4D0DCF',
14+
},
15+
},
16+
});
817

918
function App() {
1019
return (
11-
<Router>
12-
<Routes>
13-
<Route path="/" element={<HomePage />} />
14-
<Route path="/quiz" element={<QuizPage />} />
15-
<Route path="/result" element={<ResultPage />} />
16-
<Route path="/leaderboard" element={<LeaderboardPage />} />
17-
<Route path="/create-quiz" element={<QuizBuilder />} />
18-
</Routes>
19-
</Router>
20+
<ThemeProvider theme={theme}>
21+
<Router>
22+
<Routes>
23+
<Route path="/" element={<HomePage />} />
24+
<Route path="/quiz" element={<QuizPage />} />
25+
<Route path="/result" element={<ResultPage />} />
26+
<Route path="/leaderboard" element={<LeaderboardPage />} />
27+
<Route path="/create-quiz" element={<QuizBuilder />} />
28+
</Routes>
29+
</Router>
30+
</ThemeProvider>
2031
);
2132
}
2233

‎frontend/src/MainLogo.svg‎

Lines changed: 196 additions & 0 deletions
Loading

‎frontend/src/QuizLogo.svg‎

Lines changed: 63 additions & 0 deletions
Loading

‎frontend/src/assets/images/QuestionBg.png‎

123 KB
Loading

‎frontend/src/assets/images/question-bg.png‎

123 KB
Loading

‎frontend/src/components/MainLayout.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React from 'react';
2-
import { Typography, Container, Box } from '@mui/material';
2+
import { Container, Box } from '@mui/material';
3+
import MainLogo from '../../src/MainLogo.svg';
34

45
function MainLayout({ children }) {
56
return (
67
<Box>
7-
<img
8-
src="/Quiz-Show-Logo.png"
9-
alt="AWSome Quiz Show"
10-
className="main-header-img"
11-
/>
8+
<img src={MainLogo} alt="AWSome Quiz Show" className="main-header-img" />
129
<Container>{children}</Container>
13-
<Box component="footer" sx={{ p: 2, mt: 'auto', textAlign: 'center' }}>
14-
<Typography variant="body2" color="textSecondary">
15-
&copy; 2023 My Website
16-
</Typography>
17-
</Box>
1810
</Box>
1911
);
2012
}

‎frontend/src/components/QuizLayout.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { Container, Box } from '@mui/material';
3+
import QuizLogo from '../../src/QuizLogo.svg';
4+
5+
function QuizLayout({ children }) {
6+
return (
7+
<Box>
8+
<img src={QuizLogo} alt="" className="quiz-header-img" />
9+
<Container>{children}</Container>
10+
</Box>
11+
);
12+
}
13+
14+
export default QuizLayout;

‎frontend/src/components/QuizPage.js‎

Lines changed: 117 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
CircularProgress,
1111
Box,
1212
LinearProgress,
13+
Grid2 as Grid,
14+
Alert,
1315
} from '@mui/material';
16+
import MainLayout from './QuizLayout';
1417

1518
function QuizPage() {
1619
const { state } = useLocation();
@@ -124,9 +127,7 @@ function QuizPage() {
124127
const handleOptionChange = (e) => {
125128
const selectedOption = e.target.value;
126129
const timeTaken =
127-
quizData && quizData.EnableTimer
128-
? quizData.TimerSeconds - timeLeft
129-
: 0;
130+
quizData && quizData.EnableTimer ? quizData.TimerSeconds - timeLeft : 0;
130131

131132
setAnswers((prevAnswers) => ({
132133
...prevAnswers,
@@ -163,79 +164,125 @@ function QuizPage() {
163164
const isTimeUp = quizData.EnableTimer && timeLeft <= 0;
164165

165166
return (
166-
<Container maxWidth="md">
167-
<Typography variant="h4" gutterBottom>
168-
{quizData.Title}
169-
</Typography>
170-
<Typography variant="subtitle1" gutterBottom>
171-
Question {currentQuestionIndex + 1} of {quizData.Questions.length}
172-
</Typography>
173-
174-
{quizData.EnableTimer && (
175-
<Box sx={{ width: '100%', marginBottom: 2 }}>
176-
<LinearProgress
177-
variant="determinate"
178-
value={(timeLeft / quizData.TimerSeconds) * 100}
179-
sx={{ height: 10, borderRadius: 5 }}
180-
/>
181-
<Typography variant="body2" color="textSecondary">
182-
Time Left: {timeLeft} seconds
167+
<MainLayout>
168+
<Container maxWidth="sm" className="main-quiz-container">
169+
<Typography variant="h6" gutterBottom align="left" width={'100%'}>
170+
Question {currentQuestionIndex + 1} / {quizData.Questions.length}
171+
</Typography>
172+
173+
<Container maxWidth={'100%'} className="question-container">
174+
<Typography variant="h4" gutterBottom color="#EAEAF0" align="center">
175+
{currentQuestion.QuestionText}
183176
</Typography>
184-
</Box>
185-
)}
177+
</Container>
186178

187-
<Typography variant="h6" gutterBottom>
188-
{currentQuestion.QuestionText}
189-
</Typography>
190-
<RadioGroup
191-
name={`question-${currentQuestionIndex}`}
192-
value={answers[currentQuestionIndex]?.Answer || ''}
193-
onChange={handleOptionChange}
194-
>
195-
{currentQuestion.Options.map((option, idx) => (
196-
<FormControlLabel
197-
key={idx}
198-
value={option}
199-
control={<Radio />}
200-
label={option}
201-
disabled={isSubmitting || isTimeUp}
202-
/>
203-
))}
204-
</RadioGroup>
179+
{quizData.EnableTimer && (
180+
<Box sx={{ width: '100%', textAlign: 'center' }}>
181+
<Grid container spacing={2}>
182+
<Typography variant="body2" color="textSecondary" width={'8%'}>
183+
Time:
184+
</Typography>
185+
<LinearProgress
186+
variant="determinate"
187+
color="primary"
188+
value={(timeLeft / quizData.TimerSeconds) * 100}
189+
sx={{
190+
height: 5,
191+
borderRadius: 5,
192+
width: '78%',
193+
marginTop: '8px',
194+
}}
195+
/>
196+
<Typography variant="body2" color="textSecondary" width={'8%'}>
197+
{timeLeft}
198+
</Typography>
199+
</Grid>
200+
</Box>
201+
)}
202+
<RadioGroup
203+
name={`question-${currentQuestionIndex}`}
204+
value={answers[currentQuestionIndex]?.Answer || ''}
205+
onChange={handleOptionChange}
206+
sx={{ width: '100%' }}
207+
>
208+
{currentQuestion.Options.map((option, idx) => (
209+
<FormControlLabel
210+
key={idx}
211+
value={option}
212+
control={<Radio />}
213+
label={option}
214+
disabled={isSubmitting || isTimeUp}
215+
sx={{
216+
borderRadius: '4px',
217+
border: '1px solid #D9DADF',
218+
background: '#EAEAF0',
219+
width: '100%',
220+
margin: '4px',
221+
textAlign: 'left',
222+
}}
223+
/>
224+
))}
225+
</RadioGroup>
205226

206-
{currentQuestion.Trivia && (
207-
<Typography variant="body2" color="textSecondary" sx={{ marginTop: 2 }}>
208-
Trivia: {currentQuestion.Trivia}
209-
</Typography>
210-
)}
227+
{isSubmitting && (
228+
<Box sx={{ textAlign: 'center', marginTop: 4 }}>
229+
<CircularProgress />
230+
<Typography variant="h6" sx={{ marginTop: 2 }}>
231+
Submitting your answers...
232+
</Typography>
233+
</Box>
234+
)}
211235

212-
{isSubmitting && (
213-
<Box sx={{ textAlign: 'center', marginTop: 4 }}>
214-
<CircularProgress />
215-
<Typography variant="h6" sx={{ marginTop: 2 }}>
216-
Submitting your answers...
236+
{!isSubmitting &&
237+
quizData &&
238+
currentQuestionIndex === quizData.Questions.length - 1 && (
239+
<Button
240+
variant="contained"
241+
color="primary"
242+
onClick={handleSubmit}
243+
disabled={
244+
Object.keys(answers).length !== quizData.Questions.length ||
245+
isSubmitting ||
246+
isTimeUp
247+
}
248+
sx={{ marginTop: 4 }}
249+
>
250+
Submit Quiz
251+
</Button>
252+
)}
253+
</Container>
254+
{currentQuestion.Trivia && (
255+
<Alert
256+
severity="info"
257+
sx={{
258+
marginTop: 4,
259+
textAlign: 'center',
260+
backgroundColor: '#E6EAFF',
261+
width: 320,
262+
marginLeft: 'auto',
263+
marginRight: 'auto',
264+
borderRadius: '4px',
265+
}}
266+
>
267+
<Typography
268+
variant="h5"
269+
color="textSecondary"
270+
align="left"
271+
sx={{ marginTop: 2 }}
272+
>
273+
Hint
217274
</Typography>
218-
</Box>
219-
)}
220-
221-
{!isSubmitting &&
222-
quizData &&
223-
currentQuestionIndex === quizData.Questions.length - 1 && (
224-
<Button
225-
variant="contained"
226-
color="primary"
227-
onClick={handleSubmit}
228-
disabled={
229-
Object.keys(answers).length !== quizData.Questions.length ||
230-
isSubmitting ||
231-
isTimeUp
232-
}
233-
sx={{ marginTop: 4 }}
275+
<Typography
276+
variant="body2"
277+
align="left"
278+
color="textSecondary"
279+
sx={{ marginTop: 2 }}
234280
>
235-
Submit Quiz
236-
</Button>
237-
)}
238-
</Container>
281+
{currentQuestion.Trivia}
282+
</Typography>
283+
</Alert>
284+
)}
285+
</MainLayout>
239286
);
240287
}
241288

‎frontend/src/index.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ code {
2121
display: block;
2222
}
2323

24+
.quiz-header-img {
25+
width: 100%;
26+
max-width: 140px;
27+
height: 100%;
28+
margin: 16px auto;
29+
display: block;
30+
}
31+
2432
.main-quiz-container {
2533
border-radius: var(--borderRadius, 4px);
2634
background: var(--background-paper-elevation-2, #EAEAF0);
@@ -35,6 +43,21 @@ code {
3543
gap: var(--3, 12px);
3644
}
3745

46+
.question-container {
47+
border-radius: var(--borderRadius, 4px);
48+
background-image: url('./assets/images/QuestionBg.png');
49+
background-repeat:no-repeat;
50+
background-size:contain;
51+
background-position:center;
52+
display: flex;
53+
padding: 118px var(--5, 40px);
54+
flex-direction: column;
55+
justify-content: center;
56+
align-items: center;
57+
gap: 10px;
58+
align-self: stretch;
59+
}
60+
3861
.button {
3962
border-radius: var(--borderRadius, 4px);
4063
border: var(--none, 1px) solid var(--primary-_states-outlinedBorder, rgba(77, 13, 207, 0.50));

0 commit comments

Comments
 (0)