Karma/Layout Converted Squeak Lessons

Overrall Considerations

We are converting the Squeak lessons for the XO, which has peculiar display characteristics

• 96 DPI (dots per inch) instead of the usual 126 or 134
• 1200x900 screen resolution

The header and footer both use 75 pixels of vertical space.

Your working area is roughly (0, 75px) to (1200px, 1125px).

We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.

Background Image

Your background image should 1200px by 900px The best way to designate the background image is in your css/lesson.css file

  body {
    background-image: url(./path/to/file.png);
  }

Header

The following items are on the header bar from left to right:

• Back button - returns to the lessons list (left aligned)
• Activity title (position to the right of back button)
• OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)
• Help button – help text appears (right aligned)

Footer

The following items should appear on the footer bar from left to right: Score board (left aligned) Level indicator – if required (position to the right score board) Start button (position to the left of play again button) Play again button (right aligned)

Help

TODO

Page Navigation

The next page button should be positioned just above the footer bar to the right of the screen.

Previous page button should be positioned just above the footer bar to the left of the screen

Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page). To the left and right of the lesson area for back and next respectively, vertically centered to the page.

Text

• Size – Big enough so that its clearly readable on a XO screen
• Color – Contrasting from the background so that its distinctly visible