Welcome to the Jumble

Assignment 5 for CS 337

In this assignment, you are tasked with writing a one-page web application that will implement two simple cipher (encryption) algorithms. I’ve named my implementation “Welcome to the Jumble,” but if you have an alternate ultra-cheesy name you’d like to use, go for it. The application will require you to use HTML, CSS, Javascript, DOM manipulation, and event-driven programming. An example of this application “in-action” is shown below.

• The main application is composed of three main “sections” The sidebar should contain the application title, the input text field, this shift slider (more on that later) and the cipher square (again, more on that later).
• Next to the sidebar there should be two text fields with large font. You are welcome to customize the fonts, colors, and style. However, I do recommend using the Courier font for these two sections because it is monospace.
• The top text field should be used to display the Caesar cipher encryption of the regular text entered into the input field. The basics of how the Caesar cipher should work is covered later.
• The bottom text field should be used to display the Square cipher encryption of the regular text entered into the input field. The square cipher is basically a simplified two square cipher, and it will be explained a bit below.
• The slider should slide between values 0 and 26, and the value should be displayed next to it.
• Clicking the “Update Square” button should shuffle the letters in the 5x5 letter grid in the sidebar. The letters in the sidebar should be A-Y (Z not included, since the alphabet has 26 letters).

Caesar Cipher

A Caesar cipher is a very simple encryption algorithm to transform text messages to (hopefully) an unintelligible mess, but one that can be translated back to the original message is the KEY (the shift value) is known. When it comes to ciphers, we refer to the original (to-be-translated) text as the plaintext and the resulting jumbled message as the ciphertext.

In order to implement a Caesar cipher, each letter from the plaintext is to be shifted forward in the alphabet some number of times. In this application the number of times to shift is controlled by the slider. A shift of zero would result in the plaintext being identical to the ciphertext. A shift of 26 would result in the same thing, because the shift should wrap around when it reaches the end of the alphabet, and the English alphabet has 26 characters. However, say the shift value was 3, and the plaintext was CSC. The letter F comes three letters after C and the letter V comes three letters after S. Thus, the ciphertext would be FVF.

You only have to translate alphabetical characters, and you are welcome to convert everything to upper or lower case for simplicity. You should skip white space, punctuation, and digits.

Square Cipher

In cryptography, there is a cipher algorithm known as the two square cipher. However, for this assignment, you should implement a simplified version of this, just called the “square cipher.”

The KEY for this cipher is a 5x5 grid of text. Since a 5x5 grid only supports 25 of the 26 letters of the alphabet, we will not include Z. For the purposes of this cipher, a Z in the plaintext translates to the Z in the ciphertext. For all other alphabetical characters, get the position of that character in the regular alphabet, and translate it to the character at the corresponding position in the grid.

For example, say we wanted to use the square cipher to encrypt the plaintext CSC, using the square shown to the right. The letter C is at position three in the alphabet, and should translate to W based on the square. The letter S is at position 19 in the alphabet, and thus should translate to the letter E based on the square. Thus, the ciphertext should be WEW.

As with the Caesar cipher, you can skip whitespace, punctuation, and digits.

Other Rules

Make sure that you take a look at the style guide on the class site before turning in your project. Specifically, make sure that you validate the HTML, and include header comments. Otherwise you might lose points!

Due Date and Submission

To turn in the project, zip up the public_html directory, and submit via gradescope. Make sure that all of the html and image files are included in the zip. The project is due by 7pm on Friday, February 10th.