Challenge Overview
Welcome to the "Big Blue Career Quiz 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 since we will develop the prototype as web page inside WeChat apps. 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 within WeChat apps.
Required Pages:
01. Cover/Splash Screen
- Reference screen 01_Splash_Screen.png
- This screen is the entrance of the application after user click/tapped the link/images being shared to them.
- This screen will appear for few seconds before dashboard screen appear. Make sure to show this screen properly before dashboard screen appear.
- This screen needs to attract user attention, make it fun and engaging for university student.
02. Dashboard/Welcome Screen
- Reference Screen 02_Welcome_Screen.png
- This screen needs to welcome the student user and inform them about the application purpose in a cool way.
- An instruction to start quizzes via "Let's get started" button. By touch/tap this button, user will start the quizzes and not able to return/restart until the quiz is finished.
- All text needs to be text (not images).
03. Questionnaire Screen
- Reference Screens 03_Question1_Screen.png, 04_Question2_Screen.png, 05_Question3_Screen.png.
- This screen will show set of questions which will list the question and answer options.
- Questionnaire can have multiple pages, depending on how many questions being asked in the quiz.
- One question per page, the pages can be switched by button or gesture.
- Create 3 screens for the questionnaire :
* First page of quiz screen, contains next button, no previous button, content of the question and some instructions on how to choose the answer.
* Middle page of quiz screen, contains prev and next buttons.
* Final page of quiz screen, contains prev button and no next button, some notification that indicates this is the last question, for ex. text "Result!".
- Show progress step bar needs to be working, how many questions has been answer by the student user by total questions available in quiz?
- Ability to save for later via "pause" button in case student user needs to pause the quiz for other activity.
- Content can be dummy right now, right now only 4 form design interactions available, checkbox, radiobox, selectbox and textbox.
04. Result Screen
- Reference screens 06_Result_Good_Screen.png, 07_Result_Not_Bad_Screen.png, 08_Result_Bad_Screen.png.
- This screen which will show the result based on the answer given. The result could be a score or short summarization.
- 06_Result_Good_Screen.png show how apps will show user score if user get good score.
- 07_Result_Not_Bad_Screen.png show how apps will show user score if user get okay score.
- 08_Result_Bad_Screen.png show how apps will show user score if user get bad score.
- Needs some design for "next step" to go to Submit/Final screen to enter their personal information.
05. Submit/Final Screen
- This screen will ask user to enter his personal information.
- Major info needed is user real name and personal email, while others is optional.
06. Thank you Screen
- After user enter his personal information and hit the "post" button, it will show Thank you screen!!
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.