Expectations

Learning Targets

• I can disassemble and reassemble a computer.

• I can describe the function of basic PC components.

Assessments

• You will be asked comprehension questions to identify parts of a computer from their images, what their primary purpose is, and what their common problems are

• You will be observed disassembling and reassembling a computer and checked that you can identify all the components and that you can reassemble the machine correctly

Components

Imagine a person juggling while singing an old song from their childhood. Part of the juggler's brain is tracking the motion of each ball and the timing of each throw. Another part of the juggler's brain is recalling the song. His stomach is fueling his muscles. His nervous system is communicating controls from his brain to his arms. His eyes are taking in information. His voice is outputting the song. We'll use this as a reference as we go over hardware.

Central Processing Unit

Description

CPUs or processors do math. They are a super complex series of logic gates made unbelievably small. What are logic gates? Imagine a wire with two light switches in a row. Since both switches are on the same wire, both need to be flipped to the ON position in order for power to flow through the line. That's an AND gate. If the wire split into two instead and each fork had its own switch, that would be an OR gate as only one or the other has to be enabled for power to flow. Processors have millions and millions of these complex arrangements made in microscopic sizes.

According to our analogy, the CPU is the part of the juggler's brain that's calculating the path of each ball while also managing all the other signals through his brain. It doesn't cover all the functions of the brain in our analogy, but it is at the center of the comparison.

Problems with CPUs

CPUs use a lot of power and generate heat. Metal wires create a little resistance as electricity flows through them and that energy turns into heat. You must manage the heat that gets created by your CPU using a fan or other cooling system. If your computer collects a lot of dust, it will insolate

If a CPU is older it means it could be generating more heat while executing fewer commands. And if the CPU is slow, that means it must be connected to a whole bunch of other parts that are older and slower too.

Extra Information

Random Access Memory

Motherboard

Hard Disk Drive

Power Supply and Case

Peripheral Devices

Additional Practice

• Create a Quizlet set and practice these terms

APIs Make Life Easier

No one writes code totally from scratch. All programmers use a variety of preexisting systems that allow for easier development. We write code that interacts with other layers. That's an API or Application Program Interface. We can interact with our operating system, helpful resources or other apps.

BIOS

The BIOS or Basic Input/Output System is firmware. It's something built right into your motherboard. It helps boot your computer up and gives something for the operating system to run off of.

Operating System

The OS is a big deal. It serves as a vital intermediary between software and hardware. Instead of having to program every little operation for each device in our computer, we can just use the commands provided by the operating system.

Interpreter

The interpreter allows us to execute our written Python code. It's our interface with the Operating System which is in turn interfacing with our hardware.

Libraries and Packages

Part of what makes Python so great are all the tools and frameworks available. Want to build a web application? Use Flask or Django and you'll be up and running in minutes. Do you want tools for data analysis? Machine learning? Robotics? There's an ocean of open-source tools ready to give your app superpowers.

Expectations

Learning Targets

• I can interpret an unfamiliar code base.

• I can extend the code to my own project.

Assessments

• You will create an interactive program or game based on existing turtle classes

• You will be asked regular comprehension questions about Python.

First Class Assignment (CodeHS.com)

Adding Moving Turtle

Assignment and Rubric

Create an interactive turtle application of your own design. This can be a game or other interactive program, but it must use at least two of the three types of turtle classes we have outlined (moving turtle, keyboard turtle, clickable turtle).

• 3 pts - Program works without errors

• 3pts - Program uses two classes of turtle

• 3pts - Program is interactive. Users can DO something with the program beyond what we set up in class. Make sure your theme is cohesive!

• 1pts - Program is cleaned up (unused imports have been deleted, for example)

How do I...

...make multiple things move?

...write text on the screen?

...stop movement with walls?

...make a ball move diagonally and bounce off multiple sides of the room?

... create a background image and have it change later?

...set up and check a timer

...add a start screen

...Save a High Score in a File?

... add points from different objects to a single score?

... get objects to check each other for different properties?

...find the x and y position of my mouse on the screen?

...create a custom shaped turtle?

...create a multi-colored turtle?

Expectations

Learning Targets

• I can connect replit to my github repositories

• I can clone an existing repository, fork it, and extend the code to my own project.

Assessments

• You will submit a link to your GitHub repo.

• You will create a game based on existing turtle classes

• You will be asked regular comprehension questions about Python and Github.

Setup your github account.

Setup your replit account and connect your github.

Join Replit I2P team with the link below.

Fork github.com/MrVanek/Interactive-Turtles and clone repository into replit.

Adding Moving Turtle

from turtle import Turtle


class ClassName (Turtle):
    def __init__(self, starting_x, starting_y):
        Turtle.__init__(self)
        self.starting_x = starting_x
        self.starting_y = starting_y
        
        # General setup
        # self.color("black")
        # self.penup()
        # self.shape("turtle")
        # self.goto(self.starting_x, self.starting_y)
        
    def method_example(self):
        pass
        ## change the name and make the method work

Assignment and Rubric

Create an interactive turtle application of your own design. This can be a game or other interactive program, but it must use at least two of the three types of turtle classes we have outlined (moving turtle, keyboard turtle, clickable turtle).

• 3 pts - Program works without errors

• 3pts - Program uses two classes of turtle

• 3pts - Program is interactive. Users can DO something with the program.

• 1pts - Program is cleaned up (unused imports have been deleted, for example)

How do I...

...make multiple things move?

...write text on the screen?

...stop movement with walls?

...make a ball move diagonally and bounce off multiple sides of the room?

... create a background image and have it change later?

...set up and check a timer

...add a start screen

...Save a High Score in a File?

... add points from different objects to a single score?

... get objects to check each other for different properties?

...find the x and y position of my mouse on the screen?

...create a custom shaped turtle?

Kivy App 2 Rubric

Create an interactive program using the kivy framework. The app should be useful to you (i.e.; not a game or a tech demo).

The program will be graded as follows:

• Usefulness - 2pts

• Uses a minimum of six total widgets - 3pts

• Uses at least one widget that is not from the following list (Label, BoxLayout, Button, TextInput, Spinner) - 2pts

• Program works as intended with no crashes- 3pts

• main.py is commented for clarity - 1pt

• unneeded code should be cleaned up - 1pt

How do I...

...make multiple pages in a kivy app.

Expectations

Learning Targets

• I can implement the basic constructs of programming languages such as variables, conditionals, loops, and flow control.

• I can make a class wrapper that inherits from a library's class.

• I can call a method from a library.

Assessments

Class Videos

Class 1/24 Turtle drawing assignment:

What is DRY code?

Loops and functions allow skilled programmers to make more efficient code that's easier to maintain.

Parts of a for loop

A for loop has an iterator and a collection that it traverses.

# the range command will build a list you can traverse
for x in range(5):
    print(x)
    
# you could also write it using a literal list:
for x in [0, 1, 2, 3, 4]:
    print(x) 

Parts of a function

A function has a definition that lists any parameters and has a code block underneath that gets activated when called.

def magic_spell(target):
    target.sneeze()

# let's make Steve sneeze
magic_spell(steve)

In the example above, the magic_spell function isn't a part of a Class. It's on its own. If that ability was a part of a player in a game, we'd call it a method instead of function.

class Player(object):
    
    def magic_spell(self, target):
        target.sneeze()
        
lucy = Player()
steve = Player()
lucy.magic_spell(steve)

# fun fact: you could also write line 8 like so:
Player.magic_spell(lucy, steve)

Code Along

