The grid game now allows for statement checks

Author: Evan-CTL

media/js/src/firstOrderLogic/firstOrderLogic.tsx

@@ -4,6 +4,7 @@ import { shuffleArray, getRandomElement, GridItem, GridStatement,
 import { getTemplatesByDifficulty } from './statementGenerator';
 import { Grid } from './grid';
 import { Options } from './options';
+import { StatementInput } from './statementInput';
 
 export const STATIC_URL = LogicLearner.staticUrl;
 
@@ -16,9 +17,10 @@ export const FirstOrderLogic: React.FC = () => {
     const [options, setOptions] = useState<GridStatement[]>([]);
     const [size, setSize] = useState<number>(5);
     const [templateBank, setTemplateBank] = useState<Object[]>(getTemplatesByDifficulty(difficulty));
-    const [value, setValue] = useState();
+    const [text, setText] = useState<string>('');
     const [isCorrect, setIsCorrect] = useState<boolean>(false);
     const [selected, setSelected] = useState<number|null>()
+    const [mode, setMode] = useState<number>(0);
 
     const [correctTemplate, setCorrectTemplate] =
         useState<GridTemplate>(getRandomElement(templateBank));
@@ -30,8 +32,8 @@ export const FirstOrderLogic: React.FC = () => {
     ];
 
     const inputOptions = [  // [value, innerText]
-        ['mc', 'Multiple Choice'],
-        ['text', 'Text Input']
+        [0, 'Multiple Choice'],
+        [1, 'Text Input']
     ];
 
     function generateIncorrectStatements(templateBank, correctTemplate) {
@@ -68,6 +70,10 @@ export const FirstOrderLogic: React.FC = () => {
         setDifficulty(e.target.value);
     };
 
+    const handleMode = (e) => {
+        setMode(Number(e.target.value));
+    }
+
     const handleNewGrid = () => {
         let newArr = getRandomElement(templateBank)
         while (newArr === correctTemplate) {
@@ -85,7 +91,7 @@ export const FirstOrderLogic: React.FC = () => {
 
     const settings = [
         mkSelect(diffOptions, handleDifficulty),
-        mkSelect(inputOptions, () => alert('Needs implementation.')),
+        mkSelect(inputOptions, handleMode),
         <button className='btn btn-primary mt-2' onClick={handleNewGrid}>
             Next Grid
         </button>
@@ -105,7 +111,7 @@ export const FirstOrderLogic: React.FC = () => {
             const generated = correctTemplate.generateGrid(true, statementData.details)
 
             setGrid(generated.grid);
-            setValue(generated.satisfies);
+            setText('');
 
             setCorrectStatement({
                 naturalLanguageStatement: statementData.naturalLanguageStatement,
@@ -135,6 +141,10 @@ export const FirstOrderLogic: React.FC = () => {
         setSelected(null);
     }, []);
 
+    useEffect(() => {
+        setIsCorrect(false);
+    }, [mode])
+
     return <section id='grid-game'
         className='container d-flex justify-content-center'
     >
@@ -148,9 +158,14 @@ export const FirstOrderLogic: React.FC = () => {
                         </li>)}
                 </ul>
             </div>
-            <Options options={options} correctIndex={correctIndex}
+            {mode === 0 && <Options options={options} correctIndex={correctIndex}
                 isCorrect={isCorrect} setIsCorrect={setIsCorrect}
-                selected={selected} setSelected={setSelected} />
+                selected={selected} setSelected={setSelected} />}
+            {mode === 1 && <StatementInput isCorrect={isCorrect}
+                correctStatement={correctStatement}
+                setIsCorrect={setIsCorrect}
+                text={text}
+                setText={setText} />}
         </div>
     </section>
 }

media/js/src/firstOrderLogic/gridTemplates/hardTemplates/hardTemplate_05.ts

@@ -56,7 +56,7 @@ export const hardTemplate_05 = {
         const formalFOLStatement = `
         ∀x (
           (Shape(x, ${shape1}) ∧ Color(x, ${colorName}))
-          → ∃y (Shape(y, ${shape2}) ∧ Value(y) ≥ ${threshold} ∧ TopLeftDiagonalOf(y, x))
+          → ∃y (Shape(y, ${shape2}) ∧ Value(y) ≥ ${threshold} ∧ TopLeftOf(y, x))
         )
       `.trim();
 

media/js/src/firstOrderLogic/gridTemplates/hardTemplates/hardTemplate_06.ts

@@ -49,11 +49,11 @@ export const hardTemplate_06 = {
         );
 
         // FOL example:
-        // "∀x( (Shape(x)=s1 ∧ Color(x)=c1) → ∃y( Shape(y)=s2 ∧ Value(y)<threshold ∧ TopRightDiagonalOf(y,x) ) )"
+        // "∀x( (Shape(x)=s1 ∧ Color(x)=c1) → ∃y( Shape(y)=s2 ∧ Value(y)<threshold ∧ TopRightOf(y,x) ) )"
         const formalFOLStatement = `
         ∀x (
           (Shape(x, ${shape1}) ∧ Color(x, ${colorName}))
-          → ∃y (Shape(y, ${shape2}) ∧ Value(y) < ${threshold} ∧ TopRightDiagonalOf(y, x))
+          → ∃y (Shape(y, ${shape2}) ∧ Value(y) < ${threshold} ∧ TopRightOf(y, x))
         )
       `.trim();
 

media/js/src/firstOrderLogic/statementInput.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { GridStatement } from './utils';
+
+interface StatementProps {
+    correctStatement: GridStatement
+    isCorrect: boolean
+    setIsCorrect: Function
+    text: string
+    setText: Function
+}
+
+export const StatementInput: React.FC<StatementProps> = ({
+    correctStatement, isCorrect, setIsCorrect, text, setText
+}:StatementProps) => {
+    const [feedback, setFeedback] = useState<string>(
+        'ERROR: This feedback should not be visible.')
+    const [submitted, setSubmitted] = useState<boolean>(false);
+
+    const buttonList = ['∀', '→', '∃', '∧', '≥'];
+
+    const directionalRelationships = ['Top(y,x)', 'TopLeftOf(y,x)',
+        'TopRightOf(y,x)', 'LeftOf(y,x)', 'RightOf(y,x)', 'Below(y,x)',
+        'BottomLeftOf(y,x)', 'BottomRightOf(y,x)'];
+
+    const objectRelationships = ['Shape(x/y, Circle/Square/Triangle)',
+        'Color(x/y, Blue/Green/Red))', 'Value(x/y, 0 to 9))',]
+
+    const mkList = (items:string[], uniqueClass='') => 
+        <ul className={`list-group-flush ps-2 ${uniqueClass}`}>
+            {items.map((item, i) => 
+                <li key={i} className='list-group-item'>{item}</li>
+            )}
+        </ul>
+
+    const mkBtnList = (items:string[]) => 
+        <ul className="list-inline  row my-2">
+            {items.map((item:string, i:number) => 
+                <li key={i} className='col-auto'>
+                    <button className='btn btn-outline-secondary'
+                        aria-label={`Add a ${item} symbol to the statement.`}
+                        onClick={mkAddChar(item)}
+                    >
+                        {item}</button>
+                </li>
+            )}
+        </ul>
+
+    const mkAddChar = (char:string) => () => {
+        const el =
+            document.getElementById('statement-text') as HTMLInputElement;
+        el.value = el.value + char
+        el.focus();
+    };
+
+    const generalize = (text:string) => {
+        return text.replace(/\s/g, '').toLowerCase();
+    };
+
+    const handleCheck = (e) => {
+        setSubmitted(true);
+        const el =
+            document.getElementById('statement-text') as HTMLInputElement;
+        setIsCorrect(generalize(el.value) ===
+            generalize(correctStatement.formalFOLStatement));
+    };
+
+    const handleText = (e) => {
+        setText(e.value);
+    };
+
+    useEffect(() => {
+        if (isCorrect) setFeedback('Good! XD');
+        else setFeedback('Ooops <:O');
+    }, [isCorrect])
+
+    useEffect(() => {
+        setSubmitted(false);
+    }, [])
+
+    return <section className='col-4'>
+        <p>Enter the statment that defines the relationship of</p>
+        <p>{correctStatement.naturalLanguageStatement}</p>
+        {mkBtnList(buttonList)}
+        <textarea id='statement-text' className='form-control mb-2' onChange={handleText}
+            placeholder='Enter the value here' value={text}></textarea>
+        <button type='submit' className='btn btn-primary my-2'
+            onClick={handleCheck}>Check Statement</button>
+        {submitted && (isCorrect ? <p className='text-success'>{feedback}</p> :
+            <p className='text-danger'>{feedback}</p>)}
+        <p className='col-12 fs-4 my-2'>Relationships</p>
+        <div className="row">
+            <div className="col-6">
+                <strong>Object</strong>
+                {mkList(objectRelationships)}
+            </div>
+            <div className="col-6">
+                <strong>Directional</strong>
+                {mkList(directionalRelationships)}
+            </div>
+        </div>
+    </section>
+}