<p>Write and Draw on a Projected Board. </p>

<p>[I must acknowledge that somewhere above <a href="https://cseducators.stackexchange.com/users/737/no-comprende">no comprende</a> has commented this already, but I have my own variation. ]</p>

<p>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. </p>

<p>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.</p>

<ol>
<li>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. </li>
<li>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. </li>
</ol>

<p>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. </p>

CC BY-SA 3.0
2017-08-26T06:46:35.810Z
2017-08-26T06:46:35.810Z
Jay
<p>I use a program called <a href="https://docs.microsoft.com/en-us/sysinternals/downloads/zoomit" rel="noreferrer">Zoomit</a> (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.</p>

<p>Here is a very simple example:</p>

<hr>

<p><a href="https://i.sstatic.net/AaFgj.png" rel="noreferrer"><img src="https://i.sstatic.net/AaFgj.png" alt="Code with error"></a></p>

<hr>

<p><a href="https://i.sstatic.net/QvfEs.png" rel="noreferrer"><img src="https://i.sstatic.net/QvfEs.png" alt="Code with highlighted error"></a></p>

<hr>

<p><a href="https://i.sstatic.net/Ag3IU.png" rel="noreferrer"><img src="https://i.sstatic.net/Ag3IU.png" alt="Code with changes"></a></p>

CC BY-SA 3.0
2017-08-26T09:55:07.810Z
Ah! I like this suggestion. It should be very useful to my own methods.
Jay
CC BY-SA 3.0
2017-08-21T14:43:08.767Z
2017-08-21T19:03:35.930Z
2017-08-21T19:03:35.930Z
vacip
<p>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.</p>

<p>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.</p>

<p>I typically do active code-alongs (as described <a href="https://cseducators.stackexchange.com/a/420/27">here</a>).  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.</p>

CC BY-SA 3.0
2017-08-21T15:40:22.357Z
2017-08-21T15:40:22.357Z
Ben I.
<p>I'll be using Thonny <a href="http://thonny.org/" rel="nofollow noreferrer">http://thonny.org/</a> this year for Python in particular. It has great code tracing and debugging features, good syntax highlighting and was built with beginners in mind.</p>

CC BY-SA 3.0
2017-08-21T15:45:10.647Z
Welcome to [cseducators.se], 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.
Ben I.
CC BY-SA 3.0
2017-08-23T05:26:22.620Z
Did you know that you can tune Thonny to be more suitable for projecting by turning on Expert mode: https://groups.google.com/forum/#!msg/thonny/Tvj0ioD3WJ8/7g6jw4UFBgAJ;context-place=topic/thonny/VYRKG43qevk
Aivar
CC BY-SA 3.0
2017-08-21T15:07:07.413Z
2017-09-06T14:20:46.830Z
2017-09-06T14:20:46.830Z
Mr. Tower
<p>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 .</p>

<p>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. </p>

<p>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.</p>

<p>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.</p>

CC BY-SA 3.0
2017-08-22T04:30:58.687Z
2017-08-22T13:44:24.360Z
2017-08-22T13:44:24.360Z
MaDsaiboT
<p>To highlight your code changes, you could try using the Git support of your IDE.</p>

<p>The text editor <a href="https://atom.io/" rel="nofollow noreferrer">Atom</a> as well as the <a href="https://www.jetbrains.com/" rel="nofollow noreferrer">JetBrains IDEs</a> (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.</p>

<p>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.</p>

<h2>Git</h2>

<p>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: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>9</kbd>, click on "Create repository"; PyCharm: "VCS" &rarr; "Enable Version Control Integration", select "Git" and press "OK").</p>

<p>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: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>9</kbd>, click "Stage All" at the top right, enter a commit message and click "Commit"; PyCharm: "VCS" &rarr; "Commit Changes", toggle the checkboxes next to the changed files, enter a commit message and click "Commit").</p>

