identify equatives quiz - kinda rough

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@lingdocs/lingdocs-main": "^0.2.0",
-    "@lingdocs/pashto-inflector": "^2.4.9",
+    "@lingdocs/pashto-inflector": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/games/games.tsx

@@ -84,11 +84,18 @@ export const equativeGamePastSubjunctive = makeGameRecord(
     (id, link) => () => <EquativeGame id={id} link={link} level="pastSubjunctive" />,
 );
 
-export const equativeGameAll = makeGameRecord(
+export const equativeGameAllIdentify = makeGameRecord(
-    'Write the equative (summary)',
+    "Identify the equative (all tenses)",
-    "equative-past-summary",
+    "equative-past-summary-identify",
     "/equatives/other-equatives",
-    (id, link) => () => <EquativeGame id={id} link={link} level="all" />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="allIdentify" />,
+);
+
+export const equativeGameAllProduce = makeGameRecord(
+    "Write the equative (all tenses)",
+    "equative-past-summary-produce",
+    "/equatives/other-equatives",
+    (id, link) => () => <EquativeGame id={id} link={link} level="allProduce" />,
 );
 
 const games: { chapter: string, items: GameRecord[] }[] = [
@@ -110,7 +117,8 @@ const games: { chapter: string, items: GameRecord[] }[] = [
             equativeGamePast,
             equativeGameWouldBe,
             equativeGamePastSubjunctive,
-            equativeGameAll,
+            equativeGameAllIdentify,
+            equativeGameAllProduce,
         ],
     },
 ];

src/games/sub-cores/EquativeGame.tsx

@@ -18,6 +18,7 @@ import {
     InlinePs,
     grammarUnits,
 } from "@lingdocs/pashto-inflector";
+import { psStringEquals } from "@lingdocs/pashto-inflector/dist/lib/p-text-helpers";
 
 const kidsColor = "#017BFE";
 
