guide-snap
v0.0.3
Published
A package that help for creating step by step tutoriel on web pages by using attributes on HTML tags
Downloads
239
Readme
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>