Instructice: Creating Introductory Steps for Your Web App

• You can try it here

1. General Info
2. Technologies
3. Usage
4. Contributing
5. Issues
6. License

Instructice is a library that allows you to create interactive demonstrations for any web application. It is still in development, so is still very immature. It enables you to guide users through your application with user actions like events and information tooltips. All data and options are configurable through the instructions.js file.

To use Instructice, you need to create an instructions.js file in your project. This file should export an object that defines the instructions for your demonstration. The instructions include various elements like text, images, buttons, and their associated actions. Each instruction can be configured to run with other instructions, have a backup, and end after a certain action or time. Here's how to add instructice to our page: ``

<script type="module">
    window.onerror = function(message, source, lineno, colno, error) {
        if (error && error.code === "MODULE_NOT_FOUND") {
            console.error(`The module ${source} could not be found.`);
        }
    };

    import("./src/instructice.js")
        .then(module => {
            let Instructice = module.default;
            let instructice = new Instructice();
        })
        .catch(error => {
            console.error(`An error occurred while importing the module: ${error}`);
        });
</script>

• create an instructions object like below.

let  instructions = {
      version: "1.0.0",
      for_url: "https://caglarorhan.github.io/instructice/",
      start_stop_switch: {
        is_switch_on:true
      },
      instructice_starter:{
        auto:false,
        from_app:false,
        id:"instructiceStarter",
        type:"img",
        class_name:"instructiceStarter",
        value:"./img/instructions.svg",
        title:"Click to practice with instructions!",
        alt:"Click to practice with instructions!"
      },
      instructice_stopper:{
        auto:false,
        from_app:false,
        type:"button",
        class_name:"instructiceStopper",
        value:"STOP THE INSTRUCTIONS",
        id:"stopButton",
        title:"Click to practice with instructions!",
        alt:"Click to practice with instructions!"
      },
      list: [

If there is a start-stop switch it will be used to start the instruction steps and if there is a stopper other than starter it can be used to stop the instructions.

If same element id given for both start and stop, it will switch the instruction start-stop.

list is an array of objects. Each object represents an element with one or multiple scenarios. These scenarios may solo or consecutive, they can have data (which is a text baloon for explanation as data next to the target element), can have actions and a stopper (end_action).

Elements scenarios might have no actions at all.

Contributions to Instructice are welcome. Feel free to fork the repository and submit a pull request. We also welcome any issues or suggestions for improvements.

If you encounter any problems or have any suggestions for Instructice, please feel free to open an issue on our GitHub repository. We appreciate your feedback and will do our best to respond to your concerns in a timely manner.

Instructice is licensed under the MIT License. For more information, see the LICENSE file in the repository.