General bug fix

src/components/Forms/Fields/MultiArrayField.tsx

@@ -0,0 +1,90 @@
+import { AddIcon, ArrowForwardIcon, CloseIcon } from '@chakra-ui/icons';
+import { Button, Flex, FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { useState } from 'react';
+import {
+  RegisterOptions,
+  useFieldArray,
+  useFormContext,
+} from 'react-hook-form';
+
+type FieldConfig = {
+  name: string; // es: "left" o "right"
+  placeholder?: string; // testo nell'input
+  constraints?: RegisterOptions;
+};
+
+const MultiFieldArray = ({
+  label,
+  name,
+  fieldsConfig,
+}: {
+  label: string;
+  name: string; // es: "pairs" o "translations"
+  fieldsConfig: FieldConfig[];
+}) => {
+  const { register, control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name,
+  });
+
+  // stato temporaneo per nuovi valori
+  const [newValues, setNewValues] = useState<Record<string, string>>(
+    Object.fromEntries(fieldsConfig.map((f) => [f.name, '']))
+  );
+
+  const handleChange = (field: string, value: string) => {
+    setNewValues((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleAdd = () => {
+    if (Object.values(newValues).every((v) => !v)) return;
+    append(newValues);
+    setNewValues(Object.fromEntries(fieldsConfig.map((f) => [f.name, ''])));
+  };
+
+  return (
+    <FormControl>
+      <FormLabel>{label}</FormLabel>
+
+      {fields.map((field, index) => (
+        <Flex key={field.id} gap={2} mb={2}>
+          {fieldsConfig.map((fc, i) => (
+            <Flex key={fc.name} align="center" gap={2}>
+              <Input
+                key={fc.name}
+                {...register(`${name}.${index}.${fc.name}`, fc.constraints)}
+                placeholder={fc.placeholder ? fc.placeholder : fc.name}
+                borderColor="grey"
+              />
+              {fieldsConfig.length === 2 && i === 0 && <ArrowForwardIcon />}
+            </Flex>
+          ))}
+          <Button colorScheme="red" onClick={() => remove(index)}>
+            <CloseIcon boxSize="0.75em" />
+          </Button>
+        </Flex>
+      ))}
+
+      <Flex gap={2} mt={2}>
+        {fieldsConfig.map((fc, i) => (
+          <Flex key={fc.name} align="center" gap={2}>
+            <Input
+              key={fc.name}
+              value={newValues[fc.name]}
+              onChange={(e) => handleChange(fc.name, e.target.value)}
+              placeholder={fc.placeholder}
+              borderColor="grey"
+            />
+            {fieldsConfig.length === 2 && i === 0 && <ArrowForwardIcon />}
+          </Flex>
+        ))}
+        <Button colorScheme="green" onClick={handleAdd}>
+          <AddIcon boxSize="0.75em" />
+        </Button>
+      </Flex>
+    </FormControl>
+  );
+};
+
+export default MultiFieldArray;

src/components/LateralMenu/LateralMenu.tsx

@@ -76,6 +76,7 @@ const listImplementedNodes = [
   'codingQuestionNode',
   'CollaborativeModelingNode',
   'UMLModelingNode',
+  'CircuitNode',
 ];
 export type LateralMenuProps = {
   isOpen: boolean;

src/components/Properties/Nodes/CircuitNodeProperties.tsx

@@ -0,0 +1,25 @@
+import MultiFieldArray from '../../Forms/Fields/MultiArrayField';
+import TextField from '../../Forms/Fields/TextField';
+import NodeProperties from './NodeProperties';
+
+const CircuitNodeProperties = () => {
+  return (
+    <>
+      <NodeProperties
+        platform={['Arduino']}
+        activityDescription="In this activity learners will follow the instruction and his knowledge to create a circuit"
+      />
+      <TextField label="Instructions" name="data.instructions" isTextArea />
+      <MultiFieldArray
+        label="List of Pins"
+        name="data.pinsList"
+        fieldsConfig={[
+          { name: 'pin', placeholder: 'Pins' },
+          { name: 'value', placeholder: 'Value' },
+        ]}
+      />
+    </>
+  );
+};
+
+export default CircuitNodeProperties;

src/components/ReactFlowNode/ReactFlowCircuitNode/ReactFlowCircuitNode.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from '@fluentui/react';
+import { Handle, Position } from 'reactflow';
+import icon from '../../../public/circuitIcon.png';
+import useStore from '../../../store';
+import { CircuitNode } from '../../../types/polyglotElements';
+import Card from '../../Card/Card';
+import { ReactFlowNodeProps } from '../ReactFlowNode';
+
+type ReactFlowCircuitNodeProps = ReactFlowNodeProps & CircuitNode;
+
+const ReactFlowMultipleChoiceQuestionNode = ({
+  id,
+}: ReactFlowCircuitNodeProps) => {
+  const [onConnect, label] = useStore((state) => [
+    state.onConnect,
+    state.nodeMap.get(id)?.title,
+  ]);
+  const theme = useTheme();
+
+  return (
+    <Card className="Card-react-flow">
+      <img
+        src={icon.src}
+        width="20"
+        height="20"
+        style={{ float: 'left', marginTop: '2px', marginRight: '5px' }}
+      />
+      {label}
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{
+          background: '#3B1D5C',
+          height: '25px',
+          width: '5px',
+          borderRadius: '0px',
+          border: '0px',
+        }}
+        onConnect={onConnect}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          background: '#3B1D5C',
+          height: '25px',
+          width: '5px',
+          borderRadius: '0px',
+          border: '0px',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default ReactFlowMultipleChoiceQuestionNode;

src/components/ReactFlowNode/ReactFlowTrueFalseNode/ReactFlowTrueFalseNode.tsx

@@ -2,16 +2,13 @@ import { useTheme } from '@fluentui/react';
 import { Handle, Position } from 'reactflow';
 import icon from '../../../public/trueFalse_icon.png';
 import useStore from '../../../store';
-import { MultipleChoiceQuestionNode } from '../../../types/polyglotElements';
+import { CircuitNode } from '../../../types/polyglotElements';
 import Card from '../../Card/Card';
 import { ReactFlowNodeProps } from '../ReactFlowNode';
 
-type ReactFlowMultipleChoiceQuestionNodeProps = ReactFlowNodeProps &
-  MultipleChoiceQuestionNode;
+type ReactFlowTrueFalseNodeProps = ReactFlowNodeProps & CircuitNode;
 
-const ReactFlowMultipleChoiceQuestionNode = ({
-  id,
-}: ReactFlowMultipleChoiceQuestionNodeProps) => {
+const ReactFlowTrueFalseNode = ({ id }: ReactFlowTrueFalseNodeProps) => {
   const [onConnect, label] = useStore((state) => [
     state.onConnect,
     state.nodeMap.get(id)?.title,
@@ -54,4 +51,4 @@ const ReactFlowMultipleChoiceQuestionNode = ({
   );
 };
 
-export default ReactFlowMultipleChoiceQuestionNode;
+export default ReactFlowTrueFalseNode;

src/components/ReactFlowNode/index.ts

@@ -3,6 +3,7 @@ export { default as ReactFlowAnalyzingPlottingDataNode } from './ReactFlowAnalyz
 export { default as ReactFlowBrainstormingNode } from './ReactFlowBrainstormingNode/ReactFlowBrainstormingNode';
 export { default as ReactFlowCalculationNode } from './ReactFlowCalculationNode/ReactFlowCalculationNode';
 export { default as ReactFlowCasesEvaluationNode } from './ReactFlowCasesEvaluationNode/ReactFlowCasesEvaluationNode';
+export { default as ReactFlowCircuitNode } from './ReactFlowCircuitNode/ReactFlowCircuitNode';
 export { default as ReactFlowCloseEndedQuestionNode } from './ReactFlowCloseEndedQuestionNode/ReactFlowCloseEndedQuestionNode';
 export { default as ReactFlowCodingQuestionNode } from './ReactFlowCodingQuestionNode/ReactFlowCodingQuestionNode';
 export { default as ReactFlowCollaborativeModelingNode } from './ReactFlowCollaborativeModelingNode/ReactFlowCollaborativeModelingNode';

src/data/abstractExample.ts

@@ -89,8 +89,8 @@ const subFlow = new Map<PlanningGoal, PolyglotFlow>();
         target: ids[1],
         type: 'passFailEdge',
         markerEnd: {
-          color: 'green',
           type: MarkerType.Arrow,
+          color: 'grey', // or any color you prefer
           width: 25,
           height: 25,
         },

src/data/exampleData.ts

@@ -155,7 +155,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[1],
         type: 'passFailEdge',
         markerEnd: {
-          color: 'green',
+          color: 'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,

src/types/polyglotElements/nodes/CasesEvaluationNode.ts

@@ -31,44 +31,4 @@ polyglotNodeComponentMapping.registerMapping<CasesEvaluationNode>({
     link: '',
     uploadLearner: false,
   },
-  transformData: (node) => {
-    const oldData = node.data as CasesEvaluationNodeData;
-
-    const data = {
-      ...oldData,
-    };
-    /*
-    const challengeSetup: ChallengeSetup[] = [
-      `
-using Polyglot.Interactive;
-var kernel = Kernel.Root.FindKernelByName("multiplechoice") as MultipleChoiceKernel;
-kernel.Options = new HashSet<string> { ${data.choices
-        .map((_, i) => `"${i + 1}"`)
-        .join(', ')} };
-`,
-    ];
-    const challengeContent: ChallengeContent[] = [
-      {
-        type: 'multiplechoice',
-        content: '',
-        priority: 1,
-      },
-      {
-        type: 'markdown',
-        content:
-          data.question +
-          data.choices.map((value, index) => '\n' + (index + 1) + '. ' + value),
-        priority: 0,
-      },
-    ];
-*/
-    return {
-      ...node,
-      data,
-      runtimeData: {
-        //challengeSetup,
-        //challengeContent,
-      },
-    };
-  },
 });

src/types/polyglotElements/nodes/CircuitNode.ts

@@ -0,0 +1,29 @@
+import CircuitNodeProperties from '../../../components/Properties/Nodes/CircuitNodeProperties';
+import { ReactFlowCircuitNode } from '../../../components/ReactFlowNode';
+import icon from '../../../public/circuitIcon.png';
+import { polyglotNodeComponentMapping } from '../elementMapping';
+import { defaultPolyglotNodeData, NodeData, PolyglotNode } from './Node';
+
+export type CircuitData = NodeData & {
+  instructions: string;
+  pinsList: { pin: string; value: string }[];
+};
+
+export type CircuitNode = PolyglotNode & {
+  type: 'CircuitNode';
+  data: CircuitData;
+};
+
+polyglotNodeComponentMapping.registerMapping<CircuitNode>({
+  elementType: 'CircuitNode',
+  name: 'Circuit',
+  icon: icon.src,
+  group: 'apply_assessment',
+  propertiesComponent: CircuitNodeProperties,
+  elementComponent: ReactFlowCircuitNode,
+  defaultData: {
+    ...defaultPolyglotNodeData,
+    pinsList: [],
+    instructions: '',
+  },
+});

src/types/polyglotElements/nodes/CreateKeywordsListNode.ts

@@ -31,23 +31,4 @@ polyglotNodeComponentMapping.registerMapping<CreateKeywordsListNode>({
     instructions: '',
     ...defaultPolyglotNodeData,
   },
-  transformData: (node) => {
-    const oldData = node as CreateKeywordsListNode;
-
-    const challengeSetup: ChallengeSetup[] = [];
-    const challengeContent: ChallengeContent[] = [
-      {
-        type: 'markdown',
-        content: oldData.data?.text,
-      },
-    ];
-
-    return {
-      ...node,
-      runtimeData: {
-        challengeSetup,
-        challengeContent,
-      },
-    };
-  },
 });

src/types/polyglotElements/nodes/FindSolutionNode.ts

@@ -35,23 +35,4 @@ polyglotNodeComponentMapping.registerMapping<FindSolutionNode>({
     uploadLearner: false,
     ...defaultPolyglotNodeData,
   },
-  transformData: (node) => {
-    const oldData = node as FindSolutionNode;
-
-    const challengeSetup: ChallengeSetup[] = [];
-    const challengeContent: ChallengeContent[] = [
-      {
-        type: 'markdown',
-        content: oldData.data?.text,
-      },
-    ];
-
-    return {
-      ...node,
-      runtimeData: {
-        challengeSetup,
-        challengeContent,
-      },
-    };
-  },
 });