diff --git a/frontend/src/App.js b/frontend/src/App.js
index d42472f..365351b 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,18 +5,29 @@ import QuizPage from './components/QuizPage';
import ResultPage from './components/ResultPage';
import LeaderboardPage from './components/LeaderboardPage';
import QuizBuilder from './components/QuizBuilder';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#4D0DCF',
+ },
+ },
+});
function App() {
return (
-
-
- } />
- } />
- } />
- } />
- } />
-
-
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
);
}
diff --git a/frontend/src/MainLogo.svg b/frontend/src/MainLogo.svg
new file mode 100644
index 0000000..9826f06
--- /dev/null
+++ b/frontend/src/MainLogo.svg
@@ -0,0 +1,196 @@
+
diff --git a/frontend/src/QuizLogo.svg b/frontend/src/QuizLogo.svg
new file mode 100644
index 0000000..2fe3925
--- /dev/null
+++ b/frontend/src/QuizLogo.svg
@@ -0,0 +1,63 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/images/QuestionBg.png b/frontend/src/assets/images/QuestionBg.png
new file mode 100644
index 0000000..7f70668
Binary files /dev/null and b/frontend/src/assets/images/QuestionBg.png differ
diff --git a/frontend/src/assets/images/question-bg.png b/frontend/src/assets/images/question-bg.png
new file mode 100644
index 0000000..fd96ac3
Binary files /dev/null and b/frontend/src/assets/images/question-bg.png differ
diff --git a/frontend/src/components/MainLayout.js b/frontend/src/components/MainLayout.js
index e5c34a7..9954b18 100644
--- a/frontend/src/components/MainLayout.js
+++ b/frontend/src/components/MainLayout.js
@@ -1,20 +1,12 @@
import React from 'react';
-import { Typography, Container, Box } from '@mui/material';
+import { Container, Box } from '@mui/material';
+import MainLogo from '../../src/MainLogo.svg';
function MainLayout({ children }) {
return (
- 
+ 
{children}
-
-
- © 2023 My Website
-
-
);
}
diff --git a/frontend/src/components/QuizLayout.js b/frontend/src/components/QuizLayout.js
new file mode 100644
index 0000000..5e8aed2
--- /dev/null
+++ b/frontend/src/components/QuizLayout.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Container, Box } from '@mui/material';
+import QuizLogo from '../../src/QuizLogo.svg';
+
+function QuizLayout({ children }) {
+ return (
+
+ 
+ {children}
+
+ );
+}
+
+export default QuizLayout;
diff --git a/frontend/src/components/QuizPage.js b/frontend/src/components/QuizPage.js
index fac7d1b..75c8743 100644
--- a/frontend/src/components/QuizPage.js
+++ b/frontend/src/components/QuizPage.js
@@ -10,7 +10,10 @@ import {
CircularProgress,
Box,
LinearProgress,
+ Grid2 as Grid,
+ Alert,
} from '@mui/material';
+import MainLayout from './QuizLayout';
function QuizPage() {
const { state } = useLocation();
@@ -124,9 +127,7 @@ function QuizPage() {
const handleOptionChange = (e) => {
const selectedOption = e.target.value;
const timeTaken =
- quizData && quizData.EnableTimer
- ? quizData.TimerSeconds - timeLeft
- : 0;
+ quizData && quizData.EnableTimer ? quizData.TimerSeconds - timeLeft : 0;
setAnswers((prevAnswers) => ({
...prevAnswers,
@@ -163,79 +164,125 @@ function QuizPage() {
const isTimeUp = quizData.EnableTimer && timeLeft <= 0;
return (
-
-
- {quizData.Title}
-
-
- Question {currentQuestionIndex + 1} of {quizData.Questions.length}
-
-
- {quizData.EnableTimer && (
-
-
-
- Time Left: {timeLeft} seconds
+
+
+
+ Question {currentQuestionIndex + 1} / {quizData.Questions.length}
+
+
+
+
+ {currentQuestion.QuestionText}
-
- )}
+
-
- {currentQuestion.QuestionText}
-
-
- {currentQuestion.Options.map((option, idx) => (
- }
- label={option}
- disabled={isSubmitting || isTimeUp}
- />
- ))}
-
+ {quizData.EnableTimer && (
+
+
+
+ Time:
+
+
+
+ {timeLeft}
+
+
+
+ )}
+
+ {currentQuestion.Options.map((option, idx) => (
+ }
+ label={option}
+ disabled={isSubmitting || isTimeUp}
+ sx={{
+ borderRadius: '4px',
+ border: '1px solid #D9DADF',
+ background: '#EAEAF0',
+ width: '100%',
+ margin: '4px',
+ textAlign: 'left',
+ }}
+ />
+ ))}
+
- {currentQuestion.Trivia && (
-
- Trivia: {currentQuestion.Trivia}
-
- )}
+ {isSubmitting && (
+
+
+
+ Submitting your answers...
+
+
+ )}
- {isSubmitting && (
-
-
-
- Submitting your answers...
+ {!isSubmitting &&
+ quizData &&
+ currentQuestionIndex === quizData.Questions.length - 1 && (
+
+ )}
+
+ {currentQuestion.Trivia && (
+
+
+ Hint
-
- )}
-
- {!isSubmitting &&
- quizData &&
- currentQuestionIndex === quizData.Questions.length - 1 && (
-
- )}
-
+ {currentQuestion.Trivia}
+
+
+ )}
+
);
}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d5fccb0..a536f33 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -21,6 +21,14 @@ code {
display: block;
}
+.quiz-header-img {
+ width: 100%;
+ max-width: 140px;
+ height: 100%;
+ margin: 16px auto;
+ display: block;
+}
+
.main-quiz-container {
border-radius: var(--borderRadius, 4px);
background: var(--background-paper-elevation-2, #EAEAF0);
@@ -35,6 +43,21 @@ code {
gap: var(--3, 12px);
}
+.question-container {
+ border-radius: var(--borderRadius, 4px);
+ background-image: url('./assets/images/QuestionBg.png');
+ background-repeat:no-repeat;
+ background-size:contain;
+ background-position:center;
+ display: flex;
+ padding: 118px var(--5, 40px);
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ align-self: stretch;
+}
+
.button {
border-radius: var(--borderRadius, 4px);
border: var(--none, 1px) solid var(--primary-_states-outlinedBorder, rgba(77, 13, 207, 0.50));