feat: animation at the summary step

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>

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 ? (
                     <></>
                 ) : (

src/hooks/useAnimate.tsx

-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";