We're going to jump into work with a lot of advanced concepts. This is intentional. New programmers are very often intimidated by code they don't understand. I want you to get used to that early on. Enjoy tinkering with a few lines here and there and see how things change. Get comfortable swimming in the deep end.

from turtle import Turtle

class SuperTurtle(Turtle):
  
  def __init__(self, x, y, color='blue', shape='turtle'):
    Turtle.__init__(self) # run the normal Turtle constructor
    self.color(color)
    self.shape(shape)
    self.penup()
    self.goto(x,y)

This class (inherits) from the Turtle class which is available since we imported the turtle library. Instead of writing from turtle import Turtle I could have also written just import turtle in which case every time I wanted to use the Turtle class, I would have had to specify the library, such as turtle.Turtle()

The only thing that our SuperTurtle does that the regular Turtle doesn't is the way it gets constructed. When a new Turtle is created or instantiated, we initialize or __init__ with some default properties.

Follow along as we go over a couple of skills. You aren't expected to be able to do this stuff yourself quite yet.

1. Make a loop and create a bunch of turtles

2. Add a new method to the turtle to make it go to a random location and call that method in the constructor

3. Make a list of colors and make each turtle randomly select a color

4. Make an empty list and add each turtle to the collection as it's being instantiated

5. Loop through the turtle collection and modify each

We'll spend some time experimenting with this code, learning by modifying existing code.

Building Methods

# here's where we imported the Turtle class from the turtle package
from turtle import Turtle
# now from the random package, we imported to helpful functions
from random import randint, choice

def rancolor():
  """ This method returns a string from a list of colors available to Turtle's .color() method """
  colors = ["brown", "darkorange", "maroon", "crimson", "navy", "salmon", "tomato", "khaki", "gold", "hotpink", "springgreen", "blue", "cyan", "purple", "green", "red", "pink", "yellow", "teal"]
  return choice(colors)


class SuperTurtle(Turtle):
  # our own constructor that makes Turtles more convenient
  def __init__(self, shape='turtle'):
    Turtle.__init__(self)
    self.color(rancolor())
    self.shape(shape)
    self.penup()
    self.speed(9999)
    self.goto_random()
  
  def goto_random(self):
    self.goto(randint(-200,200), randint(-200,200))
    
  # HERE'S WHERE WE WILL ADD MORE METHODS
  def triangle(self):
    pass # replace pass with real code

  def square(self):
    pass # replace pass with real code
    
  def star(self):
    pass # replace pass with real code
  

# create a collection for our turtles
gang = []

# loop through a set range of 20 and 
# add a Turtle to our collection during each iteration   
for x in range(20):
  gang.append(SuperTurtle())
  
# loop through my gang and change each one
for x in gang:
  x.shape("triangle")

A method or function is a group of commands that can be called. If I tell you to please clap, that's me activating or calling the command that's already defined in your head. I may give you additional parameters or arguments like, "clap 5 times loudly". In Python that may input("What's your name?") but that doesn't save the variable, so we write it as:

name = input("What's your name?") written as joe.clap(5, "loudly")

What's the difference between a function and a method?

They both start with def and will execute their pre-programmed commands when called. However, we'll refer to a function as something floating outside of a class and a method as an ability built within an object. For example, a method would be if an instance of the Human class, let's call him Joe, had to sneeze: joe.sneeze(). But a function would be an anonymous helper like therancolor() function programmed above that just returns a random string in a list of colors.

Novel Design

Look at the documentation, other student examples, and Google searches to modify open-source code and customize your own design. You can use one or many turtles but the end result has to have multiple colors over a fun design.

Taking Controls

Let's make our app more interactive. Just like the print("message") function we've been using, there's another one that takes a string input called input()

input("What's your name?") will work but that doesn't save the user's response anywhere. So let's create a variable that will store the answer in this example:

name = input("What's your name?")

Testing the input

if "circle" in user_input:
    tina.circle()
elif "triangle" in user_input:
    tina.triangle()

To make sure we are asked the question over again, we'll put the input within a while True: loop.

This is so awesome!

The Internet is the largest idea exchange ever built or conceived. Learning HTML, the language of the web, gives you incredible power to represent yourself or your work, or your clients. Let's start first by gathering our resources.

Links and Resources

Required Software (install these)

Required Practice (create accounts)

Design Assets (bookmark these)

Colors

Extra Training for Extra Cool Kids

We won't study much JavaScript in this class but it's one of the best ways to take web design to the next level.

Expectations

Learning Targets

• I can describe a brief history of the Internet's origin and impact.

• I can write a professionally formatted email.

Assessments

• You will receive comprehension questions about why the Internet was made, the very basics of its technology, how the technology grew, and its significance to society.

The Idea

The Internet is mankind's greatest achievement. Mr. Adiletta takes a dramatic position on the Internet as a basic human right. The evolution of human intelligence goes beyond the growth of our brain. and into the development of communal stories, into libraries, and then into the Internet. The Internet is a product of human evolution and is the birthright to all people.

The Internet is a part of your mind and you have the right to use your brain.

Why was the Internet created?

Did Al Gore create the Internet?

In his 2000 Presidential campaign, Al Gore rightly took some credit in the creation of the Internet. No, he did not help develop the TCP/IP network. However, after the ARPANET project was complete, the ownership of the underlying technology was in question. It was offered for sale to at least one telecommunications company but they passed on buying the Internet not knowing what it would be good for. Al Gore was a part of a congressional effort to make TCP/IP a public resource. No one owns the Internet because of that. He also helped establish support to connect people--something we have a moral obligation to continue.

Significance of the Internet

Why is this video funny?

After watching this video, take a moment to think about why this video seems silly. It's not just her rockin' hair and vest or the British perspective of the American president. It may be the many, giant screens. But more specifically it's how the changing technology has changed our impressions. She talks about shopping on the internet as a future possibility and not something that everyone does like it's no big deal. Again, take a moment to understand that the Internet is a big deal.

The Internet has a physical component that must be appreciated, too.

Vocabulary

• OSI model: The basis of the Internet. This describes how the TCP/IP network started by the Defense Department has evolved.

• Domain Name System (DNS): A sort of phone book that changes or resolves domain names into IP addresses

  • A Record: routes primary domains like google.com

  • C Record: routes subdomains like mail.google.com

  • MX Record: routes email addresses. That's why emails @gilmour.org go to a different server than what's hosting the website at gilmour.org

Further Exploration

There are many free tools that help you learn about domains. These are very helpful for web designers as you may want to check on the current host of a client interested in a site redesign. Try looking up the record of a few domains using one of these tools:

Expectations

Learning Targets

• I can connect to my Raspberry Pi via SSH.

• I can deploy an app to a Raspberry Pi.

• I can compose a higher-ordered algorithm.

• I can update code on my Raspberry Pi.

• I can make short, descriptive commit messages.

Assessments

• You will submit a link to your GitHub repo.

• You will demonstrate your capacity to control your robot.

• You will be asked regular comprehension questions about Raspberry Pis.

Terms

Printed Circuit Board (PCB)

​

Single Board Computer (SBC)

This is a PCB with all the basic components found in a personal computer (PC)

Getting Started

Fork code

2. Open Replit and start a new project from github

3. Use your forked github project. You should now see your code on your editor. Explore student.py and teacher.py.

5. Open putty and enter the ip address of your robot. Click open.

   • login: pi

   • password: robots1234

6. Remove the Piggy folder if it's already there: rm -rf Piggy

7. Now we'll clone your project on the robot too with git clone https://github.com/YOURUSERNAME/Piggy

8. Change to your project folder: cd Piggy

9. Run the app: python3 student.py

