In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone/Android devices.

 

Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.

Project Overview

There are tens of thousands of high-quality open education resources available via the Internet yet for the hundreds of millions of mobile equipped would-be teachers and learners the discovery and adaption of those resources lack mobile optimized services.

 

This project will create iOS and Android mobile apps to enable millions of educators and learners discover, remix, and share open teaching and learning content on demand with their classrooms, study partners, and social networks.

 

This will enable educators and others to curate high-quality content by drawing from the digital public library, OER Commons, and its expertly curated collections of content that is not only free, but legally open to remix and distribute in any learning and social network.

Challenge Requirements

General Notes

- We have a Click Map PNG screen to show the full navigation/flow between screens (_Click Map.jpg).

- Also we have a guide style that you can refer to (07 - Style Tile.jpg).

- Use JSON to load data for the application, this include navigation, and categories. The structure is up to you.

- Should use ionic directives (ion-list, ion-item, etc.) as much as possible.

- You need to follow the ionic best practice in this contest.

- The converted prototype should exactly match the provided design/storyboard.

- Your design needs to be responsive, so in different screen sizes the application can adjust the layout accordingly.

- The app will be only in Portrait view.

- All pages on produced prototype should be linked to each other. Let us know if you need clarification about the flow, it is clarified in the Click map png.

- Note that mobile gestures (i.e. swipe left/right) will not work on the desktop browser, you need to open the link in your mobile to experience it.

Screens Requirements

The following will list required screens, refer to Click Map png to understand the interaction, and flow between screens.

 

- Main Navigation

- Screenshots :

- Student: 02_5 - Main Navigation Students.jpg

- Educator: 04_4 - Main Navigation Educator.jpg

- Follow click map to understand the connection between menu items and screens.

 

- Login Screen

- Screenshot: 01 - Sign In.jpg

- This is login screen.

- Use “student@email.com” as email for student login. Password is irrelevant.

- User “educator@email.com” as email for educator login. Password is irrelevant.

- The fields should start with lowercase field when user start typing.

- User can tap on the eye icon to show password.

- Remove “Remember Me” checkbox.

- Forgot password is deadlink.

- Simulate invalid login. We don’t have a style so you can use alert dialog to address invalid login or required field.

- Based on the login used take user to proper dashboard. If student then navigate to student dashboard, otherwise, to educator dashboard.

 

- Signup Screen

- Screenshots : 02 - Sign Up.jpg

- This is signup screen.

- All fields are required.

- Password fields must have a match validation.

- Email should have a validation.

- Title field, tapping on the right arrow should open default ionic list with values, the header should be same as Signup header but title should be “Title”, user can select a value, the header also should have a “<” to navigate back.

 

- Setup Preferences

- Screenshots :

- 02_1 - Preference.jpg

- 02_1_1 - Preference.jpg

- 02_2 - Preference.jpg

- 02_3 - Preference.jpg

- 02_4 - Preference.jpg

- This is preferences setup screen.

- User gets to this screen after signup screen or from Preferences menu item.

- User can navigate back and forth to fill information.

- The value in Select button represents the count of selected items in the corresponding screen.

- User can use Change button to go back to edit the preferences of that selected item (02_4 - Preference.jpg).

 

- Dashboard Screen - Recommend tab

- Screenshots:

- Student : 03 - Student's Dashboard.jpg

- Educator: 04 - Educator Dashboard.jpg

- This is the Dashboard screen for student and educator

- The screens for both roles are the same with only difference that educator gets an edit icon from the dashboard to edit the resource.

- The screen should support pull to refresh and progressive loading.

- When user tap on the heart icon it will add the resource to Favorites.

- Tapping on Download icon is placeholder, will be implemented in development.

 

- Dashboard Screen - Favorite tab

- Screenshots:

- 03_1 - Student's Dashboard (Alternative 1).jpg

- This screen list the items the user favorited.

- The content is similar to the Recommend tab where heart icon always selected here.

- Implement a local storage for favorite items. So when user favorite or unfavorite an item it gets added to this screen.

- The counter should reflect the number of favorite items in the cache.

- This screen also should support progressive loading and pull to refresh.

- User this UI when user tap on favorite item (03_5_2 - Mark as Favorite.jpg).

 

- Dashboard Screen - Recent tab

- No screenshot for this from design but it is same as Recommend tab.

 

- Advanced Search Screen

- Screenshots :

- 03_2 - Advanced Filter.jpg

- 03_2_0 - Advanced Filter.jpg

- 03_3 - Advanced Filter.jpg

- 03_3_2 - Advanced Filter.jpg

- This is advance search screen where user can create custom search for resources.

 

- Search Result Screen

- Screenshots :

- 03_4 - Search Result.jpg

- 03_5 - Search Result.jpg

- This is the advance search results screen.

- The top header is updated to show the keyboard provided, and tags for list fields selected.

- The tags should reflect the actual values selected from advance search, don’t mock them, we want this flow to be correct in the prototype.

- Tapping on (x) on the tag will remove it and refresh result.

- Tapping on reset will take user back to the previous screen.

- User can sort items via drop down list, no sorting implementation to be done here, you only need to implement the drop down and value selection.

- The search result list is same as the dashboard screen lists.

 

