-
Question: {question.questionText}
+
+
+
Marvel movie-Quiz
+
Question:
+
+ {question.questionText}
+
+
+ {question.options.map((singleOption, index) => (
+
+ ))}
+
+
+
+
+
+
- )
+ );
}
+
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 00000000..7e8f1218
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Footer = () => {
+ return (
+
+ );
+};
+
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 00000000..5a18ed9d
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,53 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable prefer-const */
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/jsx-closing-bracket-location */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from 'react';
+import styled from 'styled-components';
+
+import { useSelector } from 'react-redux';
+
+export const ProgressBar = () => {
+ const currentQuestion = useSelector(
+ (state) => state.quiz.currentQuestionIndex
+ );
+ const totalQuestions = useSelector(
+ (state) => state.quiz.questions.length
+ );
+
+ const percent = (currentQuestion / (totalQuestions - 1)) * 100;
+
+ const StyledContainer = styled.div`
+
+
+ `;
+ const StyledBar = styled.div`
+ display: flex;
+ height: 100%;
+ width: 50px;
+ background-color: transparent;
+ border-radius: 50px;
+ font-weight: bold;
+ color: black;
+ `;
+
+ const PaddedP = styled.p`
+ padding-left: 12px;
+ `;
+
+ return (
+
+
+
+ {currentQuestion + 1}/{totalQuestions}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js
new file mode 100644
index 00000000..d0adffd7
--- /dev/null
+++ b/src/components/QuizSummary.js
@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Button } from 'react-bootstrap';
+import { quiz } from '../reducers/quiz';
+
+export const QuizSummary = () => {
+ const questions = useSelector((state) => state.quiz.questions);
+ const answers = useSelector((state) => state.quiz.answers);
+ const dispatch = useDispatch();
+
+ const restartQuiz = () => {
+ dispatch(quiz.actions.restart())
+ }
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+
+ if (!questions || !answers) {
+ return null;
+ }
+
+ const correctAnswers = answers.reduce((total, answer) => {
+ if (answer.isCorrect) {
+ return total + 1;
+ }
+ return total;
+ }, 0);
+
+ return (
+
+
Quiz Summary
+
+
+
Total Correct Answers: {correctAnswers}
+
Percentage: {Math.round((correctAnswers / questions.length) * 100)}%
+
Total Questions: {questions.length}
+
+
Questions and Answers
+ {answers.map((answer) => (
+
+
{answer.question.questionText}
+
Your answer: {answer.answer ? answer.answer : 'Not answered'}
+
Correct answer: {answer.question.options[answer.question.correctAnswerIndex]}
+
+ ))}
+
+ );
+};
diff --git a/src/index.css b/src/index.css
index 4a1df4db..aff6243e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,102 @@
+@font-face {
+ font-family: 'cc-deadline-variable';
+ src: url('https://fonts.googleapis.com/css2?family=Chivo+Mono&family=Dancing+Script&family=Inter:wght@200&family=Mynerve&display=swap" rel="stylesheet');
+
+ font-style: normal;
+}
+
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+ height: 100%;
+ font-family: 'Chivo Mono', monospace;
+ font-variation-settings: 'wdth' 50, 'slnt' 0;
+ font-size: 16px;
+ line-height: 1.5;
+ font-weight: normal;
+ color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: beige;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: 'Chivo Mono', sans-serif;
+}
+
+.quiz-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 300px;
+ margin-top: 20px;
+ background-color: rgb(204, 230, 221);
+}
+
+.question-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 0 10px 0 10px;
+ margin: 0;
+
}
+
+.next-button {
+ color: rgb(35, 38, 38);
+ background-color: rgb(145, 203, 166);
+ padding: 15px;
+ cursor: pointer;
+}
+
+.next-button:hover {
+ transform: scale(1.1);
+ background-color:beige;
+}
+
+
+.selected {
+ color: blue;
+ background-color: rgb(168, 226, 226);
+ cursor: pointer;
+}
+
+.background {
+ background-color: beige;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+
+}
+
+button {
+ cursor: pointer;
+ border-radius: 0px;
+ padding: 10px;
+}
+
+button:hover {
+ transform: scale(1.1);
+ background-color: rgb(208, 235, 167);
+}
+
+.options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1vh;
+ margin: 10px;
+}
+
+.summary-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 20px;
+ background-color: beige;
+
+}
\ No newline at end of file
diff --git a/src/reducers/quiz.js b/src/reducers/quiz.js
index a38bbf68..4ba4f186 100644
--- a/src/reducers/quiz.js
+++ b/src/reducers/quiz.js
@@ -2,8 +2,30 @@ import { createSlice } from '@reduxjs/toolkit'
// Change these to your own questions!
const questions = [
- { id: 1, questionText: 'Who set the Olympic record for the 100m dash in 2012?', options: ['Usain Bolt', 'Justin Gatlin', 'Tyson Gay', 'Asafa Powell'], correctAnswerIndex: 0 },
- { id: 2, questionText: 'When was Michael Phelps last named male World Swimmer of the Year?', options: ['2012', '2014', '2016', '2018'], correctAnswerIndex: 2 }
+ { id: 1,
+ questionText: 'Which actor played the role of Iron Man in the Marvel Cinematic Universe?',
+ options: ['Robert Downey Jr.', 'Chris Evans', 'Mark Ruffalo', 'Chris Hemsworth'],
+ correctAnswerIndex: 0 },
+ { id: 2,
+ questionText: 'What is the name of the fictional metal used to make Cap Americas shield?',
+ options: ['Adamantium', 'Vibranium', 'Promethium', 'Unobtanium'],
+ correctAnswerIndex: 1 },
+ { id: 3,
+ questionText: 'Who played the role of Black Widow in the Marvel Cinematic Universe?',
+ options: ['Scarlett Johansson', 'Emma Stone', 'Jennifer Lawrence', 'Anne Hathaway'],
+ correctAnswerIndex: 0 },
+ { id: 4,
+ questionText: 'Which Infinity Stone does the Tesseract contain?',
+ options: ['Power Stone', 'Time stone', 'Space stone', 'Mind stone'],
+ correctAnswerIndex: 2 },
+ { id: 5,
+ questionText: 'Who is Zeus played by in Thor: Love and Thunder?',
+ options: ['Brad Pitt', 'Joaquin Phoenix', 'Matt Damon', 'Russel Crowe'],
+ correctAnswerIndex: 3 },
+ { id: 6,
+ questionText: 'Which character from Guardians of the Galaxy was born on Earth?',
+ options: ['Gamora', 'Drax', 'Rocket', 'Peter Quill'],
+ correctAnswerIndex: 3 }
]
const initialState = {
@@ -77,8 +99,8 @@ export const quiz = createSlice({
* This action does not require a payload.
*/
restart: () => {
- return initialState
+ return initialState;
}
}
-})
+});