Problem Set 4h

This is the honors version of Problem Set 4. If you’re looking for the normal version, click here!

Remember to do this assignment with your assigned partner. If you just moved to honors, or if your hw3h partner is no longer in the honors class, let your lab’s head TA know right away so we can assign you a new partner.

You must follow the design recipe. However, when you turn in your homework make sure you comment out your templates.

You might also note that your graders are now being instructed to grade off for gruesomely laid-out code; proceed accordingly.

You must again hand in your homework electronically, using the handin server. You are well advised to submit a place-holder homework solution several days early, so that you have an opportunity to get help with the handin server/plugin should you have problems.


home work!

Programming Language BSL

Purpose This problem set is a first study of making design choices (see note at the end).

Finger Exercises HtDP/2e: 120, 124, 125, 126; then 133 followed by 127, but read in opposite order. The finger exercises this week are independent of the problems below.


A Graphical Editor

DrRacket allows you to edit programs. That is, you type on a keyboard and it records your keystrokes. By doing so you create a document and this document can be viewed as a program. You could also use DrRacket to enter your English assignments, though for that purpose, you can install different better-suited software applications. All of them include a functionality that computer scientists dub "editor" or even "graphical editor."

The purpose of this assignment is to design a world program that acts as a one-line editor. In other words, the challenge is to design a program that allows you and even your grandmother to enter and edit one line of text. Editing means changing existing text, perhaps by deleting a character or by adding another one to the end of the existing text, in the middle, or even the beginning.

In order to change the existing text in the middle, you must have some notion of "position" within the text. We call this position a cursor, and most graphical editors display the cursor in such a way that you can easily spot it. To move the cursor, people can use the arrow keys or the mouse.

Given this context, you can easily imagine how this configuration of your editor program comes about:

You entered the text "helloworld" and then you hit the left-arrow key about five times. This way the cursor—displayed in red—moves from the end of the text to the position between "o" and "w" in this text. If you now press the space bar, the editor should change its display as follows:

In short, it should show the phrase "hello world" with a cursor between the space and the letter "w."

Obviously this world program must keep track of two pieces of information:

  1. the text entered so far

  2. the current location of the cursor.

This in turn suggests a structure with two fields.

We can imagine several different ways of going from the information to data and back. For example, one field in the structure may contain the entire text entered and the other the number of characters between the left and the cursor. Another data representation is to use two strings in the two fields: the part of the text to the left of the cursor and the part of the text to its right. Here is our preferred approach to representing the state of an editor:

(define-struct editor (pre post))
; An Editor is a (make-editor String String)
; interp.: (make-editor s t) means the text in the editor is
; (string-append s t) with the cursor displayed between s and t

You must follow the design recipe in completing this assignment.

Problem 1 Design the function render, which consumes an Editor and produces an image.

Problem 2 Design the function editor->scene, which consumes an Editor and produces scene.

The scene for your editor program should be 33 pixels tall and 200 pixels wide. For the cursor, use a 1 x 25 red rectangle. The text that you type should appear as you hit the keys on your keyboard. Use black text of size 20 for rendering the text and place the text image into the scene at position (4,4).

Problem 3 Design the function edit. It consumes two inputs: an editor e and a key event k. The function’s task is to add all character key events k to the end of the pre field of e, unless it denotes the backspace character (#\backspace) key. In that case, it should delete the character immediately to the left of the cursor (if any).

Otherwise, the function pays attention to only two key events: "left" and "right". The former moves the cursor one character to the left (if possible), and the latter moves it one character to the right (if possible).

Note We recommend that you develop a solid number of tests, paying attention to special cases. In addition, think of this function as a function that consumes an enumeration and use auxiliary functions that then deal with the Editor structure. (Remember: one task, one function).

Problem 4 Use big-bang to run your editor.

Problem 5 You should notice that if you type a lot, your editor program does not display all of the text. Instead the text is cut off at the right margin.

Modify your function edit from Problem 3 so that it ignores a key event if adding it would mean the rendered text is too wide for your scene.

Problem 6 Develop a data representation based on our first idea, i.e., using a string and an index. Then solve problems 1 through 5 again.

Note This problem is a first study of making design choices. It shows that the very first design choice concerns the data representation. Making the right choice requires planning ahead and weighing the complexity of each. Of course, getting good at this is a question of gathering experience.