I have some experience in web development, although it was briefly a few years ago, so I have a little experience with Javascript already. I have also completed COMP268 (Intro to Java) and COMP266 (Intro to C++) so using programming language is not new to me. The biggest obstacles to overcome were shaking off the rust and clearing the dust and cobwebs off what I had already learned; expanding on my knowledge was the easier part (and more fun as well).

Initially, I entertained the idea of using HTML5 canvas to create and manipulate objects (fun to work with!), but it is still relatively new so some target website users may not have updated operating systems/browsers capable of handling some of the elements. I decided to stick with earlier conventions, using W3Schools as my resource due to the easy explanations and examples, as well as the ability to copy code and manipulate it to suit the needs of the assignment. I have quickly learned there is no need to try to reinvent the wheel and code everything from scratch – 99.9% of the challenges you face have already been met in some form or other. It is far more efficient to find a ballpark example of the code you need and alter it to suit your application. I found all the JS code I need at W3Schools.com.

client_activity_5.html, client_activity_5.css, client_activity_5.js

From the proposal:

1) the first activity 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]).

 The biggest challenge was making multiple divs draggable, and I found an example of code at https://www.w3schools.com/howto/howto_js_draggable.asp for the Activity 5 page of my site. I know enough (and learned what I needed to learn) to alter the code, eliminating the superfluous lines (for example, the lines pertaining the div header), to shorten the code to suit what I need. Given more time, I could have shortened further (instead of getting six individual elements by id, I could have shortened to getElementsByClassName()), but I ran into some syntax difficulty and decided to leave as is. I was challenged with the placement of the draggable “buttons” (they’re just button-styled divs), and eventually decided to have them placed on top of one another (colours on colours and shapes on shapes), so the user can drag the off the stack one at a time.

Changing the colour of the shapes was easy with  a simple getElementById() to alter the background-color. I used https://www.w3schools.com/jsref/prop_style_color.asp as a reference.

client_activity_6.html, client_activity_6.css, client_activity_6.js

from the proposal:

2) the second activity 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?

This one was easy: I just used the color change functions from activity 5 and applied them to the proper spans in this activity. The difference is that I placed parameters in the html tags to pass into the functions, so that I only needed to use two functions. I could have probably placed another parameter in the html tags to pass for color, reducing the number of required functions to 1, but the html tags are already getting somewhat bulky.

client_activity_7.html, client_activity_7.css, client_activity_7.js

from the proposal:

3) the third is activity 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).

This one was the simplest of the three, but the most fun because I used recordings I made myself. I recorded myself saying the syllabic sounds on my phone, then emailed them to myself to save them on computer. The code is a simple use of the audio play() function, to play a sound onclick (again, in a button-styled div). To keep things simple and elegant, I created variables to refer each of the 5 audio files, which are then passed as parameters into the playSound() function. Within the function I created an audio object on which I could call the play() function. This closely resembles the code structure I’d use in Java for this type of thing.

The code in for this unit is as simple as I could make it, therefore easy to alter or add to, and it does the job of what was approved in the proposal. It is perhaps a little clunky on the html side in places – given more time I would further refine to separate content and behaviour as much as possible. Considering my still limited experience, I think this is a decent start.