Workbook 1: Introduction (Pre-Graphics)

CS559 Spring 2022 Sample Solution

This is a sample solution for the Workbook. You are welcome to refer to it to learn one way to do the assignment but only after you have turned in your own assignment

Learning Goals

  1. Understand and use the class mechanics (GitHub classroom links, Git, local servers, editing pages, …)
  2. Understand the organization of workbooks for the class (looking at pages, boxes, editing and adding things, turning things in)
  3. Review basic HTML that you will need for class
  4. Practice basic JavaScript and understand how to attach programs to web pages
  5. Make interactions and animations with JavaScript web pages
  6. Differentiate and use event-driven- and animation-loop-driven- programming
  7. Understand how to control timing with browser animation loops

Introduction

Welcome to the first workbook for CS559!

The right way to use this workbook, and any of the following ones, is to:

  1. Clone the workbook from GitHub
  2. Serve the folder using a local server
  3. Start by looking at the index.html file in the web browser
  4. Follow the instructions
  5. While working, you’ll change files (generally only ones in the for_students directory)
  6. As you make changes, you should periodically commit them to GIT so you have a backup. You can push them to GitHub as well.
  7. When you are done, make sure everything it committed and pushed, then do the Quiz on Canvas Workbook 01 Handin (due Mon, Jan 30).

The fact that you are looking at this means you probably have done the first three of those steps!

You probably want to do all this with Visual Studio Code and the Live Server extension. Open the workbook directory in VSCode and start LiveServer (it should know to open the index page in your browser)/

If you haven’t already read the general instructions for workbooks, see the Workbooks page on the course web site. It explains some of the things that you have to do.

Note: this workbook is a little wordier and more “make sure you know how to do things” than future ones are likely to be. This workbook is to make sure you are ready to do programming. Later ones will be more about doing some programming.

In the future, we’ll be doing graphics programming. This workbook is about making sure you are ready! Future workbooks will have you do more programming, and less plain reading.

Local Server Check

You should always “run” the web pages served by a local server. See the Tools for 559 page for more information. Using a local server requires both running the server and having the web browser look at the server. If you don’t use a local server (and instead you just open the file in the web browser), problems can happen.

We have no way to check if you are using a local server. Some of the web pages will break in weird ways. Look at the URL bar in your browser: if this page says “http://127.0.0.1:5500/” or “http://localhost:5500/” or something similar, you are using a local server. If the URL starts with “file:” or something like that, you are not using a local server.

Make sure that you know how to use a local server. That’s a goal of this assignment - we will need it for future assignments. Re-read the Tools for 559 page, and ask for help, if you need it.

What you should do with this workbook

If you haven’t already done it, please review the pages on the Course Website. The Getting Started page is a good place to get started. You should do everything there. The fact that you found this workbook and got this far means you’ve done at least some reading.

The Workbooks page on the course web explains the workbooks in details, including the content, how you turn them in, what you should do with them, how they are graded, and the late policy. But the Workbooks was part of Getting Started, so hopefully you have read it.

Workbooks consist of a series of pages. There is always an “index” page (what you are reading). This is where you start. Then there is a series of “regular” pages for you to read. These will be numbered, and they will be linked together (so each one will lead to the next). You can see the list of pages in the “navigation” box (which should be in the upper right corner, unless your screen is too small). These pages will be in the docs directory of the workbook. You are welcome to look at the html for these files, but you generally don’t have to.

The workbook pages will contain “boxes”. These boxes contain examples that you should look at. Some of them you will just need to read (you will read code in order to learn how it works). Often, you will be asked to change the contents of these boxes. The contents of the boxes will be in the for_students directory. You should avoid changing files that are outside of the for_students directory. If you change a file (in the for_students directory) you need to commit these changes and push them back to GitHub for us to see the changes (see the Git and GitHub in CS559 page if you don’t understand commit and push).

Sometimes, we will ask you to add files to a workbook. When you add a file, put it into the for_students directory (or a subdirectory of it). Don’t forget to use git add to add the file to the repository so you can commit and push it to GitHub. You will need to add files for this workbook for one of the boxes.

