diff --git a/index.html b/index.html index ad16156473b9714ba6bcd309ab30fab9707b509d..f79d57873af5b2dff8056040b7d26c4a231dc212 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ <script src="/animations/insulinTest_q2.js" type="text/javascript"></script> <script src="/animations/insulinTest_q3.js" type="text/javascript"></script> <script src="/animations/insulinTest_q4.js" type="text/javascript"></script> + <script src="/animations/happy.js" type="text/javascript"></script> <script type="module" src="/src/main.tsx"></script> </body> </html> diff --git a/src/components/InsulinTest.tsx b/src/components/InsulinTest.tsx index 75536bfedce6bff4a548a9544796e0e77459f186..9334429c64d2ca5c4775dbd38f2cc0405159474c 100644 --- a/src/components/InsulinTest.tsx +++ b/src/components/InsulinTest.tsx @@ -77,11 +77,17 @@ const InsulinTest = () => { steps={generateSteps()} activeStep={currentStep} /> - <div className="text-center"> + <div className="text-center justify-center inline-block"> {isSummaryStep ? ( - <p className="text-xl font-semibold py-4"> - {`${scoreText} ${(score / 5) * 100}%`} - </p> + <div className="w-[300px] h-[700px]"> + <p className="text-xl font-semibold"> + {`${scoreText} ${(score / 5) * 100}%`} + </p> + <AnimateCC + animationName="happy" + getAnimationObject={getAnimationObject} + /> + </div> ) : isDraggableTestStep ? ( <></> ) : ( diff --git a/src/hooks/useAnimate.tsx b/src/hooks/useAnimate.tsx index 2eab543128b46a9cb49ae13f14cd081854772884..f21607b88bbddf0be78f593e3ddb9429999da1fa 100644 --- a/src/hooks/useAnimate.tsx +++ b/src/hooks/useAnimate.tsx @@ -1,4 +1,4 @@ -import {SetStateAction, useEffect, useRef, useState} from "react"; +import React, {SetStateAction, useEffect, useRef, useState} from "react"; import {TypewriterClass} from "typewriter-effect"; import {useNavigate} from "react-router-dom"; import {useRecoilValue} from "recoil";