Exercises

These exercises are provided to help you practice with the important concepts in a controlled way but submission is not required.

You are encouraged to

• explore JavaScript, and its effect on a page, using the Developer Tools with the debugger (to stop the page and step through the code!) and especially the JavaScript Console (for printing as well as interactively experimenting with code)
• collaborate with other students, in contrast to the assignments, to work out solutions to these exercises (as long as everyone understands the code developed)
• practice the basic GIT workflow commands (add, commit, and push) regularly after each "task" or "feature" you complete

Practice Styling a Web Page with CSS

For this exercise, explore the CSS options available to you to affect the visual style of the document's structure as defined by the HTML elements.

To get started understanding the structure of the provided HTML document, look at it both unstyled (try it both by interactively in the Developer Tools and finding and commenting out the line that links to file style.css). Then interactively explore the example style given by selecting different elements and hovering over them to see their positions, margins, borders, and paddings.

There are multiple ways to achieve the same or similar results in CSS. Experiment with different combinations of selectors (tag, id, class), alignments (left, right, center), and positioning (float, block, inline), to achieve different effects. Take advantage of the to inspect and interactively change styles to see their immediate affects (using large values helps to clearly see what happens).

• Add different fonts to the text in the page (either built-in or downloaded)
• Make the H3 headings have a background color and different text color
• Make the list with the id navbar list look more interesting that just a bulleted list, especially regarding the sizing and spacing using different units
• Style the text of the class interesting so that it is different in some way
• Whatever else you want to experiment with

Add your CSS styles by editing a separate file named style.css that is linked from the HTML file.

Practice JavaScript: Responding to events to autocheck a Quiz

For this exercise, explore the basic syntax and semantics of JavaScript and how to apply interactivity to a web page by calling JavaScript functions when events are generated by HTML elements.

Online quizzes are very popular both to "automate" education, to help people learn more about themselves, or even to figure out if you are in love. With JavaScript it is easy to build a site that can deliver a quiz about any subject you can imagine as well as score the results. This version will be very basic, but we will build on it over the next few weeks to parameterize it, add multiple questions, and track the results (including for multiple users).

The given code simply presents users with quiz questions as a simple list. Your task is to make it interactively check if the selected answer is correct by styling the chosen option appropriately. Only after all the questions have been answered, should the user get a report of the percent of correct responses. At any time, the user can reset the quiz and start over. For extra practice, you can prevent the user from changing their answer once a choice has been selected.

Practice adding JavaScript function calls directly within the HTML code as well as doing it programmatically within the JavaScript code; the semantics are slightly different so it is useful to know when to prefer which solution.

Add your JavaScript code by editing the code started for you in the file named main.js that is linked from the HTML file.

Practice JavaScript: Editing image pixels

For this exercise, instead of focusing on the document's structure and style (HTML and CSS), use JavaScript to computationally change images that are uploaded to the page. This means you will not need to edit the HTML or CSS files, but you will need to understand their contents to attach your JavaScript code to the events that can be generated.

Implement the green screen (also known as "chromakey") algorithm typically used in movies or news weather broadcasts to make the characters appear to be in a different location than they really are. It works by compositing a foreground image with a background image by replacing all the "green" pixels in the foreground image with the corresponding pixel from the background image. Green is the easiest color to match but you need to be a little forgiving in the amount of green you require since any real set has shadows or highlights so it is not a uniform shade of green. Of course, if you are too permissive, then you might match parts of the characters outfits making it appear like they are see through!

A basic version of the algorithm is fairly simple: combine the pixels from two images into one image by using the "greenness" of the foreground image to determine whether or not to use the background image pixel instead in the new image. Greenness can be difficult to determine, but the easiest way is to assume that pixels with a high green pixel value represent green (regardless of its red and blue values). That does not work in general, but it does in typical color images shot in front of a green screen. How high is a high green pixel value? That can differ for different green screens, but 240 is a good general estimate. As a bonus, you can make a version that lets the user dynamically set the green threshold (and even updates the resulting image dynamically --- for small images!).

Your JavaScript code should be initiated by events generated by HTML input DOM elements and use the HTML canvas DOM element (you will not need to learn its drawing API, it is just a place on your page to display the uploaded image) and the JavaScript SimpleImage class, documentation and code (which you do not need to understand or download locally to complete this project), to manipulate the individual pixels of the image. Use this example, running version and code, as a guide for your work.

The starting repository has some example images to start with but you can, of course, use your own images as well. You can even buy your own green screen so you can create your own green screen studio!

Add your JavaScript code by editing the code started for you in the file named main.js that is linked from the HTML file.