Shaina-Z · timdoggington · Apr 16, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 9, 2025
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,7 +19,7 @@ jobs:
         steps:
             - uses: actions/checkout@v2
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: "npm"

diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
 
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  overflow-y: auto; /* allows vertical scrolling */
+}
+
 .App {
   text-align: center;
+  overflow: auto;
 }
 
 
@@ -24,7 +32,7 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: black;
 }
 
 .App-link {
@@ -45,10 +53,10 @@
   transform: translateY(-82%);
 }
 
-.take-quiz-button {
+.take-quiz-block {
   border-radius: 30px;
   position: fixed;
-  width: 900px;
+  width: 75%;
   padding: 40px;
   background-color: darkblue;
   color: white;
@@ -60,13 +68,14 @@
   font-size: 45px;
   text-align: center;
   align-items: center;
+  margin: 40px auto;
 }
 
 .fade-strip {
   z-index: 9998;
   position: fixed;
   width: 100%;
-  height: 200px;
+  height: 15%;
   top: 5%;
   display: flex;
   align-items: center;
@@ -94,7 +103,7 @@
   color: white;
 } 
 
-.basic{
+.basic, .detailed{
   background-color: #d3dced;
   width: 1000px;
   padding: 15px;
@@ -103,14 +112,16 @@
   display: grid;
   place-items: center;
   text-wrap:balance;
-  top: 46%;
+  top: unset;
   border-style: solid;
-  position: fixed;
-  left: 50%;
+  position: relative;
+  left: unset;
   z-index: 1000;
-  transform: translateX(-50%);
+  transform: none;
+  margin: 40px auto;
 }
 
+/*
 .detailed{
   background-color: #d3dced;
   width: 1000px;
@@ -125,19 +136,20 @@
   top: 58%;
   left: 50%;
   transform: translateX(-50%);
-}
+}*/
 
 .Detailed-Questions{
   text-wrap:balance;
   padding:25px;
   border-style: solid;
+  width: 75%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.Detailed-Questions header {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+
+.Detailed-Questions small {
+  font-size: 50%;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -61,16 +61,15 @@ function App() {
             >
               Home Page
             </Button>
-      <div className="take-quiz-button" hidden = {isHome}>Take our free career quiz now!</div>
+      <div className="take-quiz-block" hidden = {isHome}>Take our free career quiz now!</div>
       <div hidden={isHome} className="fade-strip">Career Helpi Quiz</div>
       <header className="App-header">
         <div className="Basic-Questions" hidden={notBasic}>
         <BasicQuestions />
+        </div>
         <div className="Detailed-Questions" hidden={notDetailed}>
         <DetailedQuestions />
       </div>
-        </div>
-        </header>
         <p className ="basic" style= {{zIndex: 5}} hidden = {isHome}>Not sure where to start? Answer a few small questions to get some starting points on a career path.
         <Button style={{backgroundColor: 'darkblue'}}//Flips the visibility of the Basic and Home pages
               onClick={() => {
@@ -95,7 +94,7 @@ function App() {
               Detailed Quiz
             </Button> </p>
 
-
+            </header>
         <a
           className="App-link"
           href="https://reactjs.org"

diff --git a/src/Pages/BasicQuestions.tsx b/src/Pages/BasicQuestions.tsx
@@ -17,12 +17,16 @@ export function BasicQuestions(): React.JSX.Element{
         const [answer3, setAnswer3] = useState<string>(QTYPEAANSWER[0]);
         const [answer4, setAnswer4] = useState<string>(QTYPEAANSWER[0]);
         const [answer5, setAnswer5] = useState<string>(QTYPEAANSWER[0]);
-
+        const [progress,setProgress]=useState<number>(0)
+        function UpdateProgress(){
+            setProgress(progress+1);
+            console.log(progress);
+          }
     return(
         <span>  
             <div className="page-wrapper">
                 <div className = "Basic-Questions">
-                    <header style={{fontSize:40}}> Basic Quiz</header>
+                    <header className="Basic-Title" style={{fontSize:40}}> Basic Quiz</header>
                     <h3 style={{color: 'white'}}>1. I would like to develop new medicine</h3>
                     <Form.Group controlId={"Question 1"}>
                             {QTYPEAANSWER.map((ananswer) => (
@@ -31,12 +35,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response1"}
                                 key={ananswer}
-                                value={ananswer}
+                                value={answer1}
                                 label={ananswer}
                                 onChange={(e) => {
                                     setAnswer1(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer1 === ananswer}
+                               //checked={answer1 !== ananswer}
                             />
                         ))}
                     </Form.Group>
@@ -48,12 +53,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response2"}
                                 key={ananswer2}
-                                value={ananswer2}
+                                value={answer2}
                                 label={ananswer2}
                                 onChange={(e) => {
                                     setAnswer2(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer2 === ananswer2}
+                                //checked={answer2 !== ananswer2}
                             />
                         ))}
                     </Form.Group>
@@ -65,12 +71,14 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response3"}
                                 key={ananswer3}
-                                value={ananswer3}
+                                value={answer3}
                                 label={ananswer3}
                                 onChange={(e) => {
-                                    setAnswer3(e.target.value);
+                                    setAnswer3(e.target.value
+                                     );
+                                     UpdateProgress();
                                 }}
-                                checked={answer3 === ananswer3}
+                                //checked={answer3 !== ananswer3}
                             />
                         ))}
                 </Form.Group>
@@ -82,12 +90,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response4"}
                                 key={ananswer4}
-                                value={ananswer4}
+                                value={answer4}
                                 label={ananswer4}
                                 onChange={(e) => {
                                     setAnswer4(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer4 === ananswer4}
+                                //checked={answer4 !== ananswer4}
                             />
                         ))}
                 </Form.Group>
@@ -99,17 +108,21 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response5"}
                                 key={ananswer5}
-                                value={ananswer5}
+                                value={answer5}
                                 label={ananswer5}
                                 onChange={(e) => {
                                     setAnswer5(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer5 === ananswer5}
+                                //checked={answer5 !== ananswer5}
                             />
                         ))}
                 </Form.Group>
+                <progress value={progress} max={7} ></progress>
+                <div className='Ready' hidden={progress<=7}>Ready to Submit?</div>
                 </div>
             </div>    
         </span>
     )
-}
+}
+