From bd103584e36c38ef58752402271a2553601ce44e Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Wed, 12 Apr 2023 23:13:58 +0200 Subject: [PATCH 01/24] first in --- README.md | 14 ++++++++++++-- public/index.html | 2 +- src/components/CurrentQuestion.js | 32 +++++++++++++++++++++++++++++-- src/components/Main.js | 0 src/components/Summary.js | 14 ++++++++++++++ src/reducers/quiz.js | 30 +++++++++++++++++++++++++---- 6 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 src/components/Main.js create mode 100644 src/components/Summary.js diff --git a/README.md b/README.md index d1f22b80..d6ee60c3 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,18 @@ # Redux quiz group project -Replace this readme with your own information about your project. +This week, the task is to build a quiz game using Redux. It's a multiple-choice quiz, so you'll need to define your own questions and a bunch of possible answers to present to your users. +✓ Your quiz should have at least 5 questions. +✓ When the user selects an answer, it should show if they were correct or not. +✓ While going through the quiz, it should show which question you're on, or how many are left - for example 'Question 5 / 15' or '10 questions left'. +✓ When the user has answered all the questions, they should get to a summary screen that tells them how many they got correct or incorrect. +✓ You should challenge yourself to make use of redux by making small components that interact with the store - don't just go for one big component. +✓ Don't forget CSS! Your quiz should be well-styled. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +You start setting up your Redux store, which will hold the state of your quiz game. You can create separate reducers for each aspect of the game, such as the current question, the user's score, and whether or not the user has answered each question correctly. + +Then, you can start building your components. Make sure to keep them small and reusable, so that they can interact with the store and update the game state as needed. + +You should also create a CSS stylesheet to style your quiz game. Make it visually appealing and user-friendly, with clear buttons and indicators for the user's progress through the quiz. ## The problem diff --git a/public/index.html b/public/index.html index e6730aa6..30a3d356 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + Ninas Marvel Quiz App diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 36ee2224..19e5e5a8 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -1,16 +1,44 @@ -import React from 'react' -import { useSelector } from 'react-redux' +import React, { useEffect, useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { quiz } from 'reducers/quiz'; export const CurrentQuestion = () => { const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]) + const [selectedOption, setSelectedOption] = useState(null); + const isQuizOver = useSelector((store) => store.quiz.quizOver); + useEffect(() => { + console.log('from CurrentQuestion isQuizOver', isQuizOver); + }); + const dispatch = useDispatch(); if (!question) { return

Oh no! I could not find the current question!

} + const onButtonClick = () => { + dispatch(quiz.actions.goToNextQuestion()) + dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: selectedOption })) + setSelectedOption(null); + } return (
+

Question: {question.questionText}

+
) } diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Summary.js b/src/components/Summary.js new file mode 100644 index 00000000..986528b1 --- /dev/null +++ b/src/components/Summary.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; + +const Summary = () => { + const question = useSelector((store) => store.quiz.questions[store.quiz.currentQuestionIndex]) + return ( + <> +

I am the Summary

+

{question.questionText}

+ + ) +} + +export default Summary; \ No newline at end of file diff --git a/src/reducers/quiz.js b/src/reducers/quiz.js index a38bbf68..15c9aa80 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 Captain 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; } } -}) +}); From 9144fb0ed826eefd73c563a34059bfc94438296f Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:59:44 +0200 Subject: [PATCH 02/24] many changes --- src/App.js | 6 ++-- src/components/CurrentQuestion.js | 53 +++++++++++++++++-------------- src/components/Main.js | 0 src/components/QuizSummary.js | 23 ++++++++++++++ src/components/Summary.js | 14 -------- src/index.css | 13 ++++++++ 6 files changed, 69 insertions(+), 40 deletions(-) delete mode 100644 src/components/Main.js create mode 100644 src/components/QuizSummary.js delete mode 100644 src/components/Summary.js diff --git a/src/App.js b/src/App.js index 690bd373..75e12079 100644 --- a/src/App.js +++ b/src/App.js @@ -2,8 +2,8 @@ import React from 'react'; import { Provider } from 'react-redux'; import { combineReducers, configureStore } from '@reduxjs/toolkit'; import { quiz } from 'reducers/quiz'; - import { CurrentQuestion } from 'components/CurrentQuestion'; +// import { QuizSummary } from 'components/QuizSummary'; const reducer = combineReducers({ quiz: quiz.reducer @@ -14,7 +14,9 @@ const store = configureStore({ reducer }); export const App = () => { return ( - +
+ +
); } diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 19e5e5a8..ea5419b2 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -1,44 +1,49 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { quiz } from 'reducers/quiz'; +import '../index.css'; +// import { QuizSummary } from './QuizSummary'; export const CurrentQuestion = () => { const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]) const [selectedOption, setSelectedOption] = useState(null); - const isQuizOver = useSelector((store) => store.quiz.quizOver); + const isQuizOver = useSelector((state) => state.quiz.quizOver); + const dispatch = useDispatch(); + useEffect(() => { - console.log('from CurrentQuestion isQuizOver', isQuizOver); - }); + setSelectedOption(null); + }, [question, isQuizOver]); - const dispatch = useDispatch(); - if (!question) { - return

