Technigo · jacquelinekellyhunt · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Survey - Project - Week 6</title>
+    <title>Survey - Project</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/instructions.md b/instructions.md
@@ -15,6 +15,7 @@ You don't have to use a lot of components to start with when doing this project.
 How you design your page is up to you, but take accessibility into account when you are styling your form elements - so inputs should have labels and should be easily readable and usable. We STRONGLY recommend having some kind of design or sketch before starting to code.
 
 ## How to get started
+
 1. **Person A** forks the repo
 2. **Person A** invites person B as a collaborator to the repo (Settings -> Collaborators and teams -> Add people)
 3. **Person A** clones the repo
@@ -24,6 +25,7 @@ How you design your page is up to you, but take accessibility into account when
 7. When you're done with a feature, it's time to merge! You choose if you want to work with PRs and code reviews or if you want to do this more verbally before you merge.
 
 ## Requirements:
+
 - Your app should consist of at least 3 questions.
 - At least one question should use radio buttons.
 - At least one question should use a select dropdown.
@@ -37,31 +39,35 @@ How you design your page is up to you, but take accessibility into account when
 - Make your app responsive (it should look good on devices from 320px width up to 1600px)
 
 ## Stretch goals
+
 So you’ve completed the requirements? Great job! Ensure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.
 
 ### Intermediate Stretch Goals
+
 - Use a form element you haven't tried before (such as a [range slider](https://www.w3schools.com/howto/howto_js_rangeslider.asp)) and connect it to React state. You can find a list of input types [here](https://www.w3schools.com/html/html_form_input_types.asp).
 - Add validation to your survey! Use either HTML input validation attributes (such as `required`) or implement custom logic when the user clicks the submit button to make the form fields have validations. If you choose to implement your own validation, you should also make sure to show error messages in a nice way.
 - Create a button that, when clicked, will scroll down to the top of the next question in the survey (if possible)
 
 ### Advanced Stretch Goals
+
 - Visualize to the user how far through the survey they are and how much is left by creating a progress bar
 - Use Regex validation for some input on your survey
 - Show different questions depending on the answer to a specific question
 - Create a multi-step form. Example 👇
   Show each question on its own 'page' with a continue button to progress to the next question (like how typeform does it). If you decide to split your form into sections, then one approach you could take is to try to think of these sections as a single `useState` hook which you can use to conditionally render different groups of inputs. For example, you could have some state like `const [section, setSection] = useState('firstQuestion')` and then when the user presses a button to progress, you'd use the `setSection()` function to progress them to the second question, etc. Then, in your JSX, you could conditionally render, like this:
+
   ```
   const Example = () => {
     const [section, setSection] = useState('firstQuestion')
-  
+
     return (
       <div>
         {section === 'firstQuestion' && (
           <div>
             First question...
           </div>
         )}
-  
+
         {section === 'secondQuestion' && (
           <div>
             Second question...
@@ -71,4 +77,5 @@ So you’ve completed the requirements? Great job! Ensure you've committed and p
     )
   }
   ```
+
   As always, there are many ways to approach this! This is just one suggestion.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -21,6 +22,6 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
+    "vite": "^4.5.5"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,13 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow-y: auto; 
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto; 
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,70 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+/* 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 (
+    <div className="App">
+      {!startQuiz ? (
+        <WelcomePage onStartQuiz={handleStartQuiz} />
+      ) : (
+        <>
+          {currentQuestion === 0 && (
+            <QuestionOne onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 1 && (
+            <QuestionTwo onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 2 && (
+            <QuestionThree onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 3 && (
+            <QuestionFour onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 4 && (
+            <QuestionFive onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 5 && (
+            <QuestionSix onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 6 && (
+            <QuestionSeven onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 7 && (
+            <QuestionEight onNext={handleNextQuestion} onScoreChange={handleScoreChange} />
+          )}
+          {currentQuestion === 8 && <ConfirmationPage score={score} />}
+        </>
+      )}
+    </div>
+  );
 };
+
+export default App;
diff --git a/src/assets/background.jpeg b/src/assets/background.jpeg
diff --git a/src/assets/bird.jpeg b/src/assets/bird.jpeg
diff --git a/src/assets/dolphin.png b/src/assets/dolphin.png
diff --git a/src/assets/fox.jpeg b/src/assets/fox.jpeg
diff --git a/src/assets/frog.png b/src/assets/frog.png
diff --git a/src/assets/koala.jpeg b/src/assets/koala.jpeg
diff --git a/src/assets/lightning.png b/src/assets/lightning.png
diff --git a/src/assets/lion.jpeg b/src/assets/lion.jpeg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/negative.png b/src/assets/negative.png
diff --git a/src/assets/otter.jpeg b/src/assets/otter.jpeg
diff --git a/src/assets/panda.jpeg b/src/assets/panda.jpeg
diff --git a/src/assets/positive.png b/src/assets/positive.png
diff --git a/src/assets/search.png b/src/assets/search.png
diff --git a/src/assets/star.png b/src/assets/star.png
diff --git a/src/components/ConfirmationFolder/ConfirmationPage.css 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
@@ -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 (
+    <div className="confirmation-container">
+      <img src={logoImage} alt="Quiz Logo" className="confirmation-logo" />
+      <img src={starImage} alt="Star" className="confirmation-star" />
+      <h1 className="confirmation-title">{title}</h1>
+      <p className="confirmation-subtitle">{subtitle}</p>
+      <div className="score-box">
+        <span className="score">{score} points</span> 
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationPage;
diff --git a/src/components/HeaderFolder/Header.css 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
@@ -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 (
+    <header className="Header" aria-label="Main header">
+      <img src={logo} alt="Paw Pops Logo" className="logo" />
+
+      <button className="search-button" aria-label="Search">
+        <img src={searchIcon} alt="" className="search-icon" />
+      </button>
+    </header>
+  );
+};
+
+export default Header;