Workbook 1: Introduction (Pre-Graphics)

CS559 Spring 2021 Sample Solution - Workbook 1

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6.

This workbook is due on Monday, February 1, 2021

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 link.

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

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.

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.

You are required to edit the README.md file (see the Workbooks page), so you might as well put your name, GitHub ID, and WiscID into the file now. You could commit those changes and push them back to GitHub just for practice (see the Git and GitHub in CS559 page if you don’t understand commit and push).

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 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:

  • You should look at the Course Web in general, but particularly all the pages discussed on the Getting Started. I’ve already said that multiple times.
  • Some resources on HTML and CSS (if you aren’t already familiar). You just need to know the basics. The Mozilla HTML Learning Guide site is a great resource.
  • If you don’t understand how we are using colors (like why #FF0000 is red), have a look at the CS559 Color Tutorial.
  • If you are learning JavaScript, look at the resources on the Javascript in CS559 page.

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

Due Date and Rubric

This workbook, like all workbooks is due on Monday (February 1, 2021 for the Spring 2021). Usually, workbook deadlines are strict. For this workbook, we understand that people may have problems with the mechanics, and there will be some leniency.

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

All workbooks are graded on a 100 point scale. (90=A, 85=AB, etc).

Note that this workbook does not have many bonus points. It’s very basic, so it doesn’t make sense to award students an A for excellent work on something so simple. You’ll have plenty of opportunities to earn bonus points so you can get an A throughout the semester.

Getting Started

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

Rubric

Detailed Rubric

Regular Points:

  • (Box: none) (40 pts) correctly turning something in (committing changes and pushing it back to GitHub)
  • (Box: none) (10 pts) did handin quiz
  • (Box: 01-01-01) (2 pts) change web page text
  • (Box: 01-03-02) (2 pts) change text on button press
  • (Box: 01-04-07) (2 pts) add a javascript file that says something
  • (Box: 01-06-01) (2 pts) making 3 sliders
  • (Box: 01-06-01) (3 pts) making slider3 be slider2-slider1 (and update when either slider2 or slider1 is moved)
  • (Box: 01-06-01) (3 pts) adjusting slider1 and slider2 when slider3 moves
  • (Box: 01-06-02) (2 pts) making the 3 input elements
  • (Box: 01-06-02) (2 pts) making the slider move (continuously) when start is pressed
  • (Box: 01-06-02) (2 pts) making the slider stop when the stop button is pressed
  • (Box: 01-06-02) (2 pts) making the slider starting again when the start button is pressed (after being stopped)
  • (Box: 01-06-03) (2 pts) slider goes forward
  • (Box: 01-06-03) (2 pts) slider goes backward
  • (Box: 01-06-03) (3 pts) slider goes back and forth
  • (Box: 01-06-04) (3 pts) fade between colors
  • (Box: 01-06-04) (3 pts) colors transition in both directions (red->white, white->red - or others)

Regular Points: 85

Bonus Points:

  • (Box: 01-06-04) (3 pts) transition between multiple colors

Bonus Points Possible: 3.

Get started on Page  1  (HTML and CS559)!