Blog

Last summer a friend suggested that I learn about React. My reaction? Where has this been all my life? React is a JavaScript library that makes web development more intuitive and faster. At least in theory. I’ve spent all my free evenings and weekends the last 6 months rewriting the Learn By Rainbow codebase into React. I’m sure tomorrow the new features will practically write themselves. In all seriousness though, it’s been fun and while I’ve worked really long and hard for what will look to everyone else like an “Art Upgrade”, I think the new code will be significantly more stable and less buggy.

My daughter is itching to record a new “How-To” video, so stay tuned for that.

Major changes:

• You can collapse the keyboard to hide it while typing if you are an experienced keyboardist who doesn’t need it.
• Sidebar lets you see the accent mark shortcuts if you need them.
• Top pane lets you access/change your user record and navigate to between Learn By Rainbow apps: Typing Flashcards (the main application), Legacy DigiFlash (the pre-upgraded version in case you need it), Sound Tiles (colorful squares you drag around for certain phonemic awareness activities), and Rainbow Board (just a boring place to type colorful words).
• Flashcard Assignment Editor now lets you delete single rows and move rows up and down.
• Click the microphone button to view fields for phonetic overrides as needed.
• If you use the “speak letter names while typing” features and mark your assignment as being in a foreign language, the letter names will be spoken in that language.
• There are now settings in your user record and in the assignment to ignore/require correct accent marks when typing.

New Bugs / Lost Features

• The balloons are gone, replaced with colorful highlighting of the letters. I’m still working on replacement graphics.
• C and G no longer “soften” in their spoken sounds when you type an E, I, or Y after them. I forgot, but my daughter is ON MY CASE to fix this.
• There is no longer a feature when every letter is checked as you type but you must backspace your mistakes yourself. Instead, I have disabled the backspace key when each letter is checked as you go, so if you accidently hit backspace when you hear the mistake sound, it doesn’t do anything.
• Probably lots of other issues we haven’t noticed yet… let me know what you notice.

Coming soon

• I’m working on a couple new apps that revolve around the CMU Pronouncing Dictionary, which is a cool open-source machine-readable pronunciation dictionary.
• View your own prior flashcard stats to see how you’ve been improving over time.
• Some gamification of the flashcard app, particularly around tricky spellings of English words, making use of CMU Pronunciation Dictionary.
• Assignment groupings and tracked assignments. In particular, I’m working on a “Type By Rainbow” track that will introduce the keyboard section by section while teaching high frequency words using those letters and introduce relevant phonics concepts.
• Cumulative Review feature that will generate review assignments on the fly with your own commonly missed words.
• And my husband thought I was almost done being busy with this… he is a very funny man…

If you are using LearnByRainbow.com to practice foreign language vocabulary, I have an exciting new feature live today. Edit your assignment, go to the Overrides tab, and you can now select the language of each column, which will determine how Speech Synthesis interprets the text when speaking your prompt or answer to you and improve its pronunciation of foreign words.

The first drop down is the language. If you select nothing, it will assume the default language of your browser, which I assume is the language most people will enter most of the time. In the example below, we have prompts in English, and answers in Spanish. If you select a language in the first drop down, the second dropdown will list all the voices your browser supports for that language. These voices have a variety of different accents for you to choose between.

Use the speaker icons in the preview column to hear how the selected voice will sound. Make sure you have “Speak answer” and/or “Speak prompt” selected, or the words in those columns will not be spoken.

I turned on spell check for the assignment editor too. If you are using LearnByRainbow.com for foreign language learning, you may wish to go to your language settings in your browser and add the additional language you are learning as a secondary language so that words in the foreign language will be spell checked against an appropriate dictionary. See: Instructions for changing your browser’s languages.

Additionally, last weekend I fixed a bug that was preventing assignments from having additional lines added to them. BTW, feel free to drop a comment anywhere on this blog to let me know when there are egregious bugs like that! My family isn’t actually using LearnByRainbow.com as much during the summer as we do during the school year, so I’m not always going to catch these myself, but I still want to know so I can get a fix out to you right away!

And finally, I’ve added quick access to Accent Mark Help that shows right by the on-screen keyboard when you are actually typing, instead of opening in another window. Edit your user record and select the option for “Show Accent Marks” to always show the Accent Mark info. Or while you are practicing an assignment, click on the “Accent Mark Help” link to the right of the keyboard and the accent mark cheat sheet will appear beside the keyboard.

Are you using LearnByRainbow.com for foreign language vocabulary? Do you have the languages and accent marks you need? Are there more you need me to add? Drop me a comment and let me know.

Now when the student quickly types letters that form a single sound (or another predictable sound pattern, even if it is multiple sounds), a colorful balloon appears and then floats into space. This will encourage students to think about the sounds of the words as they type and reinforce letter-sound connections.

In the future, additional color-coded images will appear for different types of phonograms and sound-welding. I hope to slyly teach a bit of etymology while I’m at it. You’ll also notice that each balloon is color coded according to the fingers used to type each balloon.

Hope you enjoy!

I’ve updated the assignment editor to have tabs across the top to get to different features. I’ve also added a short video in this post and also under the “Help” tab in the editor to show you how to use the editor and describe the features.

