Programming a Caesar Cipher

Jadga's project "In workshops, I often use this dial thing to let kids manually decipher a text. it takes a while though to do it by hand ;)"
In this activity, you will write a program to encode and decode messages using a Caesar cipher (shift cipher).
message ('I love BJC!') shifted by (3) reporting 'L#oryh#EMF$' message ('L#oryh#EMF$') shifted by (-3) reporting 'I love BJC!'

Exploring Unicode

To shift the letters in a message, you need a way to add the shift value to each letter. Computers store characters (letters, digits, symbols, etc.) as numbers called Unicode. So, you can change the characters of a message into Unicode, add (to make the shift), and then change the Unicode back into letters.

Hm, I'm not sure how much to nitpick this, since I know we're trying to simplify. When a computer program uses a UTF encoding, then it stores characters in binary according to the Unicode standard which defines code-points for thousands of characters. "Unicode number" is ambiguous as a pharase (since it could describe a number which can be typed in Unicode), "Unicode code-point" is the correct phrase. It might be interesting to note that humans are the ones that decide those code-points, so you can't just guess it - a computer or language has to store the entire table of Unicode code-points for all 150K characters. There are also encodings besides UTF/Unicode, some of which are relatively popular in other countries (like Japan), since Unicode emerged from English-based ASCII. -PF 10/1/21

This table shows the Unicode for some familiar characters:
Unicode Table

Another nitpick, which you can glaze over as needed for MS. Unicode code-points are technically written with U+ a hexadecimal number. So technically the codepoint is U+0041 for "A", and what you see in this table is the decimal numeral for that codepoint. And apparently snap returns the decimal numeral, for convenience. Yeah, probably should glaze over this point for MS, now that I write it out. -PF 10/1/21

The unicode of block reports the Unicode number that is used for a particular character:
unicode of (B) reporting '66'

The unicode as letter block reports the character that a given Unicode number represents:
unicode (66) as letter reporting 'B'

You can right-click (or control-click on a Mac) either block and select "help..." from the down-down menu to see more details of how the block works.
unicode of block with dropdown menu open showing 'help...' menu-item selected unicode as letter block with dropdown menu open showing 'help...' menu-item selected

We should go back and generate help-text for each of the custom blocks we created. When we do, we could add additional info to this reminder about how it works for other blocks and/or add additional notes to use the block help elsewhere in the curriculum. --MF, 10/5/21
  1. Open this Caesar Cipher project, and save it to your account.
  2. Experiment with the unicode of and unicode as letter blocks. Write down the Unicode numbers for one word, give them to another student, and translate someone else's Unicode back into a word.

Working with Lists

If you type more than one character into the input slot of unicode of, it will report a list of the Unicode numbers of those letters:
unicode of (BJC) reporting the list {66, 74, 67}

You can shift all the letters at once by using that list as the input to the () + () block:
(unicode of (BJC)) + (3) reporting the list {69, 77, 70}

The unicode as letter block can also accept a list as input. It will report a list of the characters for those Unicode numbers:
unicode (unicode of (BJC) + 3) as letter reporting the list {E, M, F}

Finally, the join block can accept a list as input too. It will join all the letters from a list into a single string of text:
join( unicode (unicode of (BJC) + 3) as letter) reporting 'EMF'

I'm definitely curious whether MS students can follow the deep nesting here. I showed to my partner (a software engineer) and he was able to grok it, but said he'd prefer a piping flow versus a nesting flow. I don't think we used the pipe block yet, but it'd be very interesting pedagogically to see if that'd be a better learning experience for flows like this one. -PF 10/1/21

