Challenge Overview
Welcome to Living Progress - The Class Master - USSD Messaging Demo Skinning Challenge.
Client is looking to create a USSD demo to showcase their idea on how absenteeism data is received from the class teachers in schools.
We have already created a POC of the USSD Emulator code that works as defined in Class Master Demo.pdf....now we are looking for your help to skin it with a phone interface that is supplied. In the end of this challenge we need solid UI prototype result with best practice solutions
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
The class teachers collect attendance data in the classrooms during lessons on a daily basis. They then submit summaries of attendance data with the aid of simple USSD code i.e. via a mobile device. The summary data include the numbers of boys and girls who are absent and the common reasons for absenteeism. This demo is shown in Class Master Demo.pdf
Challenge Assets:
Please find all the files required for this challenge:
https://drive.google.com/folderview?id=0B2MK5NncVSuQWlliMHh3bnFkUjg&usp=sharing
- Please use the storyboard attached to this challenge
Important:
- Provided storyboard need to work in all desktop resolutions with the mobile interface, need to stay fixed.
- Once you run the demo locally, you need to click on “Call” button and enter 1111 (click number ‘1’ four times) and hit the send button...after that you could see/follow other screens as shown in Class Master Demo.pptx
Required Task:
You are required to take the provided codes and skin them with the phone interface as given in the PSD, please see the "readme 2.md" to see how to run this demo locally (note: you will require node.js to run this demo).
You need to create hotspots for the below:
- - - User will be able to click on each of the numbers
- - - User will be able to click on the call (green) button
- - - Currently user enter any number and clicks on the “Send” button in the demo, now in this phone interface “center square” button will replace this “Send” button - please make sure that is clickable!
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.