fix: address issues discussed in 7/9/2025 meeting:

- Next button is now in the bottom right corner
- The video now autoplays on load
- The face task only shows one smiling face in a crowd of unsmiling faces

Author: WillHAdair

webcamstudy/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css",
-    "main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.a12b748b.js",
+    "main.js": "https://seresl.unl.edu/webcamstudy/static/js/main.d471531e.js",
     "static/js/453.e44939a0.chunk.js": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js",
     "static/media/clip2.mp4": "https://seresl.unl.edu/webcamstudy/static/media/clip2.1e6e426f2cdb61fe74ec.mp4",
     "static/media/clip3.mp4": "https://seresl.unl.edu/webcamstudy/static/media/clip3.3341365941d9bce4b98b.mp4",
@@ -19,8 +19,8 @@
     "static/media/image-24.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-24.ca8665a3fdc15a9b2151.jpg",
     "static/media/image-23.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-23.ff2f5e9e82db160c5125.jpg",
     "static/media/image-28.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-28.7d28d711f17a968c24be.jpg",
-    "static/media/image-3.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-3.001b2aa6575734faf97f.jpg",
-    "static/media/image-6.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-6.68804431e1fb3e74c03c.jpg",
+    "static/media/image-3.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-3.4d41a1a54e4bc0df8a7f.jpg",
+    "static/media/image-6.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-6.16f019470c35f6a35e32.jpg",
     "static/media/image-26.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-26.afc90a857b70c3abb925.jpg",
     "static/media/image-31.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-31.a7f8f6349d0b533d0222.jpg",
     "static/media/image-40.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-40.edd0c17faa58d5300cbf.jpg",
@@ -30,22 +30,21 @@
     "static/media/image-41.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-41.ab74b0216df49b4f4cb5.jpg",
     "static/media/image-22.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-22.50386a9f5e642121f0c1.jpg",
     "static/media/image-49.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-49.3039cfee99162d4fc34b.jpg",
-    "static/media/image-7.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-7.f0890ea3e97d083f9c3b.jpg",
+    "static/media/image-7.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-7.b71b22ea52ec87ff58d5.jpg",
     "static/media/image-19.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-19.30999ef56331d888bb66.jpg",
     "static/media/image-20.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-20.32d3c089fa3aba60c0ba.jpg",
-    "static/media/image-1.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-1.2cc79ed61b259ebebebe.jpg",
+    "static/media/image-1.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-1.f8445f6e82d6b3eec2fe.jpg",
     "static/media/image-21.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-21.8a6cf99e1b155793b483.jpg",
     "static/media/image-42.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-42.ce8803e45d2b75b5d85f.jpg",
     "static/media/image-11.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-11.74fab22c3357eecaa375.jpg",
     "static/media/image-33.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-33.89e6d1f28582b8c7c0a8.jpg",
-    "static/media/image-2.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-2.258ff66410b89ac1953d.jpg",
+    "static/media/image-2.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-2.50d41315d364fe9cc1c8.jpg",
     "static/media/image-9.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-9.6ea6ef9977ae8552ba2f.jpg",
     "static/media/image-44.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-44.ba9e6c5023ee74d60077.jpg",
-    "static/media/image-4.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-4.0bb797d5847b3d3a90db.jpg",
+    "static/media/image-4.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-4.2845ed1b901ef46af8a2.jpg",
     "static/media/image-37.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-37.3dbffb4f170d1e2fbbd7.jpg",
-    "static/media/image-5.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-5.b95e98cf488e5dc132b1.jpg",
+    "static/media/image-5.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-5.353313c6a76212d31eef.jpg",
     "static/media/image-58.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-58.4b88b2e810980391c15c.jpg",
-    "static/media/image-8.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-8.e491c615c0e21b7007f5.jpg",
     "static/media/image-12.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-12.14a50f1f842abb188508.jpg",
     "static/media/image-45.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-45.5ca7c25e2ca203ca5516.jpg",
     "static/media/image-13.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-13.4ba6f86f4421fd57a49e.jpg",
