I came across repl.it a couple of years ago and don’t use it heavily. But, when it’s the right tool it’s definitely the right tool.
What is it?
repl.it is an online compiler where you and your students can put your code and run it with a click. Everything is through a browser, so there’s nothing to install.
How do I use it?
For me, usually demos. I’ll post an example on whatever topic we’re working on. repl.it gives the students a place where they can go and take the starter code that I posted and play around with it.
And to extend on that, I’ll usually give them some sort of instructions on what they can add to the starter code.
For example, let’s say I either link to or embed the following example of a for loop that prints the numbers 1 through 10. I might ask them to change the loop so that it prints 1 through 50. Or maybe 1 through 99, but only odd numbers.
This way students have an environment to play around with code with almost no effort on their part to get it setup. No JDK. No IDE to install. Just load up a web page. And if you’re wanting to embed in a web page or into an LMS package like Canvas or Moodle, I talk about that a little further down the page.
I’ve only done this once, and it worked out pretty well.
We were doing a hangman project in class and many students needed to work on it from home as well. As happens every year, a few students were struggling to get their editor and the JDK installed so that they could work from home.
What I did is create a repl with the starter code from the project so that they spend their time at home working on the project instead of kicking their computers into submission trying to install software. When they had it working, they copied and pasted their code and uploaded it into Canvas.
Worked pretty well. Students were able to finish the project from home and didn’t have to worry about getting stuff installed. Although, the students that were having issues with installing were in the minority. Most still preferred to use an IDE.
What else does it do?
Lots of languages. Looks to be a couple of dozen available, including a few esoteric ones. There’s even one that I couldn’t name in class.
Not sure how recently they added this, but there’s now classroom support. Looks like you’re able to create assignments and then invite your students to complete them. An autograder takes care of checking their work and letting you know how they did.
I don’t use repl.it for autograding, although I wasn’t even aware that was an option until I started writing this post. But, I do use a different autograder and it’s made a huge difference in class. For my sanity, it’s cut down on the amount of grading I have to do. Now when I look at students’ code it’s more for style and tips and not whether it even works. And it works better for the students as well. They’re able to submit to the autograder and know almost immediately whether what they submitted was correct or whether they need to go back and do some more work.
Embedding a repl
I don’t generally link out to a repl that I’ve built. Instead I’ll embed it in an iframe inside of a Canvas page. That way students don’t ever have to leave Canvas to play around with the demos.
Creating a repl
First step, punching in your code. If you head over to the languages page at repl.it you can select the language you want to use. That’ll take you to the online IDE where you add your code.
Before you start typing, you might want to create an account. That way you can come back easily and change the starter code and also get to a list of all your past repls.
The site will put a default name in for your repl, but you can change it to just about anything you want.
This takes a bit of HTML. If you’re using a rich text editor in something like Canvas or Moodle you’ll need to switch to HTML mode.
There’s a share button above the code editor in repl.it. If you click that it will show you a link and also an iframe embed code. That’s what we’re going to use.
For the demo towards the top of this page, the embed code is
<iframe height="400px" width="100%" src="https://repl.it/@compscirocks/For-Loop-Demo?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
That gives us the code for a frame that is 400 pixels tall and will be as wide as whatever container we put it in. That’s pretty much perfect for how I use repl.it.
On to Canvas
I’m going to use Canvas for this example because it’s what I use in class. But the same idea works in other LMS packages like Moodle or Blackboard, and even on plain HTML websites.
On the top right of the rich text editor in Canvas is a link that says HTML Editor. Click that to go to HTML mode. Then, paste in the
iframe code you got from repl.it.
If you click on the link that says Rich Content Editor it’ll take you back and you should see the embedded frame.
I usually load these in either Canvas pages when I’m looking for more direct instructions. Sometimes though I’ll load them in forum posts like this when I’m looking to go over a concept we may have missed or want to give students the ability to discuss.
Only thing I’m not crazy about, and I think this is a fairly recent change, is that embedding puts the output window underneath the code editor. Not a big deal, but I do prefer it side by side.
What did I miss?
Do you use repl.it in your classroom? What feature that you can’t live without did I miss? Know any tricks that can make our lives easier?
In this series
Want to stay in touch and keep up to date with the latest posts @ CompSci.rocks?