I made this because RegEx can be really useful but is pretty dry to learn. The format was also pretty convenient for someone not that experienced at making web games, it's all just form submits with code that actually just evaluates the RegEx so I don't have to worry about every possible variation.
I probably spent the most time on the CSS, because making things easy to use on different sizes of screen was definitely the biggest factor. Ended up being a good opportunity for me to brush up on a few things to be honest!
I also enjoyed the challenge of adding line breaks or highlighting text while having a typewriter effect. Because I was adding a character at a time I couldn't include HTML markup so I ended up using my own symbology and interpreting that on insert. For example, text I wanted highlighted I enclosed in 'quotes' and followed immediately with $. Whenever the typewriter function sees a $ sign, it runs a RegEx replace on the most recent 'quoted' string to add in highlighting spans.
If you write something wrong on the first question, you are asked to make a pattern that matches “anything” - such a pattern would be the 8 letters “anything” literally.
To add a bit of a mnemonic element to this story, you could introduce regex syntax in ways that relate to the characters. for instance the anything but the "bear door" part. It's a good chance to have the character be puzzled ? and surprised ! in some emotive way, so then we have an emotional story to remember that ?! means "A bear?! anything but the bear"
also. It would be nice to be able to click on the animated typing text, to have it complete instantly, if you just want to try another input.
I like the atmosphere. It reminds me of resident evil.
I probably spent the most time on the CSS, because making things easy to use on different sizes of screen was definitely the biggest factor. Ended up being a good opportunity for me to brush up on a few things to be honest!
I also enjoyed the challenge of adding line breaks or highlighting text while having a typewriter effect. Because I was adding a character at a time I couldn't include HTML markup so I ended up using my own symbology and interpreting that on insert. For example, text I wanted highlighted I enclosed in 'quotes' and followed immediately with $. Whenever the typewriter function sees a $ sign, it runs a RegEx replace on the most recent 'quoted' string to add in highlighting spans.