Replace placeholder files with full template files

src/public/tutorial/assets/replication/JNDDynamic.tsx

@@ -1,8 +1,47 @@
-// Placeholder for tutorial dynamic replication sequence
-import { JumpFunctionParameters, JumpFunctionReturnVal } from '../../../../store/types';
+import { JumpFunctionParameters, JumpFunctionReturnVal, StoredAnswer } from '../../../../store/types';
+
+const findLatestTrial = (allDynamicAnswers: StoredAnswer[]) => {
+    const trials = allDynamicAnswers
+        .sort((a, b) => parseInt(a.trialOrder.split('_').at(-1) || '0', 10) - parseInt(b.trialOrder.split('_').at(-1) || '0', 10));
+
+    return trials.at(-1)!;
+};
+
+export default function func({ answers }: JumpFunctionParameters<{ r1: number, r2: number, counter: number }>): JumpFunctionReturnVal {
+    const allDynamicAnswers = Object.values(answers)
+        .filter((answer) => answer.componentName === 'trial');
+
+    // First trial
+    if (allDynamicAnswers.length === 0) {
+        return {
+            component: 'trial',
+            parameters: {
+                r1: 0.1,
+                r2: 0.9,
+            },
+            correctAnswer: [{ id: 'buttonsResponse', answer: 'right' }],
+        };
+    }
+
+    if (allDynamicAnswers.length === 9) {
+        return { component: null };
+    }
+
+    const latestTrial = findLatestTrial(allDynamicAnswers);
+
+    const right = latestTrial.parameters.r2 === 0.9;
+
+    const approachingValue = right ? latestTrial.parameters.r1 + 0.1 : latestTrial.parameters.r2 + 0.1;
+
+    const r1 = right ? 0.9 : approachingValue;
+    const r2 = right ? approachingValue : 0.9;
 
-export default function func({ }: JumpFunctionParameters<{ r1: number, r2: number, counter: number }>): JumpFunctionReturnVal {
     return {
         component: 'trial',
+        parameters: {
+            r1,
+            r2,
+        },
+        correctAnswer: [{ id: 'buttonsResponse', answer: right ? 'left' : 'right' }],
     };
-}
+}

src/public/tutorial/assets/replication/ScatterWrapper.tsx

@@ -1 +1,40 @@
-// Placeholder for the ScatterWrapper component
+/**
+ * Authors: The ReVISit team
+ * Description:
+ *    This file is the wrapper component for the Scatter plots
+ */
+
+import {
+    Center, Group, Stack, Text,
+} from '@mantine/core';
+import { Scatter } from './Scatter';
+import { StimulusParams } from '../../../../store/types';
+
+/**
+ * Holds 2 Scatter Plots
+ * @param param0 - r1 is the correlation value for 1, r2 is the correlation value for 2,
+ * onClick is a function that determines the functionality when a graph is clicked.
+ * @returns 2 Scatter Plots
+ */
+export default function ScatterWrapper({ parameters }: StimulusParams<{ r1: number; r2: number }>) {
+    const { r1, r2 } = parameters;
+    const r1DatasetName = `dataset_${r1.toFixed(2)}_size_100.csv`;
+    const r2DatasetName = `dataset_${r2.toFixed(2)}_size_100.csv`;
+
+    return (
+        <Stack style={{ width: '100%', height: '100%' }}>
+            <Text style={{
+                textAlign: 'center', paddingBottom: '0px', fontSize: '18px', fontWeight: 'bold',
+            }}
+            >
+                Please select the visualization that appears to have a larger correlation.
+            </Text>
+            <Center>
+                <Group style={{ gap: '40px' }} mb="md">
+                    <Scatter r={r1} datasetName={r1DatasetName} />
+                    <Scatter r={r2} datasetName={r2DatasetName} />
+                </Group>
+            </Center>
+        </Stack>
+    );
+}