Lab 2: Advanced Arithmetic and Object-Oriented-Programming

Objective: Review

• Review your Linux notes from last week.
• If there were any issues with your web page, go back and fix them first. Otherwise, when we return to updating web pages, you'll base your web page on incorrect examples.
• Review the slides for today.

Objective: Set Up

Run labhelp

Linux: Set up for Lab 2

1. Create a directory called lab2 in your cs111 directory. Your programs and the output for this lab will all be saved in the lab2 directory.
2. Copy graphics.py from the directory /csci/courses/cs111/handouts/lab2 into your lab2 directory.

Objective: Programming in Python

1. (8 pts) Copy problem 1 from lab 1 (lab1_1.py) and save in this directory as lab2_1.py. Modify your program so that the program prompts the user for values of i and j. Update the output as appropriate, keeping in mind that we want clear output for the user.

   When you demonstrate your program, think about what are good test cases for this program. What answers do you know? Keep this in mind whenever you test a program that has input.

   In general, you do not need to test anything that is a user error, e.g., entering a negative age or year or entering floats when you expect integers. The goal is to reveal bugs in your program, not user errors because we can't handle those (yet). It's good to think about those problems, but you don't need to demo your code with them (because your program will crash or produce strange results).

   Bringing it all together, your final program should output something like:

   This program calculates the result of i^2 + 3j - 5.
   
   Enter the value of i: 7
   Enter the value of j: 2
   
   i^2 + 3j - 5 = 50
   

   As the instructions above state, you should demonstrate your program running multiple times, with a variety of inputs to show that it works.

   In the lab help system, add yourself to the Instructor queue to talk to Professor Sprenkle about your test cases and process.

   The process you just followed (between lab 1 and this lab) is good development practice: write your program first with fixed values. It's easier to just run your program rather than getting user input when you're working on the algorithm and output. Then, after that is working, add getting user input to your program so that your program is more useful. Generalizing ...

   Recommended Development Process

   A good development process will, most importantly, yield high-quality code, which we define as the code working correctly but also that it's easy/intuitive for a user to use and is easy for another programmer to read and understand. The process should also be productive for the programmer, e.g., it reduces time spent debugging and the developer doesn't waste time on manual/unnecessary tasks.

   1. Consider how the program should work/test cases for the program.
   2. Write algorithm in comments.
   3. Implement algorithm, a few lines of code at a time, and execute your code to make sure those next few lines work.
   4. "Hardcode" values for the inputs from one of those test cases to start. Getting user input will become routine, so focus on the other parts.
   5. Repeat until you have implemented everything.
   6. Then, after making sure your algorithm works, add getting user input.
   7. Test the program, using the test cases you came up with in the first step.

   In summary, focus on considering test cases/expected behavior, then algorithms and implementing the algorithms, then user input. Work in small chunks to isolate problems in the code.

2. (12 pts) Write a program to help a party of friends split a restaurant bill equally. The program should ask for the total bill amount, the percent tip to add, and how many people are splitting the bill. You can assume that the user won't enter that 0 people are splitting the bill.

   Note: what the program should do in its final submitted version is not necessarily what your program will do during the development process. Your final product is what matters. Don't worry about user input to start!

   Here is what two runs of your final program should look like:

   Bill amount in dollars: 55.34
   Percent tip: 20
   Number of people: 3
   
   The tip is 11.068000000000001 dollars
   The total cost is 66.408 dollars
   The cost per person is 22.136 dollars
   

   Bill amount in dollars: 162.29
   Percent tip: 15
   Number of people: 8
   
   The tip is 24.3435 dollars
   The total cost is 186.6335 dollars
   The cost per person is 23.3291875 dollars
   

