Digital Media 2

ATLS 3020 - Spring 2015

Weekly Schedule

Week 1

Wednesday, January 12: Class Introduction

Topic

Introduction to the course. Refresh: Layers of a website & How the internet works.
Slides

Homework

Wednesday, January 14: Responsive web design

Topic

Introduction to responsive webdesign and media queries. Practice changing webpages from a static layout to a fluid layout. Then add media queries to the layout to make it responsive to different types of devices (computer, tablet, phone).
Slides

Starter Code

Homework

Lab 1

Create a web page that uses responsive web design principles. Your page must have at least 5 elements (divs with different classes, paragraphs, images, etc) and at least two media queries (tablet and phone). All of the elements do not have to change with each type of media query, but each of the 5 element must change at least once.

Your labs will be due once you have your portal complete.

Week 2

Monday, January 19: No Class

Wednesday, January 21: Intro to Javascript

Topic

Introduction to javascript. Practice writing scripts that use outputs, variables, comments, and inputs.
Slides

Outputs Example Download Code
Variables Example Download Code
Comments Example Download Code
Inputs Example Download Code
Homework

Lab 2

Write a webpage that asks the user for their first name and last name. Use their input data to write a message back to them.

Your webpage should include:
  • both types of outputs (dialog box and printed directly to HTML)
  • at least one single-line comment and one multi-line comment
  • at least two "prompts"
  • at least two variables (your "prompts" should be stored with different variables)

You can write your javascript directly on the HTML page or you can include a javascript file, your choice.

Due Today

Portal plan today Email me the link to your portal before the start of class.

Week 3

Monday, January 26: War Games! Javascript Arrays

Topic

Introduction to arrays!! We learn how to create arrays, add and remove elements, and select random elements.
Slides

Homework

Lab 3

Create an array that represents a deck of cards.
Print the "deck".

Select the first "card".
Add the card to a second deck.
Print the value of the card.
Remove the card from the deck.
Repeat 5 times.

Print the first deck.
Print the second deck.

Wednesday, January 28: War Games! Javascript Conditionals

Topic

Intro to conditionals (if-else statements). We work through how to create if statements and contuine working on the game.
Slides

Homework

Lab 4

We will start playing the card game War!

1. Download the starter code from the class website

2. Find the first card in for player 1's deck and the first card in player 2's deck. Print the values of these cards.

3. Remove the cards from both of the player's decks. Compare the two cards together.

  • If player 1 has the higher card, print that player 1 won the round, and add both cards (using "push") to player 1's deck
  • If player 2 has the higher card, print that player 2 won the round, and add both cards (using "push") to player 2's deck
  • If the cards are equal, print that the players are going to war! Then add both cards to player 1's deck (no, this isn't a fair game)

4. Play one more round. (Repeat steps 2-3 one more time).

Due Today

Portal due ON FRIDAY! Email me the link to your dm2 portal before 11:59 on Friday.

Week 4

Monday, February 2: War Games! Javascript Iteration

Topic

Intro to iteration: While Loops and For Loops. We will work through some examples of how to use these loops and eventually add these loops into the game
Slides

Homework

Lab 5

Continue playing the card game War!

1. Download the starter code from the class website

2. Write a for loop that will play 20 rounds of the game

