Page 122 - AN-3-4

Advanced Neurology Transforming ADHD through interactive gaming

after which nm is used to install additional packages. As shown in this figure, the primary task was to outline
In this case, React and Node.js are combined in the the representation and algorithm of the application. Once
platform, for the purpose of building a dynamic, this was completed, the next step involved identifying the
data-driven, extensive web-based application across users and their interactions with the application (Figure 2).
multiple platforms.
In this figure, the concept is that when the user enters the
• A-Frame – This web-based framework is the Mind Marvel platform, a home page appears with three tabs:
most widely used method for developing a VR (1) A tab for the ADHD Awareness page; (2) another tab for
environment. Specifically, A-Frame (built on HTML) the purpose of the project; and (3) a final tab for the ADHD
20
offers straightforward implementation for users. At its game itself. The overall purpose of the game is to help users
core is a robust entity-component framework that is recognize potential indicators of ADHD within themselves,
compatible with various VR commercial headsets.
• Three/Three.js – This is a JavaScript library for creating while also providing feedback on their performance.
and displaying 3D models in applications. In our Mind Finally, it is important to note that our idea of developing
Marvel platform, Three.js is used to assist A-Frame an immersive game for individuals with ADHD originated
in two ways: (1) Loading 3D models into the scene from an experiment conducted by National Geographic to
21
through GLTFLoader; and (2) keeping track of child- explore brain function. In this experiment, the audience
related elements in the scene. In this case, A-Frame is (participants) counted the number of jumps made by the
built on top of Three.js. girls wearing green tops in a double Dutch game. Despite
• Sketchfab – This is an online platform that provides 2D the straightforward task, the participants were bombarded
and 3D models for free downloads. Incorporating a with distractions such as changing backgrounds, additional
VR environment with 3D models enhances the user’s players entering the scene, etc. In this case, the objective
experience by closely simulating real-world scenes. was to determine whether the brain could maintain focus
In our platform, the 3D models include the Monkey and complete the designated task. Based on the findings,
Model, White and Yellow Duck, and the Lake Model, the majority of participants had difficulty tracking all the
which are available at the following links: alterations. In other words, when overloaded with stimuli,
1. Monkey Model: https://skfb.ly/VYJ9 the brain prioritizes one aspect, decreasing attention on
2. White Duck: https://skfb.ly/oBRTA other aspects. This experiment provided the groundwork
22
3. Yellow Duck: https://skfb.ly/6ZpIF for developing our ADHD-focused game.
4. Lake Model: https://skfb.ly/MYJw
2.3. Design
2.2. Rationale and concept This section documents the mechanisms of the Mind
In the initial stage, the blueprint of the Mind Marvel Marvel webpage. Specifically, once the nm command
platform was designed by using a flowchart diagram. The initiates the client-side operations in React, the webpage
main features and functionalities are presented in Figure 1. becomes accessible via a browser. As for the website’s color

Figure 1. The Mind Marvel platform. Image created by authors

Volume 3 Issue 4 (2024) 5 doi: 10.36922/an.4073