A very basic version of the app is live at [login to view URL] (when asked for username password - enter admin admin)
The app will let users try Ruby on Rails puzzles. There will be series of puzzles. A puzzle start with an incorrect Rails app which the user is suppose to correct. The tools are provided inside the app itself.
Once user corrects the app, there is a 'I am done' button. Clicking the button will show up a leaderboard to the user with toppers & his position (decided based on time taken to complete the puzzle). The user then moves on to next puzzle.
The app has following pages :-
1. Introduction page which tells people what the app is about & how to attempt puzzles. A prominent start button.
2. Puzzle view page - it has two components
i. Puzzle content view which has details of the puzzle
ii. Code Playground view - this is already created.
In current app - the two views are combined side by side. Since this is a facebook app & it has only 800 px wide availability, the two views need to be available side by side taking full-screen like a carousel. The user can navigate to either of the view with left right buttons as on a carousel.
On top bar of the puzzle view - there is a prominent timer & 'I am done' button. Once the user is done, he clicks on the button. The screen freezes & some tests are run in backend .
iii. Leaderboard popup - If the user passes the test, a big leaderboard popup shows which shows the top 5 (or 10) users & the last line has the user's position. The position is decided based on how much time user took to complete the puzzle. The popup has 'share to facebook' & 'move to next puzzle' buttons.
Thats it.