diff --git a/src/components/concentration-display/Concentration.tsx b/src/components/concentration-display/Concentration.tsx index 25a5ea4..f8ff1d7 100644 --- a/src/components/concentration-display/Concentration.tsx +++ b/src/components/concentration-display/Concentration.tsx @@ -99,7 +99,10 @@ const Concentration: React.FC = ({ } else { let percentage: number | undefined = undefined; const startingConcentration = concentration[agent]; - if (startingConcentration !== undefined) { + if ( + startingConcentration !== undefined && + startingConcentration !== 0 + ) { percentage = (startingConcentration / maxConcentration) * widthMinusMargins; diff --git a/src/components/quiz-questions/EquilibriumQuestion.tsx b/src/components/quiz-questions/EquilibriumQuestion.tsx index 7d3f8bb..f4fd0fd 100644 --- a/src/components/quiz-questions/EquilibriumQuestion.tsx +++ b/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" /> ); diff --git a/src/components/quiz-questions/KdQuestion.tsx b/src/components/quiz-questions/KdQuestion.tsx index 4074dae..84160a0 100644 --- a/src/components/quiz-questions/KdQuestion.tsx +++ b/src/components/quiz-questions/KdQuestion.tsx @@ -104,7 +104,7 @@ const KdQuestion: React.FC = ({ kd, canAnswer }) => { @@ -121,7 +121,8 @@ const KdQuestion: React.FC = ({ 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" /> ); diff --git a/src/components/quiz-questions/KiQuestion.tsx b/src/components/quiz-questions/KiQuestion.tsx index 00e2798..b3213c8 100644 --- a/src/components/quiz-questions/KiQuestion.tsx +++ b/src/components/quiz-questions/KiQuestion.tsx @@ -83,7 +83,7 @@ const KiQuestion: React.FC = ({ canAnswer, ki }) => { @@ -101,7 +101,8 @@ const KiQuestion: React.FC = ({ 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" /> ); diff --git a/src/components/quiz-questions/QuizForm.tsx b/src/components/quiz-questions/QuizForm.tsx index bad45f2..fd75006 100644 --- a/src/components/quiz-questions/QuizForm.tsx +++ b/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 = ({ 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 = ({ const toggleFormVisibility = () => { if (!isFormMaximized) { - setLastOpened(id); + setLastOpened(formID); } else { setLastOpened(null); } @@ -68,7 +70,7 @@ const QuizForm: React.FC = ({ >

- {isFormMaximized ? title : minimizedTitle} + {isFormMaximized ? title : minimizedLabel}