Push code to GitHub

Whenyou make changes to your app and want to update the code on your robot, we first need to send the code from our computers to GitHub. This happens in the version control tab by typing in "What did you change" and hitting Commit & Push.

Pull code on robot

Now we'll remote control our robots using SSH. We'll use Linux commands to pull the updated code down from GitHub.

Open putty and enter the ip address of your robot. Click open.

• login: pi

• password: robots1234

Note: You will not see the password when typing. This is a security feature!

1. Make sure you're in the right folder: cd Piggy

2. Pull your updated code: git pull origin master

3. Run your app: python3 student.py

4. If it doesn't run, study the error.

Calibrate

We'll need to configure your class variables.

Midpoint

Motor Speeds

Sometimes one motor will perform faster than the other, giving the robot a noticeable veer. We can try to correct for this drift by adjusting the motor power.

Moving Your Robot

Dance Project

Check out what commands are available from the API that's provided for you. These are the commands you're inheriting.

Higher-Ordered Logic

Your dance method should read as close to regular English as possible. The nitty-gritty commands are all kept in the particular methods being called in your dance algorithm. So your dance method should just call a handful of moves. Within those moves, you'll use the specific motor commands below and get into the nitty-gritty of robot control.

• deg_fwd(angle) - how many degrees do you want your wheels to rotate? You need to pass the angle

• turn_to_deg(angle) - rotates to the given angle as calculated by the piggy's gyroscope

• turn_by_deg(angle) - turns relative to it's current heading. Positive values rotate right and negative rotate left

• fwd - powers on your robot to drive forward. You'll need to use self.stop() to power off the motors

• right - by default, self.right() will give the left motor 90% power and the right 0% which rotates right. You can use kwargs to adjust the power such as self.right(primary=90, counter=-90), which will spin the robot in place

• left - same as right but reversed.

• back - same as fwd but in reverse.

• servo - moves the servo (plugged into servo1) to the given value (use 1000 - 2000)

• stop - sets motor power to zero

• read_distance - returns the distance from the distance sensor (plugged into I2C port) in millimeters

• get_heading - returns the gyroscope's value

Shutting down the robot

To shut down your robot, type: sudo shutdown now in the putty window.

Basic Movement Methods

• Square

• Dance

• Add safe_to_dance() method which checks surroundings and only dances if it has enough space.

• Move to wall and stop

• Move to wall and turn around. Move forward again and repeat endlessly.

• Move to box and go around it

• Before moving around box, figure out which side of closer. If you are closer to the left end of the box, go around left. If you are closer to the right end of the box, go around to the right.

Intermediate Movement Methods

• Write a move method which scans slightly to the left and right of the robot as it moves forward.

