adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.25k stars 7.63k forks source link

Extension for building tutorials #12414

Open kodaxx opened 8 years ago

kodaxx commented 8 years ago

I have an idea for an extension that would basically work like this:

A user installs the extension and loads a tutorial project, the extension will determine the tutorial file based on it's name (ex. bracktut.html) and it will hide this file from the project window. (This extension could also be made to hide all filetypes (HTML, CSS, JS) with the prefix 'bracktut'). The extension will also create a livepreview pane that contains the bracktut.html file for viewing while editing files. For an example of this, see mozilla thimble tutorials.

Now, let's pretend I've built a simple HTML page with some instructions and criteria (with checkmarks). I name it bracktut.html. There is also a JS file (ex. palindrome.js) in the project that does NOT have the prefix 'bracktut' and will be visible and editable for the user. Inside bracktut.html there is some CSS to make it look pretty, and some JS to run tests on the corresponding JS project file (in this example that is plandrome.js).

The user sees the instructions and critera in the tutorial pane, and they edit palindrome.js to achieve the goals. As they run the program, the checkmarks in the tutorial pane will check off as the tests in bracktut.html return true.

That way, we can effectively have a tutorial system inside brackets. The purpose of hiding the other project files from the window is mainly cleanliness, but also to keep someone who is learning from peeking without significant effort.

Anyone think this is a good idea? Or is anyone currently working on something similar?

petetnt commented 8 years ago

Hi @kodaxx,

are you aware that Thimble uses (a modified version) of Brackets as its editor? In that sense you are already closer than one might think :smile_cat:

I think porting the functionality is totally doable for Brackets itself too. Thimble is also open source which might contain some useful tips on how to get started :+1:

kodaxx commented 8 years ago

I guess, I just need an extension to identify the bracktuts prefix and show it in a preview pane while hiding it from the project files pane. The rest is doable in the bracktuts file