guide-snap v0.0.3
GuideSnap
GuideSnap is an interactive tutorial library for the web. It allows developers to guide users through various steps on a webpage by highlighting elements in a specified order. This package can be integrated with any web project to create seamless, intuitive tutorials.
Table of Contents
Installation
To install GuideSnap, use npm:
npm install guide-snapUsage
Once installed, import and initialize the GuideSnap class to create your tutorial. The tutorial starts by calling the start method.
Step-by-Step Guide
- Import and Initialize GuideSnap
import { GuideSnap } from 'guidesnap';
const tutorial = new GuideSnap();- Set Up Tutorial Steps on HTML Elements
Add a gs attribute to each HTML element you want included in the tutorial. This attribute should hold a unique integer indicating the order in the tutorial sequence. Additionally, you can add a gs-text attribute to provide a description for each step.
<div>
<!-- Default group elements-->
<button gs="1" gs-text="Click here to start the tutorial">Start Tutorial</button>
<input type="text" gs="2" gs-text="Enter your name here">
<button gs="3" gs-text="Submit your information">Submit</button>
</div>
<div>
<!-- Elements with group name -->
<button gs-group="group1" gs="1" gs-text="Click here to start the tutorial">Start Tutorial</button>
<input type="text" gs-group="group1" gs="2" gs-text="Enter your name here">
<button gs-group="group1" gs="3" gs-text="Submit your information">Submit</button>
</div>- Start the Tutorial
Once the elements are set up, initiate the tutorial with:
tutorial.start(); //Only use elements without group name
tutorial.start("group1"); //Only use elements with gs-group attribute name equal to "group1"Features
- Customizable Tutorial Order: Define the sequence of steps with the
gsattribute. - Descriptive Steps: Add contextual descriptions for each step via the
gs-textattribute. - Simple API: The
startmethod initializes the entire tutorial with minimal setup.
Configuration
GuideSnap currently requires minimal configuration. Each tutorial step is defined directly in the HTML markup via gs and gs-text attributes, making it easy to create tutorials directly in your HTML structure.
Examples
Here's a quick example to show how GuideSnap could be used in a form tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import GuideSnap from './path/to/guidesnap.js';
document.addEventListener("DOMContentLoaded", () => {
const tutorial = new GuideSnap();
tutorial.start(); //Start tutorial with only element without gs-group attribute
});
</script>
</head>
<body>
<button gs="1" gs-text="Click here to start the tutorial">Start Tutorial</button>
<input type="text" gs="2" gs-text="Enter your name here">
<button gs="3" gs-text="Submit your information">Submit</button>
</body>
</html>