Lab Week 01 - Fall 2023
Tuesday, August 29, 2023
Introduction
This lab is set up so you can learn how to build up a full deliverable that you can submit for credit in this course. As you work on these steps with guidance from your teaching assistant, you should look toward your neighbor to see if they need help (or ask if you need help). You can collaborate in lab during these activities!
In this lab, you will
- Create a folder for all of your 15-104 work on your computer.
- Inside this 15-104 folder, you will create a folder for each lab and deliverable that you will work on throughout the semester.
- Inside the lab folder, you will create a mock deliverable that you will submit online.
Create a folder for all of your 15-104 work on your computer.
- Simply create a new folder anywhere on your computer (e.g. on your desktop, in the Documents folder, etc.) and rename it 15-104.
Inside the 15-104 folder, create two folders, one for this lab, and one for the deliverable that will be due on Saturday.
- For the lab folder, name it lab-01.
- For the deliverable folder, name it handin-01. (We won’t use this folder for the rest of this lab, but you will use it for your deliverable due on Saturday.)
Your folder structure should now look like this (indentation indicates subfolders, the order doesn't particularly matter):
15-104
handin-01
lab-01
Completing a practice Concepts Questions file.
Each deliverable will usually have three components: Concepts Questions, a Technical Assignment, and an Open-ended Project. We'll start with the Concepts Questions. For these, there will be a Word file that you have to download and edit. You will then save your work as a PDF file and include that in your submission.
- Download a copy of concepts-practice.docx and store it anywhere on your computer that is convenient.
- Open the file using Word (or another program that can read Word files) and enter the answer requested in the file, along with your name, andrewID and section letter.
- Once you are done, print/save a PDF version of the file using the name andrewID-01-concepts.pdf (with YOUR andrewID) and store this in the lab-01 folder. For this example, if your andrew id is acarnegie, you would save the PDF under the name acarnegie-01-concepts.pdf.
Your folder structure should look like this now (indentation indicates subfolders and contents):
15-104
handin-01
lab-01
andrewID-01-concepts.pdf
Creating a simple program.
Let’s create a simple technical assignment that draws a circle in a webpage.
- Download a copy of template2023-p5only.zip ONCE and unzip (uncompress) it. You should see a folder template2023-p5only that has two files inside. Rename this folder with your andrew ID followed by a dash followed by the week number (as two digits) followed by a dash followed by “assignment” (or “project” for the open-ended assignment). For this example, if this is the first assignment and your andrew id is acarnegie, you would rename the folder to acarnegie-01-assignment.
- Move this folder inside the lab-01 folder.
-
Using a text or code editor (we will use Sublime), open the sketch.js file that is inside this folder and edit the file so it looks like the example below. Use four spaces to indent each command inside the function brackets for draw. The file should look like this:
- Save the file.
-
Double click on the index.html file to launch your default browser to see the results. (If it doesn’t appear correctly, you might want to right click open to use a different browser or set your default browser to a different browser.) You should probably see something like this:
- If you don't get the results or you see nothing, there is probably something wrong with your program. Ask a lab partner to see if they can find it in your editor. If you change anything in the editor, you must save again and then reload the webpage to see the results!
Your folder structure should look like this now (indentation indicates subfolders or files within subfolders):
15-104
handin-01
lab-01
andrewID-01-assignment
index.html
sketch.js
andrewID-01-concepts.pdf
Creating a “open-ended” project.
- Download another copy of template2023-p5only.zip and unzip/uncompress it. Rename the folder to andrewID-01-project (e.g. acarnegie-01-project) and move it into the lab-01 folder.
- Use your editor to edit the sketch.js file inside this new folder and put in the same code as before, but experiment with some of the data values, or arguments, to the functions. Change the canvas size, the location of the circle or the shape being drawn.
- Save the sketch.js file and double-click the corresponding index.html file to see what happens with your revised program. Again, if there are errors, fix them in the editor, save again, and then reload the webpage.
15-104
handin-01
lab-01
andrewID-01-assignment
index.html
sketch.js
andrewID-01-concepts.pdf
andrewID-01-project
index.html
sketch.js
Compress your lab-01 folder into a zip file.
- IMPORTANT: Go to the lab-01 folder and right click and select the option to either compress or zip the contents of the folder.
You should see a lab-01.zip file appear along with the two folders in the 15-104 folder:
15-104
handin-01
lab-01
andrewID-01-assignment
index.html
sketch.js
andrewID-01-concepts.pdf
andrewID-01-project
index.html
sketch.js
lab-01.zip
Hand in the zip file to Autolab.
- Go to autolab.andrew.cmu.edu and log in.
- You should see 15-104 as your course. Click on that course. (If you don't, let your TA know.)
- Select the Lab 01 assessment and drag the lab-01.zip file into designated drop off area. Click the checkbox that indicates you are abiding by the Academic Integrity policy for the course.
- Click SUBMIT to upload your file to us.
You’re ready for Deliverable Set 1!
Completing Deliverable 1 follows the same process, except you will have a real set of Concept Questions to answer, an actual Technical Assignment to program, and a real Open Ended Project to program. These will be stored in the handin-01 folder you created.
Every week, you will follow this same process for labs and deliverables, so reference this lab if you ever forget how to organize your folders.