<commit_before>jquery.tutorial.js
==================
Work in progress :)

The idea of this jquery plugin is to allow you to create an interactive tutorial on your page someting like this:  

```javascript
$("#tutorialContainer").tutorial({
    steps: [
        {
            action: { click: "#Button1" },
            text: "You should click Button1",
            highlight: { glow: "#Button1" }
        },
        {
            action: { click: "#Button2" },
            text: "You should click Button2",
            highlight: {
                css: {
                    target: "#Button2",
                    style: "glow"
                }
            }
        },
        {
            action: {
                change: {
                    target: "#textfield",
                    verify: function (event) {
                        var length = this.val().length;
                        console.log(length);
                        return length > 50;
                    }
                }
            },
            text: "You should write at least 50 characters",
            highlight: {
                css: {
                    target: "#textfield",
                    style: function (options) { $(options.target).addClass("glow"); }, // What about cleanup? how does the css highlighter cleanup the action performed by that function?
                    cleanup: function (options) { $(options.target).removeClass("glow"); }
                }
            }
        }
    ]
}).start();
```

Here is a fiddle with an example
http://jsfiddle.net/a1j5nq3y/4/

Future Features  

* Skip Tutorial
* Store state across page loads?
<commit_msg>Updated readme with new fiddle<commit_after>jquery.tutorial.js
==================
Work in progress :)

The idea of this jquery plugin is to allow you to create an interactive tutorial on your page someting like this:  

```javascript
$("#tutorialContainer").tutorial({
    steps: [
        {
            action: { click: "#Button1" },
            text: "You should click Button1",
            highlight: { glow: "#Button1" }
        },
        {
            action: { click: "#Button2" },
            text: "You should click Button2",
            highlight: {
                css: {
                    target: "#Button2",
                    style: "glow"
                }
            }
        },
        {
            action: {
                change: {
                    target: "#textfield",
                    verify: function (event) {
                        var length = this.val().length;
                        console.log(length);
                        return length > 50;
                    }
                }
            },
            text: "You should write at least 50 characters",
            highlight: {
                css: {
                    target: "#textfield",
                    style: function (options) { $(options.target).addClass("glow"); }, // What about cleanup? how does the css highlighter cleanup the action performed by that function?
                    cleanup: function (options) { $(options.target).removeClass("glow"); }
                }
            }
        }
    ]
}).start();
```

Here is a fiddle with an example
http://jsfiddle.net/a1j5nq3y/5/

Future Features  

* Skip Tutorial
* Store state across page loads?

Since this is my first project on github I haven't done much with this page yet
http://thmsndk.github.io/jquery.tutorial.js

I intend to host demo pages and examples there though
{'fraction_non_alphanumeric': 0.11196581196581197, 'fraction_numerical': 0.007977207977207978, 'mean_word_length': 1.3851902173913044, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1906602', 'n_tokens_mistral': 896, 'n_tokens_neox': 833, 'n_words': 271}