Added guidance when an incorrect character is entered

src/components/task/task.tsx

@@ -5,6 +5,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { handleCorrectInput, handleWrongInput, completed, reset } from './task.reducer';
 import { speak, ITTS } from '../tts/tts';
 import { assetBaseUrl } from '../../config/audio';
+import { fingerPlacement } from '../../config/utils';
 import { Grid, Typography } from '@material-ui/core';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
@@ -133,40 +134,44 @@ const Task = props => {
                       audioElement.current = new Audio(textURL);
 
                       const promise = audioElement.current.play().then(data => {
-                        if (promise === undefined) {
-                          console.error('Play correct text promise undefined');
-                        }
                       }).catch(error => console.error('play error ', error));
+                      if (promise === undefined) {
+                        console.error('Play correct text promise undefined');
+                      }
                     }
                   }).catch(error => console.error('playAudio error', error));
                  }
                } else {
                  console.error('Play correct audio promise undefined');
                }
             }).catch(error => console.error('playAudio error', error));
+
+            if (p === undefined) {
+              console.error('Play correct effect promise undefined');
+            }
           }
         });
        } else {
         handleWrongInputAction(event.key);
-        speak(event.key, ttsOptions).then(textURL => {
+        wrongAudioElement.current.setAttribute('currentTime', '0');
+        const promise = wrongAudioElement.current.play().then(() => {
+          const guidance = fingerPlacement(task.text.charAt(currentPos));
+          speak(guidance).then(textURL => {
             if (textURL !== '' && audioElement.current) {
               audioElement.current.pause();
               audioElement.current.setAttribute('src', '');
               audioElement.current = new Audio(textURL);
-              const p = audioElement.current.play().then(() => {
-                if (p !== undefined && wrongAudioElement.current) {
-                  wrongAudioElement.current.setAttribute('currentTime', '0');
-                  const promise = wrongAudioElement.current.play().catch(error => console.error('playAudio error', error));
-                  if (promise === undefined) {
-                    console.error('Play wrong audio promise undefined');
-                  }
-                } else {
-                  console.error('Play wrong audio text promise undefined');
-                }
-              }).catch(error => console.error('playAudio error', error));
-          }
-
-        });
+              const p = audioElement.current.play().catch(error => console.error('playAudio error', error));
+              if (p === undefined) {
+                console.error('Play wrong promise error');
+              }
+            }
+          }).catch(error => console.error('speak error', error));
+        }).catch(error => console.error('playAudio wrong effect error', error));
+
+        if (promise === undefined) {
+          console.error('Play wrong audio promise undefined');
+        }
       }
     }
   };

src/config/utils.ts

@@ -0,0 +1,95 @@
+export const fingerPlacement = (input: string): string => {
+  const character = input.charAt(0);
+  switch (character) {
+    case '§':
+    case '°':
+    case '1':
+    case '!':
+    case '©':
+    case 'tab':
+    case 'q':
+    case 'capslock:':
+    case 'a':
+    case 'shift':
+    case '<':
+    case '>':
+    case 'z':
+    case 'ctrl':
+    case 'left alt':
+    // Windows + cmd
+      return 'Använd vänster lillfinger för att trycka på ' + character;
+    case '2':
+    case '@':
+    case 'w':
+    case 's':
+    case 'x':
+      return 'Använd vänster ringfinger för att trycka på ' + character;
+    case '3':
+    case '#':
+    case '£':
+    case 'e':
+    case 'd':
+    case 'c':
+      return 'Använd vänster långfinger för att trycka på ' + character;
+    case '4':
+    case '€':
+    case '$':
+    case 'r':
+    case 'f':
+    case 'v':
+    case '5':
+    case '%':
+    case '∞':
+    case 't':
+    case 'g':
+    case 'b':
+      return 'Använd väsnter pekfinger för att trycka på ' + character;
+    case '6':
+    case '&':
+    case 'y':
+    case 'h':
+    case 'n':
+    case '7':
+    case '/':
+    case '|':
+    case 'u':
+    case 'j':
+    case 'm':
+      return 'Använd höger pekfinger för att trycka på ' + character;
+    case '8':
+    case '(':
+    case '[':
+    case 'i':
+    case 'k':
+    case ',':
+    case ';':
+      return 'Använd höger långfinger för att trycka på ' + character;
+    case '9':
+    case ')':
+    case ']':
+    case 'o':
+    case 'l':
+    case '.':
+    case ':':
+      return 'Använd höger ringfinger för att trycka på ' + character;
+    case '0':
+    case '=':
+    case 'p':
+    case 'ö':
+    case '-':
+    case '_':
+    case '+':
+    case '?':
+    case 'å':
+    case 'ä':
+    case '´':
+    case '`':
+    case '¨':
+    case '^':
+    case '\'':
+    case '*':
+      return 'Använd höger lillfinger för att trycka på ' + character;
+    default:
+      return '';
+  }
+};