@@ -52,9 +53,9 @@ const amount = 20;
 const timeLimit = 75;
 
 type Question = {
-    phrase: { ps: T.PsString, e?: string[] },
+    EPS: T.EPSelectionComplete,
+    phrase: { ps: T.PsString[], e?: string[] },
     equative: T.EquativeRendered,
-    tense: T.EquativeTense,
 };
 
 const pronounTypes = [
@@ -67,7 +68,7 @@ const pronounTypes = [
     [T.Person.ThirdPlurMale, T.Person.ThirdPlurFemale],
 ];
 
-export default function EquativeGame({ id, link, level }: { id: string, link: string, level: T.EquativeTense | "all" }) {
+export default function EquativeGame({ id, link, level }: { id: string, link: string, level: T.EquativeTense | "allProduce" | "allIdentify" }) {
     function* questions (): Generator<Current<Question>> {
         let pool = [...pronounTypes];
         function makeRandPronoun(): T.PronounSelection {
@@ -95,8 +96,7 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
                 number: n.numberCanChange ? randFromArray(["singular", "plural"]) : n.number,
             };
         }
-        for (let i = 0; i < amount; i++) {
+        function makeRandomEPS(): T.EPSelectionComplete {
-            console.log("one factory call");
             const subj = randFromArray([
                 makeRandPronoun,
                 makeRandPronoun,
@@ -104,20 +104,29 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
                 makeRandPronoun,
             ])();
             const pred = randFromArray([...adjectives, ...locAdverbs]);
-            const tense = level === "all" ? randFromArray(tenses) : level;
+            const tense = (level === "allIdentify" || level === "allProduce")
-            const EPS = makeEPS(subj, pred, tense);
+                ? randFromArray(tenses)
-            const rendered = renderEP(EPS);
+                : level;
-            const compiled = compileEP(rendered, true, { equative: true, ba: false, kidsSection: true });
+            return makeEPS(subj, pred, tense);
+        }
+        for (let i = 0; i < amount; i++) {
+            const EPS = makeRandomEPS();
+            const EP = renderEP(EPS);
+            const compiled = compileEP(
+                EP,
+                true,
+                level === "allIdentify" ? undefined : { equative: true, kidsSection: true },
+            );
             const phrase = {
-                ps: compiled.ps[0],
+                ps: compiled.ps,
-                e: compiled.e,
+                e: level === "allIdentify" ? undefined : compiled.e,
             };
             yield {
                 progress: makeProgress(i, amount),
                 question: {
+                    EPS,
                     phrase,
-                    equative: rendered.equative,
+                    equative: EP.equative,
-                    tense, 
                 },
             };
         };
@@ -140,20 +149,60 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
             }
             callback(!correct ? makeCorrectAnswer(question) : true);
         }
+        const handleTenseIdentify = (tense: T.EquativeTense) => {
+            const renderedWAnswer = renderEP({
+                ...question.EPS,
+                equative: {
+                    ...question.EPS.equative,
+                    tense,
+                },
+            });
+            const compiledWAnswer = compileEP(renderedWAnswer, true);
+            const wasCorrect = compiledWAnswer.ps.some(a => (
+                question.phrase.ps.some(b => psStringEquals(a, b))
+            ));
+            if (wasCorrect) {
+                return callback(wasCorrect);
+            } else {
+                callback(<div>
+                    {humanReadableTense(question.EPS.equative.tense)}
+                </div>)
+            }
+        }
         useEffect(() => {
-            if (level === "all") setWithBa(false);
+            if (level === "allProduce") setWithBa(false);
         }, [question]);
         
         return <div>
-            <div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
+            {level === "allIdentify" ?
-                {/* @ts-ignore */}
+                <div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
-                <Examples opts={opts} ex={modExs([question.phrase.ps], withBa)}></Examples>
+                    <Examples opts={opts}>
-                {question.phrase.e && question.phrase.e.map((e, i) => (
+                        {randFromArray(question.phrase.ps)}
-                    <div key={e+i} className="text-muted mb-1">{e}</div>
+                    </Examples>
-                ))}
+                </div>
-                <div className="lead text-muted">{humanReadableTense(question.tense)} equative</div>
+                : <div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
-            </div>
+                    <Examples opts={opts}>
-            <form onSubmit={handleSubmit}>
+                        {/* @ts-ignore  TODO: REMOVE AS P_INFLE */}
+                        {modExs(question.phrase.ps, withBa)[0]}
+                    </Examples>
+                    {question.phrase.e && question.phrase.e.map((e, i) => (
+                        <div key={e+i} className="text-muted mb-1">{e}</div>
+                    ))}
+                    <div className="lead text-muted">{humanReadableTense(question.EPS.equative.tense)} equative</div>
+                </div>
+            }
+            {level === "allIdentify" ? <div className="text-center">
+                <div className="row">
+                    {tenses.map(t => <div className="col" key={t}>
+                        <button
+                            className="btn btn-sm btn-outline-secondary mb-3"
+                            onClick={() => handleTenseIdentify(t)}
+                        >
+                            {humanReadableTense(t)}
+                        </button>
+                    </div>)}
+                </div>
+            </div> : <form onSubmit={handleSubmit}>
                 <div className="form-check mt-1">
                     <input
                         id="baCheckbox"
@@ -186,15 +235,16 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
                         Type <kbd>Enter</kbd> to check
                     </div> */}
                 </div>
-            </form>
+            </form>}
-
         </div>
     }
     
     function Instructions() {
         return <div>
-            <p className="lead">Fill in the blank with the correct <strong>{humanReadableTense(level)} equative</strong> <strong>in Pashto script</strong></p>
+            {level === "allProduce"
-            {level === "all" && <div>⚠ All tenses included...</div>}
+                ? <p className="lead">Fill in the blank with the correct <strong>{humanReadableTense(level)} equative</strong> <strong>in Pashto script</strong></p>
+                : <p className="lead">Identify a correct tense for each equative phrase you see</p>}
+            {level === "allProduce" && <div>⚠ All tenses included...</div>}
         </div>
     }
 
@@ -203,7 +253,7 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
         questions={questions}
         id={id}
         Display={Display}
-        timeLimit={level === "all" ? timeLimit * 1.4 : timeLimit}
+        timeLimit={level === "allProduce" ? timeLimit * 1.4 : timeLimit}
         Instructions={Instructions}
     />
 };
@@ -239,8 +289,8 @@ function modExs(exs: T.PsString[], withBa: boolean): { p: JSX.Element, f: JSX.El
     });
 }
 
-function humanReadableTense(tense: T.EquativeTense | "all"): string {
+function humanReadableTense(tense: T.EquativeTense | "allProduce"): string {
-    return tense === "all"
+    return tense === "allProduce"
         ? ""
         : tense === "pastSubjunctive"
         ? "past subjunctive"