Oh no! I could not find the current question!

- } const onButtonClick = () => { dispatch(quiz.actions.goToNextQuestion()) dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: selectedOption })) setSelectedOption(null); } + const onAnswerSelect = (index) => { + dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: index })) + setSelectedOption(index); + } + + if (!question) { + return

Oh no! I could not find the current question!

+ } + return (
-

Question: {question.questionText}

- + {question.options.map((singleOption, index) => ( + + ))} +
+ +
- ) + ); } + diff --git a/src/components/Main.js b/src/components/Main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js new file mode 100644 index 00000000..0d0cdae7 --- /dev/null +++ b/src/components/QuizSummary.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; + +export const QuizSummary = () => { + const questions = useSelector((state) => state.quiz.questions); + const answers = useSelector((state) => state.quiz.answers); + + if (!questions || !answers) { + return null; + } + + return ( +
+ {questions.map((question) => ( +
+

{question.questionText}

+

Selected answer: {answers[question.id]}

+

Correct answer: {question.options[question.correctAnswerIndex]}

+
+ ))} +
+ ); +} diff --git a/src/components/Summary.js b/src/components/Summary.js deleted file mode 100644 index 986528b1..00000000 --- a/src/components/Summary.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; - -const Summary = () => { - const question = useSelector((store) => store.quiz.questions[store.quiz.currentQuestionIndex]) - return ( - <> -

I am the Summary

-

{question.questionText}

- - ) -} - -export default Summary; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4a1df4db..7f7dfb82 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,16 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.next-button { + color: rgb(35, 38, 38); + background-color: rgb(76, 193, 193); + border-radius: 10px; + padding: 20px; + cursor: pointer; +} + +.selected { + color: blue; + background-color: aqua; +} \ No newline at end of file From c288a0524d63027e9f3bfbefd4d30cd8cec6f6dd Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Thu, 13 Apr 2023 22:13:21 +0200 Subject: [PATCH 03/24] some css --- src/App.js | 1 + src/components/CurrentQuestion.js | 27 ++++++++++++-------- src/index.css | 42 ++++++++++++++++++++++++++++--- 3 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 75e12079..fbf408fb 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { Provider } from 'react-redux'; import { combineReducers, configureStore } from '@reduxjs/toolkit'; import { quiz } from 'reducers/quiz'; import { CurrentQuestion } from 'components/CurrentQuestion'; + // import { QuizSummary } from 'components/QuizSummary'; const reducer = combineReducers({ diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index ea5419b2..1062213b 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -8,6 +8,7 @@ export const CurrentQuestion = () => { const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]) const [selectedOption, setSelectedOption] = useState(null); const isQuizOver = useSelector((state) => state.quiz.quizOver); + const dispatch = useDispatch(); useEffect(() => { @@ -16,7 +17,10 @@ export const CurrentQuestion = () => { const onButtonClick = () => { dispatch(quiz.actions.goToNextQuestion()) - dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: selectedOption })) + dispatch(quiz.actions.submitAnswer({ + questionId: question.id, + answerIndex: selectedOption + })) setSelectedOption(null); } @@ -30,16 +34,19 @@ export const CurrentQuestion = () => { } return ( -
+
+

Marvel movie-Quiz

Question: {question.questionText}

- {question.options.map((singleOption, index) => ( - - ))} +
+ {question.options.map((singleOption, index) => ( + + ))} +
diff --git a/src/index.css b/src/index.css index 7f7dfb82..eeb302ad 100644 --- a/src/index.css +++ b/src/index.css @@ -12,15 +12,51 @@ code { monospace; } +.question-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + height: 100vh; + gap: 5vh; +} + .next-button { color: rgb(35, 38, 38); - background-color: rgb(76, 193, 193); + background-color: rgb(145, 203, 166); border-radius: 10px; - padding: 20px; + padding: 15px; cursor: pointer; } .selected { color: blue; - background-color: aqua; + 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: 10px; + padding: 10px; +} + +.options { + display: flex; + gap: 2vh; +} + +.h1 { + padding: 0; + } \ No newline at end of file From 6fa392d74516c53cd7739ca63b1c38260f269d69 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Thu, 13 Apr 2023 22:20:41 +0200 Subject: [PATCH 04/24] fixed disabled problem --- src/components/CurrentQuestion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 1062213b..98b290dc 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -48,7 +48,7 @@ export const CurrentQuestion = () => { ))}
- +
); From 8458abcf6a7df183a607b32dc4e10b0bc846bdb7 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Thu, 13 Apr 2023 23:00:36 +0200 Subject: [PATCH 05/24] fixed summary almost --- src/App.js | 2 -- src/components/CurrentQuestion.js | 6 +++++- src/components/QuizSummary.js | 19 +++++++++++++++---- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index fbf408fb..a74b8be4 100644 --- a/src/App.js +++ b/src/App.js @@ -4,8 +4,6 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit'; import { quiz } from 'reducers/quiz'; import { CurrentQuestion } from 'components/CurrentQuestion'; -// import { QuizSummary } from 'components/QuizSummary'; - const reducer = combineReducers({ quiz: quiz.reducer }); diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 98b290dc..2a965f18 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { quiz } from 'reducers/quiz'; import '../index.css'; -// import { QuizSummary } from './QuizSummary'; +import { QuizSummary } from './QuizSummary'; export const CurrentQuestion = () => { const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]) @@ -33,6 +33,10 @@ export const CurrentQuestion = () => { return

