Redesigned code editor

Introducing a new code editor for the Wipple Playground!

The new editor features a sidebar with a Run button and an improved command palette. It also has all-new error messages, redesigned to be less overwhelming and more helpful.

Run button

Instead of compiling and running code automatically, the new editor has a Run button that students click when they’re ready. As a result, editing code is less distracting, because you can finish typing before errors pop up.

Command palette

The new command palette is displayed permanently in the sidebar, instead of hidden in a dropdown. Commands are categorized, with an option to view all commands as well. Dragging a command into the editor now shows a full preview of the code that will be added, so you know exactly what will change.

Redesigned error messages

Wipple’s new error messages are more friendly, appear one at a time, and include guiding questions to help students fix them on their own.

Not all errors have guiding questions yet — as part of my research at Worcester Polytechnic Institute, I will be improving the messages of and adding guiding questions to almost every error. I will also use the responses to the guiding questions to determine how students are learning!

Print button

Finally, the ••• menu contains a new Print button, so students can export their work as a PDF and take a printed copy home with them!

Conclusion

The new code editor is live at wipple.org. Click Start coding now to open the playground. I’m excited to continue refining the design in response to student feedback!