I like this idea, and we had taught it in CSP, but I believe Brian advocated for removing it entirely, which it appears we did. We should discuss why before deciding whether to add it to middle school. --MF, 10/12/21

  1. Use the Unicode blocks to encode and decode a whole word or sentence:
    1. Use the blocks discussed above to encode a message of your choosing with a shift value of your choosing.

      Click for a hint about encoding a message.

      1. Type a message into unicode of.
      2. Use the () + () block to shift the values.
      3. Use unicode as letter to translate the shifted Unicode back into characters.
      4. Use join to join the characters into text.

      Why are there characters like = ? @ # ^ * { or ~ ?

      Look back at the Unicode chart. Shifting text characters can result in non-alphanumeric (not letter or digit) characters. For example,
      message ('I love BJC!') shifted by (3) reporting 'L#oryh#EMF$'
      Talk with Your Partner Which character in the encoded message shown here represents a space in the original message? Look back at the Unicode chart; can you see why?

    2. Then give your encoded message to another student. If they want a challenge, don't give them the shift value. If they don't want that challenge today, give them your shift value too.
    3. Use the same Snap! blocks to decode someone else's encoded message.

      Click for a hint about decoding a message.

      You can decode a message the same way as you encoded it: change it to Unicode, shift, and change back. You just have to shift in the opposite direction. For example, if the original shift added 5, you need to add -5 to get the original message back.

      What if your decrypted text is missing some letters?

      If you copy your encrypted message with a method other than by using copy and paste (for example, by writing it by hand or typing it into a phone), some characters may disappear from your message. This is because some of the Unicode characters after 126 are printing characters that symbolize things like "delete." These characters won't get displayed in Snap!, so you can't copy them by hand, but if you use copy and paste, Snap! knows they are there.

  1. Talk with Your PartnerHow could you use Snap! to help you decode a message that was created with a simple substitution cipher without knowing the key?
Similar comment here as in prev activity: we may want to give teachers some ideas in the teacher guide. - PF 10/1/21

Generalizing the Process

  1. Talk with Your Partner Discuss how you decoded the message you received, and listen to how other people decoded the messages they received.
    • How did the process of encoding the message compare to the process of decoding the message?
    • What parts of the encoding/decoding process were the same for everyone and what parts were different?
    • How could make a general process that will work for all messages and all shift values? 
  2. You learned how to create a new block that takes inputs on the Refining the Story page of the Super Short Stories lab.
    Create a block that takes any input message and any shift value and reports the same message shifted by that value.
    message ('BJC') shifted by (3) reporting the list {E, M, F}

    Click for a reminder about how to create a new block.

    1. Right-click (or control-click on a Mac) in an empty spot in the Scripts area and choose "make a block..."
    2. Choose the color for your block.
    3. Type the title text for your block (in this case, "message shifted by").
    4. Select the shape for your block.
    5. Click "OK."

    Click for a reminder about how make a block take an input.

    1. Hold your mouse pointer at the point in the text text of the hat block in the block editor where you want the input slot to appear, and click the plus sign that appears.
      'message shifted by' hat block showing a plus sign appearing between the word 'message' and the word 'shifted'
    2. Type the name of the variable you want to add (such as message or shift value), and press "OK."
    3. To use this new local variable in your code, drag off a copy from the hat block, drop it into your code.
      'message (message) shifted by (shift value)' hat block showing a copy of the 'shift value' variable being dragged off the original 'shift value' variable in the hat block

  3. Talk with Your PartnerHow can you use this same message shifted by block to decode a message?
  4. Test it your block by encoding and decoding a few messages, and fix any problems.
  5. Save your work
The orange variable color doesn't show up well on blue. We need a solution for that. --MF, 10/12/21
  1. Change the shape of the input slots for the message and shift value variables to match their input types (text and number, respectively).

    You can change the input slot shape by clicking the variable name in the hat block of the block editor, clicking the right-facing triangle (▸) after the "Input name" option, selecting the input type, and clicking "OK" twice.
    message () shifted by () message 'text input slot: a long rectangle' shifted by 'number input slot: an oval'

    Click for images of how to change the shift value input type.


    You can learn more about the shape of input slots and how they tell Snap! and the programmer what kind of inputs are expected in Activity 3: Hexadecimal Numerals and RGB Colors behind the link "Why do the input slots to binary of hex and hex of binary have different shapes?" in the yellow box near the middle of page.

    Since hex is an optional activity (last you mentioned), it might be nice if that showed up in a non-optional activity? Or maybe its not optional now anyway? Thatd be fine too. -PF 10/1/21

Research the historical use of ciphers:

  1. A simple substitution cipher is relatively easy to break because some letters are used more frequently than others.
  2. Read "Secret Keys and One-Time Pads" (Blown to Bits pages 169-173) to learn about Vigenère ciphers and methods used during World War 2 and the Cold War.
    3. Shameless plug: I made a fun interactive for my article on vigenere for CSP. https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:online-data-security/xcae6f4a7ff015e7d:data-encryption-techniques/a/symmetric-encryption-techniques [No worries if KA links not allowed] - PF 10/1/21
In this activity, you wrote a program to encode and decode shift cipher messages by using Unicode blocks and nesting blocks that report lists in other blocks.