oops

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/vp-explorer/VPExplorer.css

@@ -1,13 +0,0 @@
-.answer-feedback {
-    transition: opacity 0.3s ease-in;
-    opacity: 0.8;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 99999999;
-    transform: translate(-50%, -50%);
-}
-
-.hide {
-    opacity: 0;
-}

src/components/vp-explorer/VPExplorer.tsx

@@ -11,21 +11,30 @@ import * as T from "../../types";
 import ChartDisplay from "./ChartDisplay";
 import useStickyState from "../../lib/useStickyState";
 import { makeVPSelectionState } from "./verb-selection";
-import { useEffect, useState } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import { randomSubjObj } from "../../library";
 import shuffleArray from "../../lib/shuffle-array";
 import InlinePs from "../InlinePs";
 import { psStringEquals } from "../../lib/p-text-helpers";
-import classNames from "classnames";
 import { randFromArray } from "../../lib/misc-helpers";
 import playAudio from "../../lib/play-audio";
-import "./VPExplorer.css";
 // import { useReward } from 'react-rewards';
 
 const kingEmoji = "👑";
 const servantEmoji = "🙇‍♂️";
 const correctEmoji = ["✅", '🤓', "✅", '😊', "🌹", "✅", "✅", "🕺", "💃", '🥳', "👏", "✅", "💯", "😎", "✅", "👍"];
 
+const answerFeedback: CSSProperties = {
+    "fontSize": "4rem",
+    "transition": "opacity 0.3s ease-in",
+    "opacity": 0.9,
+    "position": "fixed",
+    "top": "60%",
+    "left": "50%",
+    "zIndex": 99999999,
+    "transform": "translate(-50%, -50%)",
+}
+
 // TODO: Drill Down text display options
 
 // TODO: SHOW KING AND SERVANT ONCE TENSE PICKED, EVEN IF NPs not selected
@@ -256,9 +265,8 @@ export function VPExplorer(props: {
             <VPDisplay VP={verbPhrase} opts={props.opts} />
         }
         {(vps.verb && (mode === "charts")) && <ChartDisplay VS={vps.verb} opts={props.opts} />}
-        <span id="rewardId" />
         {(mode === "quiz" && quizState) && <div className="text-center">
-            <div style={{ fontSize: "4rem" }} className={classNames("answer-feedback", { hide: !showCheck })}>
+            <div style={showCheck ? answerFeedback : { ...answerFeedback, opacity: 0 }}>
                 {currentCorrectEmoji}
             </div>
             {quizState.result === "waiting" ? <>