15-539 Week 3 Team Homeworks
Homework 3: Backend
Due Sunday 9/17 at 8AM. Review meetings Sunday 9/17 and Monday 9/18.
Instructions
- Give yourself a quick refresher on Django. We’ll be using the django-rest-framework.
- Complete individual assignment (see below).
- Coordinate with Scott to make sure your code is properly stored on Github with the appropriate development ops tools setup.
- Attend a homework review.
Assignments
Alec + Sean
Develop a proposal for what authentication we should use. Then implement a small demo that uses this form of authentication.
Please track only the following user information for now (we will add more later):
- Unique primary key (for internal use only)
- Username
- Hashword
- Recovery email
- Flag for whether email is verified
To approach this task, I’d recommend the following steps:
- Explore the available authentication methods on the authentication page of django-rest-framework docs (see here).
- Choose an authentication and write a ½ page proposal on why you’re using it.
- Send the proposal for Scott and Eddie for review.
- Implement a demo.
Note that this task does not include authorization. We need to know who is logged in, but not what they’re allowed to do (yet).
Arman + Matt
Build a Python3 class (backed by AWS S3) that supports uploading and retrieving files.
I’d recommend the following steps:
- Coordinate with Eddie to get access to AWS S3.
- Draft a skeleton Python class with proposed methods, and send to Scott + Eddie for review.
- Implement the class using the AWS SDK for Python3.
Maya
Learn django-rest-framework.org. Build a sample app of your choice to demo.
Nate
Refresh on Python and learn django-rest-framework.org.
Scott
Learn django-rest-framework.org.
Ensure that development operations procedures are being followed.
Perform reviews specified in the above tasks.
Review File API design (detailed below).
Eddie
Design a very simple JSON based API specification for adding, removing, and updating files on our file storage service. Create a client side wrapper for the API and send that wrapper to the UXD/UXI teams.
Submission
Keep your work in a Github repository as you develop. Start in skunkworks and then we'll move to a team repository soon after.
Include any code or documents you created in zip file and submit that to Autolab after your homework review meeting. If you worked as a partner, both partners should submit the same materials.
Homework 3: UX Design
- [1 hour] Post-it note user story brainstorming session
- Work in groups of 3 for this (so there should be 2 total groups)
- We will come together and build off of it in class!
- [1 hour] Meeting with Professor Kosbie to learn about his experience in high school teaching
- I will help schedule this!
- [2 hours] Answer the following questions in response to our discussion in class on Tuesday. Be sure to explain why and be very thoughtful here. If possible, cite examples that have made similar decisions and work well:
- Important: How should students interact with a lesson/tutorial?
- Important: Should the canvas be fixed or flexible?
- Should our IDE be code centric vs. canvas centric in terms of screen real estate?
- How should we display error messages?
- Where is the console? How do students interact with it?
- How should autograding be displayed?
- How should we display the library/documentation?
- What features does editor itself need? List features we couldn’t do without, features that would be nice to have, and anti-features.
- How should we visualize what is happening during code execution?
- How do you run/submit code? What happens to the screen when the code is running?
- Should you be able to step through code one line at a time?
- [2 hours] Make a mock-up using your favorite tool that shows the experience of running a basic program in our IDE that involves the canvas. Then, make another mock-up of our IDE running a program that does not involve drawing/canvas. Limit each to 3-4 screens.
- If you don’t know what tool to use, ask anyone on the team in our slack channel. Balsamiq and PowerPoint are fine places to start!
- Take into account our discussion on Tuesday, your responses to the above questions, and everyone else’s designs. We will use this mock-up on Tuesday as well!
Homework 3: Frontend/UXI
Meta: Time estimates
- Sublime: 5 min
- Meeting: 30 min
- React: 1 hour
- Redux: 1.5 hours
- React + Redux multiple choice app: 2.5 hours
Go to the React + Redux intro session
This is scheduled for Friday 9/15 from 3-3:30pm in PH - A20A.
Set up Sublime Text for React development
Turns out that with the help of package management, this is fairly straightforward.
- Install Package Control by following the instructions here: https://packagecontrol.io/installation.
- Open the command palette. This is command+shift+p on Macs, and ctrl+shift+p on Windows.
- Start typing ‘Install’ and select the ‘Package Manager: Install Package’ option.
- Search for ‘Babel’ and install the package ‘Babel’.
- Done!
Do the React Tutorial
Do the React tutorial (making a Tic-Tac-Toe app). In your deliverable, place all code related to this in a tictactoe directory.
Watch the Redux intro course
Watch the Redux intro course at 1.5x speed. This should take 80 minutes.
Be sure to create an account on the site (you can use Github) and, as a deliverable, go to your account information and take a screenshot of your progress in the intro course.
React + Redux multiple choice app
The app should have the following components: radio button, option text, option (which is composed of a radio button and an option text component), question statement, question, section of questions, paginated sections (Implement as much as you can in in 2.5 hours).
Deliverables
Your zip file should contain the following:
- tictactoe - contains React tutorial code
- redux.png - screenshot of Redux tutorial completion
- multiplechoice - contains multiple choice app
- timesheet.txt
- team.txt
Note that as usual, you may work with others, but any code you submit must be your own.
Delivery
We require two delivery methods for this homework
- Autolab (self-explanatory)
- On Github. Instructions:
- Clone the uxi-hw3 repository.
- Check out a new branch (i.e. git checkout -b <andrewid>)
- Add your code under the directory labeled with your andrewID.
- Commit
- Push
Homework 3: Autograder
- Blue sky design meeting with Prof Kosbie (expect 2-4 hours)
- Fleshed out ‘week 10’ exercise that we use as the standard for evaluating autograders
Homework 3: Graphic Design
- Build an initial set of design guidelines. This should include colors, patterns, fonts, layout, and/or whatever else you think is necessary to get started. Keep in mind CMU’s marketing requirements, but be as creative as possible.
- Read over the marketing doc and summarize the most important guidelines it specifies. The summary should be brief and very readable (to be used as a reference for the UX design and outreach teams as well).
Homework 3: Textbook
- Using one of the tools you described in homework 2 (or any other if you'd prefer) create a small lesson detailing a very basic coding concept for a typical 9th grader (variables, functions, operations, if statements, are some examples of valid lessons).
- Provide thoughtful comment about the challenges faced with this tool as well as challenges faced with creating this lesson.
- Rate your tool in the following ways from 1 to 10:
- Usability (10 being very easy to use)
- Feature richness
- Availability (10 being easily available, 0 being behind paywall)
- Developer support (10 being very comprehensive docs)
- Active development (0 being dead project)
- Popularity
Homework 3: Accessibility
Last week, we looked at the various pieces of legislation and the different guidelines that govern what accommodations are necessary for students with disabilities. This week, we are going to look at some specific disabilities, and formally document what our legal responsibility is to students with those conditions. We’d also like to start producing some ideas for how we can address these responsibilities in the context of our curriculum and content.
What I’d like for you all to do is each pick one of the following conditions that we may have to plan for (there should be one for each of you, use Slack to choose amongst yourselves):
- Visual Impairment
- Color Vision Deficiency
- Hearing Loss
What to Submit?:
- A list of our legal requirements to address your chosen condition
- Cite relevant parts of legal text like ADA, IDEA, etc. as justification
- A list of suggestions for how we can structure our content (lessons, exercises, videos, etc.) to better serve students with your chosen condition
- These should be actionable items that our other teams can consider as they are building out our infrastructure
This should be a reasonably quick homework assignment that I’d expect you to spend about three hours on. Where I’d hope you spend the majority of your time is coming up with clever suggestions on how to better structure our content for students with disabilities. Of course, don’t miss the obvious stuff, but be creative too!
Homework 3: Video Team
- Continue shaping the design ideas we talked about in Tuesday’s meeting.
- How closely should we follow 112-style (code + voiceover)?
- What other video format options are there that we should consider? e.g. talking at a whiteboard, KhanAcademy-style, etc.? What are the potential benefits and drawbacks?
- Custom text designs/animations (instead of recording code typed in a text editor) - how plausible would this be to implement? Are there ways to automate this process? What would it look like? Is there anything that already exists with this video format that we could study / emulate?
- Setting up the annotated video software provided by the CS department
- https://qna.cs.cmu.edu/#/pages/view/127
- Read all existing documentation on this kit
- Set up a working demo
- Write up a brief analysis (What works well, what doesn’t? Should we use it? Why?)
- Then, as a group, we need to:
- Prepare a 30-minute guided tour/quick-start for Professor Kosbie
- Keep an eye out for an email/slack from me about when we'll meet up to prepare this!
- Look into licensing (for the 3 video editing programs we talked about during the meeting, how do we obtain educational licenses? What exactly are the terms of the licenses? Give a recommendation about which program to use, and why).
- Propose some alternative software possibilities (past Aftereffects, Final Cut Pro, and Premier Pro).
- (Later) After Alex’s feedback on licensing and suggested software, prepare a ~30-minute crash course on how to use the software to present to the group.
Homework 3: Media Team
Media Team Week 3 Homework
Last week, we curated sources of media (sounds, images, backgrounds, sprites, etc). This week, we are going to continue to collect more media, and also begin the process of organizing it into some kind of coherent structure that our other teams can use.
What I’d like you all to do is organize the media content into collections, where each collection contains media that fits together nicely and would make sense to be packaged together for a particular lesson, animation, exercise, or anything else we may need it for. For example, maybe you think a certain background, a few sprites, and a couple of sound clips would fit together as the building blocks to make a really cool platform-based game. Great! Group these things together in a folder, and include a short text file explaining how you think the contents of this collection fit together. Also include in your text file the licenses that apply to all of the media in your collection. So in the case of the platform game, we may have a directory structure that looks something like this
platform-game
→ sprites
→ sprite1.gif
→ sprite2.git
→ backgrounds
→ background.jpg
→ background-alternate.jpg
→ sounds
→ sound1.mp3
→ sound2.mp3
info.txt (contains a description of the collection, relevant license info)
Of course, this is flexible. Adapt it as you feel necessary for whatever ideas you may have. The idea here is just to have some collections of media readily available for our development teams to use when the time comes.
What to Submit?: A zip file containing all of your organized collections.
This should be a reasonably quick homework assignment that I’d expect you guys to spend about three hours on. I’d expect at least five collections of media, but do what you can in the three hours you have. Don’t just stop once you hit five, but don’t spend ten hours on this either!
Homework 3: Extended Framework
- Using the tool you described in hw2 make a very small but clearly compelling example of it being used for the purpose you described in hw2.
- Describe your experience with incisive and thoughtful feedback. Was it easy to implement? Was it as good as you expected it to be? How active is their development?
- Prepare a short (1-2 minute) presentation on the tool and your experience with it that can be presented to the class in lecture next week. The point is for everyone after hearing your presentation to be enthusiastic about using this tool in their own CS1 Content work, and also that they feel empowered/able to do so.
Homework 3: CS Pedagogy & Competitive Analysis
- Fill out spreadsheet with what you looked at last week
- Feel free to duplicate the products that there were multiple for
- Pick up a new book if you’re done with your old one in class :)
- Look through projects from last week or new ones
- Report on 2 or 3 specific features that you think are really wonderful
- give descriptions of why they’re helpful
- Look through projects and books for insightful pedagogical analyses
- Report 1 or 2 papers or sections or videos that you found helpful and new
- What did you find unique about it and why should others view it?