Oh no! I could not find the current question!

} + if (isQuizOver) { + return ; + } + return (

Marvel movie-Quiz

diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js index 0d0cdae7..b23fe4b5 100644 --- a/src/components/QuizSummary.js +++ b/src/components/QuizSummary.js @@ -9,15 +9,26 @@ export const QuizSummary = () => { return null; } + const correctAnswers = questions.reduce((total, question) => { + if (answers[question.id] === question.correctAnswerIndex) { + return total + 1; + } + return total; + }, 0); + return (
+

Quiz Summary

{questions.map((question) => ( -
-

{question.questionText}

-

Selected answer: {answers[question.id]}

+
+

{question.questionText}

+

Selected answer: {answers[question.id] !== undefined ? question.options[answers[question.id]] : 'Not answered'}

Correct answer: {question.options[question.correctAnswerIndex]}

))} +

Total Correct Answers: {correctAnswers}

+

Total Questions: {questions.length}

+

Percentage: {Math.round((correctAnswers / questions.length) * 100)}%

); -} +}; From fa434d4295022b07e7130220cacfcbc455ad49c9 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Fri, 14 Apr 2023 15:30:59 +0200 Subject: [PATCH 06/24] fixed summary answers plus added progressbar that doesnt work yet --- package-lock.json | 202 ++++++++++++++++++++++++++++-- package.json | 3 +- src/components/CurrentQuestion.js | 9 +- src/components/ProgressBar.js | 55 ++++++++ src/components/QuizSummary.js | 14 +-- src/index.css | 1 + src/reducers/quiz.js | 10 +- 7 files changed, 268 insertions(+), 26 deletions(-) create mode 100644 src/components/ProgressBar.js diff --git a/package-lock.json b/package-lock.json index 8bd1eecb..47d73268 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.2", - "react-scripts": "^5.0.1" + "react-scripts": "^5.0.1", + "styled-components": "^5.3.9" }, "devDependencies": { "react-scripts": "5.0.1" @@ -132,7 +133,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -2156,6 +2156,29 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -4927,6 +4950,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", + "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5264,6 +5307,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5751,6 +5802,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz", @@ -5959,6 +6018,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -11767,8 +11836,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -14012,8 +14080,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -15342,6 +15409,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15751,6 +15823,35 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -17604,7 +17705,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -18936,6 +19036,29 @@ "dev": true, "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -21020,6 +21143,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.2" } }, + "babel-plugin-styled-components": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", + "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -21288,6 +21428,11 @@ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", "dev": true }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -21660,6 +21805,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz", @@ -21790,6 +21940,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -26075,8 +26235,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.debounce": { "version": "4.0.8", @@ -27550,8 +27709,7 @@ "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "prelude-ls": { "version": "1.2.1", @@ -28546,6 +28704,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -28860,6 +29023,23 @@ "dev": true, "requires": {} }, + "styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", diff --git a/package.json b/package.json index 58da74eb..b93b1f05 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.2", - "react-scripts": "^5.0.1" + "react-scripts": "^5.0.1", + "styled-components": "^5.3.9" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 2a965f18..052a0b16 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { quiz } from 'reducers/quiz'; import '../index.css'; +import { ProgressBar } from './ProgressBar'; import { QuizSummary } from './QuizSummary'; export const CurrentQuestion = () => { @@ -25,7 +26,7 @@ export const CurrentQuestion = () => { } const onAnswerSelect = (index) => { - dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: index })) + // dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: index })) setSelectedOption(index); } @@ -39,8 +40,12 @@ export const CurrentQuestion = () => { return (
+

Marvel movie-Quiz

-

Question: {question.questionText}

+

Question: +
+ {question.questionText} +

