Fix/slider issues

src/components/concentration-display/Concentration.tsx

@@ -99,7 +99,10 @@ const Concentration: React.FC<AgentProps> = ({
         } else {
             let percentage: number | undefined = undefined;
             const startingConcentration = concentration[agent];
-            if (startingConcentration !== undefined) {
+            if (
+                startingConcentration !== undefined &&
+                startingConcentration !== 0
+            ) {
                 percentage =
                     (startingConcentration / maxConcentration) *
                     widthMinusMargins;

src/components/quiz-questions/EquilibriumQuestion.tsx

@@ -98,7 +98,8 @@ const EquilibriumQuestion: React.FC = () => {
                     </>
                 }
                 failureMessage="Please try again. Look carefully at what is happening in each of the plots to help find the answer."
-                id="Equilibrium"
+                formID="equilibrium"
+                minimizedTitle="Equilibrium"
             />
         </VisibilityControl>
     );

src/components/quiz-questions/KdQuestion.tsx

@@ -104,7 +104,7 @@ const KdQuestion: React.FC<KdQuestionProps> = ({ kd, canAnswer }) => {
             <Flex gap={8} align="baseline" style={{ maxWidth: 130 }}>
                 <InputNumber
                     aria-labelledby="kd question"
-                    value={selectedAnswer || ""}
+                    value={selectedAnswer ?? ""}
                     onChange={handleAnswerSelection}
                     placeholder="Type value..."
                 />
@@ -121,7 +121,8 @@ const KdQuestion: React.FC<KdQuestionProps> = ({ kd, canAnswer }) => {
                 successMessage={getSuccessMessage(selectedAnswer!)}
                 failureMessage="Visit the “Learn how to derive Kd” button above, then use the Equilibrium concentration plot to answer."
                 formState={formState}
-                id="Kd Value"
+                formID="kd-value"
+                minimizedTitle="Kd Value"
             />
         </VisibilityControl>
     );

src/components/quiz-questions/KiQuestion.tsx

@@ -83,7 +83,7 @@ const KiQuestion: React.FC<KiQuestionProps> = ({ canAnswer, ki }) => {
             <Flex gap={8} align="baseline" style={{ maxWidth: 130 }}>
                 <InputNumber
                     aria-labelledby="ki-question"
-                    value={selectedAnswer || ""}
+                    value={selectedAnswer ?? ""}
                     onChange={handleAnswerSelection}
                     placeholder="Type value..."
                 />
@@ -101,7 +101,8 @@ const KiQuestion: React.FC<KiQuestionProps> = ({ canAnswer, ki }) => {
                 successMessage={getSuccessMessage(selectedAnswer!)}
                 failureMessage='Visit the "Learn how to derive Ki" button above, then use the Equilibrium concentration plot to answer.'
                 formState={formState}
-                id="Ki Value"
+                formID="ki-value"
+                minimizedTitle="Ki Value"
             />
         </VisibilityControl>
     );

src/components/quiz-questions/QuizForm.tsx

@@ -18,27 +18,29 @@ interface QuizFormProps {
     formState: FormState;
     successMessage: string | JSX.Element;
     failureMessage: string;
-    id: string;
+    formID: string;
+    minimizedTitle: string;
 }
 
 const QuizForm: React.FC<QuizFormProps> = ({
     title,
-    id,
+    formID,
     formContent,
     onSubmit,
     formState,
     successMessage,
     failureMessage,
+    minimizedTitle,
 }) => {
     const { lastOpened, setLastOpened } = React.useContext(CenterPanelContext);
     const [show, setShow] = React.useState(false);
 
-    const isFormMaximized = lastOpened === id;
-    const minimizedTitle = `Q:${id}`;
+    const isFormMaximized = lastOpened === formID;
+    const minimizedLabel = `Q:${minimizedTitle}`;
 
     // open form on mount
     useEffect(() => {
-        setLastOpened(id);
+        setLastOpened(formID);
         setTimeout(() => {
             setShow(true);
         }, 1000);
@@ -47,7 +49,7 @@ const QuizForm: React.FC<QuizFormProps> = ({
 
     const toggleFormVisibility = () => {
         if (!isFormMaximized) {
-            setLastOpened(id);
+            setLastOpened(formID);
         } else {
             setLastOpened(null);
         }
@@ -68,7 +70,7 @@ const QuizForm: React.FC<QuizFormProps> = ({
             >
                 <div className={styles.header}>
                     <h3 className={styles.title}>
-                        {isFormMaximized ? title : minimizedTitle}
+                        {isFormMaximized ? title : minimizedLabel}
                     </h3>
                     <IconButton
                         onClick={toggleFormVisibility}