MIT Scratch Website
In IT486 I designed and produced a website to teach the MIT Scratch programming language to middle school students.
The first step in this project was to identify the topic that I wanted to teach. At the time, I was working as Technology Director for a small private school and was the only person in the school who knew Scratch. I feared that Scratch would be removed from the curriculum when I left the school, so I decided to create a website that could introduce students to the program.
The program is taught in a computer lab with a teacher serving as moderator. I envisioned a website that introduced students to the program's features, examples and tutorials of Scratch's capabilities, and provide links to external resources. I wanted to produce a website that students could use to learn at their own pace.
I identified some objectives to identify what students should learn.
For example:
Given the Scratch GUI, the student will be able to correctly identify the name and purpose of each section with an 80% accuracy.
I then identified tasks student should be able to peform to demonstrate mastery of the objective.
Example:
1. Students will label each section of the scratch graphical user interface (GUI).
2. Students will describe the function of each section of the scratch GUI.
3. Students will demonstrate the basic functionality of each section of the scratch GUI.
I then designed a storyboard of the website to lay the website's structure. I initially sketched the website's appearance on paper, but then used Adobe Photoshop to produce the storyboard images so I could use layers to reposition graphic elements until I was happy. I envisioned a website that helped students seamlessly transition to Scratch, so I selected graphics and colors to mimic the actual program. I had identified a large number of pages that the website would contain and did not a cluttered menu, so I researched how to use javascript to create a dropdown effect for the main menu and a sidebar for sub menus. (storyboard)
Since I already had some experience with web design, I decided to challenge myself and produced the website using a plain text editor CSS and DIV tags instead of tables. To begin my design, I broke down the pages into sections, and created separate text files for each section. I created the DIV framework in each text document and organized them into sub-folders to simulate the website's breakdown. Once the structure was in place, I began to produce the content by simply inserting my notes into the existing framework.
The course ended before my website was complete and I no longer work at the private school, but I had intended to test the website to a group of middle school students. Students would read through the website, perform some of the website's activities, create a program using Scratch, and then respond to a series of interview questions. I would have used this as a way to evaluate the website's content and efficiency. I then would have made revisions based on the students' performance and feedback.