iteloo / storytown

An online teaching portal for language teachers and students written in Elm/Haskell

Storytown

Storytown is an online teaching portal for language teachers and students

Teachers can:

• Quickly set up lessons for their students
• Enter translations for the readings
• Record passages directly in browsers
• Track student progress on the dashboard

Students can:

• Review passages with smart reader
• Listen to passages with audio

Technical note

Storytown is built using Javascript/Elm on the frontend and a RESTful Haskell servant API on the backend! The recorded audio resources are stored on Amazon S3, and lesson/user data are persisted in Postgres through Persistent.

storytown's Issues

Line breaking doesn't break words in terminal blocks

Login session not working

Did session tokens break again?

Logging out doesn't clear session data

Clearing Http-Only cookies require a call to the server.
A cleaner solution is to store a loggedIn flag in the client, and keep the current cookie setup.

css name clashes

Hovering doesn't highlight expand/collapse buttons on other lines

translation tree animations doesn't work smoothly

Translations span trailing spaces

Possible fixes:

1. move spaces out before rendering
2. move spaces out when parsing

(2) is cleaner, but may result in problems when measuring widths, due to space collapsing behaviours in css.

Saving of stories should be disallowed if no changes

Invalid URL crashes app

Marked text shifts text to the right

Create separate S3 bucket for production

Remove tiny gaps between marked text during audio-text sync

Line breaks aren't re-calculated when window resizes

Subscribe to window resize events and format again.

Encrypt traffic to Heroku Postgres

Show session status on right of nav bar

• if logged in, show username
• if not logged in, show login and sign up buttons

Long translations pushes original text apart, causing line overflow.

Because the line breaks are measured without the translations.

Spacing between words are wrong

We want

• spaces optional and collapsed in source text
• spaces stripped in translation blocks
• spaces preserved in rendered original text

User redirected to login page even when visiting public pages

Right now an API call to get the logged-in user is enforced on app launch, and authentication error is handled the same way as any other API call – by redirecting to the login page.

We can treat this call as a special call bypassing the default error handler.

Translation granularity not persisted

Currently I'm only storing the source text on server.

A few options to implement this:

1. store the entire Collapsable on a per user basis
2. store the sequence of zipper movements to recreate state

In (1), if the story is edited, the user will continue having the old version. We can provide the option to let them upgrade the story, at the cost of possibly resetting the granularity levels. At some point we can minimize this disturbance by using a tree diff.
In (2), we need to load the correct version from the server to apply the zipper movements. Otherwise the result will be undefined.

In either setup we will need some sort of versioning of the stories.

Left-align split translations

Split lines with no words have no height

Add in a space?

Doesn't support SEO

Expand and Collapse always updates first sentence

incorrect width for top-level translation due to bootstrap interference

Collapse button pushes lines below away

Add uniform network error handling on client

Add audio-text syncing for story page

Working before. Need to upgrade to TransView

Stories with empty sentences can be saved

Add empty source to parser error

Text can be clicked even when audio isn't loaded

Story page still showing bogus translations

Translation splitting algorithms doesn't take into account the side paddings

We can import the padding lengths from MyCss.elm, but we'd need to convert between px and the "unitless" values. Is this conversion device independent?

Navbar dropdown doesn't close when clicking outside the menu

Warn when leaving edit page without saving

Line breaking algorithm sometimes measures incorrect widths if span gets broken across lines

No way to show overflowing part of translations

Several options here:

• separate zoom box activated on click/hover
• scrolling text (haha!)
• shrink text

Rerecording audio doesn't delete old file off s3

Currently, S3 files are created as soon as a sentence is recorded, so the deletion must also happen in the client as well.

Alternatively, we can only submit audio to S3 upon saving the story. In this case, we can also let the server take care of the deletion.

Collapse "button" doesn't span the entire width of the parent

Password not hashed

Redirect http traffic to https

Requires checking for X-FORWARD-PROTO header on Heroku, since proxy communicates with dynos using http only.

Translation splitting only works for Chinese characters

Currently splitting each character, even if they are Latin alphabets.

Translation divs/spans need to be top-aligned

Add ellipses to split translations

Need to measure width using port

Break paragraphs into lines, not each sentence

Zippers forget expanded blocks

Because the context doesn't store this information. We need it when using zippers to update nodes in the tree.

Blob still gets sent to S3 even if microphone is broken

Colour translation blocks to visually aid distinguishing blocks

We have two options:

1. Computed dynamically, at the time of expansion and collapsing. We will only need a total of 3 colours. Also, we are able to make colour distribution as uniform as possible.
2. Precompute colours for all the levels before rendering for the first time. This is less confusing for the user as the colours won't randomly change as they expand and collapse translations. However, this will probably require way more colours, but exactly how many?

`AnimationFrame` events received even after formatting is done

incorrect width for top-level translation due to bootstrap interference

Translations merely duplicated to each broken line

Split translations don't highlight together on hover