Part II: Snap! Programming

Logistics

• Roll & Seating Chart with partners side by side
• Today is a work day (after some introductory presentation)
• Wonderings? Comments?

Pair Programming

As noted elsewhere, I think, pair programming is a particular way of working together in programming. There are two roles, driver and navigator. The driver sits in front of the computer and types code, runs tests, etc. The navigator watches carefully asking questions, making suggestions, noting possible problems etc. After a bit they swap roles. I suggest swapping occur after about 30 minutes or about half-way through the remaining class time. Questions? Wonderings? Comments?

Each pair will want to agree to ground rules about: whether there are two copies of the work and how that happens, what individual work, if any, is acceptable and if so, how does the absent partner get brought up to date, when you can meet outside of class, howe you will contact each other, etc.

Snap!

Snap! is a block-oriented programming language similar to Blockly that you experienced in the code.org course. Hopefully, you explored it a bit and read the first two parts. Also, hopefully you decided on the topic for your store.

The main activities for today are:

• address questions about Snap!
• Quickly demo a story program, if desired
• Address questions about the simple-story assignment
• Work on the activity

Next Time:

• discuss the story-telling programming experience
• start on the initials assignment
• To prepare for class:
  • finish your story-telling program
  • record ideas for the PARR
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Thursday.

Logistics

• Roll
• Wonderings? Comments?

Today we will be sharing our experience with the Snap! story telling. Any general discussing/sharing before we start on topics I had in mind?

• What do you think of programming now? Easy? Hard? Challenging? Fun? Boring? Motivational? ...
• What kind of story did/can you tell with Snap!?
• Can you imagine using this with the students you plan to teach? Why/Why not?
• What did you learn about Snap!?
• What did you learn about programming?
• Other questions/comments/wonderings?

Next: Initials

The next "simple" task will be to draw your initials. Actually you can draw initials of one partner's or both or for UNI. The learning activity description provides more information about the task. It includes three example programs that draw my initials. We will look at them briefly in class as I discuss what they do and how they differ, and try to answer any questions you have.

You may wish to import one of them an base your own work on it. Feel free to do so, just remember to rename the program at some point during the process. The easiest way to do that, once you imported it is to use the Save As option available when you click on the File icon. Just change the files name before clicking "Save". Note: you will eventually run out of space to store programs in the browser's local store. When that happens you will need to delete some of the files you have stored there. An alternative is to save it to the cloud or to export it.

Importing, exporting, running, etc. Snap! projects

It is likely that you will be downloading files from me. You will want to be able to run them, examine them, modify them them, save them under your name, and export them. The Snap! files are in XML format which means they are "marked up" text that is somewhat like web pages. They contain data describing a Snap! program that can be interpreted by Snap! running in a web browser. The discussion below addressed the activities of downloading, importing, saving (to rename), and exporting Snap! projects.

