Merge pull request #1685 from ccnmtl/FOL-21-progress

Adds a progress tracker to the FOL multiple choice mode

Author: Evan-CTL

media/js/src/firstOrderLogic/firstOrderLogic.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { shuffleArray, getRandomElement, GridItem, GridStatement,
-    GridTemplate } from './utils';
+    GridTemplate, Score } from './utils';
 import { getTemplatesByDifficulty } from './statementGenerator';
 import { Grid } from './grid';
 import { Options } from './options';
 import { StatementInput } from './statementInput';
+import { Progress } from './progress';
 
 export const STATIC_URL = LogicLearner.staticUrl;
 
@@ -21,6 +22,11 @@ export const FirstOrderLogic: React.FC = () => {
     const [isCorrect, setIsCorrect] = useState<boolean>(false);
     const [selected, setSelected] = useState<number|null>()
     const [mode, setMode] = useState<number>(0);
+    const [isDone, setIsDone] = useState<boolean>(false);
+    const [attempt, setAttempt] = useState<number>(4);
+
+    const scoreDefault = {easy:[], medium: [], hard: []}
+    const [score, setScore] = useState<Score>(scoreDefault);
 
     const [correctTemplate, setCorrectTemplate] =
         useState<GridTemplate>(getRandomElement(templateBank));
@@ -74,14 +80,31 @@ export const FirstOrderLogic: React.FC = () => {
         setMode(Number(e.target.value));
     }
 
+    const handleAttempt = (result:boolean) => {
+        if (!isDone) {
+            if (result) {
+                setIsDone(true);
+                setScore({...score, [difficulty]: [...(score[difficulty]), attempt]});
+            } else {
+                setAttempt(Math.max(attempt - 1, 1));
+            }
+        }
+    };
+
     const handleNewGrid = () => {
         let newArr = getRandomElement(templateBank)
         while (newArr === correctTemplate) {
             newArr = getRandomElement(templateBank)
         }
+        if (!isDone) {
+            setScore({...score,
+                [difficulty]: [...(score[difficulty]), -attempt]});
+        }
         setCorrectTemplate(newArr);
         setSelected(null);
         setText('');
+        setAttempt(4);
+        setIsDone(false);
     }
 
     const mkSelect = (options, action) => <select className='form-select mt-2'
@@ -138,8 +161,19 @@ export const FirstOrderLogic: React.FC = () => {
         }
     }, [correctStatement]);
 
+    useEffect(() => {
+        if (score != scoreDefault) {
+            localStorage.setItem('fol', JSON.stringify({score, attempt}));
+        }
+    }, [score, attempt]);
+
     useEffect(() => {
         setSelected(null);
+        const store = JSON.parse(localStorage.getItem('fol'));
+        if (store) {
+            setAttempt(store.attempt ?? 4);
+            setScore(store.score ?? scoreDefault);
+        }
     }, []);
 
     useEffect(() => {
@@ -158,10 +192,13 @@ export const FirstOrderLogic: React.FC = () => {
                             {setting}
                         </li>)}
                 </ul>
+                {mode === 0 &&
+                    <Progress difficulty={difficulty} score={score} />}
             </div>
-            {mode === 0 && <Options options={options} correctIndex={correctIndex}
-                isCorrect={isCorrect} setIsCorrect={setIsCorrect}
-                selected={selected} setSelected={setSelected} />}
+            {mode === 0 && <Options options={options}
+                correctIndex={correctIndex} isCorrect={isCorrect}
+                setIsCorrect={setIsCorrect} selected={selected}
+                setSelected={setSelected} handleAttempt={handleAttempt}/>}
             {mode === 1 && <StatementInput isCorrect={isCorrect}
                 correctStatement={correctStatement} difficulty={difficulty}
                 setIsCorrect={setIsCorrect} text={text} setText={setText} />}

media/js/src/firstOrderLogic/options.tsx

@@ -8,28 +8,34 @@ interface OptionProps {
     setIsCorrect: Function
     selected: number|null
     setSelected: React.Dispatch<React.SetStateAction<number|null>>
+    handleAttempt: (isCorrect:boolean) => void
 }
 
 export const Options: React.FC<OptionProps> = ({
-    options, correctIndex, isCorrect, setIsCorrect, selected, setSelected
+    options, correctIndex, isCorrect, setIsCorrect, selected, setSelected,
+    handleAttempt
 }:OptionProps) => {
     const showResult = (i:number) => {
         if (selected != null && selected === i)
             if (isCorrect) return 'success'
             else return 'danger'
         else return 'outline-primary'
-    }
+    };
 
     useEffect(() => {
-        setIsCorrect(correctIndex === selected);
+        const result = correctIndex === selected;
+        setIsCorrect(result);
+        if (selected != null) {
+            handleAttempt(result);
+        }
     }, [selected]);
 
     return <section className='col-4'>
         <div className="row">
-            {options.map((option, i) => 
+            {options.map((option, i) =>
                 <div className='my-1' key={i}>
-                    <button className={`btn btn-large w-100 my-1 btn-${showResult(i)}`}
-                        onClick={() => setSelected(i)}
+                    <button className={`btn btn-large w-100 my-1
+                        btn-${showResult(i)}`} onClick={() => setSelected(i)}
                     >
                         {selected === i &&
                             <p>{option.naturalLanguageStatement}</p>}

media/js/src/firstOrderLogic/progress.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Score } from './utils';
+
+interface ProgressProps {
+    difficulty: string
+    score: Score,
+}
+
+export const Progress: React.FC<ProgressProps> = ({
+    difficulty,
+    score
+}:ProgressProps) => {
+    /**
+     * EVAN'S NOTE: This was made for my own convenience I imagine you might want
+     * to be more explicit with your expression of the progress shapes.
+     * @returns An array of SVG text elements corresponding to the different
+     * progress states
+     */
+    const mkArr = (length: number, sign:1|-1) => Array.from({length}, (_, i) =>
+        <text color="black" x='50%' y='55%' dominantBaseline='middle'
+            textAnchor='middle' fontSize={10}
+        >
+            {sign * (i+1)}
+        </text>
+    );
+    const success = mkArr(4, 1);
+    const skip = mkArr(4, -1);
+
+    return <svg
+        viewBox={`0 0 120 ${10 * Math.ceil(score[difficulty].length/12)}`}
+        width={'100%'}
+    >
+        {// UNCOMMENT WHEN YOU ARE READY TO WORK ON THE PROGRESS DISPLAY
+        /* {score[difficulty].map((val, i) => <svg x={10 * (i % 12)}
+            y={10 * Math.floor(i/12)} width={10} height={10} key={i}
+        >
+            {val > 0 ? success[val-1]: skip[-val-1]}
+        </svg>
+        )} */}
+    </svg>
+}

media/js/src/firstOrderLogic/utils.ts

@@ -21,6 +21,12 @@ export interface GridTemplate {
     checkIfViolates: Function
 }
 
+export interface Score {
+    easy: number[]
+    medium: number[]
+    hard: number[]
+}
+
 // Map hex color codes to color names for convenience
 const colorMap = {
     '#77dd77': 'Green',