15-539 Week 2 Team Homeworks

Homework 2: Backend

Introduction to Java

Purpose

The backend team will be using Java this year. We understand that everyone here has a different background in Java, but we want to bring everyone up to a decent baseline before we start writing “real” code. The goal of this assignment is to get your understanding of Java fundamentals up to snuff.

This will be part 1 of 3 assignments that revolve around learning Java. Don’t worry - no one expects you to be a Java expert in 3 weeks. The goal is to introduce you to the basic concepts, so that as we go through review, you understand what we’re talking about. These assignments aren’t going to be exciting, but they will let us do very powerful things in the future.

Contents

• Setup
• Reading
• Assignments

Setup

We will be using IntelliJ and Gradle for our projects. You shouldn’t need to create projects yourself, but you should be able to load ours.

For now, install IntelliJ Community Edition, and Gradle. Clone Skunk Works on your computer, and open the “backend-hw2” project in IntelliJ to get started with the assignments below. Please do this on your own local branch, and do not push it to master.

To open the project in IntelliJ, open the application, then use “Open…” to open the backend-hw2 folder. When IntelliJ opens, you should see a notification titled “Unlinked Gradle Project?” Click the import link just below the title. On the dialog that opens, check the “Use auto-import” button, then hit “OK.” Next you’ll see one or more boxes that start with “The modules below are not imported…” Click OK on all of those too. It will take a few seconds for Gradle to sync and make the first build, then you should be good to go. If you can’t find files, open the “Project” window by going to View > Tool Windows > Project.

Reading

This is heavy reading. It’s going to take time and experience to understand how this all works;  no one expects you to understand this all next week. Hopefully, this information helps you develop a vocabulary for talking about OOP in Java.

A lot of this comes from Effective Java by Josh Bloch. It is not a book that teaches Java, instead it gives specific advice on how to write robust and maintainable Java code - just what we want to do!

• What is Java?

• TutorialsPoint Java Overview

• Writing Robust Classes

• EJ Item 13 - Minimize the accessibility of classes and members
• EJ Item 15 - Minimize mutability

• Java-specific OOP - Interfaces and Abstract Classes

• Don’t know what interfaces or abstract classes are? Check out TutorialsPoint lessons on interfaces and abstract classes. You might also want to read about
• EJ Item 16 - Favor composition over inheritance

• This may seem counter-intuitive, a good rule of thumb is A should be a subclass of B only if you can say “A is a B.” For example, “A Dog is an Animal”.

• EJ Item 18 - Prefer interfaces to abstract classes

PS - I linked to the CMU library version of Effective Java (EJ). If you need a PDF, let me know and I’ll send it to you privately (I don’t want to create a public Google Drive link to it).

Assignments

CodingBat (warm-up)

These assignments are only necessary if you are new to Java. I know all of you could solve these problems in short order in Python, so this is a perfect way to write some Java functions, getting used to the syntax and documentation, without worrying about difficult logic.

• Any three lessons from String-2 (String Javadoc)
• Any three lessons from Array-2 (Array documentation)
• Any three lessons from Map-2 (Map Javadoc)

Fraction

Write a fraction class like fraction.py from 112 - but do it Java style! Implement an immutable Fraction class that implements Comparable interface. Be sure to override the equals and hashCode methods. Write tests for your fraction class, using JUnit, in the FractionTest.java file.

The homework should be done on your own local branch of the skunkworks repository. Once the deadline has passed, I'll ask you to push your local branch to GitHub to practice the review cycle.

Recipe

This exercise will help you to implement abstract classes that other people have written (you will also use your fraction class!). By implementing Ingredient subclasses (e.g. Flour, Water) and RecipeSteps (e.g. Mix, Bake), you can create a Recipe that will pretty-print what you materials you need for the recipe, and the steps to cook it.

Homework 2: UX Design

Due by Saturday, 9/7 at 11:59 pm:

• [5 min] Form: Fill out this form (provided on Piazza) about design process and a few other things
• [20-30 min] IDE Prototype: Build a quick prototype of the IDE using whatever tools you'd like. Don't spend too much time, just focus on getting your most important ideas out there.

Due by Wednesday, 9/13 at 11:59 pm:

• [1 hour] Study 2 other tools: Wick, Coding Bat, or anything else you find! Write down features, anti-features, and general thoughts relevant to the design of our project. Include a link to the tool as well.
• [1 hour] Design one of the following: matching, multiple choice, or fill-in-the-blank question framework. Include how it will look and how students will interact with it.
• [ 1.5 hours] During class, meet as a group to discuss the IDE: we will come up with some combined designs given your prototypes
• [0.5 hour] Come up with a full list of user desires + possible interactions with our project

Homework 2: Frontend/UX Implementation

Tetris using HTML + Javascript

Due Wednesday September 13 2017 at 11:59pm.

Reading

First read this tutorial to learn about HTML. You only need to cover the “HTML5 Tutorial” and the “HTML Graphics” sections. In the “HTML5 Tutorial” section you may skip everything below HTML Head.

Then read this tutorial to learn about JavaScript. Complete the “JS Tutorial”, “JS Objects”, and “JS Functions” sections.

Finally, read this tutorial to learn about CSS. Complete the “CSS Tutorial” up to the “Opacity” section.

Tetris

Write Tetris in Javascript (and the HTML canvas) using the 15-112 tutorial. We have included a file, sampleTetris.py and a version of eventBasedAnimation.py to help you get started. Your solution should be a single tetris.html file with all the JavaScript code in an inline script tag.

Bootstrap

First, spend 10 minutes reading (skimming) the Bootstrap docs.

Then, download the file named bootstrap.html. It has starter code that fetches dependencies. Your task is to produce (at least—you can do more if you want to!) 2 distinct widgets that are styled using bootstrap. What we mean by widget is a group of elements (i.e. buttons, textboxes) that together perform some basic functionality.

For example, 3 text boxes that take integer values from 0-255 and color a button could be one widget. Or a group of dropdowns that triggers a modal pop up.

Be sure to incorporate elements from the CSS, Components, and Javascript tab on the Bootstrap docs site.

Collaboration

You may find it helpful (and fun!) to work together for both inspiration and for sharing knowledge. Obviously, do not copy other students’ code. Please put who you worked with in a team.txt file, and limit the team size to 3 students.

Timesheet

As usual, please include a detailed timesheet, timesheet.txt, in your submission directory.

Help

Kenny (kdramos) and Lizzy (ejboard) have kindly offered to provide 1-on-1 help by appointment for HTML, JS, and CSS topics. Feel free to contact them to set up meeting times.

Handin

To submit your work, put the following files into a folder and compress it into a .zip archive, which can be submitted on Autolab.

• tetris.html
• eventBasedAnimation.py (included in the handout)
• bootstrap.html (modified from the one in the handout)
• timesheet.txt
• Team.txt

Homework 2: Autograder

• Research (both ACM & Google) both related products and academic work (~1 hr)
• Discuss potential approaches together (~1-3 hrs)
• Prepare a summary of discussion (~30 min)

Homework 2: Graphic Design

• Think about what Scratch, AppInventor, and Swift Playgrounds provides, and why
• Think about what tools we need (e.g. illustrator, aftereffects, indesign, photoshop)
• Make a design for a custom Bootstrap component
• Attend a meeting (with me + the group) to learn how to implement it

Homework 2: Textbook

• Find modern interactive textbooks and analyze them as part of hw2. Make thoughtful comments. Why are they a good guideline? Is there something missing that we talked about? Is there a feature that is not only valuable for students but also for teachers of this course?
• Find an example that is being widely used by schools, why are they used? What can be improved upon?
• During the lesson we discussed tracking video watching and student assignments. In particular we discussed whether we should do Hard Tracking or Soft tracking. What do you think? Explain why one way would be better than the other.

Homework 2: Accessibility

