# TasksZE: A Task-Based and Challenge-Based Math Serious Game Using Facial Emotion Recognition
## 2 State of the Art
### Architecture of TasksZE  
TasksZE is designed with a multi-layered architecture for high scalability and easy maintenance. As depicted in Figure 2, the responsibilities in the serious game are distributed evenly across each game component in each layer; thus, each layer fulfills a particular role. * **Presentation Layer. ** Provides an interaction between the serious game and the player through the user interface (developed in HTML5, JavaScript, and CSS). In the presentation layer, the player (i.e., the user) authenticates themselves, chooses the lesson to be practiced in the game, and can explore the multiple resources of the serious game. * **App Layer. ** Acts as an intermediary between the presentation layer and the Services Layer. It is responsible for accessing the Services Layer and simplifying service information by converting it to understandable data for the interface. * **Services Layer. ** Provides a set of services (modules) representing different functions in the serious game. It is also responsible for interacting with the repositories. For instance, the Serious Game Module is responsible for executing the serious game once requested by the player in the presentation layer. To this end, the Serious Game Module moves the serious game to the Serious Game Repository and handles the execution of the elements needed to run the serious game. On the other hand, the Face Identity Module performs facial emotion recognition by consuming de face-api.js and stores the data in the Face Identity Repository for further analysis. * **Data Layer. ** Contains the repositories with the data needed to run the serious game, i.e., the Serious Game Repository and the Facial Identity Repository. * The architecture of TasksZE contains the following components:
* **User Interface. ** Responsible for communicating with the user (i.e., the player) and allows them to modify the game's themes, consult media resources, and select the game to play. * **Serious Game Request. ** Processes user interface requests. * **Serious Game Response. ** Builds the answers for the user interface. * **Serious Game Module. ** Runs the serious game as selected by the user in the presentation layer. To this end, the Serious Game Module requests the game from the repository and manages the necessary elements for the serious game to run. The Serious Game Module has three elements: \(\circ\) _Level Component_. Delivers the different levels of complexity of the game. \(\circ\) _Tasks Component_. Handles the tasks that are presented to the player throughout the serious game. \(\circ\) _Challenges Component_. Handles the different challenges that are presented to the user at each level of the serious game. * **Face Identify Module. ** This module performs facial emotion recognition using the face-api.js library. The data are stored in the Face Recognition Repository for further analysis. The Face Identity Module comprises the following elements: \(\circ\) _Face Identify Component_. Processes the results of the user's facial recognition, including facial descriptions, and eliminates image noise. \(\circ\) _Face Identify Processor_. Retrieves information related to user age and gender and identifies the facial emotion expressions. Figure 2: Architectural diagram of TasksZE, a task-based and challenge-based serious game. * _Emotion Processor._ Recognizes the user's emotions during the game based on the facial expression processed by the Face Identity Processor. * **Face-api.js. ** Open source library for face recognition on the browser side. It includes a series of lightweight, pre-trained neural networks that can be efficiently executed in web environments [51]. Each neural network is designed for a specific purpose, such as single-face or multi-face detection, facial point generation, facial recognition based on facial descriptors, facial emotion recognition, and age/gender recognition, among others. * **Serious Game Repository. ** This is where serious games with facial recognition are stored. * **Face Identity Repository.