6.813/6.831 User Interface Design & Implementation

Due at 11:59pm, Wednesday, February 17, 2016, by uploading your submission to Stellar.
You must complete the self-assessment form before you hand in the assignment.
You should make sure that your problem set renders correctly on Chrome (which we'll be using for evaluating your projects) and in either Firefox or Safari.

This problem set asks you to build a little game consisting of a user interface which asks the user to translate words from a language to another. You'll be using the set of core technologies that drive most modern web applications, namely HTML, CSS, and Javascript. We specify the design of the user interface. Your job is to implement it using HTML, CSS, and Javascript. You will complete a self-assessment after you complete the assignment.

Final Application

To do this assignment, you'll need to know how to:

  • write HTML: create correct HTML pages that display in modern browsers
  • use HTML form elements (like <button>, <input>) to create a web application
  • use CSS to layout and style HTML elements
  • use Javascript and jQuery to add event handlers and bindings to respond to user input;
  • use jQuery UI to augment the standard HTML <input> with an autocomplete feature.
Here are useful video tutorials on HTML/CSS/Javascript/jQuery/jQueryUI picked by the course staff: Here are some useful reference sources for HTML/CSS/Javascript/jQuery/jQueryUI:

Provided Resources

We provide you with the following:

  • ps1.zip: a zip file containing the code you will be editing for this problem set.
In the contents folder of the project are the following files and folders:
  • jquery: the code for jQuery and jQuery UI, the Javascript libraries you will be using for this assignment.
  • dicts.json: a set of bilingual dictionaries, containing words without accents or capital letters, extracted from English Wiktionary dumps, in JSON notation.
  • translate_game.html: a skeleton file for your user interface HTML code.
  • translate_game.css: a skeleton file for your user interface CSS code.
  • translate_game.js: a skeleton file for your user interface JS code.
Feel free to change these files as you see fit. You may use additional outside JavaScript libraries, but be sure to cite them in-line (include a link to the library's webpage).

1- Basic Layout (20%)

Figure 1

First, build an interface that looks like Figure 1. In particular:

  • There should be margins of at least 10px between and around the elements.
  • The instruction message on top should be quite large and aligned with the elements below it (we used Trebuchet MS for the font).
  • A three-column layout should be used in order to align the row containing the labels ("Spanish", "English", "Answer"). One row containing the current entry ("espejo", an <input> element, and the See Answer button). The other rows containing the past entries (bottom).
  • Create two static past entries. One for a correct translation ("calabaza", "pumpkin") using a blue font color, and a check mark (Hint: jQuery UI comes with plenty of symbols, and you can just inspect them to see which CSS class to use). The other for an incorrect translation ("postmodernidad", "phone") using a red font color, crossing out the incorrect entry (Hint: think CSS...), and displaying the correct translation on the third column.
No behavior is required to earn the points for this part, just a static layout.

2- Adding Basic Behavior (20%)

Improve your interface so that when the program is first run:

  • The names of the languages you need to translate from (Spanish) and to (English) should now come from variables on the JS code (namely, lang_from and lang_to). Note that jQuery makes those kind of tasks particularly easy.
  • The program chooses a random word from the dictionary for the user to translate (instead of espejo, on figure 1)
  • The <input> has focus, so that the user can start typing as soon as the page is loaded.
  • Clicking on the See Answer button prompts for another word, clears the <input>, and returns focus to the <input>. Don't check if the answer was right or wrong for now: just move on to the next word.
  • Note: For now, just keep your 2 static answers from part 1 in the list of previous answers

3- Displaying Answer Feedback (20%)

Update your code so that when the user presses the See Answer button, the list of previous answers gets populated with each of the user's entries instead of the two static answers you entered in Part 1. Make sure that:

  • The entry which was submitted last appears at the top of the list.
  • The program uses the styles you defined in Part 1 for correct and incorrect entries.
  • When deciding whether an entry is correct, the program only performs exact matches: synonyms, capitalization differences etc... should be reported as incorrect translations.

4- Adding Autocomplete (20%)

Figure 2

The input field contains the user's guess. Use jQuery UI to make this field an autocomplete widget (see Figure 2), so that:

  • It offers suggestions as soon as the user types two or more characters. Those selections should be the English words from the dictionary which contain the letters that the user has typed so far.
  • Selecting a suggestion prompts for another word, clears the <input>, returns focus to the <input>, checks to see if the answer is correct, and populates the list of previous answers accordingly (should have the same behavior as clicking on the See Answer button)

5- Improving usability (20%)

Make changes to your code so that pressing enter submits the user's reply even if the user didn't select a match from the autocomplete menu. Make sure that:

  • Pressing enter prompts for another word, clears the <input>, returns focus to the <input>, checks to see if the answer is correct, and populates the list of previous answers accordingly (should have the same behavior as clicking on the See Answer button and selecting an autocomplete suggestion)
  • Pressing enter when selecting an item from the autocomplete menu doesn't submit that item twice (don't forget to test that behavior on several browsers).
  • The autocomplete widget closes even if the user ends up not using it in order to select an item.

Further (Optional) Improvements

If you found this assignment easy and you're inclined to go further, here are some ideas for optional improvements:

  • Let the user choose the what language to translate from and to. The dicts.json file also contains dictionaries for English-French and German-Italian. If you'd like to add more choices, one possibility is to generate your own dicts.json file by getting more bilingual dictionary text files and modify the very simple parser we used in order to extract those words.
  • Display the user's score. Have a timed mode so that the user can only enter words during, say, 1 minute. Display a countdown of how much time is left.
  • Highlight the matching substring of each word in the list box, so that the user can see at a glance how the word matches the query.
  • Use cookies to remember statistics, such as best score across multiple games. This could also be used so that words the user often gets wrong can be prompted more often in order improve memorization.

What to Hand In

You must complete the self-assessment form before you hand in the assignment.

Package your completed assignment as a zip file that contains all of your HTML, JS, and CSS files (including the JSON data, jQuery, jQuery UI, and any other external libraries). Failure to include all necessary files for running your program will result in a loss of points from your final grade. (Please test by unzipping your zip file into, say, your /tmp directory, turning off your Internet connection, and then opening your page to see if it still works.)

List your collaborators in the comment at the top of translate_game.html, or explicitly say that you discussed the assignment with nobody. Collaborators are any people you discussed this assignment with, as well as any third-party libraries/example code you used. This is an individual assignment, so be aware of the course's collaboration policy.

Here's a checklist of things you should confirm before you hand in:

  1. Complete the self assessment.
  2. Make sure that the page renders correctly on Chrome (which we'll be using for evaluating your projects) and in either Firefox or Safari.
  3. Make a fresh folder and unpack your zip file into it.
  4. Make sure your collaborators are named in translate_game.html.
  5. Make sure all assets (images, jQuery source, JS files, CSS files, etc.) used by your code are found in the fresh folder and load successfully.

Submit your zip file on Stellar.