test view change

YileiCheng · Dec 19, 2023 · d1fbc19 · d1fbc19
1 parent fd50eea
commit d1fbc19
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 38 deletions.
diff --git a/src/presenter/testPresenter.jsx b/src/presenter/testPresenter.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef } from "react";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from "../model/authContext.jsx";
 import TestView from "../views/testView.jsx";
@@ -17,6 +17,7 @@ export default observer(function Test(props) {
   const [selections, setSelections] = useState({});
   const [openAIResponse, setOpenAIResponse] = useState(null);
   const navigate = useNavigate(); 
+  const questionRefs = useRef(questions.map(() => React.createRef()));
 
   useEffect(() => {
     if (currentUser) {
@@ -72,25 +73,34 @@ export default observer(function Test(props) {
   }
 
   const handleSelect = (index, value) => {
-      setSelections((prevSelections) => {
-        if (prevSelections[index] === value) {
-          const updatedSelections = { ...prevSelections };
-          delete updatedSelections[index];
-          return updatedSelections;
-        } else {
-          document.documentElement.scrollTo({
-            top: (_get_window_height()/2.9)*index + _get_window_height()/4.8,
-            behavior:'smooth'
-          })
+    setSelections((prevSelections) => {
+      const updatedSelections = { ...prevSelections };
+      if (updatedSelections[index] === value) {
+        delete updatedSelections[index]; 
+      } else {
+        updatedSelections[index] = value; 
+      }
+
+      saveToFirebase(currentUser.uid, updatedSelections);
+
+      setTimeout(() => {
+        const nextQuestionIndex = Object.keys(updatedSelections).length;
+        if (nextQuestionIndex < questions.length && questionRefs.current[nextQuestionIndex]) {
+          const nextQuestionEl = questionRefs.current[nextQuestionIndex].current;
+          if (nextQuestionEl) {
+            nextQuestionEl.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+            });
+          }
         }
-        return {
-          ...prevSelections,
-          [index]: value,
-        };
-      });
-      saveToFirebase(currentUser.uid, selections);
-  };
+      }, 0);
+
+      return updatedSelections;
+    });
+  };  
 
+  questionRefs.current = questions.map((_, i) => questionRefs.current[i] ?? React.createRef());
 
     return <TestView
             handleSelect={handleSelect}
@@ -100,6 +110,7 @@ export default observer(function Test(props) {
             goToResults={goToResults}
             toTop={toTop}
             selections={selections}
+            questionRefs={questionRefs}
             />;
   }
 );
diff --git a/src/style.css b/src/style.css
@@ -192,9 +192,9 @@ h1 {
 .mainContent {
   display: flex;
   width: 100%;
-  gap: 2%;
+  gap: 20px;
   margin-left: 2%;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
   justify-content: space-around;
   place-items: center;
   max-width: 60vw;
@@ -232,6 +232,19 @@ h1 {
   padding: 30px;
 }
 
+.questionContainer {
+  max-width: 60%; 
+  margin: 20px auto; 
+  padding: 0 20px; 
+}
+
+.separator-line {
+  border: none;
+  border-top: 1px solid #e0e0e0; 
+  margin: 20px auto; 
+}
+
+
 .gap {
   width: 100%;
   height: 30px;
@@ -434,15 +447,16 @@ img {
 }
 
 .normalText-test {
-  font-size: 2.2rem;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
   color: #373d7f;
   align-self: center;
   text-align-last: center;
   flex: 0 1 9vh;
 }
 
 .normalText-test2 {
-  font-size: 2.2rem;
+  font-size: 1.2rem;
   color: #373d7f;
   align-self: center;
   text-align-last: center;
@@ -829,3 +843,7 @@ img {
   to {opacity: 1;}
 }
 
+.answered {
+  opacity: 0.5; 
+}
+
diff --git a/src/views/components/testItem.jsx b/src/views/components/testItem.jsx
@@ -1,22 +1,23 @@
+import React, { forwardRef } from 'react';
 import TestPoint from "../../assets/images/testpoint.png";
 import gotcha from "../../assets/images/gotcha.png";
 
-function TestItem(props) {
-  const { text, onSelect, selectedValue } = props;
+const TestItem = forwardRef((props, ref) => {
   const options = [1, 2, 3, 4, 5, 6, 7];
+  const { text, onSelect, selectedValue, isAnswered } = props;
 
   return (
-    <div className="columnContainer">
+    <div className={`columnContainer ${isAnswered ? 'answered' : ''}`} ref={ref}>
       <p className="normalText-test">{text}</p>
       <div className="mainContent">
         <div className="normalText-test2">Disagree</div>
         {options.map((value) => (
           <img
             key={value}
-            className="point_img"
+            className={`point_img ${isAnswered ? 'answered' : ''}`}
             src={selectedValue === value ? gotcha : TestPoint}
             style={{
-              width: `${value <= 4 ? 7 - value : value}vw`,
+              width: `${(value <= 4 ? (8 - value) : value) * 0.7}vw`,
             }}
             onClick={() => onSelect(value)}
             alt="Test Point"
@@ -26,6 +27,6 @@ function TestItem(props) {
       </div>
     </div>
   );
-}
+});
 
 export default TestItem;
diff --git a/src/views/testView.jsx b/src/views/testView.jsx
@@ -12,16 +12,22 @@ function TestView(props) {
   return (
     <div className="testViewContainer">
       <Banner text="Test" />
-      <div className="columnContainer">
-        {questions.map((question, index) => (
-            <TestItem
-              id={"test-"+index}
-              key={question.id}
-              text={question.question}
-              onSelect={(value) => props.handleSelect(index, value)}
-              selectedValue={props.selections[index]}
-          />
-        ))}
+      <div className="questionContainer">
+        {questions.map((question, index) => {
+          const isAnswered = props.selections[index] != null;
+          return (
+            <div key={question.id} ref={props.questionRefs.current[index]}>
+              <TestItem
+                id={"test-" + index}
+                text={question.question}
+                onSelect={(value) => props.handleSelect(index, value)}
+                selectedValue={props.selections[index]}
+                isAnswered={isAnswered}
+              />
+              {index !== questions.length - 1 && <hr className="separator-line" />}
+            </div>
+          );
+        })}
       </div>
       <div className="flextRowParent">
         <button className="button_2" onClick={props.toTop}>