Project Summary

In this project I took an initial idea for a website, and developed the visual and user interface design. This included outlining and describing the site structure and navigation, user interactions, animation effects and audio to be included. The site concept is an instructional math website for first grade students. The graphic elements and illustrations used in the project are all original work done in Photoshop. I found this to be a really fun project to work on!

Interactive Elementary Math Website: Beginning Addition & Subtraction

Wiz Kidz Math will be a website designed to teach beginning addition and subtraction concepts to first grade level children.

It will provide a fun, interactive learning environment to engage the student, using graphics, audio and animation, with demonstration, practice and quiz modes for each concept taught. Within the practice mode for each lesson, there will be a series of problems presented using different numbers and types of objects.

Home Page

The home page will include a link to a lesson guide for parents and teachers, that will explain which concepts are being taught with each lesson. The lesson links in the sidebar menu with number values allow navigation directly to the beginning of each lesson. There are forward and back buttons which are used to navigate sequentially through each lesson. The forward button will also navigate to the next lesson at the end of each lesson. For the sample lessons in this presentation, Lesson 1 is “Equality and Inequality of Values Up to 9”, and Lesson 2 is “Regrouping of Objects Up to 9”. The examples shown are selected screens from Lessons 1 and 2.

Lesson 1: Learn Mode - Screen 1

In learn mode there is a play button which will start an animation sequence with audio explaining the concept.

Interactive Elements:

• Active lesson and mode are indicated by borders around text in the top and side menus
• Play button to start or replay audio and animation sequence
• Forward and back buttons which advance to next or previous screen

Animation:

As the narrator counts the objects on each side, the numbers will become visible on each acorn image in sequence. The equal sign will temporarily enlarge and light up with a color glow effect.

Audio:

"When we have two groups of things, and there are the same number of things in each group, we say that they are equal. The sign in the box means ‘equal’. These two groups of acorns are equal because if you count them you see they both have 5 acorns in them. Let's count Sidney squirrel's acorns. 1, 2, 3, 4, 5. Now lets count Sara squirrel's acorns. 1, 2, 3, 4, 5. Sara squirrel and Sidney squirrel have the same amount, or an EQUAL number of acorns.”

Lesson 1: Learn Mode - Screen 2

Animation:

As the narrator counts the objects on each side, the numbers will become visible on each acorn image in sequence. The “not equal” sign will appear first as equal sign, then change to a not equal sign with the strikethrough in red, then all black.

Audio:

"When we have two groups of things, and there are more things in one group than the other, we say that they are not equal. Let's count Sidney squirrel's acorns. 1, 2, 3. Now lets count Sara squirrel's acorns. 1, 2, 3, 4, 5, 6. Sara squirrel and Sidney squirrel do not have an equal number, or the same amount of acorns, because Sara squirrel has more acorns than Sidney squirrel. The equal sign in the box with a slash through it means 'not equal'.”

Lesson 1: Learn Mode - Screen 3

Animation:

Acorns move one by one into the right side squirrel's circle. A number counter displays under both sides, and the right side increments as acorns are added. When the numbers are equal, the "not equal” sign turns into an equal sign, temporarily enlarges and lights up with a color glow effect.

Audio:

"Sidney squirrel has four acorns. Let's give Sara squirrel an equal number of acorns from the basket. 1, 2, 3, 4. When Sara squirrel and Sidney squirrel both have four acorns, we say they have an equal number of acorns. Notice how the sign changed to the equal sign when they have the same amount."

Lesson 1: Practice Mode - Screen 1

Interaction/Animation:

In practice mode for each lesson there is a play button which will start or replay audio instructions for the student. There is also an 'Enter' button for the student to submit an answer when they are ready. In the practice screens the student will have the chance to change their answer and hit the enter button multiple times until they get the correct answer.

On this screen the student will click and drag acorns one by one into the right side squirrel's circle. The number counter on right side increments as acorns are added. When the numbers are equal, the "not equal” sign turns into an equal sign, temporarily enlarges and lights up with a color glow effect. When the Enter button is clicked, if the answer is wrong the sun face changes and an “uh-oh” sound effect plays. If correct, the sun face changes to an open smile and a happy sound effect plays.

Audio:

"Sidney squirrel has 2 acorns. Now you give Sara squirrel an equal number of acorns from the basket. Click on the basket or click and drag to move an acorn into Sara’s circle. Click on the basket again until she and Sidney have an equal number of acorns, then click the Enter button with the curved blue arrow to check your answer.”

Lesson 1: Quiz Mode - Screen 1

Interaction/Animation:

When the student clicks on the sign indicating equal or not equal, the selected button will change background color to show it's selected. When the 'Enter' button is clicked, if the answer is wrong the sun face changes and an “uh-oh” sound effect plays. If correct, the sun has an open smile and a happy sound effect plays.

