Abstract
We present how to retrofit an interactive tutorial program onto an already completed web application program by taking the example of IslayTab, a graphical programming environment for children, which can be manipulated only by tapping on a tablet device. The tutorial program prompts the user to tap a single specific DOM node of the original application by highlighting it in front of an additional DOM node in the form of a translucent gray sheet that shades the other DOM nodes. Any user events on wrong parts are caught by the gray sheet and cause repeated prompting. When the user taps the expected DOM node, the process originally assigned to this DOM node is naturally activated. The tutorial program does not have to take any care of processes in the original application and only has to check if the user event took place at the expected DOM node in order to proceed to the next step of the tutorial scenario.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Similar content being viewed by others
References
School of game design: how to make a good video game tutorial. https://schoolofgamedesign.com/project/good-video-game-tutorial/. Accessed 16 June 2022
Scratch 3.0 Tutorial. https://scratch.mit.edu/projects/editor/?tutorial=getStarted. Accessed 16 June 2022
Tanaka, D., Kohana, M., Niibori, M., Ohtaki, Y., Okamoto, S., Kamada, M.: Implementation of interactive tutorial for IslayPub by hooking user events. In: Barolli, L., Nishino, H., Enokido, T., Takizawa, M. (eds.) NBiS - 2019 2019. AISC, vol. 1036, pp. 692–699. Springer, Cham (2020). https://doi.org/10.1007/978-3-030-29029-0_68
Suzuki, K., Niibori, M., Rashed, A.S., Okamoto, S., Kamada, M.: Development of IslayPub3.0 - educational programming environment based on state-transition diagrams. In: The 4th International Workshop on Web Service and Social Media (WSSM 2015), Proceedings of the 18th International Conference on Network-Based Information Systems (NBiS 2015), Taipei, pp. 702–705 (2015)
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2022 The Author(s), under exclusive license to Springer Nature Switzerland AG
About this paper
Cite this paper
Takano, R., Niibori, M., Okui, Y., Kohana, M., Okamoto, S., Kamada, M. (2022). Implementation of Interactive Tutorial for IslayTab by Restricting and Highlighting the DOM Node to Tap. In: Barolli, L., Miwa, H., Enokido, T. (eds) Advances in Network-Based Information Systems. NBiS 2022. Lecture Notes in Networks and Systems, vol 526. Springer, Cham. https://doi.org/10.1007/978-3-031-14314-4_48
Download citation
DOI: https://doi.org/10.1007/978-3-031-14314-4_48
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-031-14313-7
Online ISBN: 978-3-031-14314-4
eBook Packages: Intelligent Technologies and RoboticsIntelligent Technologies and Robotics (R0)