How to Build a *free* Speed Reader for ANY body of text (using REGEX and a slideshow - no paid plugins)

Hey everyone, long time lurker here.

I’ve seen many variations in questions asking how to separate a body of words into its individual words, either from a multiline input to a Repeating Group, or otherwise. Like these:

This is how you can do that, and also display the words one at a time at a speed of your choosing, like modern online speed readers. With just a body of words and a slideshow you can build a speed reader, a flash card app, or that Maximum Alphaness video (https://www.youtube.com/watch?v=VWWHOfCeDN0). This is how you can imitate apps like Flash Reader, Spritz, Wordex.

To build more complexity into it, you can modify this to read whole books, create save points, pause/resume, jump chapters, and more. Like this one:

speedreadmarcusaurelius:
speedreadmarcusaurelius.bubbleapps.io/

Let’s get started:

I. Set up the Canvas

  1. Create a multiline input.
  2. Create a button (to submit the text after typing or pasting into multiline input)
  3. Create a Repeating Group and add a text element in it. Then, make it 300 rows, 1 column, and a ‘fixed number of cells’ layout style. Set this RG to a size of 1x1 pixels so it’s invisible to the user. Leave the Data Source blank.
  4. Create a second RG with the same structure as above, but make this one 100-200 rows instead.

II. How to Separate body of text into list of separate words

This is where the magic happens with a little Regex.

  1. Start the workflow for the Submit button.
  2. First step in WF is ‘Display list’ on the first Repeating Group you created and use the following Regex to separate the multiline input’s value into its individual words:
  • Multiline input’s value:extract with Regex: (\b)(?:[-‘.,:?’%$#&/]\b|\b[-‘.,:?’%$#&/]|[A-Za-z0-9]|([A-Za-z0-9]+))+(?=\s|$|\b)
  1. For the 2nd action, Display the list of the 1st RG on the 2nd Repeating Group you created. Limit the quantity by specifying “items until 200”
  2. Congrats! :partying_face:You now have any body of text separated into words and displayed in a RG

  • “Why use 2 Repeating Groups, anyway?”
    • I’m not exactly sure why, but trial and error made this perform much smoother for me, especially when you have large bodies of texts or whole chapters of a book.
    • Additionally, I have other actions like pausing, resuming, or saving that only affect what’s displayed in the first repeating group, so the 2nd RG only ever displays what’s on the first - and you can change and modify the data source of the 1st any way you like.

III. How to Display List of words in a Slideshow

And now the fun speed reading part!

  1. Create a slideshow (with the free slideshow plugin.) Set it to not visible on page load. Doesn’t matter where you put it.
  2. Set the source of it to the 2nd RG’s list of texts.
  3. Create a big text element. This is where words will display so it’s the most important visual element of the page - make it big and place it front and center.
  4. Set it to display “Slideshow’s Current slide”
  • Optionally, create conditions to display a different text if there’s nothing in the multiline input yet.

And you’re done! Whatever you place into the multiline input will now ‘play’ on the slideshow at whatever speed you determine, and you will see it on the text element created. Check it out here:

https://flashreader.bubbleapps.io/

**Pausing, Resuming, Ending, Save Points, and changing speeds while retaining where you left off require custom states, more conditions, and counters. Let me know if you’d like me to write more in depth about that and I’ll make a follow-up post.

9 Likes

Bookmarked!

SOLVED :laughing:
Hello, would you know the regex expression to break up a paragraph of text by the newline?

So for example:
whole wheat bread
2 pack milk
sausage
bran cereal

would convert into a list : “whole wheat bread”,“2 pack milk”,“sausage”,“bran cereal”

Update using : [^\n]*
breaks up the paragraph but adds a blank item as well between the lines

Problem solved! Added the “Filtered” to the regex and selected to display only non-empty items.


Viewable Editor here: B2b-list-by-newline | Bubble Editor

1 Like