Assignment #4 - Language word tutor
Due: start of class, Thursday 2/14.
You will be creating a web-application that mixes together several sources of web information.
You will learn how to use a RESTful web API.
Overview.
You are working for a company that does English as a second language instruction.
Your instructors want a web-based application that lets them easily show students an English word along with its picture.
They would also like the application to also show the translation into a small set of languages (the native languages of the students in a particular class).
Your job is to build a web application mashup using several of Microsoft's web service APIs (Bing Search API and Translator API).
The Ajax lecture on the schedule page has links to relevant examples that make use of these APIs.
You may use any web technology you want, but your application must work in the Firefox browser.
Since the Bing API has support for Ajax via a proxy and JSON-format data, HTML + JavaScript is probably the easiest choice.
The overall behavior of the application is shown in the above video.
You are free to implement the look-and-feel of the page as you see fit, but it should meet the requirements below.
Requirements:
Page has a text entry field allowing one or more words to be typed.
Page has a button that causes a new image and translated word(s) to be loaded.
The image and translations should be erased when the button is pressed.
The image and translations should load in parallel, populating the relevant page sections as soon as the results arrive.
You should retrieve 10 images for the English word(s).
Clicking on the image causes it to cycle through the 10 images, from the top result to the last result.
After clicking on the tenth image, it should cycle back to the first image.
If one or more of the web API queries fails to return a result (e.g. a bogus word), your page should not generate a JavaScript error.
The exact languages displayed on your page should be easily configurable by changing no more than two lines of code. Include a comment describing how to configure the page.
Can I use a single XMLHttpRequest object to make multiple parallel requests? No. You'll need to create multiple objects.
All my Ajax requests are served by the same onreadystatechange callback function.
Is there a way to tell which request a particular response came from?
Not that we could find.
You may be able to figure it out based on the response generated by the web service.
Another option would be to design your code so it works without this knowledge.
Or you could have different callback functions for each type of request, though this may be a bit inelegant.
Submission.
I will be testing your program on the URL you send me via email. I will be using the Firefox browser.
You also need to submit your source file(s) to the Moodle dropbox.
The Moodle timestamp is the completion time for the assignment.
