December 2013

Gavin Pickin

Online Interactive Learning - TryCF - Submitting your First Tutorial Walkthrough

Online Interactive Learning

Yesterday I discussed a great new Coldfusion Community Project,, started by Abram Adams... and how I submitted my first Tutorial and got it published. TryCF is a Coldfusion version the learn by doing school of thought, in the same line as and (which I reviewed in a previous post here). Its a great little tool, that allows you to consume small tutorials, in a practical and interactive way on the site, and code CFML in the browser, without having to download, or install anything on your machine. is a similar browser based coding tool, but that is more of a scratch pad and playground, where this has a series of tutorials, to help you learn the language.

You can login / signup today and get a free account, and start creating your own tutorials to commit to the cause. Adobe has even got on board and has some great prizes for community members who submit tutorials to TryCF during their Tutorial Contest... so today I'm showing you how easy it is to sign up and submit your own Tutorial, just like me (click here to see my tutorial - its not great, but they all help, and if you give feedback, we can all make it better.

The process was simple. You signup, with only a few details, Name, Email, Password etc... and you're in. 

Once you sign in, you'll see a few more menu items appear for you. You can click Submit a Tutorial to get started, or view My Stuff to see your tutorials, and their status. While you are working on your tutorial, only you and the Site Admins can preview the tutorial, and once you submit it, the Site Admins can approve and publish it.

Each tutorial has a title, introduction, and Tags (or categories), and a Level, so eventually the tutorials will be broken down by learning level... and category.

Once you fill in the General Information page (shown below), you can start working on your first page. Each tutorial is made up of one or more pages... and one or more exercises for each page.





An exercise consists of Exercise Instructions, which can be Markdown and some simple HTML, and then a Code Console, and this is where the magic happens. You can decide whether or not to show the Code Editor, and the Results Panel, so this allows you to have text in the last exercise, without an Editor at the bottom. The code console has 3 states... Default Code, Code Test, and the Solution. 

Default Code is the start of the exercise. You can has fully function code, that the student can run right away, to show how a concept works, or you can have a partial or broken set of code, to encourage the student to fix your code, and learn by doing. You can hide the Results Pane if your code is not meant to run. Its a pretty nifty editor, although the auto-complete on the cfelse tag bugged me a little bit... I guess thats what I get for using Tags right.

Code Test is where the tutorials really have power, because you can set Assertions on the Code Editors code. This allows you to test the code the student has written, to determine if they successfully completed the exercise or not. Sometimes, for simple tutorials (like mine I posted yesterday) are very straight forward, and didn't require testing. You can develop some powerful tutorials with these features, and make the learning experience for the students interactive and rewarding.

The Solution allows you to show the student what your solution is, if they get stuck, or want to compare their solution to yours. This is where we can guide new developers, and try to show them better practices, the more good code you see, the more good code you should produce.

You can add more pages, and each page can have its set of exercises, so you can do a simple 1 page introduction, or you can develop some concepts over several pages, making your tutorial into a complete lesson plan. Save and revise over time, and when you are ready, let the Site Admins know, and they can review, and publish your tutorial, live for the world to see.

Do not forget, there is a Tutorial Contest going on right now, more information here on my last post and here on the site.
Do not be shy, submit a tutorial, enter the contest, and lets all help CFML and the CFML Community grow.

If you want to see my tutorial, and provide feedback to improve it, please do... you can see my first tutorial here.

Thanks for reading, see you all soon.





by Abram
12/07/2013 09:29:01 AM

Wow Gavin, this is awesome! Thanks for taking the time to document the process. It's gestures like this that keep a community going.

BTW, agreed - the cf tag auto close thing isn't that great with the editor. I may turn it off (or maybe fork the ACE editor and fix for cfml tags).

by Phillip Senn
01/21/2014 09:54:55 AM

The biggest benefit to ColdFusion is the cfquery tag. Is there a cfquery you can do in the site?

by Gavin
01/21/2014 10:50:56 PM

Good question. I did some research, and yes, you can setup a Query to use as a QofQ which would be a good way to show some of the abilities of the cfquery tag. I will try and write something using it soon, to explain how it works, and a proof of concept.

Abram is doing a great job, and if we need DB connectivity to showcase ORM etc, I'm sure he will continue to add more and more capabilities in time.

Keep an eye out on a post about that soon.

Blog Search