Social Skills Hero
Live version: https://piotrberebecki.github.io/social-skills-hero/
The principles behind the app
- Children, teenagers and adolescents with autism and asperger syndrome often have difficulty recognising emotions in social situations. They often miss the body language or facial cues that other people rely on to gauge the moods of others, or even of themselves. As a result, inappropriate responses to situations may occur, for example, laughing or giggling when someone is hurt or upset.
- Social Skills Hero is a non-competitive app which allows the user to train in identifying and reacting to different social situations.
- Currently the app covers skills such as: sharing, companionship, empathy, selflessness, kindness, turn-taking, participating, engagement, ability to compromise, teamwork, respecting personal space. More skills will be added in future.
- The answers are not graded. However to make the app more engaging, a future development may include improving gamification by informing the user how many rounds have been completed and perhaps what skills have been trained.
Development technologies and techniques
- Model-View-Controller (MVC) design pattern - The data used by the app is maintained by the
Model. The user interface is specified in the
View. App's logic is managed by the
Controller. Currently all three parts have been saved in one file (
./js/app.js). In future this could be improved by splitting the modules into separate files so that the code is easier to read and maintain.
- Image preloading - Images that will be displayed on the next screen are preloaded to ensure a smoother user experience.
- Material design - The principles of material design have been followed in order to improve accessibility and usability.
./js/app.js) has been transpiled down to ES5 (
./js/appTranspiledToES5.js) to ensure better cross-browser compatibility.
- Mobile first design - Making sure that the app works on different mobile devices has been prioritised.
- Web app manifest - The app can be added to the user's home screen without the need to go through an app store. The
manifest.jsonfile also specifies the appearance of the splash screen which is shown while the app is loading.
Running the app in your local environment
Clone the repository
$ git clone https://github.com/PiotrBerebecki/social-skills-hero.git $ cd social-skills-hero
index.html file in your browser