• download one of my examples
  1. open the initials activity description in a web browser
  2. choose a file to download (I'm picking the first one)
  3. click on the link to download it; if possible direct the download where you want (otherwise it goes into the download folder/directory)

  The downloaded file is an XML file. In my case it should be called initials_raw.xml

• import the file into Snap!
  1. open your web browser to the Snap! site and run Snap!
  2. click on the file icon (page with a turned down corner
  3. select Import… (all done)
• save (to rename) the project
  1. click on the file icon (page with a turned down corner
  2. select Save As…
  3. in the pop-up window, change the file name (at top of window) to the desired value
  4. click the Save button (all done)
• export the project
  1. click on the file icon (page with a turned down corner
  2. select Export project …

     In some browser & system configurations you are done--the  .xml  file is in the downloads folder. In other browser & system configurations you can choose to open or save the file, perhaps even to rename it and where to store it.

The  .xml  file can be shared with others via e-mail attachements or however else you share files. It can also be imported into the web browser as described above. Questions? Comments? Suggestions?

Initials Discussion

Logo was the first programming language that included drawing commands (that I'm aware of). The commands told the computer what to do to draw things. The computer in this case was a hemispherical robot with a pen mechanism in its middle. It was called a turtle because of its looks and drawing commands like we see in Snap! are often called "turtle graphics". As an aid to help their thinking children were told to pretend they were the turtle when trying to figure out how to get it to do what you needed. You might keep that in mind as you try to have the computer draw initials.

Let's look at the code I used in the examples. In the first example relative positioning, I just planned a bit about where I wanted the initials to appear and how big they might be (knowing that the screen was about 500 pixels across and 350 pixel high and that I wanted them mostly in the center left of the screen and the cat to finish on the right side).

My first thought was to use the move __ steps block with the pen down to do the drawing. I would need to pick the pen up when moving to a new place. With some fairly simple arithmetic I was able to determine the coordinates for the vertical and horizontal parts of the J.

I wanted to do a circle for the bottom of the J. The classic example of how to draw a circle is to take one step turn one degree and repeat that 360 times. That can be quite slow to watch and bigger steps and turns can still look like a circle when drawn on the screen. The product of repetitions and degrees turned should always be 360. For half a circle the product should be 180. I experimented with the size of the movement until I found something that worked for my size J. Once I had that semicircle, I was determined to use it in the P and even the E. That's how I got the result you see.

Any questions, comments, wonderings?

Build you own blocks

Snap! was originally called "BYOB" (build your own blocks with Scratch) because Scratch did not have that capability. Building your own instructions is very powerful and, once you figure out how to use it, makes programs much more understandable. I had seen someone's initials program that had two colors, one inside the other. At first I thought they drew the initials, the drew around the (and maybe they did). I could not figure out how to do that but I did figure out a different approach. Draw one set of initials with a big fat pen, then draw another set of initials with a smaller pen. I did that in the initials with blocks program.(Download, import, and run the program.)

I started with my first example when doing the blocks program. The first thing I needed to do was to establish what should be in the block and what should not. In particular I thought that once I had the block I might draw them in different places. So it was important to take the part that positioned the sprite for the letter outside the block. Then I discovered that I had some code inside the block that said go to x:__y:__—it should not be there since I wanted to the block to be able to draw the letter wherever I started it. So I had to figure out how to make the sprite backtrack (inside the block) or move from where it was to where it needed to be based on only what it had done since it started and what was needed next. Finally, I saw that I would want the block to make sure it had the sprite pointed in the appropriate direction when it started. You might find some other differences when/if you use blocks.

Now that I have blocks it is really easy to make the initials inside of initials. I can now imagine going further to have the tell the block where it should draw the initial or even how big it is. Those require using parameters in the blocks and might be a bit more involved so you might wait on doing that.

The activity description indicates how to do blocks but I'll demo it briefly here.

• create a block by clicking on Make a block in the Variables palette—a pop-up appears
• enter a name for the block
• select the palette you want it to appear in (is it motion?, looks?, etc.
• leave "Command" selected and "for all sprites" selected (we'll discuss this later in the course)

The block should now appear as a command in the palette you selected. To define the block, right click on it and select edit…. A pop-up should appear. You can drag commands into it. You can also resize it if you want. Click okay when you are done. To test it, you can just click on the block and see what happens. If you need to change the instructions in it later on, just start the edit process again.

Any questions, comments, wonderings?

Use the coordinate system

My last example uses the coordinate system to determine the drawing. It is particularly useful for letters like W or V or N. All you need to do is figure out the endpoints of each line. move to one end, put the pen down, move to the other end, pic the pen up. You will need to do quite a bit of planning to use this technique but it can be quite easy. I suppose you could mix the semi-circules here, but I did not.

Any questions, comments, wonderings?

Next Time

• Discuss the initials programming experience
• To prepare for class:
  • finish your initials program
  • record ideas for the PARR
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Thursday.

Logistics

• Roll
• Today is a work day (after some introductory presentation)
• Wonderings? Comments?

Drawing Initials

Are there any questions, comments, wonderings? Difficulties you want to share?

• Did the initials experience provide any particular problems?
• Did the initials experience lead to any new insights?
• How might you extend the initials program? Any way to incorporate more data into it?
• Other questions/comments/wonderings?

Game Programming

The next activity will be to program a simple game. The description of the game activity indicates that you need to develop a game and use variables in some way, probably to keep score (or tries or successes or all three).

The main activities for today are:

Next Time:

• discuss the initials programming experience
• discuss the game programming experience
• To prepare for class:
  • finish both programs (if possible)
  • record ideas for the PARR
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Tuesday.

Logistics

• Roll
• Wonderings? Comments?

The plan was to move on to the next activity — using lists in either a mad lib or trivia quiz program. BUT more time seemed to be needed for figuring out the simple game program. So, the day was turned into a work day.

Students work to finish both initials and game programs. If already done, make the existing programs better.

Next Time:

• start on the list/mad-lib/trivia activity
• To prepare for class:
  • work to have an idea for mad lib or trivia program
  • record ideas for the PARR (from initials and game programs)
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Thursday.

Logistics

• Roll
• Wonderings? Comments?

Lists

Mad lib example

I created a mad lib example of Mary Had a Little Lamb. My program used a number of lists. Most were initialized in code but one received values from user input. The program is available in the class notes directory. To examine it:

• Download madLibSample.xml to your computer
• Start up your web browser
• Connect to the Snap! site
• Click on the file menu/icon and select import
• Locate the file on your computer and select it

Look it over. Remember, to examine the code in a new block, right click on the block an select edit. We addressed a number of questions about the code in class, e.g.,

• The purpose of the "join ' went, ' (Unicode 10 as letter) ' the " — to place a new line character after "everywhere that Mary went"
• The list structure — each list had eight elements

  Each list being the same size makes it simple to put things together using a repeat loop. Some of the list elements were empty to allow this to happen smoothly.

• List uses
  • phrases for the non-mad lib parts
  • the mad lib "words"
  • punctuation (mostly empty)
  • the "words" in the original rhyme
  • set of prompts to ask the user for additional words
  • a second set of "words" for what the user entered
• Questions? Comments? Wonderings?

States & Capitals

A number of list-related tasks were demonstrated, e.g.,

• preparing capitals and states lists
  • find a list on the web
  • copy the list
  • paste it into a spreadsheet program
  • separate the lists into two worksheets
  • save/export each worksheet as a .csv file
• importing the list into a variable (while running Snap! in your browser)
  • create variables for: stateList, capitalList, statesIn, capitalsIN
  • in the variable
• placing the data into a list

Next Time:

• start on the list/mad-lib/trivia assignment
• To prepare for class:
  • work to have an idea for mad lib or trivia program
  • record ideas for the PARR (from initials and game programs)
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Tuesday.

Logistics

• Roll
• Wonderings? Comments?

The plan was to move on to the next activity — using lists in either a mad lib or trivia quiz program. BUT more time seemed to be needed for figuring out the simple game program. So, the day was turned into a work day.

Students work to finish both initials and game programs. If already done, make the existing programs better.

Next Time:

• start on the list/mad-lib/trivia assignment
• To prepare for class:
  • work to have an idea for mad lib or trivia program
  • record ideas for the PARR (from initials and game programs)
  • consider whether you have anything to submit for extra credit

Questions? Comments? Wonderings?   —   Have fun! See you Thursday.

Logistics

• Roll
• Wonderings? Comments?

List (mad lib or trivia quiz)

Are there any questions, comments, wonderings? Difficulties you want to share?

• Did the experience provide any particular problems?
• Did the experience lead to any new insights?
• How might you extend the program? Any ideas for a similar but different activity?
• Other questions/comments/wonderings?

Exam Review

The exam will address activity in the four Snap! programs you have worked on. It will also address elements of using the Snap! environment. I anticipate about 5 questions concerning the environment and 5 programming questions. You will be able to use Snap! during the exam but the exam will be paper-based. It will also be timed so extensive use of the Snap! environment may cause you to not finish the exam.

I have included some study suggestions below. The Snap! environment items relate to activities I would expect you to have done multiple times during the programming activity. Some of the declarative knowledge items may come from the Snap! Reference Manual that you were asked to read. The programming questions come from the general topics addressed by the activities—story telling, drawing, simple games, and mad lib/trivia—and from the noted expectations in the activity descriptions (particularly the "strongly encouraged" expectations).

Snap! environment possibilities

• Running Snap! in your browser
• Signing up & logging in
• Saving files (to the local store)
• Saving files (to the cloud)
• Saving files (to your computer)
• Getting sprite costumes from the library
• Getting sounds from the library
• Downloading a program (e.g., from the notes directory so you can run it)
• Running a downloaded program
• Creating new sprites
• Creating & naming variables
• Creating an empty, named list

Programming possibilities

• Sprites interact in story telling or discussion
• Sprites do simple animation
• Program passes the "green flag test"
• Sound is incorporated
• Adjusting pen characteristics (color, size, up/down)
• Making line drawings
• Include wait time or delays between some actions
• Using programmer-made blocks
• Controlling sprite orientation
• Using variables to store, revise, and/or report some data value(s)
• Using the cloning capability and deleting clones appropriately
• Using arrow keys to move a sprite
• Using lists to achieve some purpose
• Using if blocks to select the appropriate action(s)
• Using repetition to accomplish some purpose (non-instantaneous movement, produce clones, process items in a list, etc.)
• Getting and using user input via "asking"
• Importing list data into a list

Note that this list is not meant to indicate all that you have done or learned or might use on the exam. Many of blocks are not directly addressed.

Class notes and the activity directions/description have informat that might be useful to review. The class notes may be useful as might be the how to notes or Snap coding suggestions.

Are there any questions, comments, wonderings? Want to review any of the above items?

PARR Expectations Review

Are there any questions, comments, wonderings? Review the PARR I description.

Are there any questions, comments, wonderings?

Next Time:

• Exam
• To prepare for class, prepare for the exam.

Questions? Comments? Wonderings?   —   Have fun! (Dr. Schafer will, I think) See you Tuesday. I should be available Monday.

Logistics

• Roll
• Wonderings? Comments?

Exam I (Simple Snap! Programs)

Likely proctored by Dr. Schafer so do best you can to interpret what I want

Next Time:

• Programming fundamentals (a more formal approach)