CSC309 A1: kääntää Translations

Intro

One of the more fun courses that I’m taking this semester is  CSC309: Intro to Web Programming.  Although I do a lot of coding in general, I’ve actually never worked with Javascript or other web technologies.  Sure, I’m using WordPress right now, but Bluehost is nice enough to have one-click installs!

For our first assignment, we were tasked with creating a simple chart that would allow users to add, remove, and edit translations.  We were not allowed to use Javascript libraries, and none of the changes would be persistent (no servers…yet!).

You can view the application here: http://www.pioverpi.net/csc309/a1/main.html

Feature List

A table that has four columns, one for each language.  One language must use a non-roman alphabet

The table itself is divided into two sections: the upper section displays the language categories, and the lower categories represent language-specific translations.

First, you might notice that the body of the table is independently scrollable from the page itself. If the table was not setup this way, the table would extend very far down into the page. In that scenario, it becomes very easy for the user to forget which column corresponds to which language. Making it so that the table body is independently scrollable from the rest of the page makes it more understandable to user.

Zebra highlighting of the rows is also enabled to make it easier to scan through the rows of data

One of the trickier design decisions was to figure out how to handle multiple translations for a single “root” word (in this case, English). In the current implementation, I decided to simplify the design and only allow one translation per language, per word. So if you wanted add a translation to an existing root word that already has a translation, then you will have to add a new row into the table.

Sort the table by column

You can sort the table on a particular column by single-clicking it. Doing so will sort the table on that column in an alphabetically ascending order.

Most table usually have a three-state sort order, where one click sorts the table in ascending order, another click sorts the table in descending order, and a third click reverts the table back to an unsorted state. My implementation of the table does not do this

Also, there is no visual indicator to show that the table is currently sorted on a particular column

Date/Time Edited

The user can view the last modified date of a cell by hovering over a particular cell

The tooltip is written in the following format: “Last edited on <DATE>/<MONTH>/<YEAR> at <HOUR>:<MINUTES>:<SECONDS> UTC”.  Dates and times are all in UTC

The following actions will change the last edited time:

• Editing a cell
• Changing the verification status of a cell (unverified, verified, rejected)
• Adding a new translation
• Adding a new language (only on the cells in the new column)

Adding New Translations

New translations can be added to the table by clicking on the “Add Word…” button below the table. New translations are added as a new row in the table.

By default the first entry, the root term, will be made editable. This is mainly for usability (e.g. fewer mouse clicks) and to encourage users not leave blank rows in the translation table. All other entries are set to blank by default.

Editing Existing Translations

Any word in the translation table can be edited by double-clicking on a cell. If the cell has some existing text in it, then the text edit box has the word set as its default text.

Note: Unfortunately, double-clicking on the word itself does not open the text edit box for some reason; you have to double-click the area beside it slightly. However, it makes a bit of sense, because this way the user can still double-click on the text itself to highlight it all, which would be good for copy and pasting.

To finish editing, simply press enter or tab away from the box
Unfortunately there is no way to cancel out of the operation.

Add New Languages

New languages can be added by clicking the + button inside the column header.

When the button is clicked, a new column is added into the table. The column’s header is made editable by default. In order prevent asynchronous creation, the add new column button will be deactivated during this stage.

Checks are also put in place to ensure that the user does not enter a language name that matches an existing language. If this happens that language will not be added, and an appropriate error message is raised:

Approval/Rejection System

Inside each non-root term cell is a three-state checkbox that allows the user to indicate whether a translation term is: verified, rejected, or unverified

Because the specifications were unclear on exactly how the approval system would work, I imagine that it would work like Wikipedia. When the user first loads the website, they will see the current translation table with verified, unverified or rejected checkmarks.

Any user will have the ability to edit the translation text and/approval status of a word, but the changes will not be immediate. The proposed changes will be reviewed by a website admin/op, and if it is appropriate, then the changes will be applied to the system.