- Content Details Screen

- Screenshots :

- Student: 03_6 - Content Details.jpg

- Educator: 05_3 - Content Details with Remix.jpg

- 03_8 - Comments.jpg

- 03_9 - Evaluate.jpg

- 03_9_1 - See Result.jpg

- This is the content details screen.

- The screen is the same for both educator and student with the only difference that educator has an edit icon in the navigation at tab header.

- It has these tabs : Details, Comments Thread, and Evaluate (Edit for educator).

- When tapping Share it will open share dialog (03_6_1 - Share Content.jpg), the social network icons will be placeholders, comment field is optional.

- Tapping “View” open the resource content viewer (03_7 - View Content.jpg)

- For comments you need to simulate auto response when user add a new comment.

 

- Evaluate Screen

- Screenshots :

- 03_10 - Evaluate.jpg

- 03_11 - Evaluate Result.jpg

- This is evaluate resource screen.

- We have two screens in design, but the evaluate flow is that it loads number of questions, each question in a separate screen, all of them has same styling as in (03_10 - Evaluate.jpg) which is a single question with multiple radio buttons (radio buttons group).

- The pick list in (03_10 - Evaluate.jpg) is a placeholder, you can add mock values to simulate picking values.

- Tapping Clear Rating will reset the selected radio buttons.

- You need to show navigation between multiple questions before getting to the result screen. This is a simulation. You need to configure questions and content in JSON, it will vary for each resource.

 

- Notifications Screen

- Screenshots :

- 04_3 - Notifications.jpg

- 04_0 - Notifications & Suggestions.jpg

- 04_1 - Notifications & Suggestions.jpg

- This screen show notifications.

- The notification with white background represents a read notification, the dark one is unread notification.

- The three tabs show the same content. In development the other tabs will simply filter notifications to show specific type of notifications.

- In-app notification can be displayed anywhere in app when a notification received (04_1 - Notifications _ Suggestions.jpg), you can simulate this to appear every 1 minute.

- Tapping on the in-app notification takes user to notifications screen, tapping (x) dismiss it.

 

- Educator Items Screen

- Screenshot : 04_5 - My Items.jpg

- This screen list all the resources added by educator.

- Tapping (+) takes user to add new resource.

- Tapping the bin icon will delete the item.

- The screen should support progressive loading.

- Tapping on an item takes user to Content Details screen.

 

- Add New Resource Screen

- Screenshots :

- 05 - Author New Resource.jpg

- 05_0 - Author New Resource.jpg

- 05_0_1 - Author New Resource.jpg

- 06 - Remixing Existing Resources.jpg

- 05_1 - Author New Resource.jpg

- 05_2 - Author New Resource.jpg

- 06_1 - Remixing Existing Resources.jpg

- 06_2 - Remixing Existing Resources.jpg

- This screen is used to add new resource or edit existing resource.

- Write step : You can use any open source WYSIWYG editor but it must very lightwight.

- Write step : When tapping upload it will allow user to upload video/image/audio/document, simulate this and show uploaded documents.

- Write step : the uploaded items are shown below the editor, and user can swipe left to show the delete icon to remove item.

- Describe Step : For items use same sub-list screen as in Advance Search screen.

- Describe Step : All fields are required.

- Submit Screen : Draft and Submit will take user to Item Content Details screen.

- Submit Screen : Draft button should only appear for new resource, not existing.

 

- Downloads Screen

- Screenshot : 06_3 - Downloads.jpg

- This list the downloaded items from list and details screen.

- Tapping item will take user to Resource Content Viewer.

- User can delete items as well.

- It also show download progress bar (in circle shape), you need to simulate this and show it animating while downloading with progress percentage increasing. When download completes it should switch the progress to an icon same as other completed downloads.

- Remove the + icon.

 

- Resource Content Viewer Screen

- Screenshots :

- 03_7 - View Content.jpg

- 03_7_1 - View Content.jpg

- This screen is used to view resource content.

- Share icons will open Share dialog as in content details screen.

- Chat icon should take user to comments tab of this item’s details screen.

- Evaluate icon should take user to evaluate tab of this item’s details screen.

- Download icon will download the content.

- User can tap on the attached items to open another screen to view item details, usually these items are images or pdf files.

 

Specific HTML/CSS/JavaScript Requirements

- You must use HTML5 and CSS3, it is is preferred if you use Sass.

- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

- No inline CSS styles - all styles must be placed in an external stylesheet.

- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).

- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.

- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.

Device Requirements

- iPhone 5, 5s, 6 and 6+ (Portrait View)

- Android with similar to iPhone screens resolution (Portrait View)

Documents

Storyboard and Screenshots are provided in challenge forums.

References

- http://ionicframework.com/getting-started/

- http://learn.ionicframework.com/videos/

Final Submission Guidelines

Deliverable

FULL PROTOTYPE THAT WORKS AS EXPECTED, NOTE THE UI IS EXPECTED TO BE FULLY WORKING.

SUBMISSION GUIDELINES

SUBMIT AN ARCHIVE FILE CONTAINS ALL HTML/CSS/JS/IMAGES AND OTHER REQUIRED FILES VIA THE CHALLENGE DETAIL PAGE ON TOPCODER.COM.