Comp Tech Advanced - Frankfurt International School - - 2016-17
Next Due Date :  Fake News Presentation - due 13 June 2017 at 18:00

Processing Reference (

Amazing Magic Tricks - 20-21 June 2017

Try searching for [Amazing Magic Tricks] into Youtube -
you will find some entertaining videos, like:

Fun Fake Photography

Real tricks based on Science

Real Magicians

CGI Movie Magic

See if you can find some other "magic" videos.
If you find good ones, upload your video URL into Haiku.

Chatbots and other AI - 19 June 2017

What is the Turing Test?

What is a Chatbot?  Which of these videos is better?  Why?

Try Cleverbot :

What is ELIZA?  Is it believable?  Which of these is best?

What about robots?  Are they intelligent?

What about Watson?  How intelligent is it?

Game Exploration - 14 June 2017

Watch this video featuring Jane McGonigal:

Gaming for a Better World

Today please test any or all of the following games.
While playing each game, ask yourself:

--> "Is this game bringing out the best in me?" <--

On that basis, decide whether you find each game good, bad or medium.


CIA World Exploration

Geo Guesser

Any of these Geography Games

Any of these Math Games

Any of these Brain Games

Fake News Project - 1-13 June 2017

*** Due Date : 13 June at 18:00 ***

== Assignment ==

Your assignment is to create a presentation about FAKE NEWS.

Product - You may create the presentation using any (or several) of the following tools:
-  Powerpoint
-  A web-page or web-site
-  a Word-processing document
-  a PDF document
-  a video
-  graphics editor
-  Scratch
-  Alice
-  Java
-  any online tool that you find useful
-  any other IT tool that you find useful

Use any of the skills that you learned in this class,
or any other skills you have from somewhere else.

what is it, how does it work, examples and counter-example,
     how to people create it, why does it work, any other related information
-  Why is it important?

Assume someone has asked you :  "What is fake news?"
Your presentation should be CLEAR, MEANINGFUL, INFORMATIVE,

Be creative.  Think of something that an uninformed person
would enjoy and learn something by viewing.

Requirement -
You must work together with one partner (a group of 2)
and produce a single project.

Your project must be finished and turned in to Haiku before 13 June 18:00.

You must create your project so that it is easy for the teacher to view it.
For example, don't use non-standard software like Pages.

If your project contains several different pieces, be sure that
it is easy for the teacher to find and open all the pieces. 

Make sure that your product will work on the teacher's computer -
not just on your own computer.  So test it on at least 2 computers.

Fake News - 29-31 May 2017

"What has happened to our language? The Oxford Dictionary’s Word of the Year for 2016 was post-truth, which they define as an adjective “relating to or denoting circumstances in which objective facts are less influential in shaping public opinion than appeals to emotion and personal belief.”"

Levitin, Daniel J.. Weaponized Lies Deluxe: How to Think Critically in the Post-Truth Era (p. xiii). Penguin Publishing Group. Kindle Edition.

=== Investigate ===

We are going to investigate the related phenomenon called FAKE NEWS.
Below are some useful links that might bring some enlightenment.

Finding Truth Among Lies

Where Fake News Comes From

Creepy Clown Conspiracy

How Fake News Grows

Moon Landing Conspiracy

Fact Checking the News

Is this fake news?

Finding Truth in a Post-truth world

The Future of Lying

History of Fake News - Fit to print?

How to Spot Fake News

Facebook : Tips to spot fake news

Fake Photos Quiz

Video Games Will Make Us Smarter

=== Project ===
Next class, you will receive specific details of what you are supposed to PRODUCE
at the end of this project.  Spend this class period INVESTIGATING the topic of FAKE NEWS.

Work in pairs - groups of 2 students.

Consider the following questions:

-  What is the difference (or similarity) between FAKE NEWS and the following:
    - A mistake
    - An advertisement
    - Propaganda
    - Exaggerations
    - Pseudo-science
    - Falsified data
    - Misunderstanding
    - Truth
    - Lies
    - Impartial journalism
    - Incomplete reporting
    - anything else that is similar to FAKE NEWS

-  Are there FAMOUS EXAMPLES of FAKE NEWS that fooled lots of people
   and had significant effects on society?

-  Are there specific people or organizations that create FAKE NEWS
   to achieve a specific purpose?

-  What IT and Computer Technologies have encouraged or increased
    the effectiveness of FAKE NEWS?  How does this happen?

-  Are there tools that are actually intended for
   the production of FAKE NEWS?
   -  Can you find such a tool and learn to use it?
   -  Can you create an example of a FAKE NEWS WEB-SITE that is
       effective and might fool someone?

-  Are there ANTI-FAKE-NEWS computer tools/systems
    that attempt to identify/prevent/destroy FAKE NEWS?
    - Can you install software on your computer that you can use
       to fight against FAKE NEWS?
    - If you create a sample FAKE NEWS WEB-SITE will this be
      detected by ANTI-FAKE-NEWS tools?

-  Is FAKE NEWS illegal?
   If so, under what circumstances can the author(s) be punished?
   And how would they be punished - how severely?

Fake Photos - 24-26 May 2017

== Brief Project - Decoration ==
Today and tomorrow, we will make some FUN FAKE FOTOS,
print them and hang them up to decorate the room.

PIZAP or FotoFlex make a funny picture, or
investigate some of the tools on this page:

How to make Fake Photo with Photoshop

== Printing ==

You need to print the pictures on the COLOUR PRINTER.

To do this, you must :
- go to the Atrium
- load your picture on one of the 3 Loaner MacBooks near the printers
- before printing, use Print Preview to check what it will look like,
   then make changes/adjustments if necessary - especially deciding
   whether to use PORTRAIT or LANDSCAPE mode
- send your picture to the Atrium Colour printer
- if the picture does not print soon, DO NOT send it again
  Instead, ask the technicians at the Tech Deck for help.

Screen-saver Assignment - 17-23 May 2017

=== Screen-saver Assignment ===

Download this sample Screen-saver program.
 A screen-saver is a program that has various shapes
 moving around the screen in an entertaining fashion.
 This sample program shows an example display.
 Notice that we can use the frameCount to choose
 between different "pages", so it's possible to
 make a variety of displays appear, one after another.
 Your assignment is to make a nice screen-saver
 program, with numerous different "pages", and
 lots of different objects and/or photos.
 Make the best display that you can in the available time.
 This program is due on Tuesday 23 May at 18:00.
 To turn in the program, you need to COMPRESS the folder
 and upload the resulting .zip archive into Haiku.

Screen-saver - 16 May 2017

The teacher will show how to use these commands to add
a background image to your screen-saver program:

   PImage img;

  img = loadImage("");



Add those in a sensible place in this program:

Screen-saver - 15 May 2017

Download this sample program and copy it into Processing:

The teacher will explain how it works.
You should make the improvements listed at the bottom
of the program and turn in your finished version -
due 24 May 2017 at 18:00.

Clicking and Highlighting - 11-12 May 2017

Read these notes.  Copy the program and then
do the practice exercises at the bottom.

More Practice - 9 May 2017

Only 1/3 of students are in class today.
You can continue practicing for the Wednesday Quiz.

Curves and Methods for Faces - 3-8 May 2017

*** We will have another programming quiz on Wed 10 May        ***
*** You should do all the PRACTICE exercises conscientiously        ***
*** The next quiz will include questions about curves and methods.  ***
*** For the quiz, you need your computer as you will write a program. ***
*** You may also use any notes or web-sites or old programs that  ***
*** you find useful.                                                                                   ***

The teacher will show you how to draw a CURVE.

That is a bit more complicated than drawing an arc.

Here are the Reference Notes about the curve command.

Then you can do this tutorial - get to the end before the quiz next Wed.

Processing Quiz - 2 May 2017

1. Copy the code below (in the box) into Processing.

2. Do #1, #2, #3, #4 as listed.

3. When finished, and it works correctly,
    show the running program to the teacher
    to receive a grade.

4. You must finish by 10:25.  If not, the teacher
    will give you a grade at 10:25 anyway.

Practice for Quiz - 27 Apr 2017

Next class (either Friday or Tuesday), you will have a 50 minute
programming quiz.  You will need to draw things in Processing,
like flags and icons, using rectangles, ellipses, lines and arcs -
and colors.  You may use your computer, any notes or web-sites
that are helpful, and any programs you have already written.

Today you should practice.

Icons - 24 Apr 2017

Lesson 2 - Olympics

Work on DRAWING ICONS, especially with LINES and ARCS.

Olympic Games and Further Drawing - 6-7 Apr 2017

Once you have finished the FLAGS tutorial,
you can start on the Olympics tutorial.

Lesson 2 - Olympics

*** Quiz Announcement ************************************
We will have an in-class programming quiz on Fri 28 Apr or Tues 2 May.
Until then, you should PRACTICE and GET FAST at Java programming,

Starting Processing Java - 3-5 Apr 2017

The teacher will demonstrate how to use Processing.
Then start Processing and do the exercises described in the following notes:
 - read these notes about FLAGS and do the sample programs up to and including

        #1 - German flag

        #2 - Austrian flag

        #3 - Belgian flag

  The programs in those notes will run in Processing
  from after downloading and installing the program.
  Alternatively, you can run the code directly in the following web-page

  without installing anything : .  But that is not
  a good tool in the long run.  Install the local version as soon as possible.

Alice Project - 21-31 Mar 2017

Your assignment for the next 6 classes is to make an ALICE program
that illustrates a famous historical event - an event that occurred before 1915 -
e.g. before World War I .

Read a description of the assignment here.

This project is due on 31 March at 18:00.

To turn in your project, you only need to upload
one single file into Haiku - the file ends with .a2w

Alice Quiz - 17-20 Mar 2017

Programming quiz in Alice.

Do the required exercises then show the teacher your working program.

After you finish, you should do one of the tutorials on the web-site.

The page contains lots of tutorials about Alice.
Choose one that looks or sounds interesting and work through the tutorial.

If you cannot decide, then try this one:

Part 3: Camera Control, Invisibility and 3-D Text
Links: .ppt, Slides (.pdf)

Finished World:  Part 3

On Tuesday, we will start a project in Alice.

More Movement - 16 Mar 2017

Use whichever world you wish - maybe your OWN WORLD
that you made a couple days ago.  Then practice
using the following commands:
- .move
- .turn
- .roll
- LOOP (bottom of screen)

Try making the following actions:
#1  make a person or animal jump (move upward)
      then spin around 360 degrees
      then fall back down to the ground
      repeat this 3 times by using LOOP

#2  make an object move 5 meters left,
     then move back 5 meters right,
     and repeat this 4 times by using LOOP

#3  Put #1 and #2 together inside a [doTogether] construct
      Then they should happen simultaneously,
       both objects moving at the same time

#4  Add one more moving object into the [doTogether]

Methods in Alice - 15 Mar 2017

Read the following notes.  

Methods with the Bunny and the Phone

Watch tutorial #2 and do the exercises at the end of the notes.

These tutorial exercises are PRACTICE - you do not need to turn them in.
You should gain FAMILIARITY with Alice, to prepare for a quiz.


*** You will have a QUIZ Friday or Monday, using Alice.       ***
*** You will need to add commands to a world                     ***
*** and then show the result to the teacher                         ***


Alice - Moving and Disappearing - 13-14 Mar 2017

Continue with these notes about Tutorial #4.

Add a character that moves around, touches various objects,
and makes those object disappear - like this:

   bunny move forward 1.5 m

   bopper setOpacity to 0.00%  (setOpacity is in the [Properties])

Alice - Build Your Own World - 10 Mar 2017

Read the following and do the practice listed at the end.
Tutorial #4

Alice 3D Animation - 9 Mar 2017

You need to download and install ALICE.
It will download s..l..o..w..l..y from the official web-site -
be sure to download version 2.4 :

A better idea is to borrow a USB Stick from the teacher.

Read these notes and do the practice exercises listed.

    Starting Alice

Math Project - 6-8 Mar 2017

Read this assignment and do what it says.

The finished document is due on Thursday 9 March at 08:30 am.

3D Math Drawings - 3 Mar 2017

Read these notes and draw all the diagrams shown on the page.
Follow the instructions on the right side of the page
to produce each drawing on the left side.

You do not need to type the instructions, but you do need to include
all the labels, arrows, measurements and equations.
Be sure to use the Equation Editor for writing the equations.
Then add one more diagram - a 3D drawing of a house, like this:

Another Math Document - 2 Mar 2017

Mr Mulkey is home with the flu today.

You should try to type EXACTLY what you see on this page:

This is practice.  You will have a graded assignment to do next week.

Another Math Document - 1 Mar 2017

Mr Mulkey is home with the flu today.

You should try to type EXACTLY what you see on this page:

This is practice.  You will have a graded assignment to do next week.

Math Documents - 28 Feb 2017

If you have not turned in your news video yet,
borrow a USB stick from the teacher turn it in.

== Today's Assignment ==
We will spend a few days learning how to write Math documents in MS-Word.
Read these notes and do the practice exercises:
Writing Math Documents

Last Class for Video Editing - 27 Feb 2017

Your video project is due tomorrow, Tuesday 28 Feb at 8:30 am.
So today's class is the last chance to work in class as a group.

*** If your video file is too large (over 500 MegaBytes) ***
*** you may wish to turn it in on a USB stick                ***
*** during class on Tuesday.  Otherwise, you may        ***
*** find that uploading to Haiku takes TOO LONG!        ***

Video Editing - 8 Feb 2017

*** Your video is due : 28 Feb at 08:30 (am) ***

We will spend a couple weeks learning to edit videos.

We will start by learning to CLIP a small piece of a YouTube video.
There are several possible ways to do this:

(1) do a screen-capture using QuickTime (or Jing)
(2) use  
(3) download an entire video ( and use iMovie to cut the clip
(4) any other good ideas?

You will be working in small groups of 2 or 3 students.
Today you should do the following:

-  organize yourselves into groups (2 or 3 students, no singles, no bigger groups)
-  practice extracting small clips from a YouTube video (use any method you like)
-  put several CLIPS into iMovie and combine them into a single video
-  export (share)the video to .mp4 format

** Eventual Assignment **
You may want to start thinking about, and researching,
the news story that you are going to present.
(please not about President Trump or the election)

Test - 6-7 Feb 2017

If you finish your test early, you should go to the class web-site (home page)
and read/do one of the items in the pictures on the right hand side, under Latest Tech Ideas.

Review for Test - 3 Feb 2017

Data Visualization (start at 0:45)

Future of the Web (start at 3:00)

You will have a written test during our next class meeting.
It will be about the questions you answered and experiences
you had in the past 2 weeks.  MOST of the questions will
be multiple choice, but a few will require you to EXPLAIN
or DESCRIBE something.

You may wish to review these answers from last year's test: 

You might want to review these answers to the Google questions:
Google answers/notes

Answers and Experiences - 2 Feb 2017

We will discuss answers and experiences today.

Here is the test that last year's class had: 

Things to Try - 31 Jan/1 Feb 2017

== Things to Try ==

- go to Google SITES and make a web-site with 2 or 3 pages
  Find out whether you can put the following in the pages:
  .. .GIF animations
  ..  videos
  ..  JavaScript

- listen to a Podcast that is more than a year old

- locate 3 Blogs where each author has posted
   several items this month

- find a web-site that lets you store files "in the cloud"
   for free - especially big files like photos

- find some interesting WEB-CAMS that show
   immediate pictures of some important location,
   like the Eiffel Tower or Big Ben

- find a Discussion Forum that has mostly young students involved

Continue answering the questions from last class.

We will discuss your ANSWERS and your EXPERIENCES in more detail
next class period.

More Questions about the Web - 30 Jan 2017

*** Test Announcement **************************
We will have a 30 min written test about Web Information
next Monday or Tuesday (depends on your class), 6/7 Feb.
It will involve multiple-choice questions
about Web-based Information sources, based on the 
investigations done in class last week and this week.

Some Answers about Google

Here are the teacher's answers about the Google questions from last week.

Google answers/notes

Today's Practice

We need brief explanations  for these terms connected to Information in the Web

For each term above, find a clear and common example,

and then write a brief explanation of what the term means.

Comment on the reliability issues connected to these tools.

It would be a good idea if the entire class would COLLABORATE
to gather useful information about the topics above.
The following are good ideas for answers/information:
-  specific example(s)
-  videos
-  links to informative web-sites

Discuss Answers from Scavenger Hunt - 24-26 Jan 2017

Which answers were easy to find? Which were difficult? Why?

How does GOOGLE actually work?  Read these notes/questions.

What alternative Search Engines and other tools provide alternative information sources?

What are Web 1.0, 2.0 and 3.0?
   Web 1.0-2.0-3.0
   Social Media
   Big Data 

How/where can YOU put information ON-LINE?

How can you COLLABORATE online, and why would you want to?

Investigating Information in the Web - 23 Jan 2017

This week we will investigate how information is stored in the Web,
as well as how we can find, retrieve and view that information.

Today, we will start with a Scavenger Hunt,
using Google (or other search engines)
to find answers to specific questions in this file:

You can work together with another student to search for answers.
Some are easier to find than others.  Write notes as you work,
and we will discuss your results in class tomorrow.
Think about which questions were easy to answer
and which were difficult.

Rube Goldberg Machine - 12 Jan-20 Jan 2017

Try adding the following commands to the page from yesterday:

       go.onclick = function()
          setTimeout("'hidden'",2200);              // disappear
          setTimeout("'visible'",3300);               // reappear

Watch this video : 

This is fun, but DON'T try to build this.

Rube Goldberg Machine Project  

Your assignment is to make a page similar to this one:

Below are a list of Rube Goldberg Machine ideas that turned
into projects that won a yearly contest.  You may select
one of these ideas, or make up your own, as you wish.

Build it Backward

Your assignment is to make a WEB-PAGE with a Rube Goldberg Machine.
There should be a [Start] button that starts a sequence of actions.
Each action will involve some object moving and touching another object -
then that will start the second object moving.

The best way to approach this is to start with one of the ideas below.
Make a web-page where that one single action happens.
THEN add the action that comes BEFORE that action, and triggers it to start.
Then add another action before that, etc.

Keep It Reasonably Simple - BUT INTERESTING!

You are not expected to create something as complex as the little
boy in the video. But your web-page version should have a picture
that moves and hits another picture, then it moves and hits another, etc.

You must use many Slide and setTimeout commands to create one
moving action after another.

Totally realistic actions are quite difficult.  For example, a hammer hitting
a nail should actually have the hammer rotating.  But you can keep it simple
by having the hammer just move down and up.

How Much is Enough

Let's say that the finished page should contain at least 10 actions.
(It might be fewer if one actions requires several slide commands).
That means that you add 2 actions per day.
And don't make them last too long - about 5 seconds maximum
for each action.

Here are the suggested topics - but feel free to do something else.
Yours will probably be longer than those described below.

2013 Hammer A Nail
2012 Inflate A Balloon and Pop It!
2011 Watering A Plant
2010 Dispense an Appropriate Amount of Hand Sanitizer into a Hand
2009 Replace an Incandescent Light Bulb with a More Energy Efficient
          Light Emitting Design
2008 Assemble a Hamburger
2007 Squeeze the Juice from an Orange
2006 Shred 5 Sheets of Paper
2005 Change Batteries and Turn on a 2-battery Flashlight
2004 Select, Mark and Cast an Election Ballot
2003 Select, Crush and Recycle and Empty Soft Drink Can
2002 Select, Raise and Wave a U.S. Flag
2001 Select, Clean and Peel an Apple
2000 Fill and Seal a Time Capsule with 20th Century Inventions
1999 Set a Golf Tee and Tee Up a Golf Ball
1998 Shut Off An Alarm Clock
1997 Insert and Then Play a CD Disc
1996 Put Coins in a Bank
1995 Turn on a Radio
1994 Make Cup of Coffee
1993 Screw a Light Bulb into a Socket
1992 Unlock a Combination Padlock
1991 Toast a Slice of Bread
1990 Put the Lid on a Ball Jar
1989 Sharpen a Pencil
1988 Adhere a Stamp to a Letter
1987 Put Toothpaste on a Toothbrush

== Due Date : Fri 20 Jan at 18:00 ==

When you turn in your Rube-Goldberg page,
you should COMPRESS the folder and upload
it in Haiku.

Trippin' Around the World - 11 Nov 2017

Today we will do some more practice Slide and SetTimeout.
Download and unpack it - you can view it here.

Then use Komodo and open the openmovequiz.html file.

- Browse the page and find out what is wrong with the [canadaChina] button.
  Change the Slide command so that the bird goes to the right country.

- For the CanadaChina trip, add a setTimeout command so that
   the bird also flies to China, waits, and then flies back to Canada

- Add another Button for a "round trip" from Canada to Australia to South Africa to Canada.

- Add a picture of a boat (a small boat) - you need to copy it into the World2016 folder

- Add a button for a BOAT trip from England to India.
   This must stay in the water, traveling around the south end of Africa
    and then back up to India.  You will need several Slide/SetTimeout commands
    to make sure the boat stays in the water.

- Add more Buttons and trips, as time permits.
   It's all good practice.

Slide - 9-10 Jan 2017

Look at this web-page
and do the Practice exercises.

You should use Komodo or Brackets
or some other good Javascript editor
for this work.

Better Editor(s) - 16 Dec 2016

Before our next class (after winter break),
please download and install a standard JavaScript editor.
You may choose the one you prefer, but Komodo is
probably the best choice (that's what many programmers say).

 - or -
Brackets -

If you find another (better?) JavaScript editor,
you are welcome to use that instead.

You may download and install that today during class.

In case you have not finished your calendar,
finish that today and turn it in.

If you have nothing else to do, you can try out:

Turn in your Calendar - 15 Dec 2016

To turn in your calendar:
- simplest is to open the Assignment, click [Hand In]
  click on [Post a Message], and then copy your
  code into the Message
- the other possiblity is to [Upload] (attach)
   the file where you saved your code.

If you finish early, try out Santa's Workshop:

Prettier Calendar - 13-14 Dec 2016

You can make your calendar a bit more attractive


and maybe a picture or two :


You need to write the BACKGROUND IMAGE command BEFORE any other commands,
so that it ends up in the background.

Example :

Calendar Project - 12 Dec 2016

Add some extra links, by adding words around the sides of your calendar.
Like this:

Calendar Project - 9 Dec 2016

Your calendar project is due on 15 Dec 2016 at 18:00.

You need one month, with a colored block for each day,
and a famous EVENT and LINK in each day.

We will add a little bit more next week.

Adding Events - 7-9 Dec 2016

Now add some EVENTS, with code like this:

d1.innerHTML="1<br>SpongeBob Debut 1999"
d1.onclick = function()

d15.innerHTML="15<br>McDonalds opens 1940"
d15.onclick = function()

d25.innerHTML="25<br>StarWars 1977"
d25.onclick = function()

The teacher will show you a beginning example.
All the teacher's links jump to Wikipedia,
but your calendar should have a larger variety of links, e.g.:
- some videos
- some pictures
- some Wikipedia pages
- also some other informational web-sites
- a Google search (how do you link to this?)

Starting a Calendar - 6 Dec 2016

We are going to make a calendar. 
We will need a box for each day, covering one month.
This uses JavaScript code like this (in EzJs):

make("div;left:0px;top:0px;innerHTML=<h2>Calendar August</h2>")

You should make an entire month today.  Choose any month in 2017 - maybe the month of your birthday.
Make sure that the boxes fit together properly.  Finish the entire month today - you will need
to use it for what we are doing next class.  Notice that your chosen month probably
does not start on Sunday (or Monday), so the first div (for day 1) will probably
be somewhere in the middle of the screen.

You may find this color picker tool helpful:

Be sure to SAVE your JavaScript code - don't rely on the [Save] button,
as this doesn't always work (due to different settings in different browsers).
You need to COPY the text and then PASTE it into a Text Editor,
and save that to your hard-disk.

If you run out of things to do, you can play with the stuff on this page: 

Back to JavaScript - 5 Dec 2016

We will be using Javascript to create Web-Pages.

We will concentrate on GUI controls and other
business oriented graphics.

We will start by using a simplified JS editor,
that includes a helpful LIBRARY of non-standard functions:

EzJS Simplified Online Editor

Try this page:  Animals.html
Click around and see what happens.

Then copy the code below into EzJS Simplified Online Editor.

Then do the practice exercises below the program code.
You may find this web-site helpful:

//==== AnimalDivs ============================================================

animals.src = ""
make("div;id=box;left:0px;top:0px;width:100px;height:100px;border:solid 2px orange")



lion.onclick = function()
{ = "400px" = "60px"  

giraffe.onclick = function()
{ = "400px" = "270px" = "180px"

elephantDiv.onclick = function()
   this.innerHTML = "<H1>ELEPHANT</H1>" = "rgba(255, 0, 0, 0.2)"

butterflyDiv.onclick = function()
  this.innerHTML = "Butterfly" = "rgba(0, 255, 0, 0.2)"

The Animals page uses BUTTONS and DIVS to identify specific animals.

(1) Add another BUTTON for another animal -
     the BUTTON should move orange box on top of the animal

(2) Add another colored-div that appears on top of another animal.

(3) Change the buttons so that the orange box always
     changes size to match the animal correctly.

(4) Add an IF command like the following:

      if( == "")
          this.innerHTML = "<H1>ELEPHANT</H1>"
 = "rgba(255, 0, 0, 0.2)"  
          this.innerHTML = "";
 = "";

       Then the elephant box turns on and off when you click.

(5)  Make the Butterfly DIV turn on and off when you click.

(6)  Now add more buttons and boxes.
      Do as many animals as you can in one class period.

Multi-Level Game - 21 Nov-2 Dec

The following game :  
demonstrates the use of BROADCASTS + hide + show
to create a multi-level game or story.  By using broadcasts,
we can set up a SEQUENCE of events/actions that 
follow one after the other.

Read these notes about this assignment.

Sound Effects - 17-18 Nov

You can download sound-effect files from a free web-site,
then upload them and play them in Scratch.

Try : 

or any of these web-sites:

Simple Game - 16-18 Nov 2016

We will make a very simple game, using the following techniques:
- using the keyboard to move the cat
- detecting when the cat touches another Sprite
- sending messages from one Sprite to another

Here is an example simple game : SimpleGame

Here are the commands for this game:


Practice :  Make your own simple game, as follows -

If you finish early, you can make another game. 
Next week we will make do a project to make a big game, with several different levels.
On Monday, we will see how to connect these together in a single game
that changes levels and keeps score.  We will work on that
for a week and it will be turned in and graded.

Scratch Animations/Games - 15 Nov 2016

Read these notes.

Today -
Look at the Cat/Cheetos animation.
Make a similar animation.  But your animation should
move in a more interesting way, for example moving around
various objects - e.g. do the PRACTICE#1 in the middle
of the notes.

Tomorrow -
We will do the Pizza game.

Learning Scratch - 9-14 Nov 2016

On Wednesday, Thursday and Friday this week (and next Monday), learn as much as you can about Scratch.

== Tutorials ==
You probably want to do some of the TUTORIALS. 
These are available at: 
The tutorials are listed down the right side of the screen (in Step-by-Step).
Particularly good tutorials are:
   Dance, Dance, Dance
   Make Music  (needs headphones)
   Race to the Finish
   Catch Game
If a tutorial is too difficult (if you get stuck) then try a different one.

== Projects ==
You can also look at projects that other people made.
Go to :
Then you can open a project and click the green flag to start it.
Then click [See Inside] to see how it was programmed.
The "popular" projects might be too complicated at the beginnng,
but some are understandable.  You might find simpler
projects at:

== Saving your Work ==
You can save your work under [File][Download to Your Computer]
Then next time you start with [File][Upload from Your Computer]
Or, if you create an account you can save your work directly to their server.

== Download Scratch ==
Scratch will run faster (better) if you install it on you computer:
That makes it easier to save your work on your computer.
You can still upload and share (publish) project.

== More Help ==
The teacher will return on Monday and you can ask questions then.

Scratch - a Programming Language for Animation - 7-8 Nov 2016

We will return to Javascript again in a couple weeks.
Now we will explore the Scratch programming language.

Scratch is a VISUAL programming language.  Instead of typing commands,
like you did in EzCode, you Drag/Drop commands into the workspace.
Here is an introductory video.

The teacher will briefly show how Scratch works.

You can start using Scratch right away by going to:

On the right side, you will see a small video box
that shows an introduction to Scratch.
Then click on [Click here to start] and follow
the instructions in the tutorial - until you get bored.
Then continue on your own to add many letters
that all do different things.

If you want to SAVE your program, you need to
create an account.  That is quick and easy to do:
- in the top right corner, click [Sign in]
- click on [Join Scratch]
- you will need to give an email address -
   you can use your school email if you wish
If you want to save your program WITHOUT
making an account, try [File][Download].
Then you can [File][Upload] next time.

If you finish the Name Animation early,
you can look at another Tutorial -
click on [All Tips] at the top-right.

There is lots more information available online,
including this book: Learn To Program with Scratch

Continue Slideshow - 2-3 Nov 2016

Continue working on your slideshow.
If you finish early, try to make it better (with cooler pictures)
or longer (more pictures).  Make the best slide-show
that you can in the time available.

There should be at least 8 pictures (4 pairs)
and every picture should have some text on it.

Turn this in to Haiku.
COMPRESS the folder and upload the .zip archive.

Slideshow - 31 Oct 2016

*** Due : Thu 3 Nov at 18:00 ***


Use GIMP to make some clever and interesting pictures,
like the faces you made the past few days.  Then turn these
into a slide-show like the following:

Your finished slide-show should contain at least 4 pictures with funny versions -
e.g. 8 images altogether.

The page above contains the following code - yours should be similar:

<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Guess Who</title>


<div style="position:absolute;left:50px;top:10px;font-family:Arial;font-size:24px">
Guess Who

<img id="pic1" src="1a.png" style="position:absolute;left:100px;top:60px;display:block">

<img id="pic2" src="1b.jpg" style="position:absolute;left:100px;top:60px;display:none">

<img id="pic3" src="2a.png" style="position:absolute;left:100px;top:60px;display:none">

<img id="pic4" src="2b.jpg" style="position:absolute;left:100px;top:60px;display:none">


pic1.onclick = function()
{ = "none" = "block"

pic2.onclick = function()
{ = "none" = "block"

pic3.onclick = function()
{ = "none" = "block"




GIMP - 27-28 Oct 2016

We will postpone the Javascript Faces project for a couple days
and learn to use GIMP for image editing.  Spend 2 class periods
practicing with gimp, doing as many of the following as you can
in the time available.

(1)  If you don't have GIMP installed on your computer,
     you will need to install it.  You can get a copy from
     a USB stick (borrow from the teacher), or download
     it from  Download GIMP here.

(2) Make a messed up face like this:
    (a) Find a picture of a face (someone famous, not another student)
    (b) Open the face in GIMP
    (c) Use the "Lasso" tool to select a piece of the face
    (d) Change the selected piece, maybe change the color
    (e) Change anoher piece
    (f)  The finished picture might be like this:


(3)  Combine two faces:
     (a) open 2 faces that are roughly the same size
     (b) "Lasso" part of one face
     (c)  copy and paste that part into the other face
     (d) repeat for several pieces
     (e) the result might look something like this:


(3)  Join halves of two faces together,
      and smudge the place where they meet,
      like this:

(4)  Get a picture of a landscape (outdoors).
     Find a picture of a person.
     Shrink the person and insert (copy and paste)
      them into the landscape.  Smudge or adjust
      the surrounding background so that it
      is not so obvious that it was copied.
      You can watch the hints in this video: 

(5)  Make a fantasy animal by pasting together
     pieces from several animals, like below. 
     You should smudge the edges where pieces connect.
We will continue the Javascript Faces project next week.

Faces in Javascript - 25-26 Oct 2016

Read these notes and do the practice exercises.

You can use to cut out faces from one picture.
But pasting them onto a different picture is a different problem.

Who has a good solution for this task?  Are there an good tools listed in CoolTools?

Cool Tools for Schools : 

Can you do this with Google Draw?
Are there any other clever ideas?

Real HTML and Javascript - 24 Oct 2016

Many students noticed that their roll-over web-pages did not work correclty
when using the Google Chrome browser.  That is because we made the pages
in a simple way that does not conform to modern browser standards.
In particular, the following command is too simple:

     bigpic.src = 'rome2a.jpg'

It must be written in a more complex fashion:

    document.getElementById('bigpic').src = 'rome2a.jpg'

More importantly, writing Javascript code directly inside a picture
is basically a bad idea and makes things overly complicated.

The code below shows the "proper" way to write this web-page:



<img id="big" style="position:absolute;left:250px;height:600px" src="rome1a.jpg">

<img id="p1" style="position:absolute;left:50px;top:50px;height:100px" src="rome1b.jpg">

<img id="p2" style="position:absolute;left:50px;top:150px;height:100px" src="rome2b.jpg">


   var bp = document.getElementById('big')

   p1.onmouseover = function()
     p1.src = 'rome1c.jpg'
     bp.src = 'rome1a.jpg'

   p1.onmouseout = function()
     p1.src = 'rome1b.jpg'

   p2.onmouseover = function()
     p2.src = 'rome2c.jpg'
     bp.src = 'rome2a.jpg'

   p2.onmouseout = function()
     p2.src = 'rome2b.jpg'



Notice that only 2 of the rollovers have been fixed (written properly).

Today, you should REWRITE your page so that it will also work in Chrome.
It seems a lot of work, but you can use copy and paste to
avoid typing all the code.  It doesn't actually take so long - maybe 30 minutes.

Investigating the Web - New Web-sites - 21 Oct 2016

The World-Wide-Web is a very big "place".  It is full of interesting web-sites,
useful tools and obscure information.  It's easy to "get lost" in all this stuff.
Unfortunately, it is far too easy to waste time in the Web.

But you don't need to waste time watching YouTube videos, chatting and 
reading Facebook.  There are lots of OTHER enjoyable things to do,
many of which actually accomplish USEFUL WORK.

Here is a list of interesting and useful web-sites that could be used
to accomplish useful work:

 Cool Tools for Schools :  

Today you should spend the period INVESTIGATING some of these web-sites.
INVESTIGATING means that you look at what a site does and then ask
some intelligent questions and try to find answers for your questions.
Typical questions are:

Find at least two web-sites that are particularly interesting and useful, but one that is "new"
to you and your peers.  DON'T investigate Facebook or Wikipedia or Google
or YouTube, or any other web-sites that you already use on a regular basis.
Find something NEW!  Be adventurous!

Looking Ahead - 19-20 Oct 2016

If you finish your Rollover page early,
you can have a look ahead at what
we will be doing on Friday.


The World-Wide-Web is a very big "place".  It is full of interesting web-sites,
useful tools and obscure information.  It's easy to "get lost" in all this stuff.
Unfortunately, it is far too easy to waste time in the Web.

But you don't need to waste time watching YouTube videos, chatting and 
reading Facebook.  There are lots of OTHER enjoyable things to do,
many of which actually accomplish USEFUL WORK.

Here is a list of interesting and useful web-sites that could be used
to accomplish useful work:

   Cool Tools for Schools :  

On Friday you will spend time period INVESTIGATING some of these web-sites.
INVESTIGATING means that you look at what a site does and then ask
some intelligent questions and try to find answers for your questions.

Rollover Slide-show - 17-20 Oct 2016

Look at this sample picture page.

Assignment : make a rollover picture page
                       Due Thur 20 Oct at 18:00

Notes and Suggestions

Work carefully to get everything correct - you have 3 class periods,
so that should easily be enough time. 

To turn in your page, you need to :
-  find the folder that contains all your images and web-page
-  COMPRESS the folder
-  upload your .zip file into Haiku

Continue Rollovers - 13-14 Oct 2016

Continue adding rollover images to your page in Seamonkey.

Add as many as you can in the time available this class -
this is practice, the goal is to get faster.

Rollovers - 12 Oct 2016

*** Tech fix *************************************************
In Seamonkey, you should:
1 - open [Seamonkey][Preferences]
2 - click [Composer]
3 - activate [Preserve Original Source Formatting]
4 - click [OK]

The teacher will demonstrate why you need to do this,
as well as why "drag and drop" is a BAD IDEA for inserting images.


Read these notes (ignore dates - just read the notes about how to do this)

== Practice ==
Today and next period, make a Web Page
with pictures that change when the mouse "rolls over".
Use for graphics editing.
Add as many roll-over images as you can in 2 class periods.

Making Web-Pages with SeaMonkey - 30 Sep 2016

Enhanced Web-pages : Wikipedia Text + Video Links

Wikipedia is very useful, but not particularly attractive.
Here is an improved version of a Wikipedia page:

You are allowed to do this because ALL of Wikipedia content
is licensed under the Creative Commons License.
Not all web content is so flexible, but Wikipedia is.
You might be interested in some more reading:
- Is Copying Legal?

Use SeaMonkey to make a similar improved Wikipedia page:
-  choose a topic
-  find the Wikipedia article
-  copy a small portion of text out of Wikipedia, into your page
-  add a link to a video OR a nice image
-  add another small bit of text plus a corresponding video
-  put the copyright information at the bottom of the page, as well as your name
-  add any other visual improvements that you can think of, e.g. colors
-  save the page and name it "index.html"
-  compress the folder and upload it to a Mini-site in Haiku

Try to figure out how to do this QUICKLY.

Uploading to a Web Server - 28 Sep 2016

The teacher will show how to upload content into a Mini-Site in Haiku.

== Uploading a Mini-site ==

== Making a Web-page with SeaMonkey ==

This is a first try.  We will make more complicated pages next week.

Turning in your Adventure Game - 27 Sep 2016

To turn in your Adventure Game, you cannot "just drag and drop".
Here is the correct way to turn it in:
(1) Find the FOLDER that contains EZcode and all your images
(2) Save your PROGRAM TEXT (from MS Word) into the EZcode folder.
(3) COMPRESS the folder
      - on MacBook, right-click and choose [Compress]
      - on Windows PC, this might be more difficult,
         but try right-clicking on the folder and search for
          a tool that will compress it
(4) In Haiku, find the Adventure Game assignment.
      Upload the .ZIP archive file that you created in (3) above.

=== HOMEWORK ===
We will be using a real web-page editor.
Please download a copy of SeaMonkey from

 Sea Monkey .  You will need this next class.

Continue Adventure Game - 23 Sep 2016

Continue creating your Adventure Game.
It is due next Tuesday, 27 Sep.

Fonts and Colors - 21 Sep 2016

== Colors and Fonts ==

Look at the EZcode sample called Colors_Fonts.

The teacher will explain briefly how to change fonts and colors of text.

== Sounds ========

You can play a sound like this:

doPlaySound = function()
   var audio = new Audio("bizarre.mp3");;

That works if the "bizarre.mp3" file is saved
in the same folder with YOUR COPY of EZcode.

Adventure Game Project - 15-27 Sep 2016

(1) Download a copy of EZcode.
     You will need this for the Adventure Game Project.


We are going to make an Adventure Game.  This is a "branching" story,

where you make decisions and move on to the next "place" in the story.

Here are three examples you can try out.

Or you can look at the Adventure_Game in the EzCode samples.
We will use 
EzCode and JavaScript for this project.  It's certainly possible to create
computerized stories with other tools, but JavaScript is an excellent

programming language
 to learn, as it is the most common language
used in the World-Wide-Web.

You have one and a half weeks to create your adventure game,
so it will be longer than the brief examples above.
You should be able to create a couple "rooms" each day,
so you should have at least 12 "rooms" (hopefully more)
in your finished game.

Keep in mind this is NOT a "video" game, so animations and
moving targets are not expected.

Here are some suggestions for getting started:

Before you start creating pages (rooms), you should make a plan - 
sketch out the design of your story ON PAPER.

== Getting Started ==

  1. Think of a scenario - that is, where will the adventure take place and what sorts of things will happen.  
    Here are some suggestions:
    - shopping center
    - airport
    - a city
  2. Think of a general story that is connected to Winter or Winter Holidays.
  3. Think of 3 locations - the beginning, the middle, and the end.
  4. Get a picture for each of the 3 locations above.
  5. Write these 3 pages, and use BUTTONS to connect them.

Once you have started, spend a little time thinking about the story,
and sketch out some ideas on paper. 
Collect some pictures and then start making pages.

**** VERY IMPORTANT!  *************************************

    IF you use pictures that are stored inside your computer,

    you MUST put them all into one folder, together with

    a complete copy of EZ-CODE.

    Then COMPRESS the folder and turn in the .ZIP archive.


Otherwise the links to pictures won't work.

== Goals for the Assignment ==

  1. The story is NOT about school - almost any other scenario is acceptable.
  2. Pages should use a consistent format and there are MANY pages -
    aim for at least 12 pages - more is better - 
    so it will be substantially longer than the Escape FIS story.
  3. Most pages have a picture on them.
  4. Some text uses LARGE FONTS and/or COLORS for emphasis
  5. At least 2 pages contain a SHORT video (under 30 seconds)
  6. Many pages contain a "puzzle", or something "hidden", or a "secret", 
    so it is not immediately obvious what to do.
  7. Many of the pages use JavaScript to make them INTERACTIVE (clickable)
  8. Some of the pages contain "secrets" that are needed for later pages - 
    like a password or a secret number to unlock something.
  9. Make it interesting and fun, and graphics should be appropriate and meaningful.
  10. ? The story must MAKE SENSE - not just contain random questions.

   ... the teacher will show you a couple more good ideas next week

Today, start THINKING and PLANNING ...

At the end you must turn in your COMPLETE program (from the left window)
as a TEXT FILE.  It will not "stay" inside ezCode.


Making Items Disappear and Reappear - 14 Sep 2016

Start  EzCode  and open the Sample Rich Man Quiz.

The teacher will explain how to use %div% blocks and .hide and .show.

Making Items Disappear and Reappear - 13 Sep 2016

Start  EzCode  and open the Sample Stacked Pages.

The teacher will explain how to use %pages% and .hide and .show.

Links in EzCode - 12 Sep 2016

Start  EzCode  and open the Sample Links.

The teacher will explain how to make links in EzCode.

Videos in EzCode - Period 2 - 2 Sep 2016

Start  EzCode  and open the Sample Video_Quiz .

Do the Practice exercises described at the bottom.

Add another video with 3 questions, similar to the Coca Cola questions.

<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

        You can change the height and width if you wish, but don't change anything else.

If you finish early, add another video with questions.

Translator - 30 Aug 2016

Open EzCode .  Load the [Translate] sample program.
Make the changes/improvements listed under ** Practice **
at the bottom.  If you finish later, add another LIST and another
text box for translating German English into German.

Starting Web Pages - 29 Aug 2016

Your animations are due today at 18:00.
If you have not finished, you may work on animations today.
Otherwise, start the following practice:

We will be using EzCode to create Javascript driven Web Pages.

The teacher will explain how to use EzCode.

Today, open the [Samples] menu and do the [Quiz] program.

Do the practice exercises suggested at the bottom.

Be sure to SAVE your CODE by COPYING and PASTING

it into a document in a TEXT EDITOR (or word processor).

If you have a German Mac keyboard,
you may find the following helpful for special characters like \  {  }:

If you do work on your animations in class today,
you should do the EzCode practice at home.

Animations Assignment - 24-29 Aug 2016

===== Turning In Your Animations - due Monday =====
Your animations must be turned in to Haiku before Monday 29 August at 18:00 .
Be sure to use LOTS of frames, to make the animations SMOOTH.

You will turn in 3 animations : 
-  a smiley face or something else with drawing
-  a SQUASHING word animation (like the one shown below) or a squashing drawing
-  moving letters making an interesting message (as shown below)


To turn this in, you need to:
-  put all 3 animated .GIF files into a folder
-  compress the folder
-  upload the .zip archive into Haiku

Vector Graphics and Animations - 22-23 Aug 2016

We are going to make animations like these smileys:

  smiley_face_gif_by_liviaax15-d3j6glx.gif  RockingSmiley.gif   clap-animated-animation-clap-000340-large.gif

This requires using several tools:

  1. a vector graphics drawing program like Google Draw
  2. use Google Draw to make several FRAMES
  3. put the frames into a tool that turns them into a .GIF animation file

We will approach this problem in several stages, starting with Google Draw.
Today concentrate on becoming familiar with the features in Google Draw.

===== Day 1 =======================

- Open Google Drive (Google Docs).

- Make a new FOLDER to contain your drawings.

- Create a NEW DRAWING.

- When a drawing is finished, change the name to something meaningful.
  Then make another NEW drawing before making something new.

Use the SHAPES and other DRAWING TOOLS to draw each of the following.
It's practice - do as many as you can in one class.

-  Mickey Mouse (a circle face, two circle ears, all black)

-  Packman (a yellow circle with a "pie" piece removed)

-  A blue 5 pointed star with one point pointing downward

-  A light purple "cloud"

-  A frowny face

-  A robot with a square head, rectangle body, rectangular eyes and arms

Six triangles that fit together like this

 (with 6 different colors):

Take any shape, and fit lots of them together to create a TESSELATION, e.g.:


===== Day 2 ======================

It's pretty easy to make your own "Smiley" GIF animation.

The trick is to place each piece of the picture in a new layer -

first layer for the whole face (circle), next layer for the mouth,

next layer for the left eye, next layer for the right eye, etc.

  smiley_face_gif_by_liviaax15-d3j6glx.gif  RockingSmiley.gif   clap-animated-animation-clap-000340-large.gif 

You'll probably find it easier if you make it pretty big, like 200x200 pixels.

Now make your own smiley GIF animation.

Recommend using Google Draw for the drawings.

Start with a basic face and export/download it as a PNG image.

Then make a small change and save a second image.

Another small change, then save a third image.

It would be smart to NAME the images pic1, pic2, pic3, etc.

Then use this online tool for making the animated GIF.

The teacher will show how to use these tools to create a Smiley.

Then you can practice. Make a simple one quickly,

so you learn to do all the steps (there are many steps).

Then, if time permits, make another nicer one.

Today = Make a Smiley, similar to one of the above.
               Use at least 6 frames.
              Upload your 6 frames to the Animated GIF tool.
              Then upload them again and REVERSE THE ORDER.
              Preview the result and download the .GIF animation file.
              Then open it and view it in a browser.
              If time permits, make a second animated .GIF.

======  3rd Day - Assignment ============

Here is an excellent video outlining basic concepts of ANIMATION.

The video contains lots of examples of ANIMATION.

In particular, there are several LETTER/WORD animations.  

This Animated NEW Word adds some variety to otherwise dull text.

Notice that the moving letters don't just fall, but they also "squash"

at the bottom.  In Inkscape (or Google Draw), you achieve this effect

by resizing the letters, not only moving them.  And you can get

interesting effects if you pull on the control points after drawing the letter.

The motion doesn't need to "mean" anything, but it should look "realistic" -

like this example appears to obey the law of gravity, and the letters

seem to be made out of some flexible material.  Many other effects are

possible, like spinning, floating (like a balloon), zoming across the page, etc.

Today's practice - using Google Draw :

1 - make your own "squashing word" like the NEW animation (like NEW)

2 - make some animated letters that "fly" into the screen -

          from the side, or the top, or in a spiral, as you wish.

          Make yours better (smoother) than the one at the left!

===== Turning In Your Animations - due Monday =====
Your animations must be turned in to Haiku before Monday 29 August at 18:00 .
Be sure to use LOTS of frames, to make the animations SMOOTH.

You will turn in 3 animations : 
-  a smiley face or something else with drawing
-  a SQUASHING word animation (like the one shown above) or a squashing drawing
-  moving letters making an interesting message (as shown above)

To turn this in, you need to:
-  put all 3 animated .GIF files into a folder
-  compress the folder
-  upload the .zip archive into Haiku

Second Day - 18/19 Aug 2016

You may have finished your picture page yesterday.
If not, you can finish it today.

One more thing to add - beneath your citations, on the same page,
add a picture that represents YOU.  That can be a picture of yourself,
or a picture that you got from Google Images.  You should CENTER
the picture (in the middle of the page).

Once your page is finished, you have a couple more things to do.

  1. If you worked in Google Docs, you need to DOWNLOAD
    your page onto your local computer as an MS Word document.
  2. Save your page as a PDF.  This works differently in Google Docs
    than it does in MS Word.  But they can both do it.
  3. Now you have 2 documents - MS Word and PDF.
    You need to save both of these into a FOLDER on your computer
    (this can be on the desktop if you wish).
  4. COMPRESS the folder by right-clicking on the folder and choosing COMPRESS.
    This will create a .zip file in the same place as the folder.
  5. Now upload the .ZIP file to Haiku.

The teacher will demonstrate all this quickly.  If you have trouble getting
all this to work, you need to ask a question and get help.

This assignment will not receive a "grade", but the teacher will
write some brief comments in Haiku.

First Day - 17/18 Aug 2016

Today's Assignment
We will collect some pictures from Google Images -
and display them in a Word-Processing Document.

>> Read these notes about collecting images.

Be sure to save your page often (at least once every 10 minutes). 
This assignment will be due next week - the specific date will appear in Haiku.

Daily Work - Computers Required - Bring Your Computer Every Day

Each student needs a computer for class every day  .. more ..
=== Homework ===
Read the following notes about this course.

Welcome to Comp Tech Advanced

Comp Tech Adv is an introduction to Computer Science, mostly involving creation of automated systems via programming or clever and effective use of computer tools.  .. more ..
~~~~  read this whenever time permits ~~~

Test Audio

Use PIZAP to make a funny picture, or
investigate some of the tools on this page:

How to make Fake Photo with Photoshop