9
$\begingroup$

When programming on a projector screen, the audience can easily get lost. Besides the obvious things (large enough font size, good indentation, short but helpful comments identifying sections), how do you help your audience follow what is going on?

Students who look away for just a few seconds (to write something down or to change something in their code) will have a hard time finding the small things I have changed in the code. They can't be expected to pay 100% attention all the time, but I hate having to show the recently changed 2-3 words or few lines of code again and again.

I'll post one program I find very useful, but I'd be glad to hear of other tools / methods.

Improve this question
$\endgroup$
6
  • 3
    $\begingroup$ This is a great question! $\endgroup$
    – Ben I. ♦
    Commented Aug 21, 2017 at 15:40
  • 1
    $\begingroup$ I agree, projection is vital, and making it easier to follow is important. The simplest suggestion I have is to project on to a whiteboard and write / underline with markers. When I do that with the textbook, they can underline the same things that I do. $\endgroup$
    – user737
    Commented Aug 21, 2017 at 19:29
  • $\begingroup$ @nocomprende Oh yes, I did this once or twice. It is awesome. Why not post it as an answer? Also, an active board can be useful too in a similar but extended way. $\endgroup$
    – vacip
    Commented Aug 21, 2017 at 22:55
  • 1
    $\begingroup$ As a student, here's what works for me: Have a full section of the code on your slides (like you get in a book). Do not show the code in an editor (it's distracting). Avoid making changes to the code quickly (over your slides), instead discuss what change you're going to make and have it clearly marked when it happens. Before you even get to big sections of code, discuss what it's going to do, introduce new syntax in isolation and have diagrams of algorithms (if relevant). Don't expect code you show to be understood well - if you want that, have students write something similar as an exercise. $\endgroup$
    – tehwalris
    Commented Aug 22, 2017 at 7:55
  • $\begingroup$ marketplace.visualstudio.com/… or atom.io/packages/activate-power-mode -- full list: github.com/codeinthedark/awesome-power-mode $\endgroup$
    – Roger Lipscombe
    Commented Aug 22, 2017 at 9:46

7 Answers 7

Reset to default
7
$\begingroup$

