fix: Added the monkey business video and removed some errors with the imports for the Smooth Pursuit tasks

Author: WillHAdair

webcamstudy/src/assets/monkey_business.mp4

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 const INSTRUCTION_VIDEOS = [
   {
-    src: require('../assets/clip2.mp4'), // You'll need to add this video file
+    src: require('../assets/monkey_business.mp4'), // You'll need to add this video file
     type: 'video/mp4',
   },
 ];

webcamstudy/src/components/InstructionVideoTask.jsx

@@ -2,27 +2,27 @@ import React, { useEffect, useRef, useState } from 'react';
 
 const SMOOTH_PURSUIT_VIDEOS = [
   {
-    src: require('../assets/smooth-pursuit/circle.mp4'),
+    src: require('../assets/smooth-pursuit/Circle.mp4'),
     name: 'Circle',
     type: 'video/mp4',
   },
   {
-    src: require('../assets/smooth-pursuit/square.mp4'),
+    src: require('../assets/smooth-pursuit/Square.mp4'),
     name: 'Square',
     type: 'video/mp4',
   },
   {
-    src: require('../assets/smooth-pursuit/infinity.mp4'),
+    src: require('../assets/smooth-pursuit/Infinity.mp4'),
     name: 'Infinity',
     type: 'video/mp4',
   },
   {
-    src: require('../assets/smooth-pursuit/star.mp4'),
+    src: require('../assets/smooth-pursuit/Star.mp4'),
     name: 'Star',
     type: 'video/mp4',
   },
   {
-    src: require('../assets/smooth-pursuit/triangle.mp4'),
+    src: require('../assets/smooth-pursuit/Triangle.mp4'),
     name: 'Triangle',
     type: 'video/mp4',
   },

webcamstudy/src/components/SmoothPursuitVideoTask.jsx

@@ -1,30 +1,45 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const TextSurvey = ({ onSubmit }) => {
   const [selectedAnswer, setSelectedAnswer] = useState('');
+  const [currentTextTask, setCurrentTextTask] = useState(null);
+
+  useEffect(() => {
+    // Get the current text task from sessionStorage
+    const storedTextTask = sessionStorage.getItem('currentTextTask');
+    if (storedTextTask) {
+      setCurrentTextTask(JSON.parse(storedTextTask));
+    }
+  }, []);
 
   const handleSubmit = (e) => {
     e.preventDefault();
     const result = {
       selectedAnswer,
+      correctAnswer: currentTextTask?.correctAnswer,
+      isCorrect: selectedAnswer === currentTextTask?.correctAnswer,
+      textId: currentTextTask?.id,
       timestamp: new Date().toISOString()
     };
     onSubmit?.(result);
   };
 
+  if (!currentTextTask) {
+    return (
+      <div style={styles.container}>
+        <div>Loading question...</div>
+      </div>
+    );
+  }
+
   return (
     <div style={styles.container}>
       <form onSubmit={handleSubmit} style={styles.form}>
         <h2 style={styles.title}>Text Comprehension Question</h2>
-        <h3 style={styles.question}>What is the main theme of the passage you just read?</h3>
+        <h3 style={styles.question}>{currentTextTask.question}</h3>
 
         <div style={styles.radioGroup}>
-          {[
-            'Adventure and heroism',
-            'Love and romance', 
-            'Science and technology',
-            'Family relationships'
-          ].map(option => (
+          {currentTextTask.answers.map(option => (
             <label key={option} style={styles.radioLabel}>
               <input
                 type="radio"

webcamstudy/src/components/TextSurvey.jsx

@@ -1,52 +1,47 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 const TEXTS = [
-  `Twas brillig, and the slithy toves
-Did gyre and gimble in the wabe:
-All mimsy were the borogoves,
-And the mome raths outgrabe.
-
-"Beware the Jabberwock, my son!
-The jaws that bite, the claws that catch!
-Beware the Jubjub bird, and shun
-The frumious Bandersnatch!"
-
-He took his vorpal sword in hand;
-Long time the manxome foe he sought—
-So rested he by the Tumtum tree
-And stood awhile in thought.
-
-And, as in uffish thought he stood,
-The Jabberwock, with eyes of flame,
-Came whiffling through the tulgey wood,
-And burbled as it came!
-
-One, two! One, two! And through and through
-The vorpal blade went snicker-snack!
-He left it dead, and with its head
-He went galumphing back.
-
-"And hast thou slain the Jabberwock?
-Come to my arms, my beamish boy!
-O frabjous day! Callooh! Callay!"
-He chortled in his joy.
-
-'Twas brillig, and the slithy toves
-Did gyre and gimble in the wabe:
-All mimsy were the borogoves,
-And the mome raths outgrabe.`,
+  {
+    id: 1,
+    text: `In addition, a study was made of the planet's surface, which is covered by an ocean dotted with innumerable flat, low-lying islands whose combined area is less than that of Europe, although the diameter of Solaris is a fifth greater than Earth's. These expanses of barren, rocky territory, irregularly distributed, are largely concentrated in the southern hemisphere.`,
+    question: "What is the planet's surface like?",
+    answers: [
+      'It has many low-lying islands.',
+      'It has an island the size of Europe.',
+      'It is a rocky area of around 600 square miles.',
+      'It is mostly desert-like.'
+    ],
+    correctAnswer: 'It has many low-lying islands.'
+  },
+  {
+    id: 2,
+    text: `The discovery of Solaris dated from about 100 years before I was born. The planet orbits two suns: a red sun and a blue sun. For 45 years after its discovery, no spacecraft had visited Solaris. At that time, the Gamow-Shapley theory — that life was impossible on planets which are satellites of two solar bodies — was firmly believed. The orbit is constantly being modified by variations in the gravitational pull in the course of its revolutions around the two suns.`,
+    question: "How many suns does Solaris orbit around?",
+    answers: [
+      'Four',
+      'Two',
+      'One',
+      'None'
+    ],
+    correctAnswer: 'Two'
+  }
 ];
 
 function pickRandomText() {
   return TEXTS[Math.floor(Math.random() * TEXTS.length)];
 }
 
 const TextTask = () => {
-  const [text] = useState(() => pickRandomText());
+  const [selectedText] = useState(() => pickRandomText());
   const [showCross, setShowCross] = useState(true);
   const [showInstruction, setShowInstruction] = useState(false);
   const formattedTextRef = useRef(null);
 
+  // Store selected text in sessionStorage so TextSurvey can access it
+  useEffect(() => {
+    sessionStorage.setItem('currentTextTask', JSON.stringify(selectedText));
+  }, [selectedText]);
+
   useEffect(() => {
     // First show cross for 1 second
     const crossTimer = setTimeout(() => {
@@ -73,7 +68,7 @@ const TextTask = () => {
     let character_id = 0;
     let formattedTextContainer = formattedTextRef.current;
 
-    let cleanedText = text.replace(/\n+/g, ' ');
+    let cleanedText = selectedText.text.replace(/\n+/g, ' ');
     let words = cleanedText.match(/[\w'']+|[.,!?;:"""—-]|\s+/g) || [];
 
     formattedTextContainer.innerHTML = '';
@@ -106,7 +101,7 @@ const TextTask = () => {
         sentenceCount++;
       }
     });
-  }, [text, showCross, showInstruction]);
+  }, [selectedText.text, showCross, showInstruction]);
 
   return (
     <div style={styles.container}>