Skip to content

Onboarding

Bart edited this page Jun 19, 2024 · 5 revisions

Onboarding

File: Meesterproef-SNSimulation/js/Onboarding.js

Description

The Onboarding class handles the onboarding process for new users. It displays a series of dialogs to guide users through the application and saves the completion status in local storage to ensure the onboarding process is not repeated for returning users.

Methods

  • Constructor: Initializes the onboarding process, sets up event listeners for onboarding steps, and handles local storage to track completion status.

Event Listeners

  • DOMContentLoaded: Checks if the onboarding process is complete. If not, displays the first onboarding dialog.

  • next1 click: Closes the first onboarding dialog and shows the second dialog.

  • skipOnboarding click: Closes the first onboarding dialog, sets the onboarding completion flag in local storage, and skips the onboarding process.

  • next2 click: Closes the second onboarding dialog, hides it, and shows the third dialog.

  • skipOnboarding2 click: Closes the second onboarding dialog, sets the onboarding completion flag in local storage, hides it, and skips the onboarding process.

  • next3 click: Closes the third onboarding dialog and sets the onboarding completion flag in local storage.

  • next3Button click: Closes the third onboarding dialog when the next3 button is clicked.

Local Storage

  • onboardingComplete: A flag stored in local storage to indicate whether the onboarding process has been completed. If this flag is not set or is false, the onboarding process will be shown to the user.

Design rational

Clone this wiki locally