2.5. Play a round: (This step is the same as in Lab 3) Remove the first cards from both of the player's decks. Compare the two cards together. Print each of the cards and print who won the round, then add the two cards to the winner's deck. (If it is war, print that the players are going to war and add both cards to player 1's deck).

3. Count how many cards each player has. Print the winner as the player with the most number of cards

4. (Extra credit) Write a while loop that will keep going until one of the players is out of cards.

4.5. Play a round of the game (same as above).

Due Today

Labs 1, 2, 3, and 4 due! Make sure all the labs are uploaded to your server and linked from your portal before the start of class.

Wednesday, February 4: War Games! Functions

Topic

Quiz #1 will be taken next Monday.

The quiz will be 30 minutes in-class, open note, book, internet, etc. You will have to write a program that follows a set of steps (much like the daily lab assignments). The quiz will cover topic such as: Input/Output, Creating arrays, deleting and adding elements from arrays, If-Else statements, For loops, and Functions

Project 1: Javascript Game will be due during week 6
Write a game in JavaScript. The game can be a guessing game, a calculation game, a quiz, or some other type of game. Be creative!

Project 1 Plan is due Monday, Feb 9
Your project plan should include the following:

  • description of your project
  • pseudocode for algorithms and program flow
  • visual design template or example
  • brief description of how you will test your project

Sample project plan

We covered functions in class.
Slides

Homework

Lab 6

Continue playing the card game War!

1. Copy your code from Lab 5

2. Create a new function that plays 1 round of the game. Copy your code from inside the for or while loop and put it inside of the function

3. Create a function that removes (with splice) the first cards from both player's decks

4. Create a function that prints the first cards of both player's decks

Week 5

Monday, February 9: Quiz 1

Topic

Quiz #1 at the beginning of class!!!

Quiz

Example Page -- Example Code

Due Today

Project 1 Plan due! Your plan for project 1 (javascript game) is due before the start of class.

Wednesday, February 11: Algorithms and Debugging

Topic

We introduce the idea of an algorithm and writting alrogithms for code. Then we go over what debugging is and give some tricks and hints at how to debug code. Finally, we will go over Quiz 1 from Monday.
Slides

Homework

Lab 7

Write 3 algorithms for your Project 1 javascript game.

  • General. What is your game going to do? What are the different steps involved? When does the game start, when does it end? Think about the entire game from start to finish.
  • Approximate. What will happen during each of these different steps? Think about what needs to happen before, during, and after each step. What will need to set-up before the step begins? What will the user be doing during the step? What will need to do after that step ends? Now is the time to think not only about what the user will be experiencing, but what you will need to code to make that interaction happen.
  • Precise. What kind of code do you need to build the before, during, and after of each step? Do you need a for loop, an if-else statement, an array, multiple variables? You do not need to write any code, but you need to think of what kind of code you will need. If you do not know what kind of code you will need, that is okay; you still need that step in your algorithm, and now you know what you need to learn. At this stage, each line of your algorithm should only represent one or two lines of code.

Week 6

Monday, February 16: DOM

Topic

Introduction to DOM and minupliating HTML elments through javascript.
Starter code for in-class lesson
Slides

Homework

Lab 8

1. Download the starter code from creative.colorado.edu/~kosba/dm2/tutorials/w6-1/lab8.zip

2. You will be editing the 3 functions at the bottom of lab8_js.js
function print_round(round_number)
function print_round_result(round_text)
function print_cards(p1_card, p2_card)

3. Create an HTML element on your HTML page that will contain the round number. In the "print_round" function, delete the document.write() function, and add a line of code that will rewrite the innerHTML your new HTML element, so that it will print what round it is.

4. Create an HTML element in your HTML page that will state the result of the round. In the "print_round_result" function, delete the document.write() function, and add a line of code that will rewrite the innerHTML of your new HTML element, so that it will print the result of the round.

5. Create 2 HTML elements that will show the cards that have been played this round. In the "print_cards" function, delete the document.write() functions, and add code that will show the value of the cards that each player has played.

Wednesday, February 18: Work Day

Due Today

Labs 5, 6, 7, and 8 due! Make sure all the labs are uploaded to your server and linked from your portal by the end of class.

Week 7

Monday, February 23: Project 1 Critique

Due Today

Project 1

If you do not present your project in class for critique, your project is due at the beginning of class.

If you present your project for a cirtique, your project is due by midnight Friday, along with the changes that were suggested in class.

Wednesday, February 25: HTML Events

Topic
Extra Resources
Homework

Lab 9

Add 4 events (of different types) to your webpage. These events can change the same element or different elements.

Week 8

Monday, March 2: Intro to jQuery

Topic

Start jQuery
Slides

Homework

Lab 10

  • 1. Create a webpage with a button. (This can be a div, button, image, or whatever you want, it just has to be clickable by the user). Put an id on that button.
  • 2. Access that button with a jQuery selector.
  • 3. Add a click event to that button. Inside of the click event, call a function
  • 4. Create a function (with the same name from step #3) that will change an element on the page (with a function, event, or effect).
  • 5. Repeat steps 1-4 five more times. Make sure you have created new buttons and functions each time. Each function can change the same element, but you much use different functions/events/effects for each function.

In the end you should have 6 buttons that, when clicked, make 6 different types of changes to your webpage.

Wednesday, March 4:

Topic
I'll be traveling out of state for a conference and will not be in town. So, I'm canceling our class meeting.

Week 9

Monday, March 9: HTML5 Canvas

Topic

Project 2: Javascript Animation will be due on Wednesday of Week 10.
Create an animation in HTML5, Javascript, and/or jQuery. This can be a stand alone animation or you can add it on to Project 1. Be creative!

Project 2 Plan is due Wednesday, March 11
Your project plan should include the following:

  • description of your project
  • pseudocode for algorithms and program flow
  • visual design template or example
  • brief description of how you will test your project

Sample project plan

Canvas graphics in HTML5
Slides
Starter code

Homework

Lab 11

Create a picture on the canvas. Your picture must contain these elements:

  • Objects
    • 5 rectangles
    • 2 paths
    • 2 arcs or circles
  • Fill/Stroke Color
    • 1 gradient filled object
    • 3 objects with different fill color
    • 3 object with different stroke color
  • Misc
    • 1 image that is clipped or scaled
    • 1 line of text

Wednesday, March 11: Animations

Homework

Lab 12

Copy your code from Lab 10 (6 buttons) into this lab.
Part 1:
Change the functions for 3 of your buttons. Using the animate function, make them animate the changes have.
Part 2:
Add another element to the page.
Add a function that will animate or somehow change this element using jQuery. Call this function in a "setInterval" timer.
Add a 7th button on the page. When this button is clicked, it will "clearInterval" of the function call from the step before.

Due Today

Project 2 Plan due! Your plan for project 2 (animation) is due before the start of class. Either email me a pdf of your final copy or upload and link it on your portal

Week 10

Monday, March 16: Work Day

Topic

Quiz #2 at the beginning of class!!!

Due Today

Labs 9, 10, 11, and 12 due! Make sure all the labs are uploaded to your server and linked from your portal by the end of class.

Wednesday, March 18: Project 2: Critique

Due Today

Project 2

If you do not present your project in class for critique, your project is due at the beginning of class.

If you present your project for a cirtique, your project is due by midnight Friday, along with the changes that were suggested in class.

Week 11

Monday, March 23: Spring Break

Wednesday, March 25: Spring Break

Week 12

Monday, March 30: PHP: Introduction

Topic

Learn the basics of PHP. We cover variables, output, if-else statements, for loops, and the new foreach loops.
Slides

Homework

Lab 13

Part 1
Create a simple PHP script that uses a variable and creates some output.
PHP scripts MUST run on the server.
They CANNOT be run using preview in browser.

Part 2
Add an array to your lab.
Write a loop that prints each value in the array. You can use a for or foreach loop, your choice.

Wednesday, April 1: Escape the Building

Topic

Start the "Escape the Building" Game

Link to the code we worked on in class (with comments)
If you want to save the download this html file, open the webpage, right click, click "View Page Source", then select all the code and copy it into your own file. Remember, we also added jQuery to the webpage as well.

Homework

Finish your "Escape the Building" Game. Your game should include:

  • 5-10 rooms that the player can travel to and from.
  • An exit or some marker that will show in the description that will notify the player when they have escaped the building.
  • A different description for each room. For example, you should write more than "You are in room 1".
  • Different descriptions for the different types of directions the player can move in. For example, if the player can only move north and south, tell them (example: "There is a door"). Also, make sure you tell the player that they cannot move in the other directions (example: "There is a brick wall").
  • Add some styling on the page. The description box and each of the direction boxes should not have the default browser styling.
  • Extra Credit: make the webpage's styling noticeably different for each of your rooms.

This will be due Monday before class. Please upload it to your projects section of your portal.

Week 13

Monday, April 6: Slideshow Pt. 1

Topic

Start the "Slideshow" Project. You should be done with part 1 and starting part 2 by the end of the day.

Homework

This project will be built in 4 parts. You will be required to finish all 4 parts by next monday. Each part is designed to add more functionality to the slideshow. You do not have to add each of these features in this order, they can be interchangable (with the exception of the part 1, you have to do that one first).

Part 1: Images scrolling

  • create an image box on your help page that will hold the images
  • every few seconds change the image in the box
Hint 1: Store your images in an array
Javascript var images=["images/img1.jpg", "images/img2.jpg" . . .]
Hint 2: Change the images in your slideshow by changing the image source
Javascript $([[HTML image selector]]).attr("src", [[img src]])
Hint 3: Make your image change every few seconds by using the setInterval function
Javascript setInterval(function_name, time_in miliseconds)
function function name()
{
     [[code to change the image in the slideshow]]
}

Hint 4: Keep track of which image in your array is being shown by using a variable
Javascript var i = 1;
setInterval(function_name, time_in_miliseconds)
function function_name()
{
     [[code to change the image in the slideshow, use your array with an index of "i"]]
     if(i < number_of_pictures_in_slideshow)
          i++;
     else
          i = 0;
}

Part 2: Make it look good

  • changes the images so they are the same size
  • style the slideshow however you want (borders, backgrounds, etc)
Hint 1: Consistency
Slideshows work best if all the have the same dimensions as the "img" on the HTML page

Part 3: Add text captions

  • on top of the image have a div that will hold a caption
  • make the caption change with every image
  • style the captions, make sure they are aesthetically pleasing and match with the slideshow
Hint 1: HTML
Add a div in your HTML that will hold the caption for that image. You will replace the text within this div for every picture. (Just like in the "Escape the building" game).

Hint 2: Javascript
Store the captions just like you are storing the images (use an array). Then think about how and where in your code you are changing the image. (You will want to change the captions in a similar place).

Part 4: Pause on hover

  • when the user hovers over the slideshow the timer pauses and that image/caption stays the same
  • on hover out, the timer starts the slideshow again
Hint 1: Create a hover event
We've never used hover events much in class, but you can create hover events just like you've been creating click events. First, in jQuery, select the element you want to be hovering over, then add a hover class to it. You'll then want to create a function that will be run when that element is hovered over. Inside of this function, you will want to "pause" the timer.

Hint 2: "Pause" the timer
We covered how to clear an interval when we covered jQuery Animations (week 9). Inside of the pause function, you will want to "clearInterval". I've been saying this "pauses" the timer, but really it "clears" it, or deletes it altogether. However, we can "restart" or "recreate" the timer in a later step.
Remember, the clearInterval function needs a variable to work (the variable inside of the parenthesis). Have you created a variable for your setInterval timer yet? Probably not, you'll need to create one for this function to work.

Hint 3: Create a mouseout event
Just like you did with the hover event, you also need an event that will detect when the mouse has moused out of the image. You will need to create the "mouseout" event, and that event will call a function that will "researt" the slideshow

Hint 4: "Restart" the timer
You will need to create a function that will "restart" the timer. If you used the "clearInterval" function, then the timer has been deleted and you will need to recreate it. This is 1 line of code, and you have already written it once in your code, think about how you "created" the timer before. You will need to "create" the timer in the exact same way again.

Part 5 (extra credit): Create prev/next buttons

  • create previous and next buttons on your slideshow (make sure they are consistant with the rest of the slideshow's styling)
  • write code, so that when either button is clicked, the image on the slideshow immeditately goes to the next or last image

Part 6 (extra credit): Animate the transitions of the images

  • use some form of animation (slide, fade, etc) to transition between the images in your slideshow

Wednesday, April 8: Slideshow Pt. 2

Topic

Contuine building your shideshow.

Homework

Your slideshow will be due on Monday, April 13, before class. I will be grading this project with the same project rubric that has been used since Project 2:
25% Concept
25% Aesthetics
25% Creativity
25% Technicality

Week 14

Monday, April 13: GPA Calculator Pt. 1

Topic

Start the "GPA Calculator" Project. This will take up to 5 classes, their names, their grades, and the number of credit hours the classes were, and calculates your GPA after taking these classes.

Homework

This project will be built in 5 parts. You will be required to finish all 4 parts by next monday. Each part is designed to to build on itself and add more functionality. I would recommend doing each parts n order (with the exception of the 5th part, which you can do at any time).

 

Part 1: Get 2 fields working.

  • Have at least 2 text inputs on the webpage
  • When you click the "calculate" button, the jQuery will get the values of the text inputs and calculate your GPA.
  • The jQuery will then display your GPA on the webpage
Hint 1: Convert strings to floats (numbers the decimals)
Remember, there are different types of data. We've talked about strings and numbers before, but there are actually more than just that. There can be many type of numbers in javascript, and in this project we'll be using a new type: floats. Floats, or floating point numbers, are like integers, but have decimals.

When you first get the value of the grades from the text inputs, they will be stored as strings. (You can see this in the HTML, when the input says input type="text".) After you get the values of the inputs, you will need to convert those strings to floats. YOu can use the "parseFloat" function like this:
HTML <input type="text" id="grade1"> Javascript var grade1_string;
grade1_string = $("#grade1").val();
var grade1_float;
grade1_float = parseFloat(grade1_string);

 

Part 2: Get 5 fields working.

  • Have at least 5 text inputs on the webpage
  • When you click the "calculate" button, the jQuery will get the values for all of the text inputs and calculate your GPA.
  • The jQuery will then display your GPA on the webpage
  • This function should work no matter how many classes' grades have been entered. So, if you only enter 3 classes' grades, it will calculate the GPA of those three classes (not adding in the grades of the missing classes too)
Hint 1: Use another way to store the data
In the example code from part 1, I used variables to store the data, which worked well; however, in this part, you will be dealing with more inputs. So, what can you use that can store a lot of data? ARRAYS!! Instead of storing each of your class grades in variables, add them to an array (by using the "push" function). Then when you want to calculate the average, you have to add all the elements in the array and divide my the number of elements in the array.

Here is a javascript function that will add all the elemnts in an array:
Javascript var array;
array = [1, 2, 3, 4, 5];
var sum;
sum = 0;
for(var i=0; i<array.length; i++)
{
     sum = sum + array[i];
}
alert(sum);     // This will alert the value 15

Hint 2: Check if the input is empty
When you are entering the grades, some of the classes might be empty (what if someone has only taken 4 classes and not 5?). BEFORE you add the values to your array, you will need to check if the values are empty. Here is an exampe of code that checks if a value is empty before adding it to the array:
Javascript var v1, v2, v3;
var array = [];
if($("#input1").val().length != 0) {
     v1 = $("#input1").val();
     array.push(v1);
}
if($("#input2").val().length != 0) {
     v2 = $("#input2").val();
     array.push(v2);
}
if($("#input3").val().length != 0) {
     v3 = $("#input3").val();
     array.push(v3);
}

 

Part 3: Get letter grades working.

  • Instead of entering the numeric grade, you wil be able to enter a letter grade for each class
  • The jQuery will get the values of the text inputs
  • Then jQuery will and then convert the letters grades to numeric grades
  • Calculate the GPA and show it on the webpage
Hint 1: Create a function that will convert letter grades to numeric grades
When you get the values of the each of the class grades, use that function to convert that variable from a letter grade to a numeric grade.

You will need to use a return on the function. For example:
Javascript var a;
a = 5;
a = multiply_by_2(a);

//This takes in a paramater called "number" - we are sending this function information
function multiply_by_2(number)
{
     var new_number;
     new_number = number * 2;
     // this function is returning data - it is sending data back to where it was first called
     return new_number;
}
alert(a);     // This will alert the value 10
Hint 2: Here is the code we used in class
Javascript $("button").click(calc_gpa);
function calc_gpa() {
     // get input #1
     // get value from input
     // convert to number --- Example: input1 = convert_letter_to_num(input1)
     // convert to float
     // push value to array
     // get input #2 . . .
}

function convert_letter_to_num(letter) {
     if (letter == "a") {
           return 4;
     }
     else if (letter == "a-") {
           return 3.7;
     }
     else if (letter == "b+") {
           return 3.3;
     }
     . . . . . .
}

 

Part 4: Get credit hours working.

  • Add text inputs for the number of credit hours
  • Calculate the weighted GPA with the number of credit hours and show it on the webpage
Hint 1: Store the credit hours
Just like you have stored the grades, you will need to store the credit hours for each class too.

There are a few things you should think about for this step:
  • 1. How will you store the values? You used an array to store the grades before, so it would make sense to store the credit hours in a similar way. (Remember to create a separate array, you do not want to be mixing different types of data).
  • 2. Think about where you will write the line of code to store the credit hours. Do you want to store the credit hours if the the input is empty? Probably not.
  • 3. After you get the value from the input, what type of data will it be stored as. What type of data do you need? Do you need to convert the inptut data to another data type?

Hint 2: How to calculate weighted GPA with credit hours
Remember, when you are calculating a weighted GPA, you need to multiple each class's numeric grade by the number of credit hours that class has, then add all those scores togethers, and finally divide my the total number of credit hours.

So if you have 3 classes with numeric grades saved as c1_grade, c2_grade, c3_grade, and the credit hours saved as c1_hours, c2_hours, and c3_hours, your equation to calculate the gpa will this:

Weighted GPA Equation ( (c1_grade * c1_hours) + (c2_grade * c2_hours) + (c3_grade * c3_hours) ) /
(c1_hours + c2_hours + c3_hours)

Hint 3: How to do this with an array
So you do not have individual variables with the grade and score for each class, you have an array, so how can you calculate the weighted gpa with an array? According to the equation above, you will need to multiply each class' grade by the number of credit hours. To do this you will need to access the individual values of the each array. Once data is stored in an array, how can we access it again? We can use a loop to look at each value from the grades array and the credit hours array.

We can modify the for loop we had before to calcaulte the sum of the (grades * credit hours) instead of just the sum of all the grades. Here is what that code would look like:
Javascript var weighted_sum = 0;
for(var i=0; i<grades.length; i++)
{
     weighted_sum = weighted_sum + (grades[i] * credit_hours[i]);
}

 

Part 5: Make it look good.

  • Add some styling to the webpage, so it does not look like a default HTML page
  • You might want to try styling the buttons and the text inputs if you haven't tried doing that before.

Wednesday, April 15: GPA Calulator Pt. 2

Topic

Contuine building your GPA calculator.

Homework

Contuine building your GPA calculator.

Week 15

Monday, April 20: GPA Calulator Pt. 3

Topic

Contuine building your GPA calculator.

Homework

Your GPA calculator will be due on Wednesday, April 22, before class. I will be grading this project with the same project rubric that has been used since Project 2:
25% Concept
25% Aesthetics
25% Creativity
25% Technicality

Wednesday, April 22: Work Day

Week 16

Monday, April 27: Work Day

Wednesday, April 29: Work Day

Updates

The "GPA Calculator" is due on Wednesday, April 22 before class. Details on what your game should include are under Week 14 of the schedule page.

Apr 15

The "Escape the Building Game" is due on Monday, April 6 before class. Details on what your game should include are under Week 12 of the schedule page.

Apr 1

The Project 1 Plan is due on Monday, Feb 9. Details on what to include in the plan are on the projects page and under Week 4 of the schedule page.

Feb 4

The portal deadline has been extended until Friday, Jan 30 at 11:59. Email me the link to your portal before then.

Office Hours from Tuesday have been rescheduled to Friday from 11-1.

Jan 28

First pass of your portal is due Wednesday, Jan 28!! It doesn't have to be completely finished, but it must include all of the required pieces from the portal plan.

Extra credit is available if you attend Lucy Sander's talk at the ATLAS Speaker Series this Wed, Jan 15 and write a 2-page reaction.

Jan 23

Homework from Wednesday: Lab 1 (due Feb 2) and Portal Plan (due Jan 21).

Jan 14

Welcome to the class!

Jan 12