@@ -68,13 +67,14 @@
     "static/media/image-57.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-57.a36228f9c14a96563b05.jpg",
     "static/media/image-10.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-10.fcdfd9fbc352940b0d95.jpg",
     "static/media/image-16.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-16.8583b0dd5e9bb251fc9c.jpg",
+    "static/media/image-8.jpg": "https://seresl.unl.edu/webcamstudy/static/media/image-8.e491c615c0e21b7007f5.jpg",
     "index.html": "https://seresl.unl.edu/webcamstudy/index.html",
     "main.3de88975.css.map": "https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css.map",
-    "main.a12b748b.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.a12b748b.js.map",
+    "main.d471531e.js.map": "https://seresl.unl.edu/webcamstudy/static/js/main.d471531e.js.map",
     "453.e44939a0.chunk.js.map": "https://seresl.unl.edu/webcamstudy/static/js/453.e44939a0.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.3de88975.css",
-    "static/js/main.a12b748b.js"
+    "static/js/main.d471531e.js"
   ]
 }

webcamstudy/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://seresl.unl.edu/webcamstudy/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="https://seresl.unl.edu/webcamstudy/logo192.png"/><link rel="manifest" href="https://seresl.unl.edu/webcamstudy/manifest.json"/><title>React App</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";window.addEventListener("DOMContentLoaded",()=>{new EmbeddedPageSdk(!1,null,!1)})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.a12b748b.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://seresl.unl.edu/webcamstudy/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="https://seresl.unl.edu/webcamstudy/logo192.png"/><link rel="manifest" href="https://seresl.unl.edu/webcamstudy/manifest.json"/><title>React App</title><script type="module">import EmbeddedPageSdk from"https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.7.1.js";window.addEventListener("DOMContentLoaded",()=>{new EmbeddedPageSdk(!1,null,!1)})</script><script defer="defer" src="https://seresl.unl.edu/webcamstudy/static/js/main.d471531e.js"></script><link href="https://seresl.unl.edu/webcamstudy/static/css/main.3de88975.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

webcamstudy/src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import './App.css';
 
 // Import task components
@@ -51,7 +51,7 @@ function App() {
     setCurrentTask((prev) => prev + 1);
   };
 
-  const downloadAllData = () => {
+  const downloadAllData = useCallback(() => {
     // Create the JSON structure
     const jsonData = {
       id: parseInt(studyData.consent?.id) || 0,
@@ -124,7 +124,14 @@ function App() {
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
-  };
+  }, [studyData]);
+
+  // Auto-download data when all tasks are completed
+  useEffect(() => {
+    if (currentTask >= taskFiles.length && taskFiles.length > 0) {
+      downloadAllData();
+    }
+  }, [currentTask, taskFiles.length, downloadAllData]);
 
   // Helper function to determine text task correctness
   const determineTextCorrectness = (answer) => {
@@ -163,9 +170,7 @@ function App() {
       return (
         <div style={styles.completionContainer}>
           <h2>All tasks completed!</h2>
-          <button onClick={downloadAllData} style={styles.downloadButton}>
-            Download Results
-          </button>
+          <p>Your results have been automatically downloaded.</p>
         </div>
       );
     }
@@ -232,9 +237,8 @@ const styles = {
   },
   buttonContainer: {
     position: 'fixed',
-    bottom: '30px',
-    left: '50%',
-    transform: 'translateX(-50%)',
+    bottom: '-30px',
+    right: '30px',
     zIndex: 1000,
   },
   nextButton: {
@@ -256,15 +260,6 @@ const styles = {
     height: '100vh',
     gap: '20px',
   },
-  downloadButton: {
-    padding: '15px 30px',
-    fontSize: '18px',
-    backgroundColor: '#27ae60',
-    color: 'white',
-    border: 'none',
-    borderRadius: '5px',
-    cursor: 'pointer',
-  },
 };
 
 export default App;