In addition to this week’s CS content and git training homework, you guys will also have some items to attend to as the accessibility team. We mentioned them during our meeting yesterday, but just to formalize what we expect and what you should include with your submission:

• Read through the various laws and guidelines pertaining to accessibility

• Americans With Disabilities Act (ADA)
• Individuals With Disabilities Education Act (IDEA)
• Web Content Accessibility Guidelines (WCGA)
• Compile any relevant notes about things that may impact us from any of your readings. Be sure to include a source so that we can further examine potential ramifications of anything you’ve identified as important!

• Compile a list of resources (text, video, etc.) that demonstrate why accessibility is a concern and how we may deal with it. This could be a video of what it looks like to use an inaccessible website from the perspective of someone with vision impairments, useful guidelines for how to make your content broadly accessible, or anything else that you think is useful or could motivate valuable thought/discussion. For each resource you find, make sure to provide the original source, as well as your brief thoughts about why you think it will be useful.

We think that this assignment should take roughly five to seven hours. If you find that you are spending significantly more than that, please email me. Have fun!

Homework 2: Video Team

• Look at some vlogs/video podcasts. In particular, look at ones that are similar to what we're thinking of doing (content is academic, or news-related, and/or aimed at a similar demographic). As always, include links to everything you look at.
• Make thoughtful comments about what they're doing, how they're doing it, and why. Discuss how we can pull inspiration from them, and what we'd want to do differently.
• Ideate! Think through other things we can try (in addition to the suggestions Professor Kosbie made during the meeting).

Homework 2: Media Team

In addition to this week’s CS content and git training homework, you guys will also have some items to attend to as the media team. We mentioned them during our meeting yesterday, but just to formalize what we expect and what you should include with your submission:

• Find collections of sounds/images we can use.

• We are looking for media that will be fun and appealing to 9th grade students! Focus your search accordingly.
• With each piece of media you discover, make sure to include a link to the original source and include a note about what license it is available under.

• Find sprites that will be fun for 9th grade students.

• Follow same guidelines as above for recording source and licensing.
• Think about the best formats we can use for sprites. Briefly mention the pros and cons of different options and which you think is best.

• Try to find some background images/scenery we can use

• Follow same guidelines as above for recording source and licensing.

• Briefly describe anything you think this team should be doing as we move forward that was not covered during this week’s meeting.

We think that this assignment should take roughly five to seven hours. If you find that you are spending significantly more than that, please email me. Have fun!

Homework 2: Extended Framework

Find external APIs or Frameworks that are consistent with the 15-539 mission and showcase the following:

1. How it fits into our goals. Making thoughtful comments as to why that thing would interest High Schools students or just about anyone that uses our website and what improvements could be made.
2. How it could be integrated into a website (for week two we do not have a website to integrate to so you will just generalize).
3. Come up with your own ideas! Write down a couple of ideas that are out there and sound awesome. Expand on it, what would we do with it? how would having it make the website more appealing?

Include links to any projects or additions you looked at.

Homework 2: CS Pedagogy & Competitive Analysis

In addition to this week’s CS content and git training homework, you guys will also have some items to attend to as the competitive analysis team. We mentioned them during our meeting yesterday, but just to formalize what we expect and what you should include with your submission:

• Analysis of Competitive Products - Find a product that you think could be viewed as a competitor of ours and use it for a couple of hours (2-3 should be fine). As you’re using it, take note of any features that you think we could learn from and pitfalls you think we could avoid.

• Make sure to record where you found the product and other relevant metadata, including price and intended audience
• Work in teams of at most 3. If you’re working in a team, all work must be done collaboratively. That is, all 3 members must be present.

• CS Pedagogy Reading - Spend about 2 hours reading either journals (ACM database is a good place to start) or whichever book you chose at this week’s meeting. Record any relevant passages or sections that you think would be helpful to show to the entire class. Be sure to include any relevant page numbers, and a short description of why you think this content will be helpful for us.

We think that this assignment should take roughly five to six hours. If you find that you are spending significantly more than that, please email me. Have fun!