I use a program called Zoomit (For Microsoft's Windows, by SysInternals), that lets you freeze and draw on the screen and zoom in on parts of it. I find it pretty useful when teaching, I came really dependent on it. It is free of charge and easy to use.

Here is a very simple example:

Code with error

Code with highlighted error

Code with changes

Improve this answer
$\endgroup$
1
  • $\begingroup$ Ah! I like this suggestion. It should be very useful to my own methods. $\endgroup$
    – Jay
    Commented Aug 26, 2017 at 9:55
6
$\begingroup$

You're absolutely right that it is unreasonable to expect students to pay attention 100% of the time, so we have to provide enough "fix-up" clues and cues that they can find the lesson again after a moment of wandering attention.

I usually avoid having the kids watch me code for two reasons. One is exactly the problem that you've described: if the code example gets large enough that it doesn't fit onto the screen, they can't get un-lost after a moment of flagging attention. The second is that passivity decreases engagement.

I typically do active code-alongs (as described here). Besides engagement, one advantage of a code-along is that there are almost always kids who will type things wrong the first time, which also usually means that they have misunderstood something that you are describing. Those run-time errors that your students get while doing a linked-list code-along are one of the most valuable fruits of the lesson, and they allow you to point out important aspects of the code that your students may not have caught while you spoke.

Improve this answer
$\endgroup$
3
$\begingroup$

Most IDEs are able to zoom just try Ctrll + Mouse wheel. Also IDEs do utilize Code highlighting on a dark background as it is less tiring this should also add to contrast and readability .

Depending on age and experience level of your students, i would like to recommend your Students to use an IDE that is able to show code diffs. If you provide them, with remote repository (git-hub) with branches for every lecture they are able to have a look at the code and its progression all the time in their own pace.

The IDE of choice, at the moment, is VS code - it's free-of-charge and is free or proprietary depending where you get it. It has all the above mentioned features plus a build in git support. For a more lightweight approach I would recommend Sublime text.

But I think the most difficult part is not the tool but the technique. Programming is a profession geared towards Autodidacts as teaching it is very hard for the reasons you encountered. So its on you to make it interesting to follow. Make it funny bring in exiting or ridiculous practical equivalents/examples for complex theoretical topics. Those that love to code will enjoy your lessons because its entertaining, those that struggle will appreciate it even more.

Improve this answer
$\endgroup$
1
  • $\begingroup$ You said: "Programming is a profession geared towards Autodidacts". Yes! Technician, teach thyself! $\endgroup$
    – user737
    Commented Aug 22, 2017 at 15:38
3
$\begingroup$

I'll be using Thonny http://thonny.org/ this year for Python in particular. It has great code tracing and debugging features, good syntax highlighting and was built with beginners in mind.

Improve this answer
$\endgroup$
2
  • 5
    $\begingroup$ Welcome to Computer Science Educators, Mr. Tower! We're always glad to have another teacher join our community. =) Could you describe a bit more about thonny? Ideal answers on this site have a little more information than you've provided here. $\endgroup$
    – Ben I. ♦
    Commented Aug 21, 2017 at 15:45
  • $\begingroup$ Did you know that you can tune Thonny to be more suitable for projecting by turning on Expert mode: groups.google.com/forum/#!msg/thonny/Tvj0ioD3WJ8/… $\endgroup$
    – Aivar
    Commented Aug 23, 2017 at 5:26
2
$\begingroup$

What language are you teaching / using in lectures?

For Python, I've been to a lot of professional tutorials that use Jupyter Notebooks that they also distribute to participants beforehand. Students can then follow along, play with the code "live", save changes, type in their own comments / notes, etc.

Improve this answer
$\endgroup$
2
$\begingroup$

To highlight your code changes, you could try using the Git support of your IDE.

The text editor Atom as well as the JetBrains IDEs (like IntelliJ or PyCharm) highlight inserted, changed or removed lines by coloring the border green, yellow or red, as long as the changes are uncommitted.

Combined with a high zoom level or fullscreen mode this could help your students to follow what you do and find out what you've done if they weren't paying attention by looking at the border marks.

Git

To use Git, you have to create a Git repository in the folder with your code files first. This can normally be done in your IDE (Atom: Ctrl+Shift+9, click on "Create repository"; PyCharm: "VCS" → "Enable Version Control Integration", select "Git" and press "OK").

Now, the change highlighting is active. When you're done presenting the changes, you have to commit them to tell the IDE that you've completed the changeset (Atom: Ctrl+Shift+9, click "Stage All" at the top right, enter a commit message and click "Commit"; PyCharm: "VCS" → "Commit Changes", toggle the checkboxes next to the changed files, enter a commit message and click "Commit").

Improve this answer
$\endgroup$
1
  • $\begingroup$ This is also very useful because it helps them get used to GIT. Thanks! $\endgroup$
    – vacip
    Commented Aug 22, 2017 at 12:09
1
$\begingroup$

Write and Draw on a Projected Board.

[I must acknowledge that somewhere above no comprende has commented this already, but I have my own variation. ]

As much as possible, I always project on a board on which I can write. That way, I can zoom in, and draw circles and shapes around the code I want the students to focus.

However, a huge problem is that the projector will start projecting on me, and since my powers of invisibility have left me, this isn't always ideal. So, I use the following to focus in my sessions.

  1. Use a wireless mouse and keyboard. This allows me to walk around the entire classroom, and standing next to students who have the doubt and there by allowing them to select what they want, saving me a ton of time and making things interactive. Sure, carrying a huge keyboard around is a pain, most of the selection is done with a mouse, so its small and easy to carry around.
  2. I use a Wacom tablet with the pencil that comes with it. A lot of times, I am expecting a code block that will probably be discussed a lot. Since I know in advance what these code blocks are, I take screenshots of them and add them into a drawing app (I normally use Photoshop, but you can get free drawing apps on the App Store on the Mac). Then, I use the Wacom pencil and tablet, turning the entire projector into a virtual drawing board.

I particularly love the second method because, I won't be blocking the projector and since the Wacom tablet is also wireless, I can move around the class and improve the pointing out process.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.