Spring 2017 – Week 6 Class Notes

Greetings students! We managed to pack a lot in this week, and I hope you all had as good of a time as I did. As always, email me if you get stuck or have questions.


This week we looked at animations using absolute positioning, as well as applying animations to arbitrary HTML elements. A few things to remember:

  • The CSS style “position: absolute” means that your element will be laid out on the current coordinate space somewhat independent of where it exists in your document.
  • The CSS style “position: relative” defines a new coordinate space for absolutely positioned elements (the default coordinate space being the whole document).
  • The CSS styles “left” and “top” are used to mark how many pixels from the left and from the top you are. “left” is like the x-coordinate. “top” is like the y-coordinate, except that it increases as it moves down. “left: 0px; top: 0px;” positions your element at the top-left corner of the coordinate space.
  • Remember that we can use function-creating-functions to create new local variable spaces which can store information so that it doesn’t have to be passed in a function.
  • The setTimeout function is used for animation. For the animation to work, it has to both move the things, and call setTimeout.

Since we didn’t have time for everyone to finish the movement app, the assignment this week will focus on typing that in. I have screenshotted the code (so you have to retype it, hahahahaha!). What I want you to do this week is:

  1. Type in the code for the app. The HTML is here. The JavaScript is here.
  2. If you have any problems with it, be sure to use your browser’s JavaScript console to see where the problem might be.
  3. After you get it working, see if you can create a function that can be attached to “onclick” methods of elements so that, if clicked, the element starts to move using this function.
  4. Create a page with at least three different elements that get onclick’s attached so that they can move like this.
  5. If you are really adventurous, try creating your own animation that you can apply when clicked. Even try animating something other than position. You can use this CSS reference to find CSS attributes you might want to animate.
  6. Electronics

    This week we took our knowledge of RC time circuits and applied them to oscillating circuits. We learned to use the NE555 timer, which continually charges and discharges a capacitor to measure the timing for its oscillations.

    This week, read chapter 20, which provides a more in-depth explanation of oscillator circuits. This chapter is a little more math heavy, but it is mostly just an extension of the RC time circuit calculations that we did in the last chapter.


    Many apologies to my calculus class for the numerous interruptions during class time, and for issues with the book last week.

    As we mentioned last week, we have done a lot of work and covered many topics this year. There are a few I want to revisit, but I also want to see how well you all do on other people’s calculus problems. Therefore, we are going to start looking at AP Calculus exams to see how well you are progressing.

    So, for this week, I want you to:

    1) Read chapter 22 (Advanced Uses of the Integral). There are no problems in this section, but you should work through the examples.

    2) Download the AP Calculus exam. Look through the AB exam (not the BC). Work through the problems you know how to do, and make note of which ones you don’t. We will bring these to class to discuss.

Leave a Reply

Your email address will not be published. Required fields are marked *