|
| 1 | +# Mimo Mobile Coding Challenge |
| 2 | + |
| 3 | +The goal of this challenge is to create an extremely simplified version of the Mimo app that can retrieve some very basic lessons from a server and display them. |
| 4 | + |
| 5 | +## Implementation |
| 6 | + |
| 7 | +- While you can write the challenge any way you want, we use Reactive Extensions + MVVM to build our apps at Mimo, so if you know those technologies, it would make sense to apply them in this challenge |
| 8 | +- You won't be judged on the visual design at all, the only metric is your code. |
| 9 | +- Part of this coding challenge is to read the documentation for the APIs provided to you. |
| 10 | +- Use Git to track your changes and upload your Git repo either on [GitHub](https://github.com) or [Bitbucket](https://bitbucket.com) to share it with us. |
| 11 | + |
| 12 | +## Goal |
| 13 | + |
| 14 | +Write a small app that can display a few very simple Mimo lessons. You get the information for the lessons from an API and should display the first lesson. The lessons have a specific format (documented later) and should be rendered to the screen. If the lesson contains an interaction, display the interaction. Also display a "Next" button that, when pressed, checks that the lesson has been solved and continues to the next lesson. |
| 15 | + |
| 16 | +When a lesson has been solved, store this event in a mobile database of your choice on the device (see "Lesson completion event"). |
| 17 | + |
| 18 | +If the user solved the last lesson, display a simple screen that says "Done". |
| 19 | + |
| 20 | +## Data structure |
| 21 | + |
| 22 | +### Lessons |
| 23 | + |
| 24 | +- Each lesson has an ID and JSON content that describes how the lesson is formatted |
| 25 | +- Lessons come in a specific order |
| 26 | + |
| 27 | +#### Lesson Content Format |
| 28 | + |
| 29 | +Every lesson contains content, formatted as JSON, that represents an array of content objects: |
| 30 | + |
| 31 | +```json |
| 32 | +{ |
| 33 | + "id": 5, |
| 34 | + "content": [{ |
| 35 | + "color": "#FFFFFF", |
| 36 | + "text": "Hello " |
| 37 | + }, |
| 38 | + { |
| 39 | + "color": "#FFFFFF", |
| 40 | + "text": "World" |
| 41 | + }, |
| 42 | + { |
| 43 | + "color": "#FFFFFF", |
| 44 | + "text": "!" |
| 45 | + }], |
| 46 | + "input": { |
| 47 | + "startIndex": 7, |
| 48 | + "endIndex": 11 |
| 49 | + } |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +Each object in the content array represents a text snippet that each can have a different color. If the `input` object exists, it represents the range where the user has to type in the expected input. In this example the user has to input "World" in order to proceed to the next lesson. If an input interaction exists, and the user hasn't typed in the correct input yet, disable the button. As soon as the input is the correct text, enable the button, so the user can proceed to the next lesson. If there is no input interaction, the button should always be enabled. |
| 54 | + |
| 55 | +Here's an example of how this lesson could look like: |
| 56 | + |
| 57 | +<img width="217" alt="challengedisplay" src="https://user-images.githubusercontent.com/964691/39253366-fe542ad0-48a7-11e8-98c4-8e1c2c6a470d.PNG"> |
| 58 | + |
| 59 | +### Lesson completion event |
| 60 | + |
| 61 | +A lesson completion event object is created when a lesson has been completed |
| 62 | + |
| 63 | +It contains the following properties: |
| 64 | +- The ID of the lesson |
| 65 | +- A timestamp when the lesson started |
| 66 | +- A timestamp when the lesson completed |
| 67 | + |
| 68 | +## Server API |
| 69 | + |
| 70 | +The server API for getting the lessons is extremely simple. Just do a GET request on https://mimochallenge.azurewebsites.net/api/lessons, which returns a JSON object that contains all of the lesson information. |
| 71 | + |
| 72 | + |
0 commit comments