adding fixes to text task

Author: michaeldejournett

webcamstudy/src/components/textTask.html

@@ -123,3 +123,38 @@ <h3>Please Read the following message</h3>
     </script>
 </body>
 </html>
+<style>
+    .textTask {
+        text-align: center;
+        font-family: Arial, sans-serif;
+    }
+
+    h3 {
+        margin: 40px 25% 0;
+    }
+
+    .formatted-text {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        text-align: justify;
+        margin: 40px auto;
+        max-width: 33%;
+        width: 100%;
+        line-height: 2; /* Double spacing */
+    }
+
+    .word-block {
+        display: inline-flex;
+        flex-wrap: nowrap;
+    }
+
+    .letter {
+        font-size: 24px; /* Increased font size */
+    }
+
+    .space {
+        width: 4px;
+    }
+</style>
+

webcamstudy/src/components/textTask2.html

@@ -99,3 +99,37 @@ <h3>Please Read the following message</h3>
     </script>
 </body>
 </html>
+<style>
+    .textTask {
+        text-align: center;
+        font-family: Arial, sans-serif;
+    }
+
+    h3 {
+        margin: 40px 25% 0;
+    }
+
+    .formatted-text {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        text-align: justify;
+        margin: 40px auto;
+        max-width: 33%;
+        width: 100%;
+        line-height: 2; /* Double spacing */
+    }
+
+    .word-block {
+        display: inline-flex;
+        flex-wrap: nowrap;
+    }
+
+    .letter {
+        font-size: 24px; /* Increased font size */
+    }
+
+    .space {
+        width: 4px;
+    }
+</style>

webcamstudy/src/components/textTask3.html

@@ -9,11 +9,11 @@
             text-align: center;
             font-family: Arial, sans-serif;
         }
-
+    
         h3 {
             margin: 40px 25% 0;
         }
-
+    
         .formatted-text {
             display: flex;
             flex-wrap: wrap;
@@ -22,17 +22,18 @@
             margin: 40px auto;
             max-width: 33%;
             width: 100%;
+            line-height: 2; /* Double spacing */
         }
-
+    
         .word-block {
             display: inline-flex;
             flex-wrap: nowrap;
         }
-
+    
         .letter {
-            font-size: 18px;
+            font-size: 24px; /* Increased font size */
         }
-
+    
         .space {
             width: 4px;
         }