Add code to make sure users don't lose their work by accident

[threeamigos]

Dear Mr. Shiffman,

My sister and I love your tutorial. We did it with our dad (David Humphrey). I made an owl, and my sister made a minion from Despicable Me. However my sister lost her work. We found a bug in your code. When you click outside of the code editor, and press Delete or Backspace on the keyboard, it takes you back to the beginning and your work is lost.

With our dad we worked on a way to fix this bug. Here is our change to your code. Our code gives you the option to stay if you accidentally try to leave. We hope that you consider our change, and other new programmers like us don't lose their work.

Thanks for making a tutorial like this for new programmers. It was really fun and we enjoyed doing it.

Yours,

The Three Amigos (E, M, and David Humphrey)

[REAS]

Thank you Three Amigos! I'll let @scottgarner evaluate the request because this is his code base, but I want to say that I'm excited about your owl and minion and I'm sorry to hear about the lost minion.

[scotthmurray]

Likewise — a great catch! Thank you all for reporting (and solving) this!

[shiffman]

Three cheers for @threeamigos!

[obfuscurity]

:cake: :gift: :cherries: :confetti_ball: for the @threeamigos!

[precipice]

This is so awesome. Great stuff, @threeamigos.

[scottgarner]

Hi, @threeamigos. I'm sorry you lost your code and thank you for taking a stab at a fix, unfortunately this approach means that anytime anyone tries to leave the page or refresh they are forced to click through a confirmation dialog.

I've been thinking about the best way to handle this. I may take a stab at just disabling backspace as a shortcut for backwards navigation, but there isn't a terribly reliable way to do this.

I may also try to find a way to use onbeforeunload in a less obtrusive way, but it's unfortunately not ideal for our setup. In a place where you have a definite saved or sent state, it works well. In our case, it may try confirming before a user leaves the final editor page if they haven't shared their code yet.

[konklone]

Is it easy to adapt this PR to look for a state where there's unsaved work, and wrap the confirm dialog in the appropriate conditional?

[scottgarner]

We don't have a real save state. The closest thing is whether or not somebody has shared.

I'll work something up.

On Sun, Dec 8, 2013 at 4:53 PM, Eric Mill notifications@github.com wrote:

Is it easy to adapt this PR to look for a state where there's unsaved work, and wrap the confirm dialog in the appropriate conditional?

— Reply to this email directly or view it on GitHubhttps://github.com/scottgarner/Processing-Hour-Of-Code/pull/63#issuecomment-30093937 .

[scottgarner]

During the final exercise, a user is now prompted before leaving the page until they've used the share button. See 4fa3b37.

Thanks again, @threeamigos.

[shiffman]

Thanks @scottgarner! Do you think we should consider also enabling this during each exercise? The language would have to be different since we don't have a share button something like. "Do you want to leave the tutorial? Your progress will not be saved."

[satishgoda]

So awesome :) Big WIN for everybody.

[scottgarner]

I think that's a good plan, @shiffman. I think I won't do it today, though, just so I don't accidentally break anything.

[buhny]

FWIW, I also inadvertently lost my code at one point support adding the additional exit confirmations. (Luckily I'd been saving my code for each exercise into a different editor so I didn't lose much.)

[gabrielstuff]

hum maybe, we should add url for each exercice and save the state of code in order for people to use the interactive tool and allow to quit and come back later ? this would a nice feature and allow people to leave and come back with no hassle nore pop up window.