Merge pull request #1813 from isaacphysics/improvement/customise-coords

Use new coordinate question display properties

Author: jacbn

src/IsaacApiTypes.tsx

@@ -241,6 +241,10 @@ export interface IsaacCoordinateQuestionDTO extends QuestionDTO {
     numberOfCoordinates?: number;
     numberOfDimensions?: number;
     placeholderValues?:  string[];
+    useBrackets?: boolean;
+    separator?: string;
+    suffixes?: string[];
+    buttonText?: string;
 }
 
 export interface IsaacTopicSummaryPageDTO extends SeguePageDTO {

src/app/components/content/IsaacCoordinateQuestion.tsx

@@ -6,11 +6,15 @@ import {isDefined, useCurrentQuestionAttempt} from "../../services";
 import {IsaacQuestionProps} from "../../../IsaacAppTypes";
 import {Immutable} from "immer";
 import QuestionInputValidation from "../elements/inputs/QuestionInputValidation";
+import { Markup } from "../elements/markup";
 
 // Custom input component for coordinates
 interface CoordinateInputProps {
     value: Immutable<CoordinateItemDTO>;
     placeholderValues: string[];
+    useBrackets: boolean;
+    separator: string;
+    suffixes?: string[];
     numberOfDimensions: number;
     onChange: (value: Immutable<CoordinateItemDTO>) => void;
     readonly?: boolean;
@@ -85,20 +89,24 @@ const cleanItem = function (item: Immutable<CoordinateItemDTO>) {
 };
 
 const CoordinateInput = (props: CoordinateInputProps) => {
-    const {value, placeholderValues, numberOfDimensions, onChange, readonly, remove} = props;
-    return <span className="coordinate-input">({[...Array(numberOfDimensions)].map((_, i) =>
-        <span key={i}>
-            <Input
-                type="text"
-                className="force-print"
-                placeholder={placeholderValues[i] ?? ""}
-                value={coordItemToValue(value, i)}
-                onChange={event => onChange(updateCoordItem(value, event.target.value, i, numberOfDimensions))}
-                readOnly={readonly}
-            />
-            {(i < numberOfDimensions - 1) && <span className="coordinate-input-separator">,&nbsp;</span>}
-        </span>)})
-    {remove && <Button className="ms-3" size="sm" onClick={remove}>Delete</Button>}
+    const {value, placeholderValues, useBrackets, separator, suffixes, numberOfDimensions, onChange, readonly, remove} = props;
+    return <span className="coordinate-input">
+        {useBrackets ? "(" : ""}
+        {[...Array(numberOfDimensions)].map((_, i) =>
+            <span key={i}>
+                <Input
+                    type="text"
+                    className="force-print"
+                    placeholder={placeholderValues[i] ?? ""}
+                    value={coordItemToValue(value, i)}
+                    onChange={event => onChange(updateCoordItem(value, event.target.value, i, numberOfDimensions))}
+                    readOnly={readonly}
+                />
+                {suffixes && suffixes[i] && <Markup encoding="latex">{suffixes[i]}</Markup>}
+                {(i < numberOfDimensions - 1) && <Markup encoding="latex" className="coordinate-input-separator">{separator}</Markup>}
+            </span>)}
+        {useBrackets ? ")" : ""}
+        {remove && <Button className="ms-3" size="sm" onClick={remove}>Delete</Button>}
     </span>;
 };
 
@@ -107,6 +115,7 @@ const IsaacCoordinateQuestion = ({doc, questionId, readonly}: IsaacQuestionProps
     const { currentAttempt, dispatchSetCurrentAttempt } = useCurrentQuestionAttempt<CoordinateChoiceDTO>(questionId);
 
     const numberOfDimensions = doc.numberOfDimensions ?? 2;
+    const buttonText = doc.buttonText ?? "Add coordinate";
 
     const getEmptyCoordItem = useCallback((): CoordinateItemDTO => {
         return {type: "coordinateItem", coordinates: Array<string>(numberOfDimensions).fill("")};
@@ -141,6 +150,9 @@ const IsaacCoordinateQuestion = ({doc, questionId, readonly}: IsaacQuestionProps
                 <CoordinateInput
                     key={index}
                     placeholderValues={doc.placeholderValues ?? []}
+                    useBrackets={doc.useBrackets ?? true}
+                    separator={doc.separator ?? ","}
+                    suffixes={doc.suffixes}
                     numberOfDimensions={numberOfDimensions}
                     value={currentAttempt?.items?.[index] ?? getEmptyCoordItem()}
                     readonly={readonly}
@@ -152,6 +164,9 @@ const IsaacCoordinateQuestion = ({doc, questionId, readonly}: IsaacQuestionProps
                         <CoordinateInput
                             key={index}
                             placeholderValues={doc.placeholderValues ?? []}
+                            useBrackets={doc.useBrackets ?? true}
+                            separator={doc.separator ?? ","}
+                            suffixes={doc.suffixes}
                             numberOfDimensions={numberOfDimensions}
                             value={item}
                             readonly={readonly}
@@ -163,14 +178,19 @@ const IsaacCoordinateQuestion = ({doc, questionId, readonly}: IsaacQuestionProps
                 : <CoordinateInput
                     key={0}
                     placeholderValues={doc.placeholderValues ?? []}
+                    useBrackets={doc.useBrackets ?? true}
+                    separator={doc.separator ?? ","}
+                    suffixes={doc.suffixes}
                     numberOfDimensions={numberOfDimensions}
                     value={getEmptyCoordItem()}
                     readonly={readonly}
                     onChange={value => updateItem(0, value)}
                 />
         }
         <QuestionInputValidation userInput={currentAttempt?.items?.map(answer => answer.coordinates ?? []) ?? []} validator={coordinateInputValidator}/>
-        {!doc.numberOfCoordinates && <Button color="secondary" size="sm" className="mt-3" onClick={() => updateItem(currentAttempt?.items?.length ?? 1, getEmptyCoordItem())}>Add coordinate</Button>}
+        {!doc.numberOfCoordinates && <Button color="secondary" size="sm" className="mt-3" onClick={() => updateItem(currentAttempt?.items?.length ?? 1, getEmptyCoordItem())}>
+            <Markup encoding="latex">{buttonText}</Markup>
+        </Button>}
     </div>;
 };
 export default IsaacCoordinateQuestion;