|
See larger picture
View/add attachments
(currently 11)
Added to Gorp
Jan 15, 2005
Modified
Apr 14, 2005 12:18:28 PM
|
|
System Architecture
Our curriculet's technology component utilizes Macromedia Flash/ActionScript to provide a visually appealing and responsive set of dynamic interactions.
Though the applet is basically client-based, we aimed to keep the development extensible by putting the text content in external text files which are read in by the program on an as-needed basis. The selection of which text file to load is also done on the fly, by concatenating the global variable of the topic shortform with the name of the country clicked.
Internally, the display is separated among 10 keyframes for the student section, plus one more for the teacher's "classroom guide". These 10 keyframes include one for the front page (login screen), one for the topics selection page, one for the world view, and one for each of the seven continents.
Among the continent screens, the black border, the "Back to World View" button and the infobox that pops up click a country are all persistent, and in the case of the infobox, it is hidden and revealed by simply changing its position on screen and its text is set dynamically. We were able to use a form of HTML (the language of websites) for the text of the infoboxes due to some limited capabilities of Flash for rendering HTML. However, the code to correctly perform scrolling on the infoboxes was challenging and is imported as a separate ActionScript file.
Another challenging part was how to selective provided colored versions of continents with articles for a given topic and colored, clickable versions of countries for a given continent. The solution we used here was similar to the infobox solution. We created all desired clickable colored versions of continents and countries in their correct place. Then, when the topic is selected, we set a global variable corresponding to the topic. And when the world view's or a continent's frame is entered, we immediately move the objects outside the field of view that shouldn't be accessible for this topic. One complication is that you can't move a button by name in Flash. Therefore, all the continents and countries had to be wrapped in a "movie clip" object type and then the movie clips themselves were given an instance name, and those movie clips were manipulated directly.
User Interface Summary
The interface first allows the user to log in to the system. There is a spinning globe in the background which is not just meant to be aesthetically pleasing. Right off the bat, it is meant to remind users about the global nature of the news, the diversity of reporting sources, and by spinning is able to accomplish this from a non-Euro-centric standpoint.
At this point, if the enter the teacher's password, they are taken to the "classroom guide". If they enter the regular, student password, they are taken to the topic selection screen. After they choose their topic, they are taken to the world view. The essence of the applet is map-based navigation, so that students can learn about geography and get a visual sense of where the articles are coming from relative to each other geographically. In the world view, the continents which have countries with articles are colored in yellow. This provides a nice affordance for learners, while still letting them zoom in on other continents (which don't have articles) as well. When they move the mouse over a continent, the continent expands, as another affordance for users to indicate that it is clickable.
If they select a continent with articles, the zoomed-in applet will show at least one country colored in yellow. The same interaction mechanisms apply here as in the world view. The yellow countries are clickable, and when the user mouses-over one, it will expand as an additional affordance.
When they click on a colored-in country, an infobox will pop up with basic info associated with the article, including source, date, title, byline, and the first paragraph of the article. At the end, there is a link that takes the learner to the actual website of the article and opens the site in a new browser window, thus allowing the user to have multiple news articles open at once for comparison.
Navigating around is also naturally mapped. There is a close button in the upper right of the infobox which closes the infobox and once again shows the full continent. There is a "Back to World View" button on the left of the continent screens, which is logical from a left-to-right reading standard, as left means back. There is also a button under the topic that allows learners to go all the way back to the topic selection screen, in case they made a mistake at that stage or change their mind about the topic. Thus, efforts have been made throughout to not only provide affordances for users, but to also provide easy and naturally mapped navigation and exit strategies.
Finally, dynamic instructions at the top of each screen guide and remind learners about the relevance of what they are currently looking at and what their objectives are in the task at hand, as well as their chosen topic.
|
