Improving active learning interactive examples on the learning area

Hi all,

I have recently made some improvements to the interactive “active learning” examples on the learning area, after one of our community members filed a few bugs against them containing some really good suggestions.

I have:

  1. Hidden the JSFiddle/Codepen buttons, as they really aren’t needed and didn’t work very well when they were there.
  2. Made it so that pressing the Tab key while inside the textarea creates a Tab rather than tabbing to the reset button. I have also added code so that you can use the Esc key to unfocus the textarea — just so that it doesn’t end up becoming an accessibility trap.
  3. Made it so that the Show solution button now toggles between show/hide solution. Any changes made to the user code or solution have their state saved independently, until Reset is pressed, when both are reset to their initial states.

You can find the full details at https://bugzilla.mozilla.org/show_bug.cgi?id=1425639. I have made these additions to one example so far; see https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays#Active_learning_Printing_those_products!

Before rolling the change out to all of the interactive examples on the learning area, I thought I’d check it to see if anyone else had any small updates they think would improve the examples, or any comments on the code as it stands?

Chris

I think it could use a border around the whole thing, and possibly some labelling. As it is, it’s not obvious that the output text isn’t just part of the content, and it’s not obvious that it’s actual output. This is ugly but shows what I mean: https://screenshots.firefox.com/Ib9BDK7bQjBYRcZ7/developer.mozilla.org.

The whole thing could perhaps use a title, and the output box could perhaps use a label.

I think the help text “Press Esc…” is a bit clunky - it’s very prominent, for quite a niche thing. I think it could be smaller and could go underneath the editor, but I’m not sure what else to suggest here. Perhaps it could just say “Press Esc to exit the editor” and be located in the top-right of the editor, when the editor is focused?

I don’t think the editor needs to be resizable.

Syntax highlighting would be nice, but might get complicated :).

OK, thanks for the feedback!

I have made some adjustments that I would hope answer your queries. It has got a little more complex than before, now having some CSS added, etc. I think I’ll leave the syntax highlighting, as I don’t want this to get any more complex. This is supposed to be minor fixes, not a complete redevelopment :wink: