While chatting with some fellow programmers on the subject of teaching others to program, a great point was brought up by Marginhound. I don't remember the exact quote, but I'll paraphrase
Although it is helpful to use existing programs as examples, you should nevertheless type every character yourself, rather than to copy-n-paste.
Right on! The reliance on Copy-n-paste-programming is what keeps amateur programmers from getting to the next level. It is also one of the premises of the Learn Code the Hard Way series by Zed Shaw.
Make it Hard
I came home and this idea hit me: why not make it difficult to copy-n-paste in your teaching materials? The code should be readable, but hard to copy-n-paste. What are some ways to do that?
Idea #1: Images
The first idea is obvious - use images. If you try to select the code below, you'd be dragging an image around.
The disadvantage of using images is that it is harder for the author: you'll have to take a screenshot every time you want to update a code snippet, or some tooling will have to be built.
Idea #2: Invisible Letters for Spaces
Replace all space characters in the program with some ugly character such as "@", but hide them by making their color the same as the background color. So, for example if you try to copy this code
for@(var@i@=@0;@i@<@array.length;@i++){
@@@@sum@+=@array[i];
}
you'll get copious "@" characters in your editor. This technique could be easier to author because you can easily write some Javascript to insert those elements/characters. It could also apply to pdfs, although some tooling will have to be built.
Idea #3: user-select: none
Set the user-select CSS property to none for the container of the code snippet. If this works on your browser, you should not be able to select the text in the following code snippet
for (var i = 0; i < array.length; i++){
sum += array[i];
}
This is the easiest technique to use and affects the author minimally. Although the user might still figure out a workaround to copy the text - that's okay - we just want to set a road block, not a barricade. The drawback to this approach is that it is HTML-only and works only on certain newer browsers.
Other Ideas?
I'd love to hear critiques on the techniques presented as well as other better ideas for accomplishing this. Please leave a comment!