• If it senses a wall straight ahead, it goes around to the closest side as above (put that move in it's own method)

• If it senses a wall at the edges of the robot, swerve slightly to miss the wall (this swerve should again be in it's own method).

Maze Navigation

• Coming soon.

Expectations

We're going to take a tour of Python. You are expected to know generally what these things are, you're not yet expected to know how to use them. So no freaking out. We'll play around with some fun projects after a quick look around.

Learning Targets

• I can make a hello world app in Python.

• I can differentiate between compile-time, run-time, and logic errors.

• I can describe the basic constructs of programming languages such as variables, conditionals, loops, and flow control.

Assessments

• You will be answering comprehension questions about the layers supporting software execution.

• You will be creating and submitting your several small Python apps using trinket.io

Let's go to trinket.io and build some simple stuff, starting with print("Hello, world")

We'll go over each of these concepts in greater detail. For now, let's skim over all the big topics.

Class Videos

The first video deals with the following concepts: Functions, Variables, Operators and Conditionals

Class 1/4

Class 1/11

Class 1 / 20: User defined functions

class 1/24: for / while loops

Key Concepts

Data Types

The first thing we'll tinker with is declaring variables and storing information. Variables in Python are dynamically typed, meaning you can store one type of information in a variable and then switch it without any fuss. Other languages are more strict and don't allow such shenanigans.

Operators

We use math symbols for most common operations. But Python has some cool operators. Read!

Conditionals

Conditionals control how the program flows based on input from the user (in an app) or sensors (on a robot.

Learning Targets

• I can describe the difference between raster and vector.

• I can describe the difference between serif and sans serif.

• I can iterate on my design.

• I can use Photoshop's masking layers and quick select tool.

• I can create a logo in Adobe Illustrator.

Serif vs Sans Serif

One of the first decisions to make when starting a new project is your font selection. It helps set a lot of the tone for your site. Typically, I select a header font and a body font--something fun for titles and something easy to read for my paragraphs.

Color Palette

Another key mood-setting decision to make is the type of colors you'll use around your site.

Once you've selected your colors, we're going to add a note to your custom CSS like so:

/**

COLORS
https://coolors.co/05a8aa-b8d5b8-d7b49e-dc602e-bc412b
Blue: 05a8aa
Green: b8d5b8
Red: bc412b
Orange: dc602e

**/

Call to Action

Raster VS Vector

If your image has been zoomed in or stretched too far, and it's a rasterized image, you'll notice the pixels that make up the image. That's a problem. But the solution is not to use a super high-resolution image with a big file size. That'll just make your webpage take forever to load. We need the right resolution each time.

Use vector where you can. Raster, if the image is the right resolution, looks great. The image below can confuse students into thinking raster is always blurry.

Design Principles

Common Mistakes

1. Navigation that isn't simple, logical and explanitory

2. No clear calls to action

3. Insufficient contrast between text and background or clashing colors

4. Jumbled, unengaging, or unorganized content

5. Clutter

Mostly Boring

Backgrounds and most colors should NOT try to grab your attention. Most of it should be steady, comfortable patterns. Subtly is hard for students eager to splash bright colors on the page. That's why we study examples of great pages. Look how chill most of their decisions are... it makes the touches of bright color really exciting.

Parallelism

Brains love patterns and it can hurt when they're broken. Patterns exist in grammar, color, lines and all sorts of other things too.

Keep Room to Digest

Less is more.

When something is considered "clean" design

Metro, Material and Flat Trends

There is a constant variation in what's trending in web design styles. Here are three of the most popular. The last, flat, is more related to colors and icons and less known as a style.

Photoshop

Photoshop works with rasterized images (as opposed to vector images). Let's discuss the difference first.

We're going to learn about three basic skills:

Layer Masks

Resizing

Our themes typically come with images perfectly formatted for the area. Instead of taking a new image and trying to crop and adjust it into the right size, I simply edit the original image in Photoshop. Once it's open, I'll drag and drop the new one on top of that.

Color Correction

We add in new adjustment layers to tweak colors. Turning down the brightness on a hero image so that it lets your CTA stand out more is a common technique.

Logo Design in Illustrator

Requirements of a Logo Package

• PNG and JPG images

• Wide but thin logos (banner format)

• Square shaped logos

• Large, medium and small file types

• Original .ai files as well as exported versions

• Reversed colors for dark backgrounds as well as light backgrounds

Find a Tutorial

Find a tutorial that gets close to the effect you want. Follow along and then try to tweak and customize it.

About the Test

1. Multiple choice: 40 questions, 90 minutes, 50% of your score

2. Free response: 4 questions, 90 minutes, 50% of your score

Links and Resources

Software

Great Books

Online Courses

Practice Problems

Java Tutorials and References

Learning Targets

• I can describe the benefits of using the JRE.

• I can identify the three types of errors when programming.

• I can describe the attributes of Java’s main function, including scope, instantiation, and return value.

Java is Portable

Java's strength is also its greatest weakness. The JVM allows the same Java code to run on almost any machine. It does this by hosting a virtual machine, a simulated computer system that facilitates the interpretation of your code.

Respect to Dennis Ritchie

With his partner Ken Thompson, Dennis Ritchie solved a very big program for programmers. It's hard enough for programmers to design an app. It's just crazy if you have to program an app in assembly, telling the CPU and RAM how to handle each and every little operation. Programming languages like Ritchie's C allow coders to focus more on the app and less on how it has to interact with the machine. It's like the first, really powerful book of spells made for magicians.

Just in Time

When you install an app on your computer, the JIT will interpret the developer's code and set it up to run on the given machine. The install process takes longer and it might not be compatible with every machine, but then the app is ready to run very quickly. Java doesn't play like that. Instead, it interprets the code in real-time while running through a virtual machine. So while it can run pretty much everywhere, there's a bottleneck in how fast it can perform.

Extra Information

Editing Code

Three types of errors

1. Syntax or Compile-time: You can't compile this code. Something is way off and Java won't touch your mess.

2. Runtime or crash: Something breaks while it's running as if you asked the computer to divide a number by zero.

3. Logic: Everything runs okay. Nothing crashes. However, the answer you get is just wrong. If your app says 4+4 is 10, you've got a logic error.

Java's Code Structure

In Java, all code must be written inside methods, and all methods belong to a class. This means that every Java program is essentially a collection of classes, each containing methods that define the behavior of your program.

• Classes must be defined inside a file that shares the exact same name as the class. For example, if your class is called MyProgram, then the file must be named MyProgram.java.

• The entry point of every Java program is the main method, which tells Java where to begin executing your code.

Java's Main Method

Every Java app starts the same way, from a static method that returns nothing. Let's introduce these concepts now. Many of these ideas will seem strange, but they'll make more sense as you build up your background knowledge. You'll come back to this section later on and smile. But for right now, let's take a plunge into the deep end of the pool. We'll hurry right back to the basics but let's take a peek at how all Java apps start. public static void main(String[] args){} <=[ all Java apps start from that method! ]

Scope

Who can access this method or this variable? The main method must always be public because it's being triggered from outside the class.

Instantiation

Does this method belong to an instance of the class? What's the difference between an instance and a static class? Imagine we're building a game. We've got one file or class that describes a player and another that has helpful functions like drawing a random number. Every person that plays the game gets their own instance of the player class. It tracks each player's health and abilities in the computer's memory. But the helper class can be static, just one master copy--no instance needed.

Return Type

As the method closes, does it return anything? If so, what type of data is returned? The main method must always return void because it's the point of origin--there's nothing to return data to.

Learning Targets

• I can build a hero with a call to action.

• I can implement a color palette via CSS.

• I can build a responsive Bootstrap website.

• I can implement Bootstrap classes and components into a website.

What is Bootstrap?

What is responsive?

Responsive design isn't just about websites looking good on different screens; it's about delivering an optimal user experience on any device. Imagine navigating a complex website on a tiny phone instead of a spacious desktop – the frustration is real! Responsive design solves this by adapting the website's layout, content, and functionality to various screen sizes, ensuring a seamless user journey.

Bootstrap's Grid System:

Bootstrap, a popular framework, makes responsive design accessible. Based on 12 columns, its grid system provides a flexible layout structure. In your example, <div class="col-md-6"> and <div class="col-lg-6"> define elements that occupy 6 columns on medium and large screens, respectively.

Breakpoints and Device Adaptation:

The magic happens with breakpoints and specific screen widths where the layout adjusts. Bootstrap uses predefined breakpoints for @media queries, essentially saying, "When the screen size reaches X, apply these styles." Your task with the inspector window is to find these breakpoints! Look for @media rules defining styles for lg, md, and sm (small) screens. Notice how Bootstrap adjusts the number of columns these classes occupy at each breakpoint.

Exploring Device-Specific Adjustments:

While Bootstrap offers a solid foundation, sometimes device-specific tweaks are necessary. For example, on smaller screens, you might:

• Collapse content sections by default and use buttons or icons to reveal them.

• Increase font sizes for better readability.

• Simplify navigation menus or switch to hamburger menus for better accessibility.

• Optimize images for faster loading times.

Beyond Bootstrap:

Remember, Bootstrap is a tool, not a silver bullet. You might need to go beyond its base styles as your projects evolve. This is where understanding CSS media queries and flexbox becomes crucial for more granular control over responsive layouts.

Beyond Screen Size:

While the screen size is the primary factor, a responsive design also considers other aspects:

• Device orientation: Portrait and landscape modes on phones and tablets require different layouts.

• Resolution: High-resolution displays might necessitate adjustments for image quality and text sizes.

• Network speed: Consider loading optimizations for users with slower connections.

The Importance of Testing:

Responsive design isn't a one-and-done task. Rigorous testing on various devices and screen sizes is crucial. Use browser emulators and real devices to identify and fix any layout issues and ensure a consistent user experience across platforms.

Optional Button Drill

Bootstrap 2 Project

Replit: Our Cloud-Based IDE

• What is Replit? Replit is an online platform that acts as an Integrated Development Environment (IDE). Think of it as a workspace in your browser where you can write code, run your website, and collaborate with others in real time.

• How does it work in class? Instead of downloading templates, each student will have a pre-provisioned copy of the chosen StartBootstrap template ready to use in Replit. This eliminates the need for individual downloads and setups.

• Pros of using Replit:

  • Convenience: No setup required, access your project from any device with internet.

  • Collaboration: Work with classmates on your website in real time.

  • Pre-configured environment: Everything you need to start coding is already set up.

  • Cloud storage: No need to worry about losing your work; it's automatically saved online.

• Cons of using Replit:

  • Limited customization: Replit may have limitations compared to desktop IDEs like VS Code in terms of customization and plugin options.

  • Offline access: You need an internet connection to access your project in Replit.

,VS Code with Downloaded Template:

• What is VS Code? VS Code is a popular, downloadable code editor for your computer. It provides powerful features like syntax highlighting, code completion, and debugging tools.

• Using VS Code: You can download the StartBootstrap template yourself and open it in VS Code for editing.

• Pros of using VS Code:

  • More customization: VS Code offers extensive customization options with plugins and themes, catering to your preferred development style.

  • Offline access: Work on your website even without an internet connection.

  • Advanced features: Powerful debugging tools and code analysis features for more in-depth development.

• Cons of using VS Code:

  • Setup required: You must download and install VS Code and the template.

  • No real-time collaboration: Working with classmates requires additional tools or sharing downloaded files.

  • Storage management: You're responsible for saving and backing up your project files.

The Choice is Yours!

Both options have their merits, and the best choice depends on your personal preferences and learning style.

• For beginners: Replit's easy access and collaboration features might be ideal.

• For experienced programmers: VS Code's customization and offline capabilities could be more appealing.

Download a StartBootstrap Template:

• Choose a template that suits your project's needs.

• Click on the template's preview page and find the download button.

• Select the option to download the zipped file.

• Save the downloaded file to a convenient location on your computer.

Open the Template in VS Code:

• Open VS Code.

• Go to File > Open Folder.

• Select the unzipped folder containing the downloaded template.

• Click Open. This will open the entire template structure within VS Code.

Create a Custom CSS File:

• Within VS Code:

  • Go to File > New File.

  • Name the file custom.css.

  • Save the file in the appropriate location within your project folder (usually the root directory).

Open a Preview of the Site:

• In VS Code:

  • Right-click on the index.html file and select Open with > Live Server.

• This will launch a local preview of the website in your default browser.

Make Changes and Refresh:

• Edit the HTML and CSS files directly within VS Code to customize the website.

• Update your custom.css file with desired styles.

• Save your changes.

• The Live Server preview will automatically refresh, reflecting your latest edits.

Continue Building:

• Use the template's structure and provided classes as a starting point.

• Add your own content and modify the HTML as needed.

• Refer to the template's documentation for available components and their usage.

• Use your custom.css file to personalize the design further.

• Keep making changes, saving, and refreshing to see your progress unfold.

Additional Tips:

• Regularly save your project folder to Google Drive for backup and collaboration.

• Explore Bootstrap's extensive documentation and online resources to learn more about its features and customization options.

• Remember, practice makes perfect! Start with this guide, experiment, and have fun creating your unique website!

In the same folder, create a new file: custom.css. Next we'll need to connect the css file to the folder html file.

Video Walkthroughs

Learning Targets

• I can explain the connection between electricity and logic.

• I can interpret logical statements with all common operators, (i.e. and, or, nor, xor, if, iff).

• I can simplify a logical expression according to De Morgan's Laws.

• I can convert numbers from decimal to binary and to hexadecimal.

• I can describe the purpose of instantiation.

• I can decide when to instantiate an object or when to use a static class.

Logic Gates

I'm absolutely fascinated in how people build logic, systems that react to conditions, into physical devices.

We start with two tricks with circuits: 1) and && 2) or ||

With tiny transistors and these building blocks, we can assemble our modern technological era. Let's just take a peak:

De Morgan's Law

You'll need to know how to distribute the ! when simplifying logical expressions. This will make more sense as we get into more practical examples.

A "promise" or an "if" within logic is something like:

Practicing Boolean Logic

Let's simplify these statements. Reduce them down to just true or false

• true != true || (true || false)

• false && true || true && false || true && false || true

• !(true && false)

• !(5 > 5)

• !(5 <= 5)

• 5 == 5 && true

Binary

Can you see how false and true could also be considered to be 0 and 1? All the sudden, we can make these logic gates, these electrical transistors, store binary data. Computers are pretty cool.

Instantiation

This is an important concept that's most easily introduced when we're not thinking about the code. If you have a recipe to make a cake, that's similar to a class definition. Each time you bake a cake, you're creating a new instance of that cake.

Another example of instance VS static classes

This is by no means a perfect example as things are more complicated... but let's consider Fortnite for a moment. There's just one map. Programmers might refer to this map by its class. If I wanted to call a tornado, at Coney Crossroads, I might type something like, Map.createTornado("Coney Crossroads");

Now let's imagine a programmer wanted to provide a player with some individual powers. I wouldn't want to be so broad as to call the whole Player class as each player is an individual. I'd want to specify which individual player, something like lancerGuy99.upgradeWeapon();

We program little turtles to dance on the screen then we play with real robot cars. Learning how to program is an awesome time. I love my job.

Acceptable Layer of Abstraction

For the people that say "I'm not good with computers"

Computer Science may be intimidating but like any other field of study, you don't have to learn it all at once. We're skipping so much in this class. Don't worry about it. You'll have enough tools to figure out if you want to invest the time to learn the deeper, more challenging (and more powerful) stuff.

You need to know about the pieces, even if you don't know exactly how they work.

In order to understand basic computer programming, you will need to understand some of the components in your computer. If you understand the basic shape of the environment, the behavior of programming languages will have better context. You won't need to understand exactly how a processor works, but you'll need to know roughly how it fits into the picture so you can solve some common problems.

Links and Resources

Software

Free Code Training

• Solid: https://sololearn.com

Expectations

Learning Targets

• I can describe how web pages are displayed on my browser using HTTP and HTML.

• I can create a basic HTML page.

Assignments

• You will construct an HTML page from scratch in a guided class activity.

• You will complete HTML and CSS courses on codecademy.com

World Wide Web

Tim Berners-Lee

The "Internet" we think of is primarily the contents of our web browser. Trying to find information by tediously scanning film after film was not fun. People like Tim Berners-Lee wanted to link text together. So touching one word might connect you to relevant information without having to manually search for hours.

HTTP sends HTML

HyperText Transfer Protocol is a set of rules to pass information (like the HTML layout of a web page) over a network. HTML is a markup language. It describes the structure and content of a page. So when you type in an web address like google.com into your browser, you're sending a GET request to the Google server. It responds with an HTML package that your browser renders into a familiar display.

Structure of HTML

Tags and Elements

A tag looks like this: <tag> </tag> The stuff that's between the opening <tag> and the closing </tag> is what's inside that element. The first and most important element in a web page is a hypertext link. If I wanted to make a link that went to Google.com, it would look like this: <a href="google.com">this is my link</a>

The term tag describes the structure of the <opening> and </closing>. The element is what type of object is being built by the tag, (an a is a hyperlink). The contents of an element is whatever is between the open and closing tag of an element. The property="value" pair that goes inside of an HTML tag is called an attribute.

Page Structure

Every web page has to have a <!DOCTYPE html> at the very start to tell your browser that yes, this block of text is HTML and it should render it into a display. The <html> element does something very similar. Every page you've ever seen online has been the contents of an HTML tag.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <head> element isn't seen by the user. The contents of the head allow you to connect other resources to the page, such as fonts or CSS.

CSS is HTML's Sidekick

CSS has its own style rules. But you drop it into an HTML head like any other HTML, <style> css goes here </style>. You can put the CSS in the HTML file, but the better way is to keep your CSS in a separate file. In that case, you use a <link> element instead to connect the .css file.

Practice

Additional Training

Review the concepts:

Get your speed up:

Watch Videos:

Going Pro:

Learning Targets

• I can describe what it means to be an object-oriented programmer.

• I can describe the difference between values and references.

• I can build unit tests to check every method in my class definition.

Class Vocab

Object-Oriented Programming

Why don't we list all of our code in one long file? How do we start to organize big projects? We start with objects. Already we've been using a class with a main method as its starting point. All of our methods have been static. What if we wanted to make a game with a lot of monsters? We can define our own Monster class and create as many instances of that object as we need in the game. We can't use static methods anymore as a result.

Let's try out a simple game in class using while-true loop and a Monster.

Encapsulation

Keep your data private, accessible only to methods that allow for more careful controls.

Primitives and Refs

import java.util.ArrayList;

public class Practice {

	public static void main(String[] args) {
		
		// create a primitive
		int myPrimitive = 5;
		// pass it by value to a method that adds one to the item.

		addOne(myPrimitive);
		// print the unchanged value of the primitive
		System.out.println("Primitive: " + myPrimitive);
		
		// instantiate a list and store the reference to it in myRef
		ArrayList<Integer> myRef = new ArrayList<>();
		// add the value 5 to a new Integer 
		myRef.add(5);
		// pass it by reference to a method that adds one to the first element in the list
		addOne(myRef);
		// print what's now in the first spot of the object that was passed by reference
		System.out.println("Reference: " + myRef.get(0));
		
	} // closes main
	
	public static void addOne(ArrayList x) {
		// get the current value of the first item in the list, convert to int
		int current = (int)x.get(0);
		// set the first item's value to one more than its current
		x.set(0, ++current);
	}
	
	public static void addOne(int x) {
		++x;
	}

} // closes the class
	

Intro to ArrayLists

ArrayLists are introduced in this section because they're objects themselves. They illustrate some of the differences we see when working with objects. Instead of arrays when we can access an element just by printing someCollection[x], we now need to use someOtherCollection.get(x). Let's get into these differences.

Different Kind of Loop

Because ArrayLists are only accessible through methods, you can use the same type of access[index] you can with an array. Here's what a simple traversal looks like with a good ol' array:

int[] myArray = {5, 10, 15, 20};
for(int x = 0; x < myArray.length; x++){
    System.out.println(myArray[x]);
}

Notice how I used length as a property not as an accessor method() and I accessed an element from the collection using [brackets]. Now let's take a look at an ArrayList:

List myList = new ArrayList<Integer>(); 
myList.add(5);  // I could loop and add all these
myList.add(10); 
myList.add(15);  
myList.add(20);  
for(int x = 0; x < myList.size(); x++){
    System.out.println(myList.get(x));
}

There's a couple important things happening above you should look closely at:

• Notice how I declared a List and then turned it into an ArrayList? It wouldn't have worked if I tried to do new List because a List is abstract. It's like mammal. You can tell the computer that you'd like to make a new mammal named x and it should run the new Dog() constructor. That's a polymorphic declaration. Use a general ancestor as a type and then be more specific during the constructor.

• If you look inside the ArrayList class programmed inside our Java library, you'll notice it has an array at its core. It's a wrapper for an array. So there is a .length property that's relevant to its internal, private programming. Every time you .add(something) to an ArrayList it destroys its old array and copies all the content to a new, longer array. So .length is serious business. Since that's occupied, we use the .size() accessor method to retrieve the length of an ArrayList.

SecureList: An Example

What's the point of creating our own objects? How does an ArrayList differ from an array in practical implementation? Let's go through an example project to help iIllustrate these concepts.

What is a SecureList?

SecureLists are made up. They're a silly object that provides an extra layer of "security" by storing your list of 12 names in two different objects, an array and an ArrayList. Does that actually provide additional security? No, not really. But let's pretend it does so you have an opportunity to work with an array and an ArrayList simultaneously.

Let's set up your project with the following files:

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

import java.util.Scanner;

public class App {
    
    // from a static method, we'll create instances of our made-up object
    public static void main(String[] args) throws Exception {
      
        System.out.println("Let's build a list of names to test.");
        Scanner s = new Scanner(System.in);
        
        // our example container
        String[] testList = new String[12];
        
        // build an example list to work with
        System.out.print("Would you like to enter names? (y/n): ");
        if(s.nextLine().equals("y")){
            // populate the array with names from user
            for(int x = 0; x < 12; x++){
                System.out.print("\nInsert name at index " + x + ": ");
                testList[x] = s.nextLine();
                System.out.println();
            }  
        } else {
            // populate the array with just numbers
            for(int x = 0; x < 12; x++){
                testList[x] = "Student #" + x;
            }  
        }        
       
        System.out.println("\n----- SecureList Unit Tests ------\n");
        
        // test the constructor
        SecureList test1 = new SecureList(testList);
        
        // test title mutator and accessor
        System.out.println("\nTITLE TEST: \n");
        test1.title("Demo"); // mutator 
        System.out.println(test1.title());  // accessor

        // implicitly call the .toString() method
        System.out.println("\nPRINT TEST: \n");
        System.out.println(test1);
        
        // draw a random name from the list
        System.out.println("\nGET RANDOM: \n");
        System.out.println(test1.getRandom());
        
        // check that each element in both collections match
        System.out.println("\nIS SECURE: \n");
        System.out.println(test1.isSecure()); // should print "true"
        
        // get the first name in the list
        System.out.println("\nGET STUDENT 0: \n");
        System.out.println(test1.getName(0));
        
        // get the first name in the list using the seat number not the index
        System.out.println("\nGET SEAT 1: \n");
        System.out.println(test1.getStudentBySeat(1));
        
        // randomize the order of the names
        System.out.println("\nSHUFFLE: \n");
        test1.shuffle();
        System.out.println(test1);
        
    }
}

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

import java.util.ArrayList;

/**
 * Doubles the protection of your data by storing your 12 names in both an array
 * and an ArrayList
 */
public class SecureList {
    
    // ENCAPSULATED INSTANCE VARIABLES
    // a var for the title String
    
    // uninitialized String Array
     
    // uninstantiated ArrayList typecast to String
    
    
    // -----------
    // CONSTRUCTORS
    // -----------
        
    /**
     * This is the basic constructor that initializes all the instance variables
     */
    public SecureList(){
        // create a blank title
        title = "";
        // create a blank array of Strings
        nameArray = new String[12];
        // instantiate an ArrayList and then loop and add 12 blank Strings
        nameList = new ArrayList<String>();        
        for(int i = 0; i < 12; i++) nameList.add("");
    }
    
    /**
     * Extracts names from an ArrayList to store in both class containers
     * @param nameList : starting names
     */
    public SecureList(ArrayList<String> nameList){
        // call the first constructor to setup the blank stuff
        this();
        
        // copy the data from the given list
        
    }
    
    /**
     * Extracts names from an array to store in both class containers
     * @param nameArray : starting names
     */
    public SecureList(String[] nameArray){
        // call the first constructor to setup the blank stuff
        this();
        
        // copy the data from the given array
    }
    
    // -----------
    // ACCESSORS
    // -----------
    
    /**
     * Accessor method for the title instance variable
     * @return this.title
     */
    public String title(){
    
    }
    
    /**
     * After checking that the names between the two strings
     * @param n : the zero-indexed location of the name
     * @return
     */
    public String getName(int n){
        // use the isSecure method to check n
        if(!isSecure(n)){
            System.out.println("NOT SECURE");
            return null;
        }
        
        // return the name in the index location of n
        
    }
    
    /**
     * Wrapper for the getName method that is NOT zero-indexed
     * @param s: Seat location
     * @return
     */
    public String getStudentBySeat(int s){
        
    }
    
    // -----------
    // MUTATORS
    // -----------
    
    /**
     * Modify this instance's title property
     * @param title : new label for this secure list object
     */
    public void title(String title){
    
    }
    
    /**
     * Change the name of both collections at a given index location
     * @param n : index location to target
     * @param name : new name value to set
     */
    public void changeName(int n, String name){
        
    }
    
    // -----------
    // UTILITIES
    // -----------
    
    /**
     * Checks if the given index location is a blank "" string
     * @param n : index location to check
     * @return : true if the index location had a length of zero
     */
    public boolean isEmpty(int n){
        
    }
    
    /**
     * Returns the comparision between the two Strings in the container at position n
     * @param n : the zero-indexed location in the collection to check
     * @return true if the two Strings .equal
     */
    public boolean isSecure(int n){
        
    }
    
    /**
     * Traverses the length of the collection and checks in location is secure.
     * If any is found insecure, it returns false
     * @return list integrity 
     */
    public boolean isSecure(){
        // loop
            // if insecure at that postion, return false
​
        // if you make it through the loop safely, return true
    }
    
    /**
     * Draws a random index location and returns the name at that location
     * @return : the String value at a random index location
     */
    public String getRandom(){
        // generate a random number from 0 up until but not including the length
        
        // return the call to the getName method
    }
    
    /**
     * Randomizes the location of all the Strings using the Selection Shuffle
     * algorithm 
     */
    public void shuffle(){
        
    }
    
    /**
     * Traverses name collection, printing the seat location followed
     * by the name
     */
    @Override
    public String toString(){
        
    }
    
}

I wanted to put our own spin on the Data lab from CollegeBoard for this project. Rather than just following the standard lab, we're going to analyze real-world video game sales data that will give you hands-on experience with classes, interfaces, and data processing in Java.

This project will give you practical experience with:

• Creating and using custom classes

• Working with interfaces

• Processing CSV data files

• Implementing search and analysis algorithms

• Visualizing data patterns

Activity 1: Getting Started

Our project requires two main Java classes:

• GameDataRow - Represents a single game record from our dataset

• GameDataManager - Handles loading and analyzing collections of game data

Let's start by looking at how to set up the GameDataRow class:

Understanding the Class Header and Interfaces

The class header public class GameDataRow implements Comparable<GameDataRow> has several important components:

1. public - This access modifier makes the class accessible from outside its package.

2. class GameDataRow - Defines a new class named GameDataRow.

3. implements Comparable<GameDataRow> - Indicates that this class implements the Comparable interface.

The Comparable Interface

The Comparable interface is part of the Java Collections Framework and enables objects of a class to be compared to each other. When a class implements Comparable, it must provide an implementation of the compareTo() method:

The compareTo() method must return:

• A negative value if this object should be ordered before the other object

• Zero if both objects are equal

• A positive value if this object should be ordered after the other object

In our implementation, we're sorting games by global sales in descending order (highest sales first).

Other Common Interfaces in Java

While we're only using Comparable in this project, here are other common interfaces you might encounter:

• Serializable - Marks a class as capable of being serialized (converted to a byte stream).

• Runnable - Used for classes whose instances will be executed by a thread.
• ActionListener - Used for handling action events, commonly in GUI applications.
• Iterable - Allows an object to be the target of the "for-each loop" statement.

Properties and Encapsulation

Now, let's determine what properties our GameDataRow class needs. Our CSV file contains 17 columns of data about each game, and we want to represent each data point as instance variables in our class.

Looking at the structure of our CSV file, we need to create properties that match each column:

Encapsulation Review

Remember that encapsulation is one of the four fundamental OOP concepts, along with inheritance, polymorphism, and abstraction. Encapsulation means bundling data and methods that operate on that data within a single unit (the class) and restricting direct access to some of the object's components.

Notice all our instance variables are marked as private. This is a key principle of encapsulation:

1. Private instance variables: By making our instance variables private, we prevent outside classes from directly accessing or modifying them.

2. Public accessor methods: We provide controlled access through getter methods (and sometimes setter methods).

3. Data validation: Through these methods, we can validate any changes to ensure they meet our requirements.

Good encapsulation ensures that the internal representation of an object can't be seen from outside the object's definition, which creates a "black box" effect.

Constructors

We need constructors to initialize our GameDataRow objects. A well-designed class should have multiple constructors to provide flexibility in object creation:

Notice I've included three constructors:

1. A primary constructor with all fields

2. A simplified constructor with only essential fields

3. A copy constructor to create a deep copy of an existing object

Accessor Methods (Getters)

Now we need accessor methods (getters) for all our instance variables. This is a perfect opportunity to use AI responsibly. Rather than typing out all these repetitive methods, you can ask Claude or an IDE's chatbot to generate them for you.

For example, you could say:

Please generate all the accessor methods for the GameDataRow class based on the instance variables.

This isn't plagiarism or cutting corners - it's using a tool to handle the tedious, repetitive aspects of coding so you can focus on the more challenging and creative aspects like designing algorithms and implementing the business logic.

Here's a snippet showing what a few of these accessor methods would look like:

Test-Driven Development

Let's talk about Test-Driven Development (TDD) - a software development approach where you write tests before writing the actual implementation code. This practice has been widely adopted by professional developers because it leads to more reliable, maintainable code.

In TDD, the process follows three simple steps, often called "Red-Green-Refactor":

1. Write a test that fails (Red)

2. Write the minimal code to make the test pass (Green)

3. Improve the code without changing its behavior (Refactor)

For our project, I've prepared a complete main method that serves as a test suite. It will systematically test all the required functionality of your GameDataRow class and tell you exactly what's missing or not working correctly.

Adding GameDataManager and Testing

Now that your GameDataRow class is complete, let's work with collections of games:

Activity 2: Building Methods

Now that we have our class structure and properties defined, it's time to add meaningful functionality to our GameDataRow class. To complete this class, you'll need to implement several methods that analyze game data in different ways.

I'm providing you with a few utility methods that handle some of the trickier aspects of parsing data from the CSV file, such as handling non-numeric user scores. Let's first look at these provided methods:

I'm giving you these methods because:

1. The hasUserReviews() and getUserScoreNumeric() methods handle data conversion and error checking that might be challenging

2. The toString() method is lengthy but straightforward, and implementing it wouldn't teach you much

Now, let's focus on the methods you need to implement:

Method 1: getAverageScore()

Return Type: float

This method calculates the average between critic and user scores. However, there's a challenge: critic scores are on a scale of 0-100, while user scores are on a scale of 0-10.

Requirements:

• Return a float representing the normalized average score on a scale of 0-10

• Normalize the critic score to a 0-10 scale by dividing by 10

• Handle cases where one or both scores are missing/invalid

• Return the appropriate average or individual score based on what's available

• Return 0.0f if no scores are available

Key Considerations:

• What constitutes an "available" score? (Hint: check for positive values)

• How do you handle the case where only one score type is available?

Hints:

You can paste this code into your method as a starting guide:

Method 2: getSalesPercentages()

Return Type: float[]

This method calculates what percentage of the global sales comes from each region (North America, Europe, Japan, and Other).

Requirements:

• Return an array of float values representing percentages for each region

• The array should have 4 elements, one for each region

• Use the defined constants (NA_REGION, EU_REGION, etc.) for array indices

• Handle the case where globalSales is zero to avoid division by zero

Key Considerations:

• The formula for calculating percentage is: (regional sales / global sales) * 100

• If globalSales is zero, return an array of zeros to avoid division by zero

Method 3: hasSalesData()

Return Type: boolean

This method determines whether the game has any sales data available.

Requirements:

• Return true if any sales data (regional or global) is available

• Return false if all sales fields are zero

Key Considerations:

• Check all sales fields (naSales, euSales, jpSales, otherSales, globalSales)

• Use logical OR operators to efficiently check multiple conditions

Method 4: hasCriticReviews()

Return Type: boolean

This method determines whether the game has critic review data available.

Requirements:

• Return true if the game has both a critic score and a count of critics

• Return false if either piece of information is missing or zero

Key Considerations:

• Both criticScore and criticCount should be positive values

Method 5: getDominantRegion()

Return Type: String

This method determines which region has the highest sales for this game.

Requirements:

• Compare sales across all regions and find the highest

• Return a string representing that region ("North America", "Europe", "Japan", or "Other")

• Handle ties by choosing the first region encountered with the maximum value

Key Considerations:

• You'll need to track the maximum sales value and the corresponding region

• You can use a switch statement to convert from region index to region name (see example below)

Method 6: getRegionalSales()

Return Type: float

This method returns the sales figures for a specific region.

Requirements:

• Accept an int parameter representing the region (use the class constants)

• Return the sales figure (as a float) for the specified region

• Handle all four possible regions: NA_REGION, EU_REGION, JP_REGION, OTHER_REGION

Key Considerations:

• Use a switch statement to select the appropriate sales figure based on the region parameter

Switch Statement Example

A switch statement allows you to select one of many code blocks to be executed. Here's how you might implement the getRegionalSales method using a switch statement:

The switch statement evaluates the regionIndex parameter and executes the code block that matches the case. The default case handles any values that don't match any specified cases.

Method 7: Implementation of Comparable

Return Type: int

You need to implement the compareTo method from the Comparable interface.

Requirements:

• Override the compareTo method to compare games based on global sales

• Higher sales should sort before lower sales (descending order)

• Return negative value if this game has higher sales than the other game

• Return positive value if this game has lower sales than the other game

• Return zero if both games have equal sales

Key Considerations:

• Remember that returning a negative value means "this" comes before "other" in the sorted order

Activity 3: Results

Let's add one final method to our GameDataRow class before moving on to working with collections of game data:

Understanding Static Variables and Methods

This method introduces an important concept in Java: static members. Unlike instance variables and methods that belong to specific objects, static members belong to the class itself.

Here's what you need to know:

• Static variables (like our gamesAnalyzed counter) are shared across all instances of a class. There's only one copy in memory, regardless of how many objects you create.

• Static methods operate at the class level rather than the instance level. They can be called using the class name without creating an object: GameDataRow.getGamesAnalyzed().

• Cannot use this in static context: Since static methods don't operate on a specific instance, you cannot use the this keyword inside them. There's no "current object" to reference! If you try to use this in a static method, you'll get a compiler error.

• Access limitations: Static methods can only directly access other static members (variables or methods). They cannot directly access instance variables or methods without referencing a specific object.

In our case, we're using the static variable gamesAnalyzed to track how many game objects have been created throughout our program's execution. Each constructor increments this counter, and our static method lets us retrieve the current count.

Creating Your Own Analysis

Now it's time to put your skills to work! Modify the GameDataManager.java file to add your own custom analysis of the video game data.

Add at least one new method to the GameDataManager class that performs an interesting analysis. Here are some ideas:

1. Year Analysis: Which year had the highest average game quality? Most releases?

2. Developer Success Rate: For developers with multiple games, which ones have the highest average scores?

3. Cross-Platform Analysis: Which games appeared on the most platforms? Do multi-platform games sell better?

4. Sales vs. Ratings Correlation: Do higher-rated games generally sell better? Is there a difference between critic and user ratings?

5. Genre Evolution: How have the popularity of different genres changed over time?

Once you've added your analysis method(s), modify the main method to call your new method and display the results.

Example Custom Analysis Method

Here's what your custom analysis might look like (don't just copy this - create your own!):