{question.options.map((singleOption, index) => (
+
); } diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index cd9c513a..a280f4d7 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -28,12 +28,12 @@ export const ProgressBar = () => { display: flex; height: 100%; width: ${percent}%; - background-color: #fad040; + background-color: lightgreen; border-radius: 10px 0 0 10px; align-items: center; font-family: 'Roboto'; font-weight: bold; - color: #0078be; + color: black; `; const PaddedP = styled.p` diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js index 4fe77a9a..d063b09e 100644 --- a/src/components/QuizSummary.js +++ b/src/components/QuizSummary.js @@ -4,12 +4,13 @@ import { useSelector } from 'react-redux'; export const QuizSummary = () => { const questions = useSelector((state) => state.quiz.questions); const answers = useSelector((state) => state.quiz.answers); - + console.log('questions:', questions); + console.log('answers:', answers); if (!questions || !answers) { return null; } - const correctAnswers = questions.reduce((total, answer) => { + const correctAnswers = answers.reduce((total, answer) => { if (answer.isCorrect) { return total + 1; } @@ -19,16 +20,19 @@ export const QuizSummary = () => { 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}

-

Selected answer: {answer.answer ? answer.answer : 'Not answered'}

+
+

{answer.question.questionText}

+

Your answer: {answer.answer ? answer.answer : 'Not answered'}

Correct answer: {answer.question.options[answer.question.correctAnswerIndex]}

))} -

Total Correct Answers: {correctAnswers}

-

Total Questions: {questions.length}

-