You should work through the pages and their boxes in order.

And when you’re done, don’t forget to commit your work and push it back to the GitHub repo that GitHub classroom made for you!

Readings

The pages of this workbook are required reading! That includes reading the web pages, but also, reading the source code of the boxes. (the pages will tell you which files you should read)

Other readings are sprinkled across the pages of this workbook. Some things that you should make sure that you read along the way:

For this week, there are no regular readings (book chapters). Those will start in the next week or two.

Due Date, Grading and Rubric

This workbook, like all workbooks is due on Monday. Monday means anytime Monday (12:01am Tuesday is not Monday). Usually, workbook deadlines are strict. For this workbook, we understand that people may have problems with the mechanics, and there will be some leniency. Look for announcements on Canvas.

Don’t forget: to hand in this workbook you must both turn it in via GitHub (commit your work and push it to GitHub), but also complete the handin survey on Canvas: Workbook 01 Handin (due Mon, Jan 30). The graders will not know your assignment is ready until you complete the survey! (it is also worth points for the workbook).

Please Figure out how to do workbooks now - we have many more this semester. It is important that you can keep up with the schedule.

All workbooks are graded with points, not percentages. The scale is described at Grading explanation, but basically >=90 is an A, >= 85 (but less than 90) is an AB, etc. 86 points (which is >= 85, but <90) is an AB - it doesn’t matter if the workbook has 120 or 91 points possible.

You can see a rubric for the entire workbook at the bottom of this page. Notice that this workbook only has 91 points possible. That is the maximum you can score. There is no way to earn an A+ on this workbook. Some pther workbooks have more than 100 points possible.

You should also notice that this workbook has both basic and adavanced points. Advanced points are more work to get (per point) - focus on getting the basic points first. It is difficult to make up for missing basic things by getting advanced points.

You cannot earn advanced points for workbooks that you turn in late. If you fall behind, you are better off finishing the basic points and moving on to the next thing in class (otherwise, you will fall behind farther). We drop the lowest 2 workbook scores (but only for workbooks that you score 65 or more points).

Getting Started

OK, enough talking about how to do the assignment, let’s get started on Page  1  (HTML and CS559)

Rubric

Workbook Rubric (91 points total)
Points (85):
40 pt
for the handin survey (generally, you get the points for doing it)
Box 01-01-01
2 pt
change web page text
Box 01-02-08
2 pt
make a red button with your name in it
Box 01-03-02
2 pt
change text on button press
Box 01-04-07
3 pt
add a javascript file that says something
Box 01-05-04b
3 pt
change slider speed to half
Box 01-06-01
2 pt
making 3 sliders
Box 01-06-01
3 pt
making slider3 be slider2-slider1 (and update when either slider2 or slider1 is moved)
Box 01-06-01
3 pt
adjusting slider1 and slider2 when slider3 moves
Box 01-06-02
2 pt
making the 3 input elements
Box 01-06-02
2 pt
making the slider move (continuously) when start is pressed
Box 01-06-02
2 pt
making the slider stop when the stop button is pressed
Box 01-06-02
2 pt
making the slider starting again when the start button is pressed (after being stopped)
Box 01-06-03
2 pt
correct use of time delta
Box 01-06-03
2 pt
slider goes forward
Box 01-06-03
2 pt
slider goes backward
Box 01-06-03
3 pt
slider goes back and forth
Box 01-06-04
2 pt
correct use of time delta
Box 01-06-04
3 pt
fade between colors
Box 01-06-04
3 pt
colors transition in both directions (red->white, white->red - or others)
Advanced points (10 possible, of which you can earn a maximum of 6):
Box 01-07-01
3 pt
fade between 3 different colors
Box 01-07-02
3 pt
buttons to cause fade to 3 colors
Box 01-07-03
2 pt
randomly change between colors with timing
Box 01-07-03
2 pt
put selected colors into the sequence

Get started on Page  1  (HTML and CS559)!