In the main method, you would add a call to your new analysis:

Requirements for Your Custom Analysis

Your analysis should:

• Process data from multiple games

• Use loops and conditionals appropriately

• Output meaningful results

• Include comments explaining your approach

• Handle edge cases (like missing data)

Activity 4: Recursion

In this final activity, you'll explore recursion - a powerful programming technique where a method calls itself to solve a problem by breaking it down into smaller instances of the same problem.

Understanding Recursion

Recursion is a fundamental concept in computer science that provides elegant solutions to certain types of problems. A recursive method has two essential components:

1. Base case(s): The simplest scenario(s) that can be solved directly without further recursion

2. Recursive case(s): Where the method calls itself with a simpler version of the problem

Let's examine a simple example - calculating the factorial of a number:

When calculating factorial(5):

1. The method first checks if n equals 0 or 1 (our base case) - it doesn't, so we move to the recursive case

2. It returns 5 * factorial(4)

3. Now it calculates factorial(4), which is 4 * factorial(3)

4. This continues until we reach factorial(1), which returns 1 (base case)

5. Then the recursion "unwinds": 1 * 2 * 3 * 4 * 5 = 120

Why Use Recursion?

Recursion offers several advantages:

1. Elegance: Recursive solutions can be concise and elegant for problems that would be complex to solve iteratively