We finally got around to recording a demo of using Learn by Rainbow to practice typing and spelling. My daughter, age 10, kindly offered to demonstrate using her spelling list from last week. Apologies for the shaky camera, I couldn’t find the tripod.

Try the typing flashcards for yourself at LearnByRainbow.com.

Planned demos:

• How to create your own word lists.
• Available user settings and what they do/mean.
• How to create word lists with images (maybe, lol, they are hard…).

I’m rolling out some big visual changes today.

• User editor, assignment editor, and typing practice now each open as modal popup graphics. This should prevent unexpected behavior when you try to edit multiple things at once, and reduce visual clutter.
• Items resize and center themselves better. (If assignments still take up too much space, try reloading them for the size updates using the browse button.)
• When you type a letter combination that makes a special sound, in addition to getting the alternate sound (if you have letter sounds turned on), you will see text float up the screen saying what kind of letter combination it was. You may see:
  • r-control for AR, OR, ER, IR, UR, or EAR
  • digraph for SH, TH, CH, etc
  • welded for certain sounds like WOR, or AL where both sounds are present but the combination causes the sounds to shift
  • classical for letter combinations from Greek or Latin, such as CHR or CHL that cause the CH to say /k/.
• There is now a status bar with clouds and a sun so you can see how far through the assignment you are.

I have high hopes of creating some video tutorials this weekend as well.

-Mary

I’ve done a little debugging and work on the assignment editor.

Debugging:

• Previously the latest assignments and users showed at the bottom of each list and the oldest was selected by default when you came back to the page. These have been reversed and hopefully this will be more intuitive.
• Previously after completing an assignment and returning to the main page, you’d still sometimes hear assignment prompts read or keys pressed, like the assignment was being practiced, even though you couldn’t see it. I think this is fixed now.

Assignment Editor:

• I’ve made the text on the checkboxes shorter and moved them to spots I think are logical, generally above the control where you enter the data they relate to.
• I’ve added a phonetic answer and phonetic prompt area. These allow you to enter an alternate version of the answer to override the text-to-speech in the cases where it doesn’t read the word correctly. I wanted this for the word “aa”, as in the type of lava, but the text-to-speech pronounces the letter names, like it was the acronym for Alcoholics Anonymous. By entering the phonetic answer as “ah ah,” the text-to-speech pronounces it correctly. Phonetic prompt allows you to override the prompt text-to-speech in the same way. Leave these blank if you don’t need them.
• When previewing just one at a time, the preview now shows on the right-hand side in a fixed position so it never scrolls of the screen.
• If you want, you can embed a YouTube video in your assignment. Navigate to the video on YouTube, select the Share button, and then embed. Copy the code it gives you into the prompt. Make sure to uncheck “Speak prompt” as it would read all that code back to you!

It’s been a difficult last couple weeks for me. My baby just started daycare for the first time, and has already had a couple colds after barely ever being sick in his life. Everyone else in the house has been sick and exhausted too. And that’s not even to get into the other things in this world getting me down. If you are using Learn By Rainbow Typing Flashcards to help you study, I’d love to hear from you to know I’m not wasting my time with it. Leave me a comment telling me how you are using it or what feature(s) you’d like to me to work on next.

-Mary

My latest update, at Gwen’s request, is an option to have the keyboard speak sounds as you type. You will find this setting in the user editor (click Edit next to your name or “Player One”). The setting is “Speak Letter Sounds”.

You probably only want to use “Speak Letter Sounds” when practicing English words. For the most part, each letter (or phonogram) makes its most common sound when you type it. doesn’t work well with vowels saying their long sounds at the end of a syllable or word, or before a silent E.

It knows common phonograms, so if you type two letters that go together quickly enough, you will hear the sound they make correctly rather than separate sounds. In other words, when you type SH you will hear the sound file for /sh/ instead of /s/ and /h/. Eventually I plan to add some sort of celebratory graphic or sound when you successfully type a phonogram quickly. This encourages typing each sound as a unit even when they are made up of multiple keystrokes. I included common welded sounds such as WOR saying /wer/ and ALK saying /auk/. You will hear C and G soften before an E, I, or Y as well.

Do you know what phonemic awareness is? It is awareness of how words break down into sounds. This is not just the conceptual understand, but also the ability to actually hear and manipulate those sounds within words.

Many children develop phonemic awareness skills naturally during the preschool and elementary school years, but for some–especially dyslexics–it can be very difficult to break words into sounds and put them back together. When this is very effortful, it makes it difficult and slow to sound out words. Then even once the word is decoded, the student may be less likely to recognize the word when it is encountered again.

Colorful sound blocks are one way to practice these skills. While practicing with physical manipulatives is generally preferable to screen-based manipulatives, sometimes a digital version is more convenient, so I made one.

Basic Sound Tiles

Here are a couple links to videos (not mine) on how to use these sound blocks.

I’m working on re-writing the digital flashcard program I used in high school for the web so you can use it to learn to type while also learning to spell. This is a work-in-progress and I encourage you to try it out and let me know how it works (or doesn’t) for you, and how I can improve upon it.