feat: Add Stroop Task feature and enhance user interface

build.js

@@ -1,8 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
+const srcDir = path.join(__dirname, 'src');
 const rootDir = __dirname;
-const publicDir = path.join(rootDir, 'public');
+publicDir = path.join(rootDir, 'public');
 
 const filesToCopy = ['index.html', 'styles.css', 'script.js'];
 
@@ -11,14 +12,19 @@ if (!fs.existsSync(publicDir)) {
 }
 
 filesToCopy.forEach(file => {
-  const srcPath = path.join(rootDir, file);
-  const destPath = path.join(publicDir, file);
+  const srcPath = path.join(srcDir, file);
+  const publicPath = path.join(publicDir, file);
+  const destPath = path.join(rootDir, file);
 
   if (fs.existsSync(srcPath)) {
+    fs.copyFileSync(srcPath, publicPath);
     fs.copyFileSync(srcPath, destPath);
-    console.log(`Copied ${file} to public directory`);
+    console.log(`Copied ${file} to public and root directories`);
+  } else if (fs.existsSync(publicPath)) {
+    fs.copyFileSync(publicPath, destPath);
+    console.log(`Copied ${file} from public to root directory`);
   } else {
-    console.log(`Warning: ${file} not found in root directory`);
+    console.log(`Warning: ${file} not found in src or public directory`);
   }
 });
 

index.html

@@ -18,12 +18,12 @@ <h1>Welcome to Dark Triad Assessments</h1>
         <p>Explore the darker aspects of personality through scientifically validated assessments</p>
     </div>
     <div id="darkModeToggleContainer">
-        <button id="darkModeToggle" aria-label="Toggle Dark Mode">🌙 Dark Mode</button>
+        <button id="darkModeToggle" type="button" aria-label="Toggle Dark Mode">🌙 Dark Mode</button>
     </div>
     <div id="content">
         <header>
             <h1>Dark Triad Assessments</h1>
-            <button id="menuToggle" aria-label="Toggle Menu">☰</button>
+            <button id="menuToggle" type="button" aria-label="Toggle Menu">☰</button>
         </header>
         <nav id="mainNav">
             <ul>
@@ -87,7 +87,7 @@ <h2>Stroop Task</h2>
                 <div id="stroopInstructions">
                     <p>Name the <strong>color</strong> of the word, not the word itself.</p>
                     <p>This task measures cognitive flexibility and inhibition, which may relate to Dark Triad traits.</p>
-                    <button onclick="startStroopTask()">Start Task</button>
+                    <button type="button" onclick="startStroopTask()">Start Task</button>
                 </div>
                 <div id="stroopGame" class="hidden">
                     <div id="stroopWord"></div>