Challenge Overview
Welcome to the "IBM - Quiz Apps Mobile HTML Prototype Challenge". The goal of this challenge is to create mobile HTML5 Prototype application based on provided storyboards for client. The prototype must follow best practices for HTML application. Please see more details below.
The main task of this project is to create the UI Prototype based on the provided Storyboard design by re-use existing best practices look and feel also the functions of HTML5 mobile.
This UI Prototype will use Responsive Design solution that will works within Mobile Platform. You must use mobile web HTML5 best practices so it will looks good in targetted device. Read more details for UI Prototype Requirements and Flow below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers. We're only concern about mobile browser since this apps will run in mobile device only.
Required Pages:
01. Login Screen
- Reference screens "01A-Login-screen-error.png and 01-Login-screen.png".
- This screen by default will appear everytime user start the apps.
- User needs to enter their IBM account (intraned ID and password) to be able use this apps.
- Provide login error scenario if user provide wrong intranet ID or password.
- "Sign up" needs to be create as button.
02. Dashboard Screen
- Reference screen "02-Dashboard.png and 08-Navigation.png"
- After successful login, user will be redirected to this screen.
- This screen showing user information regarding his log activity in the apps.
- All text needs to be editable.
- Touch hamburger menu will open 08-Navigation.png, all navigation needs to be work and navigate user to the targetted screens.
- Setting icons needs to be clickable (dead link)
- Touch "Play Quiz" button will bring user to Quiz screens
- Touch "Create Quiz" button will bring user to Create Quiz screens.
03. Quiz Screens
- Reference screen "03A-Quiz-screens.png to 03-Quiz-screens.png"
- Before user can start the quiz, they will see "03-Quiz-screens.png" first that explain the quiz rules.
- The hexagonal parts on the header should be timer, it should be set from 15 seconds and needs to be working (count down timer).
- The thin yellow line between header and main content is quiz progress the yellow line will go longer if user go to next questions.
- This is the main function for the apps, user will be able to answer several questions from the apps regarding their knowledge about IBM and it's surrounding.
- Questions can be in different format, it can be only text or images or both.
- Only 1 answer can be selected for each questions.
- When user touch/tap the answer, apps will show the answer directly.
- If user select the right answer, the selected answer will changes color to green (03C-Quiz-screens-right.png)
- If user select the wrong answer, the selected answer will changes color to red and the correct answer will change color to green (03B-Quiz-screens-wrong.png)
- There will be 10 questions everytime user start a quiz, provide 10 dummy questions to simulate how the apps will works.
04. Score Result Screen
- Reference screen "04A-Score-result.png to 04-Score-result.png"
- After user finish 10 questions in the apps, they will reach score result screens.
- "04A-Score-result.png" will appear first to show any achievement or badges that user get after finish the quiz.
- "04-Score-result.png" will appear after user click OK button from 04A-Score-result.png.
- In 04-Score-result.png. all buttons needs to be working, IBM connection will share the score result to user colleagues via IBM connections (just provide some popup showing sharing functionality working), Play another will bring user to a new set of quiz questions, and leaderboard will navigate user to leaderboard screens.
05. Leaderboard Screens
- Reference screen "05A-Leaderboard-country.png and 05-Leaderboard-global.png"
- User can see his/her ranks in this screens along with his/her colleagues (IBMers) from around the world.
- They can see their position or navigate all the leaderboard position (scrolled)
- User can see their global or country ranking (USA).
06. Create Quiz Screens
- Reference screen "06A-Create-quiz.png to 06-Create-quiz.png"
- Besides play with the quiz, user also can create new quiz questions in the apps.
- 06-Create-quiz.png, will appear first so user can set the topic and how many questions he/she wants to create.
- 06A-Create-quiz.png, will appear repeated until the questions number that user set previously complete.
- 06A-Create-quiz.png, in question area, user can enter only text, image or both.
- 06A-Create-quiz.png, in answer area, user can enter text, image or both.
- 06A-Create-quiz.png, in answer area, selected radiobox means that it is the correct answer.
- 06B-Create-quiz.png will appear once all questions creation complete.
07. My Profile Screen
- Reference screen "07-My-profile.png"
- This screen will appear if user touch the user profile picture.
- Only profile tabs needs to be create, but make sure levels and achievements tabs can be opened (empty content or use dummy content is fine).
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery for this contest.
Browsers Requirements:
- Firefox, Safari & Chrome Mobile Browsers
- Android Browser.
Documentation Provided:
- Storyboard and flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.