Home > Flash, Flex, Portfolio > Recent Work on Unit Conversion

Recent Work on Unit Conversion

February 24, 2012

My first thought about this project was “boring, but at least it’s a payday.”  This application allows students to practice converting across different types of units on actual problems.  In terms of interactivity, it’s pretty much dragging rectangular tiles with a numerator and denominator into slots inside a work area.  Yes, I’m fading off to sleep as I write🙂  A screenshot of the basic layout is shown below.

Standard tiles are fixed-width and defined in XML so that the tile set for a conversion category can be easily changed (and it was changed multiple times during development).

<category name="Distance">
<metric>
<tile id="Distance0" >
<numerator value="1000" useCommas="false">meters</numerator>
<denominator value="1" useCommas="false">kilometer</denominator>
</tile>
.
.
.

which brings us to the interesting part of the application – the text formatting.  I worked within the framework used by this client and all UI text components are based on Flash TextFields.  Each numerator and denominator has a value and units.  Units are written out as text strings, however, units may have singular, plural, and abbreviated forms.  The rules for formatting values are comma-formatted unless otherwise specified and scientific notation is used if the number is outside a pre-specified range.  The number of displayed digits in scientific notation is also variable.  Powers are handled with a superscript font.  I had to test if an exponent was applied in the formatting to vertically adjust text placement.

Unit text is auto-converted to an abbreviation if the text is to wide to fit inside the tile.  The XML unit type is the preferred formatting, but only if it fits.

The objective of the lesson is to convert the starting units to the requested units using the minimum number of tiles.  No more than three tiles may be dragged into the work area and each problem can be solved using no more than three tiles.  Tiles may be flipped, which adjusts the numerator and denominator; however, tiles are restored to their original (XML) form when moved back into the work area.  When a tile is released outside the work area, it automatically jumps to the nearest open slot (left-to-right).

As tiles are dragged into position, the program checks if any units cancel.  Cancellation must take into account any combination of singular, plural, or abbreviated unit.

This is where it gets fun.  The program is supposed to draw a red, diagonal strike-through mark across the unit when cancelation is detected.  Again, this has to work for any combination of singular, plural, or abbreviated unit, so the drawing is completely programmatic.

The other interesting text-processing aspect of units is that units must be gathered into like form with a single power in the event there is no cancellation.  There are also rules for formatting the answer that vary from the work-area tiles, such as rounding to the nearest 0.001 where the rounding value is arbitrary.  An example is shown below.

In the denominator, the singular unit, ‘cubic centimeter’ is combined with the abbreviated unit ‘cm^3’ to create a new unit cm^6.  This processing is done by a gathering pass where all units are broken down into a ‘fundamental’ unit and exponent.  All like units are gathered and the exponents processed to produce the output.

Currently, there is no cancellation in this step unless there is an exact unit match, i.e. cm in the denominator does not cancel cm^4 in the numerator.  The goal is to make it easier for the student to see the unit collections across tiles so that they can quickly decide which tiles to move back to the work area.

The text and dynamic drawing aspects of this project proved to be quite interesting.  The next time I think someone is presenting me with a boring project, I’ll know to think again🙂

Categories: Flash, Flex, Portfolio
%d bloggers like this: