The ideas for javascript are interactive activities for students that focus on grammar and vocabulary skills for young students, one of the three primary demographics for the site.

1)      the first activity to be called “Activity 5” is a color and shape identification activity. Three shapes are shown on the page (circle, square, and triangle), and the student must click on each shape to reveal a color for that shape. The student can then drag words for each color and shape from a list to fill on the blanks (eg The [circle] is [red]).

Javascript pseudocode:

3 Functions for color change:

-          Get circle element, change background-color to green;

-          Get square element, change background-color to red;

-          Get triangle element, change background-color to blue;

Draggable elements function:

Identify draggable elements by ID;

dragElement function:

            initialize position variables to 0,

            define the function for grabbing the element:

                        get cursor position at start using position variables,

                        call a function to stop drag on mouse button release,

                        call a function for dragging the element

            define the function for dragging the element:

                        calculate the new cursor position using the four position variables,

                        set the new position of the element using 2 of the four position variables

            define the function for releasing the element when the mouse button is released:

                        set functions for grabbing the element and releasing the element to null

Popup alert for submit button:

            Alert “Submitted! Thank You!”

2)      the second activity (to be called “Activity 6”) expands on the first and includes noun/verb identification. It's a simple activity that has three simple sentences in which the nouns turn blue and  the verbs turn green when the mouse hovers over the word. The student then answers the questions: Which words were nouns? What color were the nouns? Which words are verbs? What color were the verbs?

Javascript pseudocode:

Function to change word color :

Get the element by id, change color to red and the font weight to bold

*Note: 2 functions will be required, one to change nouns to red and one to change verbs to green.

Popup alert for submit button:

            Alert “Submitted! Thank You!”

3)      the third is activity (to be called “Activity 7”) is for a student to click in a word or syllable (combination of letters, eg. "wa", "we", "wi", "wo", "wu") to hear the sound that the syllable/letter combination makes. This particularly applies to indigenous students learning their native language, due to the syllabic nature of the language, but for this exercise I will simply use the letter combinations above, using recordings I make myself).

Javascript pseudocode:

Set variables to point to each of the 5 audio files

Function to play the audio file:

      Create audio object using passing audio file variable  as a parameter

      play the object file

Popup alert for submit button:

Alert “Submitted! Thank You!”

**Note: I have tried, tested and refined (somewhat) the designs above. I haven’t re-invented the wheel; I have used existing code examples from other sources and refined to suit the needs of the application. Activity 5 code would be been reduced from more comprehensive code that includes dragging divs by a header (not applicable here), and I would refine code for Activities 6 and 7 to be a little more efficient by passing parameters from html.