CSC160 (UG20) 01
    Lab 1: Pseudo code
    Skip To Content
    Dashboard
    • Login
    • Dashboard
    • Calendar
    • Inbox
    • Help
    Close
    • My Dashboard
    • CSC160 (UG20) 01
    • Assignments
    • Lab 1: Pseudo code
    SP 2021 (UNDG)
    • Home
    • Assignments
    • Modules
    • TC/WC Appt Scheduler
    • Collaborations
    • WSJ Context
    • EvaluationKIT Course
    • EvaluationKIT
    • Barnes & Noble Bookstore

    Lab 1: Pseudo code

    • Due Feb 9, 2021 by 4pm
    • Points 10
    • Submitting a file upload
    • File Types jpg, png, cpp, txt, and html
    • Available after Feb 9, 2021 at 2pm

    Overview

    In this lab you'll learn to write pseudo code and then translate it to real code.

    Learning objectives

    By the end of this lab, you should feel comfortable:

    • writing a C++ program in Visual Studio Code
    • compiling and running a C++ program on the command line
    • writing pseudo code
    • translating simple pseudo code to C++ code
    • submitting multiple files to Canvas

    Part 1: Pseudo Code

    Video overview: Link

    Head over to Shape Artist, a simple, bare bones drawing pad that only lets you draw circles and rectangles. Draw a picture (e.g., of a tree or a house with a flat roof, etc.) using 5-15 shapes. Click the "Export PNG" button when you're finished (you'll submit the PNG to Canvas at the end of this lab). If for some reason the PNG doesn't download, take a screenshot of it. Rename this lab1-part1.png.

    In Visual Studio Code, open a new file (File -> New File) and save it as a file named lab1-part1.txt. Write your name, the date, and the assignment title at the top. Under that,  write pseudo code (a series of English instructions) to describe how to recreate the drawing exactly as it appears on your screen. Use the "Select" button in Shape Artist to see stats about a shape to help you out. For example, if you click on a circle, it'll tell you the (x,y) coordinates of the center as well as the radius. You should be able to hand your pseudo code to another human with a pen and graph paper and they should be able to follow your pseudo code to create an image identical to the one you have.

    Part 2: The hand off

    Video overview: Link

    Find a classmate who is finished their pseudo code and exchange your pseudo code with them. Go back to Shape Artist and click "Clear drawing".  Follow your classmate's pseudo code instructions. Export the picture you produced (or take a screenshot of exporting doesn't work) and send it to your classmate.

    Hold onto the picture that your classmate produced following your pseudo code; rename it lab1-part2.png. If the drawing your classmate created using your pseudo code looks off, find out why. Is there something incorrect with or missing in your pseudo code? Or did your classmate not follow directions? If the former, copy your pseudo code to a new file named lab1-part2.txt and correct the mistakes.

    Part 3: Transcribing pseudo code to C++

    Video overview: Link

    You will now transcribe your pseudo code to C++. To do this, download lab1.cpp. Move it to a folder for your CSC160 work. Then open Visual Studio Code and select File -> Open Folder, and choose the folder where you moved your lab1.cpp file:

    File -> Open Folder

    You should be able to select the lab1.cpp file from the explorer pane in the left hand side of VS Code to open it for editing (A in the screenshot below); if you don't see the explorer, click on the explorer toggle button (B in the screenshot below).

    VS Code explorer

    Before you do anything else with the file, add the date and your name (you're the author) to the header at the top of the file.

    You will place your code in the main function (search for where it says TODO in the code). You cannot use your pseudo code directly—that isn't valid C++. However, I have included a number of C++ functions in the lab1.cpp code that you should use to build a picture. You can read about what these functions do and how to use them in the comments above each function's code (below main in the source code), or you can see the application programming interface (API) described here. Using API documentation to learn how to use a new library is a crucial skill, so take a little time to look it over.

    You will need to make sure the first statement in main is start(); and the second-to-last statement, just above return 0; needs to be end(); Here's an example of the code I would add to main to draw a green circle with radius 100 at the coordinates (150, 200) sitting on top of a  blue 100x50 rectangle starting at (100, 300):

    start();
    go(150,200);
    setColor("#008000");
    drawCircle(100);
    go(100,300);
    setColor("#0000ff");
    drawRectangle(100, 50);
    end();

    Rather than transcribing your entire program all at once, engage in incremental programming: write one or two lines of code, then follow the steps below to compile your code, run it, and check the generated drawing is what you expect. This will safe you time later!

    The first time you go to compile your program, open a terminal by right clicking on the name of your program in the explorer sidebar and select "Open in Integrated Terminal". 

    VS Code open integrated terminal

    The integrated terminal should open at the bottom of VS Code. Click anywhere in there and then type ls to make sure that your lab1.cpp file is there:

    lab 1 ls

    If it's not, let me know and I will help you out. You can also take a look at the "Using the command line" section of the Programming environments page to find out more about how to get into the correct directory. Once in the correct directory, you can compile from the terminal like this:

    g++ lab1.cpp -o lab1

    If you encounter errors, then attempt to address them (feel free to ask a classmate or me for help) and recompile. Once it compiles without error, run your program like this:

    ./lab1

    Every time you run this program, it will generate a file named lab1.html (and overwrite it if it already exists). If no lab1.html file is generated, then you probably either put code outside of main or you didn't call start() or end() in the correct spots—see above. The first time you run your program, you need to open that file in your web browser; the easiest way to do that is to find lab1.html in the VS Code explorer, right click, and select the "Reveal in File Explorer" (or "Reveal in Finder" if you're on macOS):

    Lab 1 reveal in file explorer

    lab1.html in file explorer

    When File Explorer/Finder opens, double click the lab1.html file and it should open up in your default web browser. Any time you run the program after that, if the page is already open in your browser, you just need to refresh the page.

    Browser refresh

    You have successfully implemented your pseudo code when you see a replica of the picture from your original handout.

    Every time you make a change to your code, make sure that you

    1. recompile
    2. re-run your program on the command line
    3. refresh the page in your browser (since running your program updates the lab1.html file)

    Submission

    Here's what you should submit once you're done all three parts:

    • your original pseudo code file (lab1-part1.txt)
    • the picture of you made on Shape Artist (call this lab1-part1.png, if you can't figure out how to rename the photo, that's okay)
    • the picture of your classmate's attempt to follow your pseudo code (lab1-part2.png; if you can't figure out how to rename the photo, that's okay)
    • your updated pseudo code if you made any changes in part 2 (lab1-part2.txt)
    • your completed C++ source code (lab1.cpp)
    • the generated HTML page (lab1.html)
    1612904400 02/09/2021 04:00pm
    Additional Comments:
    Rating max score to > pts

    Rubric

     
     
     
     
     
     
     
         
    Can't change a rubric once you've started using it.  
    Find a Rubric
    Find Rubric
    Title
    You've already rated students with this rubric. Any major changes could affect their assessment results.
    Title
    Criteria Ratings Pts
    Edit criterion description Delete criterion row
    This criterion is linked to a Learning Outcome Description of criterion
    threshold: 5 pts
    Edit rating Delete rating
    5 to >0 pts
    Full Marks
    blank
    Edit rating Delete rating
    0 to >0 pts
    No Marks
    blank_2
    This area will be used by the assessor to leave comments related to this criterion.
    pts
      / 5 pts
    --
    Additional Comments
    Total Points: 5 out of 5