3. (15 pts) Write a program that demonstrates the importance of operator precedence. Your program will prompt the user for values for the variables a, b, and c. Then, print the result of a Python expression that has no parentheses, using those three variables. Then, show a different result from the same expression with one added pair of parentheses.

   Example output (with fake numbers--this isn't a real equation):

   Enter a: 12
   Enter b: 34
   Enter c: 5
   The result of <display your equation here> is 51
   The result of <display your equation with parentheses here> is 15
   

4. (13 pts) Distributing Greatest Hits Albums. A band is putting out their Greatest Hits album and needs to know how many cds their album requires because the physical disks/collectors set are where the money is made. Bands like the Ramones can fit a lot more tracks on a cd than a band like Led Zeppelin.

   Write a program that takes the number of greatest hits and the size of the cds (in terms of the number of tracks) and determines how many cds are needed and how many tracks will have to wait for the next Greatest Hits album.

   This program determines the number of CDs in a Greatest Hits album.
   
   How many greatest hits/tracks do you have? 24
   How many tracks fit on a cd? 10
   
   Your album requires 2 cds.
   4 tracks will have to wait for the next Greatest Hits album.
   

   Note: you may have some grammar issues in your output. We don't know how to fix those yet.

Reference Material for Graphics Programming

• Reference for the Graphics Library
• Information on Colors
• RGB Values for Colors from Wikipedia Hover over the R, G, or B percentage to see the R/G/B integer value between 0 and 255 or multiply the percentage by 255.
5. (12) Using the graphics module, draw a yellow circle with radius 30 and a red square of width 50 in a window that is 400x200 with the title "Practice". Position the circle in the upper-left quadrant of the canvas and the square in the lower-right quadrant.

   Please add two calls--one to getMouse() and one to close()--on your GraphWin object at the end of the program. It won't make a difference for you in IDLE, but it does make a difference for me when I run the programs automatically.

   There will be no IDLE output for this program.

6. (12) Using the graphics module, draw the beginning of a snow-person. Create a canvas with the title "Snow Person". Draw a white circle of radius 50. Clone the circle and move the cloned circle above the first circle (so that the circle appears to be sitting on top of the original circle). Repeat with a third cloned circle. Draw two black, filled-in circles for eyes in the top circle. Note that you should draw one eye, then clone the eye and move it to the appropriate place.

   Please add two calls--one to getMouse() and one to close()--on your GraphWin object at the end of the program. It won't make a difference for you in IDLE, but it does make a difference for me when I run the programs automatically.

   There will be no IDLE output for this program.

7. (20) Create a program that draws "something significant", such as a scene, a house, or a face, using the graphics library. Here are some guidelines to follow:
   • Use a variety of colors and several different types of shapes.
   • For symmetrical features (such as eyes or ears), remember to use the clone method to make a copy of the original shape. Then draw the cloned shape in the window and move it to the desired location.
   • Keep in mind that next week, we're going to animate part of your image, so that may influence what you want to make today.
   • You may want to use the setCoords method of the GraphWin object to adjust the coordinates of the window. (See the Graphics library reference above for more information about setCoords.)

   Again, please add the calls to getMouse() and close() on your GraphWin object at the end of your program.

   Some previously created images to inspire you:

   

   Screen Capture: To save the image you created

   If you are in lab, click on "Activities" in the upper left and search for "Screenshot". Click on the "Screenshot" application.

   If you are remote, you will need to take a screenshot on your computer, and email it to me.

   • Select the "Grab the current window" option.
   • Click "Take Screenshot"
   • Click on your image. You gotta be quick! If it's not what you expect, click the left arrow button to go back. You can set a short delay to give you a little more time to move your mouse to the right window. Just make sure that you click on the image's title bar; otherwise, it might close.
   • Give the image a simple name, e.g, myHouse.png
   • Click the dropdown for "Save in folder", select "Other...". Click on cs111 and then click "Open". Save in folder should now say "cs111". Finally, click "Save".

   You've saved the image!

Objective: Creating a New Web Page (8)

1. Open a new terminal. We want one terminal to be on a lab machine. The other terminal is going to be on the computer science department's web server.
2. Go into your cs111 directory. Copy your screenshot from the lab machine to the computer science department's web server using:
   scp *.png username@cs.wlu.edu:public_html

   Alternatively, instead of *.png, you can use the name of your file, specifically, e.g., myHouse.png.

3. ssh into the computer science department's web server using
   ssh -XY cs.wlu.edu

   You don't need to include your username because it's the same on both the lab machine and the web server.

   You are now in your home directory of the web server. View the contents of your home directory. You should see your public_html directory that you created in a previous lab.

4. Go into your public_html directory.
5. Confirm that you copied your image into this directory. (How?)
6. Copy your index.html file into a file called lab2.html, still in the public_html directory (i.e., not in a new directory)
7. Open lab2.html in emacs.
8. Modify the Lab 2 web page to have an appropriate title, heading, and information about the image you created during this lab.
9. View your lab2 web page in the browser. Recall the URL for this page. You may want to review the lab when we made the web pages.
10. Modify your Lab 2 web page to display the image you created.
11. Clean up your Lab 2 page so that it only contains the image, a link to your home page, and any appropriate text. In other words, get rid of the stuff that should only be on your index.html page.

    You want the link back to your home page in case someone gets to your page from a search engine, and they want to learn more about the artist!

12. Modify your index.html page to link to your Lab 2 web page.
13. Verify your web pages look correct in a browser.

Finishing up: What to turn in for this lab

1. Make sure you're in your lab2 directory.
   

   Clean up

   1. Some text editors make backup files and appends "~" to the name of your file. Delete any "~" files from your lab directory.
   2. Move graphics.py out of your lab2 directory and into your cs111 directory. (See mv and today's slides. Note where the cs111 directory is with respect to where you're running this command from.)
   3. Delete any image files that are in your lab2 directory because they'll screw up your printing.

   In other words, at this point, your lab2 directory should only have the .py files you wrote, the .out files you created, and a __pycache__ directory in your directory when you print. (The latter is not printed.)

2. Now, go into your cs111 directory.
3. Create the printable lab assignment, using the command:
   createPrintableLab <labname>

   The file will be in your cs111 directory.

   If you see a message about an "unescaped sequence", that probably means you still have an image in the lab2 directory. Remove the image from the directory and repeat this step.

4. View your file using the evince command. The file should be in your cs111 directory (e.g., ~/cs111/lab2.pdf). It should only be a few pages. If there are issues with your printout (most commonly, images or graphics.py in your lab2 directory), go back and fix them.
5. Print out your lab submission. In evince, select the print icon and choose to print to HPLaserJetIntroLab
6. Write out and sign the honor pledge on the print out. Staple all pages together.
7. Move graphics.py back into your lab2 directory after printing.
8. Submit your lab2 directory for grading by running the turnin lab2 command. If you have every thing set up correctly, this will copy your lab2 directory into your turnin directory so that you and I (only) can see your submission. If you run the turnin script again, it will copy the current directory and create a backup of the previous submission.

Labs are due at the beginning of Friday's class. The electronic version should be in the turnin directory before 8:25 a.m. on Friday.

Ask well before the deadline if you need help turning in your assignment!

Grading (100 pts)

• Python programs: 92 pts; see above for breakdown
• Web page: 8 pts