CC BY-SA 3.0
2017-08-22T12:09:31.673Z
This is also very useful because it helps them get used to GIT. Thanks!
vacip
CC BY-SA 3.0
2017-08-22T11:52:58.833Z
2017-08-22T11:52:58.833Z
TuringTux
<blockquote>
  <p>What language are you teaching / using in lectures?</p>
</blockquote>

<p>For Python, I've been to a lot of professional tutorials that use <a href="https://jupyter.org/" rel="nofollow noreferrer">Jupyter Notebooks</a> 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.</p>

CC BY-SA 3.0
2017-08-21T20:44:42.197Z
2017-08-21T21:42:13.667Z
2017-08-21T21:42:13.667Z
user
<p>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?</p>

<p>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.</p>

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

CC BY-SA 3.0
2017-08-21T15:40:33.370Z
This is a great question!
Ben I.
CC BY-SA 3.0
2017-08-21T22:55:51.700Z
@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.
vacip
CC BY-SA 3.0
2017-08-22T07:55:19.570Z
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.
tehwalris
CC BY-SA 3.0
2017-08-22T09:46:08.383Z
https://marketplace.visualstudio.com/items?itemName=LiamMorrow.PowerMode or https://atom.io/packages/activate-power-mode -- full list: https://github.com/codeinthedark/awesome-power-mode
Roger Lipscombe
CC BY-SA 3.0
2017-08-23T23:33:50.650Z
Make your code from each day downloadable or otherwise accessible.
ncmathsadist
<classroom-infrastructure>
Tools or methods to make projected code easier to follow
# Tools or methods to make projected code easier to follow

(Asked by: username_0 on 2017-08-21)

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.

**Tags:** classroom-infrastructure

> **Comments:**
> **username_1**: This is a great question!  
> **username_0**: @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.  
> **username_2**: 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.  
> **username_3**: https://marketplace.visualstudio.com/items?itemName=LiamMorrow.PowerMode or https://atom.io/packages/activate-power-mode -- full list: https://github.com/codeinthedark/awesome-power-mode  
> **username_4**: Make your code from each day downloadable or otherwise accessible.  

---

## 7 answers

### Answer by username_0 on 2017-08-21. Score: 7

I use a program called [Zoomit](https://docs.microsoft.com/en-us/sysinternals/downloads/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](https://i.sstatic.net/AaFgj.png)](https://i.sstatic.net/AaFgj.png)

---

[![Code with highlighted error](https://i.sstatic.net/QvfEs.png)](https://i.sstatic.net/QvfEs.png)

---

[![Code with changes](https://i.sstatic.net/Ag3IU.png)](https://i.sstatic.net/Ag3IU.png)

> **Comments:**
> **username_5**: Ah! I like this suggestion. It should be very useful to my own methods.  

---

### Answer by username_1 on 2017-08-21. Score: 6

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](https://cseducators.stackexchange.com/a/420/27)). 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.


---

### Answer by username_6 on 2017-08-21. Score: 3

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.

> **Comments:**
> **username_1**: Welcome to [cseducators.se], username_10name_6!  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.  
> **username_7**: Did you know that you can tune Thonny to be more suitable for projecting by turning on Expert mode: https://groups.google.com/forum/#!msg/thonny/Tvj0ioD3WJ8/7g6jw4UFBgAJ;context-place=topic/thonny/VYRKG43qevk  

---

### Answer by username_8 on 2017-08-22. Score: 3

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.


---

### Answer by username_9 on 2017-08-22. Score: 2

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

The text editor [Atom](https://atom.io/) as well as the [JetBrains IDEs](https://www.jetbrains.com/) (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").

> **Comments:**
> **username_0**: This is also very useful because it helps them get used to GIT. Thanks!  

---

### Answer by username_10 on 2017-08-21. Score: 2

> What language are you teaching / using in lectures?

For Python, I've been to a lot of professional tutorials that use [Jupyter Notebooks](https://jupyter.org/) 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.


---

### Answer by username_5 on 2017-08-26. Score: 1

Write and Draw on a Projected Board.

[I must acknowledge that somewhere above [no comprende](https://cseducators.stackexchange.com/username_10s/737/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.


---