2. Divide and conquer: Recursion naturally implements divide-and-conquer strategies, breaking down large data sets into smaller pieces

3. Tree traversal: For hierarchical data structures like trees, recursion provides a natural approach

4. Problem decomposition: Complex problems become simpler when broken into smaller, similar sub-problems

Implementing Recursion in Game Data Analysis

Looking at our GameDataManager class, several methods could benefit from a recursive approach. For example, finding games within a specific criteria could be implemented using a binary search algorithm rather than the current linear search.

Here's an example of how we could improve the findGamesByTitle method using a recursive binary search (assuming the games list is sorted by title):

The recursive binary search has a time complexity of O(log n), which is much more efficient than the O(n) time complexity of linear search, especially with large datasets.

Another example would be implementing a recursive merge sort:

Your Task

1. Choose one method from your GameDataRow or GameDataManager class that could benefit from a recursive approach

2. Reimplement it using recursion

3. Test your implementation and compare it to the original approach

4. Document your findings: Was the recursive approach more elegant? More efficient? What challenges did you face?

Alternatively, you can implement a new recursive method that performs a complex analysis that would be difficult to do iteratively. Here are some ideas:

• Find the most profitable franchise (games with similar names) recursively

• Implement a recursive algorithm to categorize games into hierarchical genres (e.g., "RPG > Action RPG")

