Showcase: Learning touch typing with tiddlywiki

Showcase
1

I’m currently practicing touch typing and thought it would be great to train directly within TiddlyWiki using my own wiki content. This way, I would be able to practice while studying my notes. Here is a preview of my current progress:

I cannot share the full wiki because the SVG assets belong to edclub.com. However, if there’s interest, I’d be happy to share the code and logic so you can plug in your own assets. Let me know if you’re interested!

4 Likes
2

Hi @telumire
I for one would be interested to try this in my own wiki.
Typing at any speed faster than the single finger speed I do at present would be a plus

3

Here you go!

tiddlers.json (11.0 KB)

As mentioned, I didn’t include the SVG code, but you can easily grab it from edclub.com using your browser’s dev tools (Right-click > Inspect). I’ve added two input fields in the UI so you can simply paste the SVG code in there once you have it. In vkeyboardkeys.svg, you will need to escape the backtick key by using a text widget <$text text=“`”/>, it mess with the svg rendering. The top of the svg should look like this:

<svg viewBox="0 0 683.3 254">

You might have to clean up the svg for the keyboard aswell.

The wikitext is a bit rough around the edges right now, but it works! If I find the motivation, I’ll draw my own clean SVG from scratch to make it fully standalone / make it easier to use, and improve on the ui/features.

Feel free to play around with it, and make your own versions :slight_smile:

1 Like
4

It seems the SVGs are missing. The code is very interesting.

5

Just to be provocative: I wonder how many folks here are also practitioners of the contrarian art of alternative-keyboard typing. Back in grad school years I decided to replace my erratic QWERTY typing habit with DVORAK touch-typing. (Qwerty was, perhaps y’all know, designed to slow people down, back in the days when quick adjacent keystrokes might jam the moving parts.)

  • JKL; — How useful are these keys under your right fingertips?
  • HTSN — much better! (And under your left-hand home row fingertips: the vowels.)

I used a gamified typing tutor for a little while. But the main fun trick was: I never re-labeled my physical keyboard. So looking down was … useless!

After the training-up phase with the game, I kept a keyboard layout diagram near my screen — which I could look at whenever I liked — but I still had to translate its info into a motor signal to the correct finger.

Happy touch typing!

6

Right. Back-in-the-day when I was beardless the DVORAK V. QWERTY thing was ubiquitous.

Regarding the OP: couldn’t I just ask an LLM to map a keyboard and strokes?
Or take dictation-to-text?

Just wondering for a Futurist,
TT

7

Thanks for providing the code.

Is there a specific page to inspect the svg

8

That is a most excellent anecdote, thank you for sharing.

1 Like
9

You can go on this page for example: https://www.edclub.com/sportal/program-3/194.play

Look for the div with the id “vkeyboardkeys” to get the svg for the keyboard :slight_smile:

10

Thank you, that worked.

1 Like
11

Hi everyone! I’ve been making good progress on my touch-typing trainer.

I added a scoring system and integrated several visual helpers (colored keys, dynamic hands, motion paths) and lessons taken from tipp10.com.

Next goals:

  • Showing words in a random order, prioritizing keys with the most errors.
  • Improving the animations
  • Cleaning up the wikitext
  • Sourcing free assets (the SVG keyboard and hands I’m using to test the layout are copyrighted)

The file is available upon request if anyone wants to poke around the code or test their typing speed. Feedback and ideas are always welcome!

2 Likes