#Programming Skits
A repository of skits that beginning programming students can perform to help them learn basic code concepts.
Concepts covered or will be covered:
- Variables
- Loops
- Control structures
- Add class/remove class to toggle
- Nesting
- Git and Github
- DOM selections and nested selections
- HTTP request/response
- Strings and other data types
- Pipes
- General programming vocabulary
- Scope
- Hashing
- HTML/CSS/Javascript interactions
- Compression
###Explaining Loops###
You have a circle of people and one person is traveling around the circle. Let them travel around 2 or 3 times. Have one person step out of the circle and block the path of the person traveling around. You've just demostrated a do-while loop with a return; to prevent an infinite loop. (Russ Gossett, Dana Amihere, Jessica Morrison, & Justin Myers)
###Adding and removing things by toggling###
Everyone has the same class -- a menu item, a green post it, whatever is handy. To toggle the class, you first must remove the class, and then add a new class to the target item. So, for example, if each student has a green post it note stuck to them, the student who wishes to toggle something would have to find the student they're going to toggle, remove their green postit, then give them a yellow post it. They have officially toggled something. It helps explain how jQuery can toggle a menu item to change the color or font or whatever you want to change. (Russ Gossett, Dana Amihere, Jessica Morrison, & Justin Myers)
###Act out Git and version control###
Git Init -- student pops up. Git Add -- hands the document to the student. Git commit
(David Eads and Jue Yang)
###Act out Request/Response cycle###
Make people put post it notes on their forehead identifying themselves as The User, the Browser, the Website and the Resource Requested and act out the user asking the browser to go to a website and get a resource and return it. That's a GET request.
You can do it also with a post request: Browser hands Website a Payload -- posting something to the website -- where the Resource will interpret the User being logged in, and create a thing (a calendar request, for example), which goes back to the website, to the Browser to the User.
(Dave Stanton, Joe Germuska, Cathy Deng, Jacob Sanders)
###HTML/CSS/JavaScript Interactions###
Thinking of HTML/CSS/JavaScript as a puzzle or board game more than a skit. It seems too prescriptive to be a skit. There is some interaction but it is all a series of directions that never really change.
Two ideas:
-
Students get a card that has html and css written on it. They are also given either a set of legos or a page with tangram type shape pieces and they have to follow the html and css to create the page that is described with the cards. They could also act out the JS if there was a third part.
-
Write HTML/CSS/JS to replace Ikea furniture directions.
(Arjuna Soriano, David Yee, Sydette, Yolanda Martinez)
###Variable and loops using board games###
Pieces/players are variables and the loop is a turn.
###Loops and nested loops###
Put everyone's name on a card.
Three rounds.
First round, the loop is given an instruction (give everyone a purple piece of paper or something like that). You have added an attribute to each person.
Now the student finds their name and removes the purple or whatever was added. Then they had it to the next person to do the same removal. The point of the lesson: Even if you find your name first, you still have to look through the rest of the stack in case you find another instance of your name.
You could teach people to stop the loop when you find the condition.
Watch out for students reverse sorting the loop -- that's not how it happens on the computer. You have to agree on how to loop through the loop. Be conscious of doing the loop exactly how it would appear on a computer.
(Helga Salinas, Alyson Hurt, Carlos Lemos, Sisi Wei, Michael Keller)