• Create a recursive method to find "hidden gems" - games with high ratings but low sales

Example: Recursive Method for Maximum Critic Score

Here's an example of how you might implement a recursive method to find the game with the highest critic score within a list of games:

This method uses a divide-and-conquer approach, recursively finding the maximum in each half of the list and then comparing the results. While this specific example might not be more efficient than a simple loop, it demonstrates the recursive pattern that can be applied to more complex problems.

Remember, not all problems are best solved with recursion. Some considerations:

• Recursion can lead to stack overflow errors with very large inputs

• Recursive solutions sometimes have higher memory usage

• Some problems have simpler iterative solutions

Expectations

Learning Targets

• I can create and view a blank Flask app.

Before we get into the structure and mechanics of our code, let’s build the most basic of Flask apps. It’ll help set some context as we then start to learn particular skills. It’s important that you start from scratch as it builds confidence knowing you can start from the ground-up.

Hello Flask

Let's look at the most simple possible Flask app.

Alternative

In case Repl.it isn't cooperating with your browser, here's a simple view of a basic "Hello Flask" app.

Challenge

Variables from a route

If I go to /hello/george, can you make the screen say, "Hello, George?" How do we pull a variable from the URL on that GET request?

Link to another page

Build another route and switch between two pages.

Basic templating

