Blocking browser refresh

Has one of your students accidentally pressed the F5 key while they’re working on code in ClassCube? I’d bet that it’s happened in your classroom even if you didn’t hear about it.

When they press F5, or Control R, it typically triggers a browser refresh. When your student is working on their code this causes the problem to reload, and any new code goes away. It’s really frustrating.

We’ve just added a new snippet of code to the editor that intercepts F5, Control F5 and Control R keystrokes and prompts to make sure that they actually want to refresh the browser. We didn’t want to block it entirely so the confirmation dialog seemed like a good compromise.

Refresh Blocked Dialog

A quick note though, this only blocks the keystroke when you’re actively in the editor. If you click off of the code editor then F5 and Ctrl-R work like they normally do and will refresh the page. 

How does it work?

If you’re coming to this page looking for the JavaScript to make this work, you’re in luck. If you’re a ClassCube user, you don’t need to worry about any of this. It’s already there for you.

This is roughly the function that we’re using to prompt the user. It’s does use Bootbox, but should work just as well with a normal JavaScript confirm dialog.

Then it’s just a matter of calling it. The Ace editor is bound to a div with id #editor.


Should refreshes be blocked?

I think in most cases the answer is probably no. It’s pretty bad form to make the browser work differently than users are used to.

But I also think that this case is an exception. The refresh isn’t really being blocked. It’s just popping up a dialog to make sure that the user really wants to refresh.