Implementation of interactive tutorial for islaypub by hooking user events

Abstract

We present a mechanism to overwrap the existing web-based graphical programming environment IslayPub with another JavaScript program that interactively tutors the user where to click and how to operate IslayPub along the tutorial scenario. The original JavaScript program of IslayPub has only to be modified to include event listeners to hook the user events within the opening ⟨ body ⟩ tag and to include a tutorial program at the end. The tutorial program instructs where to click by an arrow near the target component in the IslayPub screen and what to do in a dialog box in each step of the scenario and hooks the user event to check if it complies with the scenario. If the user event implies the expected operation in the step, the tutorial program allows the event to propagate toward the IslayPub program to react to the event and lets the user proceed to the next step. Otherwise, the tutorial program abandons the event and prompts the user to do the right thing. In that way, the user is guided to learn how to operate IslayPub along the tutorial scenario.