Use render_template

What's Missing?

If you can understand some of the elements that are missing from this simple example, you’ll have a greater appreciation for the core of our Flask app and the many components that we’re about to study.

No Templates and Few Routes

Our initial application, hello flask, had one singular route @app.route('/') which is very basic. Just a homepage, that’s it. On the other side, “Flaskinni” includes numerous routes so you see blog and account pages just to name a few. Each route in Flaskinni calls templates with method calls like render_template('index.html'). These are just as their name suggests, templates or outlines of the final HTML page a user sees. Templates are a big deal (⅓ of our whole MVT structure).

No Models or Database

In the Hello Flask application, there is no database or model schema being used. There are no objects like user, admin, blog post in the app. Also in the Hello Flask app, we had no database, but in Flaskinni there is a database, and a schema that shows how the database will be set up. Also in Flaskinni there is code that creates database tables and is able to send the data to the database in the format laid out by the schema.

No Interactivity

Our initial Hello Flask application had no interactivity whatsoever as illustrated by the one simple message that is sent to the user. Our app only responds to GET requests, never a POST request. In other words, the user is only getting static information and is never sending information back to the server or requesting more specific information. For example in the Flaskinni application a user can post a blog post or can request or a certain blog post.

Few Libraries

Libraries are expansion packs, they're files containing compiled code that allow the app to reference them later in other files. Libraries allow the app the run faster and have more capabilities. Instead of calling methods over and over while writing the app, the user can call the library file. The linking of libraries allows a file to gain the capabilities of the library module without having to define those methods again.