Audio:

"Count how many acorns Sara and Sidney squirrel have. Do they have an equal amount? Click the sign that tells if they are equal or not equal, then click the 'Enter' button.”

Lesson 1: Quiz Mode - Screen 2

Interaction/Animation:

For this quiz phase we have taken away two of the visual cues that were included in the practice exercise; the “not equal” sign changing to an “equal” sign and the number appearing under the answer side. The student will have to rely on counting, and not on matching the numbers for this type of question.

The student clicks or drags and drops acorns one by one into the right side squirrel's circle. When the 'Enter' button is clicked, if the answer is wrong the sun face changes and an “uh-oh” sound effect plays. If correct, the sun has an open smile and a happy sound effect plays.

Audio:

”How many acorns does Sidney squirrel have? Give Sara squirrel an equal number of acorns from the basket. Click on the basket (or drag and drop) to move an acorn into Sara’s circle. Click on the basket again until she and Sidney have an equal number of acorns, then click the 'Enter' button to check your answer.”

Lesson 2: Learn Mode - Screen 1

Animation:

After the audio plays, an arrow appears and acorns are moved along its path one by one into the right side circle. A number counter displays under both sides, and the right side increments as acorns are added while the left side decrements. See the next slide which shows the screen after the first acorn is moved.

Audio:

"Sidney squirrel has 6 acorns. We can divide his acorns into 2 groups in different ways, and he still has 6 acorns. How many ways can we make 6?”

Lesson 2: Learn Mode - Screen 2

Animation:

The remaining acorns are moved along the arrow one by one into the right side circle, higher to lower numbers, so the student can count the total from left to right. A number counter displays under both sides, and the right side increments as acorns are added while the left side decrements, until all the acorns are in the right side circle. There will be a pause between each move so the student can count the acorns.

Audio:

”If we move one acorn into a separate group, he has a group of 1 acorn and a group of 5 acorns, and all together he has 6 acorns. If we move 2 acorns into a separate group, he has a group of 2 acorns and a group of 4 acorns, and he still has 6 acorns in all. Watch to see how many ways we can make 6. Count them all to make sure we still have 6 all together.”

Lesson 2: Learn Mode - Screen 3

Animation:

After the audio plays, an arrow appears and squirrels are moved along its path one by one onto the right side of the fence. A number counter displays under both sides, and the right side increments as squirrels are added while the left side decrements. See the next slide for the screen after some squirrels are moved.

Audio:

”We have 8 squirrels in the park. What happens when some of the squirrels jump over the fence?”

Lesson 2: Learn Mode - Screen 4

Animation:

The remaining squirrels are moved along the arrow one by one onto the right side of the fence. A number counter displays under both sides, and the right side increments as squirrels are added while the left side decrements, until all the squirrels are on the right side of the fence. There will be a pause between each move so the student can count the squirrels.

Audio:

”If one squirrel jumps over the fence, we have a group of 1 squirrel on one side, and a group of 7 squirrels on the other side. How many are on the first side? How many on the other side? Do we still have 8 squirrels all together? Count them to be sure. Yes! We do! Watch to see how many ways we can make 8. Count how many there are in all.”

Lesson 2: Practice Mode - Screen 1

Interaction/Animation:

The student clicks or drags and drops acorns one by one to move them into the right side circle. When the 'Enter' button is clicked, the numbers change to reflect the number of acorns in each group. The student can move acorns back and forth between the circles to see all the possible combinations.

Audio:

Sidney squirrel has 5 acorns. Divide his acorns into 2 groups by clicking on acorns to move them into the other circle. Click the 'Enter' button to see the numbers in each group. How many different ways can you make 5?”

Lesson 2: Practice Mode - Screen 2

Interaction/Animation:

The student clicks or or drags and drops squirrels one by one to move them onto the right side of the fence. When the 'Enter' button is clicked, the numbers change to reflect the number of squirrels in each group. The student can move squirrels back and forth between the circles to see all the possible combinations.

Audio:

”There are 7 squirrels in the park. Click (or drag and drop) the squirrels to move them onto the other side of the fence. Click the 'Enter' button to see the numbers in each group. Count all the squirrels on both sides of the fence to see that there are still 7 in all. How many different ways can you make 7?”

Lesson 2: Quiz Mode - Screen 1

Animation:

This is an example of a more advanced quiz page that comes later in the sequence. Practice screens for this type of math problem will have hints, and the student can drag the objects around to visualize all the combinations. The student types in all the number combinations that make the total. When the 'Enter' button is clicked, sound effects and image changes indicate whether the answer was correct or not. The student clicks the forward button to go to the next problem.

Audio:

”There are 4 squirrels in the park. Type in the numbers to show how many different ways you can make 4. Click the 'Enter' button to check your answer.