Coded Commentary is a CS-specific variation on sentence frames to support code design and code writing activities either individually or groups. Given sentence frames specific to coding concepts appropriate to the program, have students use these sentence frames as comments in an IDE to plan their program before beginning to write code.
Writing code requires English learners to apply programming language semantics and syntax on top of their mental load of reading (e.g., a program prompt) and/or communicating with a partner in English (e.g., pair programming). To reduce this load, students are directed to complete and insert as comments to structure their program using sentence frames specific to the programming activity. This allows students to focus on the program design, rather than the language needs.
Review the programming activity and create comments that explain specific components of the code.
TIP: Starting with the solution to the programming activity may make it easier to backwards design the comments.
TIP: Make sure there is a comment anywhere there's a blank line in the program, to explain the next section. As necessary, make additional comments before core concepts (e.g., loops, conditionals, functions, variables).
Copy and paste these comments into a blank program in your IDE or a document, depending on how you want to share them with students. Choose words to remove from the comments to create your sentence frames.
TIP: When possible, make only one frame for a given type of concept (e.g., event, if, loop).
TIP: Consider resequencing your comments if you want students to not figure out they just need to fill in each comment frame to complete the program.
Decide whether students will pair program or work independently and check in with a partner as needed.
Share the comment sentence frames with students.
TIP: Providing a template directly in the IDE allows you to reduce typing time for students.
Model how to use the sentence frames.
Students write comments to plan their code. Have students check their comments with another student or partnership when they think they have their program planned out.
Students start coding only after finishing comments.
TIP: Require students to turn in just the comments (time-stamped), or complete a visual spot check of the comments (or assign a student to do so).
Students should modify comments as needed when they encounter problems in writing or debugging the code.
✍️ Code Writing with Starter Code
Have students begin by reading the starter code and placing comments in at least at each blank line and at other locations as they deem necessary to show their understanding of the starter code.
📖 Assessment of Code Reading
Create a program in a document, likely not in a manner that can easily be run. Have students type in or move around comment sentence frames (e.g., Parsons problem-like) and complete them to show their understanding of the code.
✍️ Assessment of Code Writing
Have students design their code by just writing the comments that would frame their code. Students can complete more code design assessment items in less time because they don't write the code. This can also be used as an exit ticket or closing debrief of lessons.
When I click run, I see/hear _____ <result>.
When I click on _____ <what thing on screen>, _____<what happens>.
When I put in this input _____, I get this output _____ <what happens>.
The _____ <name> onEvent button code runs when you _____ <verb> the ______<name>.
If this line of code were changed, then it would mean that _____ <prediction>.
To debug this program, I changed _____, which caused _____.
When I change _____, this caused _____.
The _____ variable / list keeps track of _____.
The _____ variable / list is first set to _____ because _____.
When I change the value assigned to _____<variable>, then _____.
(Lists only) This line accesses/removes/replaces the item at index _____ in order to _____.
The if statement is checking _____.
If _____ is true, then _____.
If _____ is true, then _____. Otherwise, _____.
If _____ is true, then _____. Otherwise, if _____ is true, then _____. Otherwise, _____.
The function is declared on line _____.
The function is called on line _____.
The function is called when/before/after _____.
The function makes the program easier to understand by hiding the complexity of _____
<description of code inside the function> inside the function.
The _____ <name> variable is defined in the scope of _____ <function or the main program>.