Interacitve Product tour for TiddlyWiki

[Abraham Samma]

Hello all,

Last night while creating an introductory tutorial for new tiddlywiki users hosting at Maarfapad I decided that the best way to improve the onboarding process for new users is to use an interactive product tour.

I have created a plugin that allows anyone to create a tutorial for use in their own projects in TiddlyWiki. It uses LinkedIn's Hopscotchjs product tour framework. You can try it out now.

Find the github repo here.

Questions and suggestions are welcomed.

[TonyM]

Abraham,

That looks great. I will have a look at how to compose them. I imagine the elements could be used in other ways as well.

Regards

Tony

[Sylvain Naudin]

Hi Abraham,

That's a great idea and offer very good perpectives ! I'll must test it closer !

[Andreas Hahn]

Hi,

pretty cool idea and a nice demo too, I could see it be used by people
doing more serious things with TW.

I am unsure though why they would need the hopscotchjs thing when
clearly TW has all the capabilities to do this out of the box?

/Andreas

[Abraham Samma]

Hi Tony

Thanks. Composing tutorials only requires a valid JSON object in a tiddler labelled as such. Targeting elements can be a bit tricky but it is is usable so long as the tutorial's CSS plays well with TW's.

Hopscotch's documentation explains the API very well.

[@TiddlyTweeter]

First I have to figure out how to use it :-) But it looks very relevant to when you need to show step by step what to do. Later.

Josiah

[Abraham Samma]

Hi Andreas,

Thanks! I think it's an awesome & essential way to onboard new users.

The need for Hopscotch was for purely pragmatic reasons. Its API is exactly what I had in mind when I started thinking of creating this for TW5. I didn't want to reinvent the wheel. I MIGHT consider making one using nothing but 'native' TW, but for now, I got this.

[@TiddlyTweeter]

Ciao Abraham

This is more questions than answers.

I admit I'm not fully clear how this works. The demo is really neat but I could not figure out how to deal with this ...


I'd like to be able to point to each of those icons in turn saying what they do. I could not figure out how to do that minimally. For instance if you have three Tiddlers in the story river could it work for just the first one?

I think the library is very good but I'm still hazy about whether its a good fit for the dynamic way TW creates "the page"?

Am I right that it can't be event driven? i.e. you need to have something showing already for it to "know" what to do?

Any pointers welcome.

Best wishes
Josiah

[Mohammad]

Really amazing and useful for creating tutorial! I appreciate to have more example!

Best

Mohammad 

[Abraham Samma]

Hello Josiah,

As I have previously stated, placement of these hints is a bit tricky but not impossible. The API allows for some offsetting along the x and y plane as well as padding adjustments so you could manoeuvre the hints into place, so to speak.

And yes, it works best if there is only ONE tiddler in the story river. If you add more tiddlers, the CSS does not play well. I will try to see if how I could possibly allow for things such as adding callback on hopscotch events (impossible with JSON) which could allow for things like allowing the tutorial to go navigate to a tiddler via permalink. Needless to say, there are lots of things that can be improved in future versions.

Keep the questions coming please!

[@TiddlyTweeter]

Abraham

One thing that occurs to me is to maybe adapt one of the "slideshow" mechanisms that already exist for TW to ensure that you get on screen all but only what you want and then apply the hints into that already controlled context?

My thinking here is that a formal presentation with hints could be a good combination?

Just a thought
Josiah

On Tuesday, 4 September 2018 23:10:24 UTC+2, Abraham Samma wrote

[Abraham Samma]

You read my mind. Yes, we could ask TW itself to set up an environment to do a proper introduction. I will look into it and add some recipes to the demo.

Cheers

[barro...@gmail.com]

Very nice!!!

Been doing the same for my own creations though not as big as a plugin or videos** eee my latest post about Guide & Help pages.