+
+
+
+ Take a Paw-some Quiz Adventure!
++ Test your knowledge on cute animals and collect rewards as you go! +
+ +Find me in src/app.jsx!
;
+/* eslint-disable no-unused-vars */
+import React, { useState } from "react";
+import WelcomePage from "./components/WelcomeFolder/WelcomePage.jsx";
+import QuestionOne from "./components/QuestionOne/QuestionOne";
+import QuestionTwo from "./components/QuestionTwo/QuestionTwo.jsx";
+import QuestionThree from "./components/QuestionThree/QuestionThree.jsx";
+import QuestionFour from "./components/QuestionFour/QuestionFour.jsx";
+import QuestionFive from "./components/QuestionFive/QuestionFive.jsx";
+import QuestionSix from "./components/QuestionSix/QuestionSix.jsx";
+import QuestionSeven from "./components/QuestionSeven/QuestionSeven.jsx";
+import QuestionEight from "./components/QuestionEight/QuestionEight.jsx";
+import ConfirmationPage from "./components/ConfirmationFolder/ConfirmationPage.jsx";
+
+import "./App.css";
+
+const App = () => {
+ const [startQuiz, setStartQuiz] = useState(false);
+ const [currentQuestion, setCurrentQuestion] = useState(0);
+ const [score, setScore] = useState(160);
+
+ const handleStartQuiz = () => {
+ setStartQuiz(true);
+ };
+
+ const handleNextQuestion = () => {
+ setCurrentQuestion(currentQuestion + 1);
+ };
+
+ const handleScoreChange = (pointsToDeduct) => {
+ setScore(score - pointsToDeduct); // This is for the passing down the function to handle the end score
+ };
+
+ return (
+
+ {!startQuiz ? (
+
+ );
};
+
+export default App;
diff --git a/src/assets/background.jpeg b/src/assets/background.jpeg
new file mode 100644
index 00000000..2c1b6b34
Binary files /dev/null and b/src/assets/background.jpeg differ
diff --git a/src/assets/bird.jpeg b/src/assets/bird.jpeg
new file mode 100644
index 00000000..427e858d
Binary files /dev/null and b/src/assets/bird.jpeg differ
diff --git a/src/assets/dolphin.png b/src/assets/dolphin.png
new file mode 100644
index 00000000..73cd6e03
Binary files /dev/null and b/src/assets/dolphin.png differ
diff --git a/src/assets/fox.jpeg b/src/assets/fox.jpeg
new file mode 100644
index 00000000..d4aecfb6
Binary files /dev/null and b/src/assets/fox.jpeg differ
diff --git a/src/assets/frog.png b/src/assets/frog.png
new file mode 100644
index 00000000..95a13847
Binary files /dev/null and b/src/assets/frog.png differ
diff --git a/src/assets/koala.jpeg b/src/assets/koala.jpeg
new file mode 100644
index 00000000..2c361e08
Binary files /dev/null and b/src/assets/koala.jpeg differ
diff --git a/src/assets/lightning.png b/src/assets/lightning.png
new file mode 100644
index 00000000..fddd9718
Binary files /dev/null and b/src/assets/lightning.png differ
diff --git a/src/assets/lion.jpeg b/src/assets/lion.jpeg
new file mode 100644
index 00000000..3e126e99
Binary files /dev/null and b/src/assets/lion.jpeg differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 00000000..72d82314
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/negative.png b/src/assets/negative.png
new file mode 100644
index 00000000..89ec731b
Binary files /dev/null and b/src/assets/negative.png differ
diff --git a/src/assets/otter.jpeg b/src/assets/otter.jpeg
new file mode 100644
index 00000000..cc8df6e1
Binary files /dev/null and b/src/assets/otter.jpeg differ
diff --git a/src/assets/panda.jpeg b/src/assets/panda.jpeg
new file mode 100644
index 00000000..a1536651
Binary files /dev/null and b/src/assets/panda.jpeg differ
diff --git a/src/assets/positive.png b/src/assets/positive.png
new file mode 100644
index 00000000..42bae489
Binary files /dev/null and b/src/assets/positive.png differ
diff --git a/src/assets/search.png b/src/assets/search.png
new file mode 100644
index 00000000..90752954
Binary files /dev/null and b/src/assets/search.png differ
diff --git a/src/assets/star.png b/src/assets/star.png
new file mode 100644
index 00000000..4e8acadc
Binary files /dev/null and b/src/assets/star.png differ
diff --git a/src/components/ConfirmationFolder/ConfirmationPage.css b/src/components/ConfirmationFolder/ConfirmationPage.css
new file mode 100644
index 00000000..e63bfffe
--- /dev/null
+++ b/src/components/ConfirmationFolder/ConfirmationPage.css
@@ -0,0 +1,84 @@
+.confirmation-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh; /* Allow the container to grow */
+ background-color: #ffffff;
+ text-align: center;
+ overflow-y: auto; /* Enable vertical scrolling */
+ padding: 20px; /* Add padding for small screens */
+}
+
+.confirmation-logo {
+ width: 120px;
+ margin-bottom: 20px;
+}
+
+.confirmation-star {
+ width: 400px;
+ height: auto;
+ margin-bottom: 20px;
+}
+
+.confirmation-title {
+ font-size: 36px;
+ font-weight: bold;
+ color: #2c2c2c;
+ margin-bottom: 10px;
+}
+
+.confirmation-subtitle {
+ font-size: 18px;
+ color: #7f7f7f;
+ margin-bottom: 30px;
+}
+
+.score-box {
+ background-color: #f9f4e7;
+ border-radius: 20px;
+ padding: 10px 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: #2c2c2c;
+}
+
+.score {
+ display: flex;
+ align-items: center;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .confirmation-container {
+ padding: 15px; /* Adjust padding for medium screens */
+ }
+
+ .confirmation-star {
+ width: 300px; /* Reduce star size for medium screens */
+ }
+
+ .confirmation-title {
+ font-size: 30px; /* Adjust title size */
+ }
+}
+
+@media (max-width: 480px) {
+ .confirmation-container {
+ padding: 10px; /* Reduce padding for small screens */
+ }
+
+ .confirmation-star {
+ width: 250px; /* Further reduce star size for small screens */
+ }
+
+ .confirmation-title {
+ font-size: 24px; /* Further reduce title size */
+ }
+
+ .confirmation-subtitle {
+ font-size: 16px; /* Adjust subtitle size */
+ }
+}
diff --git a/src/components/ConfirmationFolder/ConfirmationPage.jsx b/src/components/ConfirmationFolder/ConfirmationPage.jsx
new file mode 100644
index 00000000..4f31fa77
--- /dev/null
+++ b/src/components/ConfirmationFolder/ConfirmationPage.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import './ConfirmationPage.css';
+import starImage from '../../assets/star.png';
+import logoImage from '../../assets/logo.png';
+
+const ConfirmationPage = ({ score }) => {
+ let title = "";
+ let subtitle = "";
+
+ // Determine the title and subtitle based on the score
+ if (score < 40) {
+ title = "Good Effort!";
+ subtitle = "Maybe next time is the charm!";
+ } else if (score >= 40 && score < 80) {
+ title = "Nice job!";
+ subtitle = "Good to have an animal lover among us!";
+ } else if (score >= 80 && score < 120) {
+ title = "Good job!";
+ subtitle = "Almost a perfect score, what an expert!";
+ } else {
+ title = "Perfect Scorer!";
+ subtitle = "Your flawless quiz performance sets a new standard of excellence!";
+ }
+
+ return (
+
+ 
+ 
+
+ );
+};
+
+export default ConfirmationPage;
diff --git a/src/components/HeaderFolder/Header.css b/src/components/HeaderFolder/Header.css
new file mode 100644
index 00000000..57507858
--- /dev/null
+++ b/src/components/HeaderFolder/Header.css
@@ -0,0 +1,28 @@
+.Header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 30px;
+ background-color: rgba(255, 255, 255, 0.7);
+ height: 50px;
+ border-radius: 50px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ width: 80vw;
+ margin: 20px auto;
+}
+
+.logo {
+ height: 50px;
+}
+
+.search-icon {
+ height: 20px;
+ cursor: pointer;
+}
+
+.search-button {
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+}
diff --git a/src/components/HeaderFolder/Header.jsx b/src/components/HeaderFolder/Header.jsx
new file mode 100644
index 00000000..2a5b6212
--- /dev/null
+++ b/src/components/HeaderFolder/Header.jsx
@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+import logo from "../../assets/logo.png";
+import searchIcon from "../../assets/search.png";
+import "./Header.css";
+
+const Header = () => {
+ return (
+ {title}
+{subtitle}
+
+ {score} points
+
+
+ 
+
+
+ );
+};
+
+export default QuestionEight;
diff --git a/src/components/QuestionFive/QuestionFive.css b/src/components/QuestionFive/QuestionFive.css
new file mode 100644
index 00000000..010d9e8f
--- /dev/null
+++ b/src/components/QuestionFive/QuestionFive.css
@@ -0,0 +1,82 @@
+.quiz-container-five {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #00a2ae;
+ min-height: 100vh; /* Allow the container to grow */
+ padding: 10px; /* Add some padding */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Enable vertical scrolling */
+}
+
+.dropdown-five {
+ padding: 15px 20px;
+ font-size: 18px;
+ width: 250px;
+ border-radius: 10px;
+ border: none;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ transition: background-color 0.3s ease;
+ background-color: #d36f56;
+ color: white;
+}
+
+.correct {
+ background-color: #4caf50 !important;
+}
+
+.incorrect {
+ background-color: #f44336 !important;
+}
+
+.progress-bar {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ background-color: #ccc;
+ border-radius: 50%;
+ margin: 0 5px;
+}
+
+.dot.active {
+ background-color: #fff;
+}
+
+.quiz-logo {
+ width: 100px;
+ margin-bottom: 20px;
+}
+
+.quiz-question {
+ text-align: center;
+ color: white;
+ margin: 20px 0;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-five {
+ padding: 15px; /* Adjust padding */
+ }
+
+ .dropdown-five {
+ width: 100%; /* Full width for dropdown on smaller screens */
+ font-size: 16px; /* Adjust font size */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-five {
+ padding: 10px; /* Reduce padding */
+ }
+
+ .dropdown-five {
+ width: 100%; /* Full width for dropdown */
+ font-size: 14px; /* Further reduce font size for small screens */
+ }
+}
diff --git a/src/components/QuestionFive/QuestionFive.jsx b/src/components/QuestionFive/QuestionFive.jsx
new file mode 100644
index 00000000..812ab2de
--- /dev/null
+++ b/src/components/QuestionFive/QuestionFive.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import birdImage from "../../assets/bird.jpeg";
+import "./QuestionFive.css";
+
+const QuestionFive = ({ onNext, onScoreChange }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState("");
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (event) => {
+ const answer = event.target.value;
+ setSelectedAnswer(answer);
+ if (answer === "Sing a cheerful song") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+
+ Red pandas love snacking on bamboo, but what other treat do they enjoy that might surprise you?
+
+ {[
+ "Berries",
+ "Ice cream",
+ "Popcorn",
+ "Chocolate",
+ ].map((answer) => (
+
+
+ handleDragStart(event, answer)}
+ >
+ {answer}
+
+ ))}
+
+ Drop your answer here!
+ {droppedAnswer && (
+
+
+ 
+
+ )}
+ You chose: {droppedAnswer}
+
+
+
+
+ );
+};
+
+export default QuestionFive;
diff --git a/src/components/QuestionFour/QuestionFour.css b/src/components/QuestionFour/QuestionFour.css
new file mode 100644
index 00000000..307c0014
--- /dev/null
+++ b/src/components/QuestionFour/QuestionFour.css
@@ -0,0 +1,76 @@
+.quiz-container-four {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #552c19;
+ min-height: 100vh; /* Allow the container to grow */
+ padding: 10px; /* Add some padding */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Enable vertical scrolling */
+}
+
+.answer-options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.answer-label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ font-size: 16px;
+ color: rgb(255, 255, 255);
+ cursor: pointer;
+ transition: color 0.3s;
+ position: relative;
+}
+
+.answer-label input[type="radio"] {
+ margin-right: 5px;
+}
+
+.checkmark {
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+ position: relative;
+ object-fit: contain;
+}
+
+.correct .checkmark {
+ color: #4caf50;
+}
+
+.incorrect .checkmark {
+ color: #f44336;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-four {
+ padding: 15px; /* Adjust padding */
+ }
+
+ .answer-label {
+ font-size: 14px; /* Slightly smaller text */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-four {
+ padding: 10px; /* Reduce padding */
+ }
+
+ .answer-label {
+ font-size: 12px; /* Smaller text */
+ }
+
+ .checkmark {
+ width: 18px; /* Slightly smaller checkmark */
+ height: 18px;
+ }
+}
diff --git a/src/components/QuestionFour/QuestionFour.jsx b/src/components/QuestionFour/QuestionFour.jsx
new file mode 100644
index 00000000..0367a1bf
--- /dev/null
+++ b/src/components/QuestionFour/QuestionFour.jsx
@@ -0,0 +1,98 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import lionImage from "../../assets/lion.jpeg";
+import positiveIcon from "../../assets/positive.png";
+import negativeIcon from "../../assets/negative.png";
+import "./QuestionFour.css";
+
+const QuestionFour = ({ onNext, onScoreChange, onNavigateToQuestion }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState(null);
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (answer) => {
+ setSelectedAnswer(answer);
+ if (answer === "Nuzzle their mom's face") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ };
+
+ const handleDotClick = (questionIndex) => {
+ if (onNavigateToQuestion) {
+ onNavigateToQuestion(questionIndex);
+ }
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+ What do birds do to show they are happy?
+
+
+
+
+
+
+
+ );
+};
+
+export default QuestionFour;
diff --git a/src/components/QuestionOne/QuestionOne.css b/src/components/QuestionOne/QuestionOne.css
new file mode 100644
index 00000000..b74dba22
--- /dev/null
+++ b/src/components/QuestionOne/QuestionOne.css
@@ -0,0 +1,122 @@
+.quiz-container-one {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #5c7f4e;
+ min-height: 100vh; /* Allow the height to grow */
+ padding: 10px; /* Add some padding for breathing space */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Allow scrolling */
+}
+
+.quiz-logo {
+ margin-top: 5px;
+ width: 70px;
+}
+
+.progress-bar {
+ display: flex;
+ justify-content: center;
+ margin: 10px 0;
+}
+
+.dot {
+ width: 30px;
+ height: 5px;
+ background-color: #ccc;
+ margin: 0 3px;
+ border-radius: 5px;
+}
+
+.dot.active {
+ background-color: #808080;
+}
+
+.quiz-question {
+ text-align: center;
+ color: white;
+ margin: 10px 0;
+}
+
+.animal-image {
+ max-width: 80%;
+ max-height: 250px; /* Reduced height for smaller screens */
+ border-radius: 10px;
+ margin-bottom: 10px;
+}
+
+.answer-options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.answer-button {
+ background-color: #e0e0e0;
+ padding: 12px;
+ width: 130px;
+ border-radius: 10px;
+ font-size: 14px;
+ color: black;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s;
+ position: relative;
+}
+
+.answer-button .checkmark {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.answer-button.positive {
+ background-color: #4caf50;
+ color: white;
+}
+
+.answer-button.negative {
+ background-color: #f44336;
+ color: white;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-one {
+ padding: 15px; /* Adjust padding */
+ }
+
+ .animal-image {
+ max-width: 100%; /* Allow image to take full width */
+ max-height: 200px; /* Reduce height for smaller screens */
+ }
+
+ .answer-button {
+ width: 100%; /* Full width for buttons on small screens */
+ font-size: 12px; /* Slightly smaller text */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-one {
+ padding: 10px; /* Reduce padding */
+ }
+
+ .animal-image {
+ max-height: 150px; /* Further reduce image height */
+ }
+
+ .answer-button {
+ width: 100%; /* Full width */
+ font-size: 11px; /* Smaller text */
+ }
+}
diff --git a/src/components/QuestionOne/QuestionOne.jsx b/src/components/QuestionOne/QuestionOne.jsx
new file mode 100644
index 00000000..dc34e79e
--- /dev/null
+++ b/src/components/QuestionOne/QuestionOne.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import frogImage from "../../assets/frog.png";
+import positiveIcon from "../../assets/positive.png";
+import negativeIcon from "../../assets/negative.png";
+import "./QuestionOne.css";
+
+const QuestionOne = ({ onNext, onScoreChange }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState(null);
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (answer) => {
+ if (answer === "Lungs") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ setSelectedAnswer(answer);
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+
+ + What do lion cubs do when they want attention? +
+
+ {[
+ "Pounce on their siblings",
+ "Roar loudly",
+ "Nuzzle their mom's face",
+ "Wiggle their tails",
+ ].map((answer) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default QuestionOne;
diff --git a/src/components/QuestionSeven/QuestionSeven.css b/src/components/QuestionSeven/QuestionSeven.css
new file mode 100644
index 00000000..80aa7187
--- /dev/null
+++ b/src/components/QuestionSeven/QuestionSeven.css
@@ -0,0 +1,113 @@
+.quiz-container-seven {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #758e9f;
+ min-height: 100vh;
+ padding: 10px;
+ justify-content: flex-start;
+ overflow-y: auto;
+}
+
+.answer-options {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 20px;
+ flex-wrap: wrap;
+}
+
+.draggable-answer-seven {
+ padding: 10px;
+ background-color: #2b4c66;
+ border-radius: 8px;
+ cursor: grab;
+ width: 150px;
+ text-align: center;
+ margin: 10px;
+ color: white;
+}
+
+.drop-zone {
+ margin: 20px auto;
+ padding: 10px 15px;
+ border: 2px dashed #ffffff;
+ border-radius: 10px;
+ text-align: center;
+ color: #2c2c2c;
+ min-height: 60px;
+ max-width: 70%;
+}
+
+.correct-text {
+ color: #4caf50;
+ margin-top: 10px;
+}
+
+.incorrect-text {
+ color: #f44336;
+ margin-top: 10px;
+}
+
+.draggable-answer-seven:hover {
+ background-color: #031021;
+}
+
+.icon-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.result-icon {
+ width: 30px;
+ height: 30px;
+}
+
+@media (max-width: 768px) {
+ .quiz-container-seven {
+ padding: 15px;
+ }
+
+ .draggable-answer-seven {
+ width: 100%;
+ font-size: 14px;
+ }
+
+ .drop-zone {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-seven {
+ padding: 10px;
+ }
+
+ .draggable-answer-seven {
+ width: 100%;
+ font-size: 12px;
+ }
+
+ .drop-zone {
+ max-width: 100%;
+ min-height: 50px;
+ }
+}
+
+@media (max-width: 320px) {
+ .quiz-container-seven {
+ padding: 5px;
+ }
+
+ .draggable-answer-seven {
+ width: 100%;
+ font-size: 10px;
+ padding: 8px;
+ }
+
+ .drop-zone {
+ max-width: 100%;
+ min-height: 40px;
+ padding: 5px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/QuestionSeven/QuestionSeven.jsx b/src/components/QuestionSeven/QuestionSeven.jsx
new file mode 100644
index 00000000..646bdc23
--- /dev/null
+++ b/src/components/QuestionSeven/QuestionSeven.jsx
@@ -0,0 +1,111 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import dolphinImage from "../../assets/dolphin.png";
+import positiveIcon from "../../assets/positive.png";
+import negativeIcon from "../../assets/negative.png";
+import "./QuestionSeven.css";
+
+// eslint-disable-next-line react/prop-types
+const QuestionSeven = ({ onNext, onNavigateToQuestion, onScoreChange }) => {
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [droppedAnswer, setDroppedAnswer] = useState("");
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleDragStart = (event, answer) => {
+ event.dataTransfer.setData("text/plain", answer);
+ };
+
+ const handleDrop = (event) => {
+ event.preventDefault();
+ const answer = event.dataTransfer.getData("text/plain");
+ setDroppedAnswer(answer);
+
+ if (answer === "Blow bubbles") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ };
+
+ const handleDragOver = (event) => {
+ event.preventDefault();
+ };
+
+ const handleDotClick = (questionIndex) => {
+ if (onNavigateToQuestion) {
+ onNavigateToQuestion(questionIndex);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ Which of the following adaptations helps frogs breathe in water and on land?
+
+ {["Gills", "Lungs", "Scales", "Fins"].map((answer) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default QuestionSeven;
diff --git a/src/components/QuestionSix/QuestionSix.css b/src/components/QuestionSix/QuestionSix.css
new file mode 100644
index 00000000..444e404f
--- /dev/null
+++ b/src/components/QuestionSix/QuestionSix.css
@@ -0,0 +1,82 @@
+.quiz-container-six {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #25401e;
+ min-height: 100vh; /* Allow the container to grow */
+ padding: 10px; /* Add some padding */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Enable vertical scrolling */
+}
+
+.dropdown-six {
+ padding: 15px 20px;
+ font-size: 18px;
+ width: 250px;
+ border-radius: 10px;
+ border: none;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ transition: background-color 0.3s ease;
+ background-color: #5f4121;
+ color: white;
+}
+
+.correct {
+ background-color: #4caf50 !important;
+}
+
+.incorrect {
+ background-color: #f44336 !important;
+}
+
+.progress-bar {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ background-color: #ccc;
+ border-radius: 50%;
+ margin: 0 5px;
+}
+
+.dot.active {
+ background-color: #fff;
+}
+
+.quiz-logo {
+ width: 100px;
+ margin-bottom: 20px;
+}
+
+.quiz-question {
+ text-align: center;
+ color: white;
+ margin: 20px 0;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-six {
+ padding: 15px; /* Adjust padding */
+ }
+
+ .dropdown-six {
+ width: 100%; /* Full width for dropdown on smaller screens */
+ font-size: 16px; /* Adjust font size */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-six {
+ padding: 10px; /* Reduce padding */
+ }
+
+ .dropdown-six {
+ width: 100%; /* Full width for dropdown */
+ font-size: 14px; /* Further reduce font size for small screens */
+ }
+}
diff --git a/src/components/QuestionSix/QuestionSix.jsx b/src/components/QuestionSix/QuestionSix.jsx
new file mode 100644
index 00000000..4b641346
--- /dev/null
+++ b/src/components/QuestionSix/QuestionSix.jsx
@@ -0,0 +1,89 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import koalaImage from "../../assets/koala.jpeg";
+import "./QuestionSix.css";
+
+const QuestionSix = ({ onNext, onScoreChange, onNavigateToQuestion }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState("");
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (event) => {
+ const answer = event.target.value;
+ setSelectedAnswer(answer);
+ if (answer === "Hug a tree") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ };
+
+ const handleDotClick = (questionIndex) => {
+ if (onNavigateToQuestion) {
+ onNavigateToQuestion(questionIndex);
+ }
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+
+ What do dolphins do when they are excited?
+
+ {[
+ "Jump out of the water",
+ "Blow bubbles",
+ "Splash their tails",
+ "Make happy squeaks",
+ ].map((answer) => (
+
+
+ handleDragStart(event, answer)}
+ >
+ {answer}
+
+ ))}
+
+ Drop your answer here!
+ {droppedAnswer && (
+
+
+
+
+ )}
+ You chose: {droppedAnswer}
+
+
+
+
+ );
+};
+
+export default QuestionSix;
diff --git a/src/components/QuestionThree/QuestionThree.css b/src/components/QuestionThree/QuestionThree.css
new file mode 100644
index 00000000..42e93aad
--- /dev/null
+++ b/src/components/QuestionThree/QuestionThree.css
@@ -0,0 +1,76 @@
+.quiz-container-three {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #333232;
+ min-height: 100vh; /* Allow the container to grow */
+ padding: 10px; /* Add some padding */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Enable vertical scrolling */
+}
+
+.answer-options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.answer-label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ font-size: 16px;
+ color: rgb(255, 255, 255);
+ cursor: pointer;
+ transition: color 0.3s;
+ position: relative;
+}
+
+.answer-label input[type="radio"] {
+ margin-right: 5px;
+}
+
+.checkmark {
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+ position: relative;
+ object-fit: contain;
+}
+
+.correct .checkmark {
+ color: #4caf50;
+}
+
+.incorrect .checkmark {
+ color: #f44336;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-three {
+ padding: 15px; /* Adjust padding */
+ }
+
+ .answer-label {
+ font-size: 14px; /* Slightly smaller text on smaller screens */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-three {
+ padding: 10px; /* Reduce padding */
+ }
+
+ .answer-label {
+ font-size: 12px; /* Further reduce text size on small screens */
+ }
+
+ .checkmark {
+ width: 18px; /* Slightly smaller checkmark for small screens */
+ height: 18px;
+ }
+}
diff --git a/src/components/QuestionThree/QuestionThree.jsx b/src/components/QuestionThree/QuestionThree.jsx
new file mode 100644
index 00000000..6698fe57
--- /dev/null
+++ b/src/components/QuestionThree/QuestionThree.jsx
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import foxImage from "../../assets/fox.jpeg";
+import positiveIcon from "../../assets/positive.png";
+import negativeIcon from "../../assets/negative.png";
+import "./QuestionThree.css";
+
+const QuestionThree = ({ onNext, onScoreChange }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState(null);
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (answer) => {
+ setSelectedAnswer(answer);
+ if (answer === "Their tails") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+
+ + What do koalas do when they are feeling sleepy? +
+
+
+
+
+
+
+
+ );
+};
+
+export default QuestionThree;
diff --git a/src/components/QuestionTwo/QuestionTwo.css b/src/components/QuestionTwo/QuestionTwo.css
new file mode 100644
index 00000000..2c3021eb
--- /dev/null
+++ b/src/components/QuestionTwo/QuestionTwo.css
@@ -0,0 +1,111 @@
+.quiz-container-two {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #0a7fa2;
+ min-height: 100vh; /* Allow the container to grow */
+ padding: 10px; /* Add padding */
+ justify-content: flex-start; /* Align items from the top */
+ overflow-y: auto; /* Allow vertical scrolling */
+}
+
+.quiz-logo {
+ margin-top: 5px;
+ width: 70px;
+}
+
+.progress-bar {
+ display: flex;
+ justify-content: center;
+ margin: 10px 0;
+}
+
+.dot {
+ width: 30px;
+ height: 5px;
+ background-color: #ccc;
+ margin: 0 3px;
+ border-radius: 5px;
+}
+
+.dot.active {
+ background-color: #808080;
+}
+
+.quiz-question {
+ text-align: center;
+ color: white;
+ margin: 10px 0;
+}
+
+.animal-image {
+ max-width: 80%;
+ max-height: 250px; /* Limit height for images to fit on smaller screens */
+ border-radius: 10px;
+ margin-bottom: 10px;
+}
+
+.answer-options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 5px;
+ margin-top: 10px;
+}
+
+.answer-button {
+ background-color: #e0e0e0;
+ padding: 12px;
+ width: 130px; /* Retain original button size */
+ border-radius: 10px;
+ font-size: 14px;
+ color: black;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s;
+ position: relative;
+}
+
+.answer-button .checkmark {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.answer-button.positive {
+ background-color: #4caf50;
+ color: white;
+}
+
+.answer-button.negative {
+ background-color: #f44336;
+ color: white;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .quiz-container-two {
+ padding: 15px;
+ }
+
+ .animal-image {
+ max-height: 200px; /* Slightly reduce image size for smaller screens */
+ }
+}
+
+@media (max-width: 480px) {
+ .quiz-container-two {
+ padding: 10px;
+ }
+
+ .animal-image {
+ max-height: 150px; /* Further reduce image height for small screens */
+ }
+}
diff --git a/src/components/QuestionTwo/QuestionTwo.jsx b/src/components/QuestionTwo/QuestionTwo.jsx
new file mode 100644
index 00000000..d06f2029
--- /dev/null
+++ b/src/components/QuestionTwo/QuestionTwo.jsx
@@ -0,0 +1,92 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState } from "react";
+import logo from "../../assets/logo.png";
+import otterImage from "../../assets/otter.jpeg";
+import positiveIcon from "../../assets/positive.png";
+import negativeIcon from "../../assets/negative.png";
+import "./QuestionTwo.css";
+
+const QuestionTwo = ({ onNext, onScoreChange }) => {
+ const [selectedAnswer, setSelectedAnswer] = useState(null);
+ const [isCorrect, setIsCorrect] = useState(null);
+ const [wrongAttempts, setWrongAttempts] = useState(0);
+
+ const handleAnswerClick = (answer) => {
+ if (answer === "Each others paws") {
+ setIsCorrect(true);
+ setTimeout(() => {
+ onScoreChange(wrongAttempts * 5);
+ onNext();
+ }, 1000);
+ } else {
+ setIsCorrect(false);
+ setWrongAttempts(wrongAttempts + 1);
+ }
+ setSelectedAnswer(answer);
+ };
+
+ return (
+
+ {[...Array(8)].map((_, index) => (
+
+
+ handleDotClick(index)}
+ >
+ ))}
+
+ 
+
+ What do foxes use to communicate with each other?
+
+ {["Their ears", "Their paws", "Their noses", "Their tails"].map((answer) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default QuestionTwo;
diff --git a/src/components/WelcomeFolder/WelcomePage.css b/src/components/WelcomeFolder/WelcomePage.css
new file mode 100644
index 00000000..be3321e1
--- /dev/null
+++ b/src/components/WelcomeFolder/WelcomePage.css
@@ -0,0 +1,112 @@
+.welcome-container {
+ position: relative;
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+}
+
+.background-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+}
+
+.welcome-content {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-grow: 1;
+ padding: 80px;
+ z-index: 1;
+}
+
+.welcome-text {
+ text-align: left;
+ color: #fff;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+ max-width: 1000px;
+}
+
+.welcome-text h1 {
+ font-size: 3rem;
+ margin-bottom: 20px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+}
+
+.welcome-text p {
+ font-size: 1.2rem;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+}
+
+.start-button {
+ background-color: #c34113;
+ color: #fff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ font-size: 1.2rem;
+ transition: background-color 0.3s ease;
+}
+
+.start-button:hover {
+ background-color: #e64a19;
+}
+
+/* Media queries for smaller screens */
+@media (max-width: 768px) {
+ .welcome-container {
+ justify-content: center;
+ overflow-y: auto; /* Enable vertical scrolling */
+ }
+
+ .welcome-content {
+ padding: 40px; /* Reduce padding for smaller screens */
+ justify-content: center; /* Center content vertically */
+ text-align: center; /* Center text for smaller screens */
+ }
+
+ .welcome-text {
+ max-width: 90%; /* Limit the width of the text to fit smaller screens */
+ text-align: center; /* Center the text for smaller screens */
+ }
+
+ .welcome-text h1 {
+ font-size: 2.2rem; /* Reduce heading size for smaller screens */
+ }
+
+ .welcome-text p {
+ font-size: 1rem; /* Reduce paragraph size for smaller screens */
+ }
+
+ .start-button {
+ font-size: 1rem; /* Adjust button font size */
+ padding: 8px 16px; /* Adjust button padding */
+ }
+}
+
+@media (max-width: 480px) {
+ .welcome-content {
+ padding: 20px; /* Further reduce padding for very small screens */
+ }
+
+ .welcome-text h1 {
+ font-size: 1.8rem; /* Further reduce heading size */
+ }
+
+ .welcome-text p {
+ font-size: 0.9rem; /* Further reduce paragraph size */
+ }
+
+ .start-button {
+ font-size: 0.9rem; /* Reduce button font size */
+ padding: 6px 12px; /* Adjust button padding */
+ }
+}
diff --git a/src/components/WelcomeFolder/WelcomePage.jsx b/src/components/WelcomeFolder/WelcomePage.jsx
new file mode 100644
index 00000000..870ac4e3
--- /dev/null
+++ b/src/components/WelcomeFolder/WelcomePage.jsx
@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+import Header from "../HeaderFolder/Header";
+import backgroundImage from "../../assets/background.jpeg";
+import "./WelcomePage.css";
+
+const WelcomePage = ({ onStartQuiz }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + What do otters hold in their paws while they sleep to stay together? +
+
+ {["Shells", "Seaweed", "Rocks", "Each others paws"].map((answer) => (
+
+ ))}
+
+
+ 
+
+ );
+};
+
+export default WelcomePage;
diff --git a/src/main.jsx b/src/main.jsx
index 51294f39..b91620d3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App.jsx";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(