Introduction to the Tour Plugin

#1

Introduction

For the last few months I’ve been working on a new plugin for TiddlyWiki that presents interactive step-by-step tours. It includes a basic “Introduction to TiddlyWiki” tour that will be available at tiddlywiki.com, but also supports user defined tours that people can use to help visitors to their own wikis.

→ Try the “Introduction to TiddlyWiki” tour

Like the recently introduced Geospatial Plugin, this work was undertaken as part of my commercial activity for clients of Federatial. In this case, the client is Anna Freud, a UK-based charity that works to improve the mental health of children and young people. We plan to deploy a custom version of the tour to help newcomers to their mental health manuals (for example, see the AMBIT manual).

Links

Overview

The Tour Plugin presents a sequence of steps to the user one at a time.

Steps can be configured so the user can only proceed to the next step once a task has been successfully completed.

Steps can be displayed full screen, or as a small yellow sticky overlaid over the main page.

Successfully completing a step displays a confetti animation:

Screen Recording 2023-09-11 at 09.55.45

The hint button spotlights the precise area of the screen where action is required:

Screen Recording 2023-09-11 at 09.48.36

Finishing Up

The Tour Plugin is a work in progress, making it the perfect time to chime in with comments, questions or suggestions.

Work that still remains:

  • Improve documentation
  • Adding some basic wikitext steps to the tour
  • Adding steps about tagging
18 Likes
Are there any examples for the use of TW as infoscreen?
Leaflet - CRS.Simple
Unusual layout: is it possible?
#2

Hi @jeremyruston ,

this is awesome!
It can help me showing how my inventions work :slight_smile:

Thank you very much!

Simon

2 Likes
#3

The edition for submitting documentation changes also uses the Tour plugin, albeit a modified version that adds some extra features like support for multiple tours and optionally skipping steps depending on a filter. When time permits I will tidy up and submit those changes to this prospective core plugin.

One the features I would like to introduce is the ability to highlight a single DOM element and positioning the tour window next to it. An example of this can be found in the driver.js library:

image

1 Like
Leaflet - CRS.Simple
#4

I love this! This would be a great way to build the educational pieces that I’m working on for my students.

1 Like
#5

I love it. Thank you Jeremy!
This opens new ways for teaching TiddlyWiki and creates help for user wikis.

1 Like
#6

Suggestion

If themes can be used with the Tour plugin, then we can create presentations like powerpoint!
I mean a tour can have a setting to use its own theme (including font/font-size/colors/background colors).

1 Like
#7

Very small comments:
(1) At least once the first phase is finished, it might be ideal if finishing one goal automatically brings the next into view, rather than having to hit “next” each time.
(2) The tourist is invited to search for “help”. But there are not any search results for help. That is slightly awkward. :thinking:
The basic set of tools here is beautiful. I’m looking forward to developing a version for my teaching projects. (Most of these are read-only, with no access to things like control panel, but I still want to show people how tags work, how to search, etc.)

Thanks for sharing the exciting work in progress!

2 Likes
#8

Hi @jeremyruston

Amazing work as always and I am sure a great many of our TiddlyWiki users will appreciate this too (especially the confetti :confetti_ball: which is a nice effect).

Cheers

#9

awesome work!!! :clap:

#10

Beautiful! This is a great plugin and fun tour.

With regard to the tour itself, I second Springer’s comment about the search for help. An intro to search should display at least a few search results. Maybe a search for Neptune instead.

1 Like
#11

Wow. Just wow!

Thank you once again!

#12

I guess this could be the answer to the landing-page-problem. :tada: Confetti!

  • It still has to adapt to different screen-sizes more smoothly. On mobile the jupiter Tiddler is chopped off.
#13

Very nice.

On my 'puter, the hint spotlight is consistently off by about 30-40 pixels on the X axis

Firefox latest, Win10, browser not maximized.

image

.EDIT: Same on Chrome.

1 Like
#14

Enhancing User Experience - Implementing Guided Tutorial Functionality with Driver.js This is a tiddlywiki extension for driver.js, it looks more like it should be extended

2 Likes
#15

Another step to a presentation environment - but it is quite a puzzle.
So far I used elements of:

It would be intersting to combine this with https://tiddlymap.org/ to get a prezi-style experience.

1 Like
#16

A propos… where can I find the documentation?
Looking at the tour’s tiddlers it seems to be more rocketscience than we are used to as users

1 Like
#17

@jeremyruston Any chance of a status update?

#18

We expect to merge the plugin soon after v5.3.2 has been released. @saqimtiaz has recently contributed a number of nice new improvements.

2 Likes
#19

Hi @jeremyruston,
any news about documentation?
Everything is welcome. I offer my help in case of editorial support.
Thx
Stefan

#20

Hi @stefan_from_germany I think the reference documentation within the plugin is up to date and complete. We could certainly do with some more introductory documentation, and I would welcome contributions.

I’m sure there’s an opportunity for lots of improvements, but some of the things that would be good to have include:

  • Expand the plugin “readme” tab to give a general outline of how the tours are defined
  • Expand the plugin “docs” tab with an introduction and some examples
  • Another example tour. I had hoped to include one on tags. It’s a good topic because it starts fairly simply but it will be a challenge to explain the way that the ordering of tiddlers with a tag is done

But as I say, any improvements would be most welcome.