Explorotron extension for Visual Studio Code

The explorotron is a spiritual successor to Study lenses. The extension allows learners to add new perspectives and layers of interactivity on top of existing JavaScript Code. Every lens focuses on a specific aspect of the code that has to be studied. Lenses follow CER best practices such as PRIMM, scaffolding and expertise reversal. For more information on the theory behind the extension we suggest reading our papers on Computing Education [1, 2].

References

[1] Malaise Y., Cole E., and Signer, B.: "Codeschool in a Box: A Low-barrier Approach to Packaging Programming Curricula", Proceedings of CSEDU 2023, 15th International Conference on Computer Supported Education, Prague, Czech Republic, April 2023

[2] Malaise Y. and Signer B.: "Explorotron: An IDE Extension for Guided and Independent Code Exploration and Learning", Proceedings of Koli Calling 2023, 23rd International Conference on Computing Education Research, Koli, Finland, November 2023

Project was inspired by:

• Study Lenses
• JS Parsons
• Reveal.js
• aran
• qlcjs

Using the extension

To open a specific JavaScript file using a study lens simply right click on the file and in the study lenses context menu select the lens you which to apply. If the repository you are working in contains any *.presentation.md fiels they will automatically be rendered as presentations using revealjs. Any .studytour files will also automatically be handled by the extension.

If you are curious and want to explore everything the extension has to offer we recommend cloning the Explortron Example Repository and test out the functionality on the provided files.

Get the companion mobile app

The extension can generate exercises for the JS StudyBuddy mobile application, dowload the free app for android to make use of this feature!

Development

This project was generated with Angular CLI, so it can be be used for angular development by default.

To test the extension in vscode context:

$ yarn install
$ yarn run build

After build process you can press F5 to "Start Debugging" (or: select in menu "Debug" -> "Start Debugging"). A new window will open in which the extension will be running.

Packaging

To generate extension in VSIX format execute the package command:

yarn run package

Finally the generated VSIX file with VSCode extension should appear in the root folder of your project.