Percentage: {Math.round((correctAnswers / questions.length) * 100)}%

); }; diff --git a/src/index.css b/src/index.css index edeb2f34..fc9406d5 100644 --- a/src/index.css +++ b/src/index.css @@ -16,10 +16,14 @@ code { display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; text-align: center; height: 100vh; - gap: 5vh; + gap: 1vh; + padding: 0 50px 0 50px; + margin: 20px; + max-width: 500px; + } .next-button { @@ -42,6 +46,8 @@ code { flex-direction: column; align-items: center; text-align: center; + width: 100%; + height: 100%; } @@ -53,11 +59,12 @@ button { .options { display: flex; - gap: 2vh; + gap: 1vh; margin: 10px; } -.h1 { - padding: 0; - +.summary { + display: flex; + flex-direction: column; + } \ No newline at end of file diff --git a/src/reducers/quiz.js b/src/reducers/quiz.js index 03660517..d00d54e5 100644 --- a/src/reducers/quiz.js +++ b/src/reducers/quiz.js @@ -7,7 +7,7 @@ const questions = [ 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 Captain Americas shield?', + questionText: 'What is the name of the fictional metal used to make Cap Americas shield?', options: [' Adamantium', 'Vibranium', 'Promethium', 'Unobtanium'], correctAnswerIndex: 1 }, { id: 3, From ff476794b01894e4177fd55ce200edc8d119df6e Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Fri, 14 Apr 2023 17:56:34 +0200 Subject: [PATCH 08/24] fix typo --- src/reducers/quiz.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reducers/quiz.js b/src/reducers/quiz.js index d00d54e5..4ba4f186 100644 --- a/src/reducers/quiz.js +++ b/src/reducers/quiz.js @@ -8,7 +8,7 @@ const questions = [ correctAnswerIndex: 0 }, { id: 2, questionText: 'What is the name of the fictional metal used to make Cap Americas shield?', - options: [' Adamantium', 'Vibranium', 'Promethium', 'Unobtanium'], + options: ['Adamantium', 'Vibranium', 'Promethium', 'Unobtanium'], correctAnswerIndex: 1 }, { id: 3, questionText: 'Who played the role of Black Widow in the Marvel Cinematic Universe?', From e2050bb03932e4aa05368a0405dc1c079952963d Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Fri, 14 Apr 2023 18:06:50 +0200 Subject: [PATCH 09/24] changed options wrap --- src/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.css b/src/index.css index fc9406d5..d4941176 100644 --- a/src/index.css +++ b/src/index.css @@ -59,6 +59,8 @@ button { .options { display: flex; + flex-wrap: wrap; + justify-content: center; gap: 1vh; margin: 10px; } @@ -66,5 +68,6 @@ button { .summary { display: flex; flex-direction: column; + padding: 20px; } \ No newline at end of file From b84c72491d1d23da4973148408f692bb027aa61b Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Fri, 14 Apr 2023 18:52:37 +0200 Subject: [PATCH 10/24] fixed scroll up --- src/App.js | 2 ++ src/components/Footer.js | 12 ++++++++++++ src/components/QuizSummary.js | 9 ++++++--- src/index.css | 5 ++--- 4 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/components/Footer.js diff --git a/src/App.js b/src/App.js index a74b8be4..e256180b 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { Provider } from 'react-redux'; import { combineReducers, configureStore } from '@reduxjs/toolkit'; import { quiz } from 'reducers/quiz'; import { CurrentQuestion } from 'components/CurrentQuestion'; +import { Footer } from 'components/Footer'; const reducer = combineReducers({ quiz: quiz.reducer @@ -15,6 +16,7 @@ export const App = () => {
+
); diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 00000000..ee5eca92 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,12 @@ +import React from 'react'; + +export const Footer = () => { + return ( +
+

By NinaW © 2023 Quiz App. + All rights reserved. +

+
+ ); +}; + diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js index d063b09e..cfa23a7f 100644 --- a/src/components/QuizSummary.js +++ b/src/components/QuizSummary.js @@ -1,11 +1,14 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; export const QuizSummary = () => { const questions = useSelector((state) => state.quiz.questions); const answers = useSelector((state) => state.quiz.answers); - console.log('questions:', questions); - console.log('answers:', answers); + + useEffect(() => { + window.scrollTo(0, 0); + }, []); + if (!questions || !answers) { return null; } diff --git a/src/index.css b/src/index.css index d4941176..92298de5 100644 --- a/src/index.css +++ b/src/index.css @@ -16,11 +16,10 @@ code { display: flex; flex-direction: column; align-items: center; - justify-content: flex-start; + justify-content: space-evenly; text-align: center; height: 100vh; - gap: 1vh; - padding: 0 50px 0 50px; + padding: 0 20px 0 20px; margin: 20px; max-width: 500px; From 1faba246e027b58ad00542cdf1a95e4c43aec991 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Fri, 14 Apr 2023 19:00:21 +0200 Subject: [PATCH 11/24] css --- src/index.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/index.css b/src/index.css index 92298de5..71a27eb6 100644 --- a/src/index.css +++ b/src/index.css @@ -20,8 +20,7 @@ code { text-align: center; height: 100vh; padding: 0 20px 0 20px; - margin: 20px; - max-width: 500px; + margin: 0; } @@ -45,8 +44,6 @@ code { flex-direction: column; align-items: center; text-align: center; - width: 100%; - height: 100%; } From 4093962e19e67a81307dde5e3b7d4db17010d6b4 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sat, 15 Apr 2023 18:43:07 +0200 Subject: [PATCH 12/24] changed progress from percent to number --- src/components/CurrentQuestion.js | 1 - src/components/ProgressBar.js | 31 +++++++++++++++---------------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index ce76b1cc..2ec9ad3b 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -26,7 +26,6 @@ export const CurrentQuestion = () => { } const onAnswerSelect = (index) => { - // dispatch(quiz.actions.submitAnswer({ questionId: question.id, answerIndex: index })) setSelectedOption(index); } diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index a280f4d7..78f33412 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -12,43 +12,42 @@ export const ProgressBar = () => { const currentQuestion = useSelector( (state) => state.quiz.currentQuestionIndex ); - /* Divided by the number of questions, so far hard coded */ - const correctPercent = (currentQuestion * 100) / 6; - let percent = Number(correctPercent).toFixed(); + const totalQuestions = useSelector( + (state) => state.quiz.questions.length + ); + // Calculate percentage progress based on current question index and total number of questions + // Subtract 1 from both currentQuestion and totalQuestions because array indices start from 0 + const percent = ((currentQuestion - 1) / (totalQuestions - 1)) * 100; - /* Styles of container and bar */ const StyledContainer = styled.div` - height: 2rem; - width: 100%; - background-color: #ffffff; - border-radius: 10px; - margin-bottom: 0.5rem; + background-color: darkgreen; + border: black solid 2px; `; const StyledBar = styled.div` display: flex; height: 100%; - width: ${percent}%; + width: 50px; background-color: lightgreen; - border-radius: 10px 0 0 10px; - align-items: center; - font-family: 'Roboto'; + border-radius: 50px; font-weight: bold; color: black; `; const PaddedP = styled.p` - padding-left: 15px; + padding-left: 12px; `; return ( - {percent}% + + {currentQuestion}/{totalQuestions} + ); From 2c03f4436f535064e0f5119a054e6a3054f573ef Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sat, 15 Apr 2023 20:25:12 +0200 Subject: [PATCH 13/24] font fam --- src/components/CurrentQuestion.js | 40 ++++++++++++++++--------------- src/index.css | 33 ++++++++++++++++++++----- 2 files changed, 48 insertions(+), 25 deletions(-) diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 2ec9ad3b..869ba9b8 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -38,26 +38,28 @@ export const CurrentQuestion = () => { } return ( -
-

Marvel movie-Quiz

-

Question: -
- {question.questionText} -

-
- {question.options.map((singleOption, index) => ( - - ))} +
+
+

Marvel movie-Quiz

+

Question: +
+ {question.questionText} +

+
+ {question.options.map((singleOption, index) => ( + + ))} +
+
+ +
+
-
- -
-
); } diff --git a/src/index.css b/src/index.css index 71a27eb6..d4b5d90d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,15 +1,33 @@ +@font-face { + font-family: 'CC Mighty Mouth Variable'; + src: url('https://fonts.adobe.com/fonts/cc-mighty-mouth-variable'); + font-weight: 400; + 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; + font-family: 'CC Mighty Mouth Variable'; + font-size: 16px; + line-height: 1.5; + font-weight: normal; + color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: 'CC Mighty Mouth Variable', sans-serif; +} + +.quiz-section { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + height: 100%; + background-color: rgb(204, 230, 221); } .question-section { @@ -18,9 +36,10 @@ code { align-items: center; justify-content: space-evenly; text-align: center; - height: 100vh; + height: auto; padding: 0 20px 0 20px; margin: 0; + margin-bottom: 20px; } @@ -44,6 +63,8 @@ code { flex-direction: column; align-items: center; text-align: center; + width: 100%; + height: 100%; } From c9c2120b603a148f5c5d3d39ebc7528509fec6e4 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 01:00:02 +0200 Subject: [PATCH 14/24] fixed restart button --- package-lock.json | 368 ++++++++++++++++++++++++++++++++-- package.json | 1 + src/components/QuizSummary.js | 11 +- src/index.css | 21 +- 4 files changed, 371 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47d73268..2e43cbd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", + "react-bootstrap": "^2.7.4", "react-dom": "^18.2.0", "react-redux": "^8.0.2", "react-scripts": "^5.0.1", @@ -1833,11 +1834,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", - "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" }, "engines": { "node": ">=6.9.0" @@ -3150,6 +3151,26 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz", + "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==", + "dependencies": { + "@swc/helpers": "^0.4.14" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.3.tgz", @@ -3173,6 +3194,37 @@ } } }, + "node_modules/@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "dependencies": { + "dequal": "^2.0.2" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz", + "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3515,6 +3567,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3786,6 +3846,14 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3851,6 +3919,11 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -5439,6 +5512,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -6350,6 +6428,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -6494,6 +6580,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -9025,6 +9120,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -14182,6 +14285,18 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14365,6 +14480,35 @@ "node": ">=14" } }, + "node_modules/react-bootstrap": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz", + "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14514,6 +14658,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-redux": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz", @@ -14654,6 +14803,21 @@ "node": ">=10" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14748,9 +14912,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/regenerator-transform": { "version": "0.15.0", @@ -16352,8 +16516,7 @@ "node_modules/tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -16458,6 +16621,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -16688,6 +16865,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -18853,11 +19038,11 @@ } }, "@babel/runtime": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", - "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" } }, "@babel/runtime-corejs3": { @@ -19776,6 +19961,19 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + }, + "@react-aria/ssr": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz", + "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==", + "requires": { + "@swc/helpers": "^0.4.14" + } + }, "@reduxjs/toolkit": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.3.tgz", @@ -19787,6 +19985,30 @@ "reselect": "^4.1.5" } }, + "@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "requires": { + "dequal": "^2.0.2" + } + }, + "@restart/ui": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz", + "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==", + "requires": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -20005,6 +20227,14 @@ "loader-utils": "^2.0.0" } }, + "@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "requires": { + "tslib": "^2.4.0" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -20270,6 +20500,14 @@ "csstype": "^3.0.2" } }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -20335,6 +20573,11 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -21523,6 +21766,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -22191,6 +22439,11 @@ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", "dev": true }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==" + }, "destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -22305,6 +22558,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -24159,6 +24421,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -27792,6 +28062,15 @@ "react-is": "^16.13.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -27922,6 +28201,25 @@ "whatwg-fetch": "^3.6.2" } }, + "react-bootstrap": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz", + "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==", + "requires": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -28037,6 +28335,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-redux": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz", @@ -28130,6 +28433,17 @@ } } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -28209,9 +28523,9 @@ } }, "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "regenerator-transform": { "version": "0.15.0", @@ -29428,8 +29742,7 @@ "tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "tsutils": { "version": "3.21.0", @@ -29505,6 +29818,17 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -29674,6 +29998,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index b93b1f05..a02769bf 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", + "react-bootstrap": "^2.7.4", "react-dom": "^18.2.0", "react-redux": "^8.0.2", "react-scripts": "^5.0.1", diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js index cfa23a7f..4ca25550 100644 --- a/src/components/QuizSummary.js +++ b/src/components/QuizSummary.js @@ -1,9 +1,16 @@ import React, { useEffect } from 'react'; -import { useSelector } from 'react-redux'; +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); @@ -23,6 +30,8 @@ export const QuizSummary = () => { return (

Quiz Summary

+

Total Correct Answers: {correctAnswers}

Percentage: {Math.round((correctAnswers / questions.length) * 100)}%

diff --git a/src/index.css b/src/index.css index d4b5d90d..e11c0918 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,14 @@ @font-face { - font-family: 'CC Mighty Mouth Variable'; - src: url('https://fonts.adobe.com/fonts/cc-mighty-mouth-variable'); - font-weight: 400; + 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: 'CC Mighty Mouth Variable'; + font-family: 'Chivo Mono', monospace; + font-variation-settings: 'wdth' 50, 'slnt' 0; font-size: 16px; line-height: 1.5; font-weight: normal; @@ -18,7 +18,7 @@ body { } code { - font-family: 'CC Mighty Mouth Variable', sans-serif; + font-family: 'Chivo Mono', sans-serif; } .quiz-section { @@ -26,7 +26,7 @@ code { flex-direction: column; align-items: center; width: 300px; - height: 100%; + background-color: rgb(204, 230, 221); } @@ -36,8 +36,8 @@ code { align-items: center; justify-content: space-evenly; text-align: center; - height: auto; - padding: 0 20px 0 20px; + + padding: 0 10px 0 10px; margin: 0; margin-bottom: 20px; @@ -63,8 +63,7 @@ code { flex-direction: column; align-items: center; text-align: center; - width: 100%; - height: 100%; + } From 2e149575c4603db8de38cdbd6ec7fcbe50b46fa2 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 13:54:49 +0200 Subject: [PATCH 15/24] css --- src/components/Footer.js | 3 +-- src/components/ProgressBar.js | 6 +++--- src/index.css | 16 +++++++++++++--- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/Footer.js b/src/components/Footer.js index ee5eca92..7e8f1218 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -3,8 +3,7 @@ import React from 'react'; export const Footer = () => { return (
-

By NinaW © 2023 Quiz App. - All rights reserved. +

By NinaW © 2023 Marvel Quiz App.

); diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index 78f33412..78a2b692 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -20,14 +20,14 @@ export const ProgressBar = () => { const percent = ((currentQuestion - 1) / (totalQuestions - 1)) * 100; const StyledContainer = styled.div` - background-color: darkgreen; - border: black solid 2px; + + `; const StyledBar = styled.div` display: flex; height: 100%; width: 50px; - background-color: lightgreen; + background-color: transparent; border-radius: 50px; font-weight: bold; color: black; diff --git a/src/index.css b/src/index.css index e11c0918..2d154b6d 100644 --- a/src/index.css +++ b/src/index.css @@ -34,7 +34,7 @@ code { display: flex; flex-direction: column; align-items: center; - justify-content: space-evenly; + justify-content: center; text-align: center; padding: 0 10px 0 10px; @@ -46,11 +46,16 @@ code { .next-button { color: rgb(35, 38, 38); background-color: rgb(145, 203, 166); - border-radius: 10px; padding: 15px; cursor: pointer; } +.next-button:hover { + transform: scale(1.1); + background-color:beige; +} + + .selected { color: blue; background-color: rgb(168, 226, 226); @@ -69,10 +74,15 @@ code { button { cursor: pointer; - border-radius: 10px; + border-radius: 0px; padding: 10px; } +button:hover { + transform: scale(1.1); + background-color: rgb(208, 235, 167); +} + .options { display: flex; flex-wrap: wrap; From 1f6404e64f06f46174d95cd6f3207b2079f1a388 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 14:29:21 +0200 Subject: [PATCH 16/24] fixed correct and wrong answer function --- src/components/CurrentQuestion.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js index 869ba9b8..84f115fe 100644 --- a/src/components/CurrentQuestion.js +++ b/src/components/CurrentQuestion.js @@ -1,3 +1,4 @@ +/* eslint-disable no-nested-ternary */ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { quiz } from 'reducers/quiz'; @@ -8,12 +9,14 @@ import { QuizSummary } from './QuizSummary'; export const CurrentQuestion = () => { const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]) const [selectedOption, setSelectedOption] = useState(null); + const [disabled, setDisabled] = useState(false); // added state for disabling options buttons const isQuizOver = useSelector((state) => state.quiz.quizOver); const dispatch = useDispatch(); useEffect(() => { setSelectedOption(null); + setDisabled(false); // Reset the disabled state when the question changes }, [question, isQuizOver]); const onButtonClick = () => { @@ -27,6 +30,7 @@ export const CurrentQuestion = () => { const onAnswerSelect = (index) => { setSelectedOption(index); + setDisabled(true); // disable options buttons once an answer is selected } if (!question) { @@ -50,7 +54,17 @@ export const CurrentQuestion = () => { ))} From efd11df290969d44f44d73c2c722e0626eb5dd21 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 14:36:10 +0200 Subject: [PATCH 17/24] css --- src/index.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.css b/src/index.css index 2d154b6d..1b02892e 100644 --- a/src/index.css +++ b/src/index.css @@ -7,6 +7,7 @@ body { margin: 0; + margin-bottom: 0; font-family: 'Chivo Mono', monospace; font-variation-settings: 'wdth' 50, 'slnt' 0; font-size: 16px; @@ -26,7 +27,6 @@ code { flex-direction: column; align-items: center; width: 300px; - background-color: rgb(204, 230, 221); } @@ -36,10 +36,9 @@ code { align-items: center; justify-content: center; text-align: center; - padding: 0 10px 0 10px; margin: 0; - margin-bottom: 20px; + } From e93386a41de9b461ecf923f789d2206edcaaaefb Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 14:40:09 +0200 Subject: [PATCH 18/24] trying to fix css --- src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index 1b02892e..a2126b47 100644 --- a/src/index.css +++ b/src/index.css @@ -7,7 +7,7 @@ body { margin: 0; - margin-bottom: 0; + height: 100%; font-family: 'Chivo Mono', monospace; font-variation-settings: 'wdth' 50, 'slnt' 0; font-size: 16px; @@ -67,7 +67,7 @@ code { flex-direction: column; align-items: center; text-align: center; - + height: 100%; } From f4f1564efc70413bab196c131069bea6b52828e6 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 15:14:50 +0200 Subject: [PATCH 19/24] trying to fix size of background css --- src/index.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index a2126b47..cde94801 100644 --- a/src/index.css +++ b/src/index.css @@ -39,7 +39,6 @@ code { padding: 0 10px 0 10px; margin: 0; - } .next-button { @@ -67,7 +66,7 @@ code { flex-direction: column; align-items: center; text-align: center; - height: 100%; + height: 200vh; } From dab021fa8ec87606b3da9f0dd70ebad0a97efd06 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 15:17:27 +0200 Subject: [PATCH 20/24] css fix --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index cde94801..9f403646 100644 --- a/src/index.css +++ b/src/index.css @@ -66,7 +66,7 @@ code { flex-direction: column; align-items: center; text-align: center; - height: 200vh; + height: 100vh; } From e90848d3e3ee5ac17f36599f5d7125ef6ef51916 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 15:21:39 +0200 Subject: [PATCH 21/24] css --- src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.css b/src/index.css index 9f403646..aa6b12c1 100644 --- a/src/index.css +++ b/src/index.css @@ -27,6 +27,7 @@ code { flex-direction: column; align-items: center; width: 300px; + margin-top: 20px; background-color: rgb(204, 230, 221); } From d3e4f8f0bd6f21a7c6d5d176a7177325db151e8d Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 15:44:54 +0200 Subject: [PATCH 22/24] css --- src/components/QuizSummary.js | 4 ++-- src/index.css | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/QuizSummary.js b/src/components/QuizSummary.js index 4ca25550..d0adffd7 100644 --- a/src/components/QuizSummary.js +++ b/src/components/QuizSummary.js @@ -28,9 +28,9 @@ export const QuizSummary = () => { }, 0); return ( -
+

Quiz Summary

-

Total Correct Answers: {correctAnswers}

diff --git a/src/index.css b/src/index.css index aa6b12c1..aff6243e 100644 --- a/src/index.css +++ b/src/index.css @@ -16,6 +16,7 @@ body { color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: beige; } code { @@ -67,7 +68,6 @@ code { flex-direction: column; align-items: center; text-align: center; - height: 100vh; } @@ -90,9 +90,13 @@ button:hover { margin: 10px; } -.summary { +.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 From 2e8603339921fbb4fe7f5fb0ff9c03611ac22293 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 16:26:03 +0200 Subject: [PATCH 23/24] readme update --- README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d6ee60c3..e16030ce 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,17 @@ You should also create a CSS stylesheet to style your quiz game. Make it visuall ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I worked alone this week. The problem was to learn about Redux for the first time. +Redux is a state management library for JavaScript applications. It's commonly used with React, but can also be used with other libraries or frameworks. + +The basic idea behind Redux is that the entire state of your application is kept in a single store, which is represented as a plain JavaScript object. The store is created using a function called a reducer, which takes the current state and an action as arguments and returns a new state. Actions are plain JavaScript objects that describe what happened in the application (e.g. a button was clicked). + +One of the key features of Redux is its ability to manage asynchronous actions using middleware. Middleware is a function that sits between the action being dispatched and the reducer, allowing you to perform side effects like making API requests or logging actions. + +Redux also has a concept of "reducers composition", which means that multiple reducers can be combined to manage different parts of the application state. This helps to keep your code organized and maintainable. + +Overall, Redux can be a powerful tool for managing the state of your application, especially as it grows in complexity. However, it does have a bit of a learning curve, so it's important to invest some time in understanding its core concepts before diving in. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://redux-quiz-marvel.netlify.app/ From f6ce8e6fa9affad68ff2e340a1af209dc46748b1 Mon Sep 17 00:00:00 2001 From: NinaW <120198299+NinaWald@users.noreply.github.com> Date: Sun, 16 Apr 2023 20:49:36 +0200 Subject: [PATCH 24/24] fixed error in percentage progressbar --- src/components/ProgressBar.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index 78a2b692..5a18ed9d 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -15,9 +15,8 @@ export const ProgressBar = () => { const totalQuestions = useSelector( (state) => state.quiz.questions.length ); - // Calculate percentage progress based on current question index and total number of questions - // Subtract 1 from both currentQuestion and totalQuestions because array indices start from 0 - const percent = ((currentQuestion - 1) / (totalQuestions - 1)) * 100; + + const percent = (currentQuestion / (totalQuestions - 1)) * 100; const StyledContainer = styled.div` @@ -46,7 +45,7 @@ export const ProgressBar = () => { aria-valuemax={100} > - {currentQuestion}/{totalQuestions} + {currentQuestion + 1}/{totalQuestions}