Challenge Overview
Project Overview:
Welcome to the THOLOS HTML5 Prototype Challenge! The goal of this challenge is to create a responsive HTML5 Prototype application based on provided storyboards and clickable wireframes for THOLOS Survey App. The prototype must follow our standards and our guidelines. Please see more details 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 out all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application is using Zurb Foundation (http://foundation.zurb.com/) for the responsive framework and Angular (https://angularjs.org/) for the javascript framework.
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 a responsive HTML5 prototype based on the provided storyboard designs and clickable wireframe. Your prototype must work properly in all the required browsers.
Survey Manager Required Pages - optimized for the desktop browser:
1) Login page:
Desktop01.png, Desktop02.png
- User opens the desktop browser, types in the url and login page is displayed.
- Logo is image based.
- Required Fields:
---- Username and Password.
- Remember Me and Forgot Password: add these to you code but then comment them out; these features are for a later phase.
- Buttons:
---- Login: if no errors, clicking the button displays the Landing Page.
---- Please notice the error style (Desktop02.png).
2) Survey Manager Landing page (1 screen with 2 dynamic areas on the screen)
Desktop03.png, Desktop05.png
- Logout Icon (to the right of the user name):
---- clicking the icon displays the Login page.
- List of Surveys:
---- Default view of surveys is List View; List View toggle icon is On and Grid View toggle icon is Off.
---- List of surveys is sorted by status.
---- clicking the column header sorts the list by that column (ascending, descending).
---- clicking the survey name displays the Survey Details (see #6 below).
- Grid View of Surveys (see Desktop05.png):
---- clicking the grid icon displays the grid view without refreshing the page; Grid View toggle icon is On and List View toggle icon is Off.
---- clicking the Right or Left arrow on the grid view displays next four (4) or previous four (4) for that row.
---- clicking the survey name displays the Survey Details (see #6 below).
- Quick Access:
---- clicking the survey name displays the Survey Details (see #6 below).
---- Edit: clicking button displays editable view of Quick Access list without refreshing the entire page (see Desktop05.png).
- Quick Access Edit:
---- clicking the Cancel button displays Quick Access without refreshing the entire page.
---- clicking the Done button displays Quick Access without refreshing the entire page.
- Buttons:
---- Create New Survey: clicking button displays Create New Survey Step 1 page (see #3 below).
3) Create New Survey: Step 1
Desktop06.png, Desktop07.png
- Required Fields:
---- Survey Name and Cell Name.
- Blue Plus Icon:
---- clicking Icon adds a new fields to both Prototype Code(s) AND Number of Prototypes Per Code.
---- Blue Plus icon will be displayed to the right of the new fields.
- Buttons:
---- Cancel: clicking the button displays the Landing Page.
---- Save as Draft: if no errors, clicking the button displays the Survey Details page (see #6 below).
---- Next: if no errors, clicking the button displays Create New Survey : Step 2 (see #4 below).
---- Please notice the error style (see Desktop07.png).
4) Create New Survey: Step 2
Desktop08.png
- Drag and drop functionality to move the questions from one column to the other.
- Column Text: 0 Questions Added:
---- Moving questions into the right column increases the count.
---- Moving questions out of the right column decreases the count.
- Prototype & Post-Testing Questions Columns:
---- scrollbars will only display when there are more than five (5) questions in the column.
---- Prototype Questions: in the prototype, have seven (7) questions in the list so the scrollbars will display.
---- Prototype Questions Empty Slots : in the prototype, have seven (7) empty slots so the scrollbars will display.
---- Post-Testing Questions : in the prototype, have four (4) questions in the list so the scrollbars will NOT display.
---- Post-Testing Questions : in the prototype, have four (4) empty slots so the scrollbars will NOT display.
- Please code these two (2) Drag and Drop scenarios:
---- User drags question 1 to Empty Slot. Question 1 is now displayed in the right column.
---- User drags question 2 to Empty Slot and question 3 is automatically moved over along with question 2. Questions 2 and 3 are now displayed in the right column.
- Buttons:
---- Back: clicking the button displays the previous page.
---- Save as Draft: clicking the button displays the Survey Details page (see #6 below).
---- Next: clicking the button displays Create New Survey : Step 3 (see #5 below).
5) Create New Survey: Step 3
Desktop09.png
- Buttons:
---- Survey Details Edit: clicking the button displays Create New Survey: Step 1.
---- Prototype Questions Edit: clicking the button displays Create New Survey: Step 2.
---- Post-Testing Questions: clicking the button displays Create New Survey: Step 2.
---- Back: clicking the button displays the previous page.
---- Save as Draft: clicking the button displays the Survey Details page (see #6 below).
---- Publish: clicking the button displays the Survey Details page (see #6 below).
6) Survey Details
Desktop10.png
- Buttons:
---- Back to Home: clicking the button displays the Landing Page (see #2 above).
---- Duplicate: clicking the button does nothing.
---- Edit: clicking the button displays the Edit Survey Details page (see #7 below).
---- Download Participant Login: add this button to the page but then comment it out; this button is for a later phase.
---- Publish: clicking the button redisplays the Survey Details page.
7) Edit Survey Details:
Desktop11.png
- Red X Icons:
-- clicking the X icon on a question displays Yes/No question overlay.
-- clicking No, hides the Yes/No question overlay and leaves the question in the right column.
-- clicking Yes, hides the Yes/No question overlay, removes the question from the right column and adds it to the left column.
- Buttons:
-- Cancel: clicking the button displays Survey Details page (see #6 above).
-- Update: clicking the button displays the Survey Details page (see #6 above).
Participant Required Pages - optimized for the smartphone browser:
- Note: only Portrait mode needs to be supported.
1) Login
Mobile01.png
- Uses the same login screen as the Survey Manager EXCEPT the footer is not shown.
2) Profile Survey
Mobile02.jpg
- in the prototype, only show these label/fields:
---- Birthdate (dropdown).
---- Weight (dropdown).
---- Height (dropdowns).
---- What brand of feminine hygiene pad do you use most often for menstruation? (code as multi-select).
---- What type of feminine hygiene pad do you use most often for menstruation? (code as single select).
- Required Fields: all fields mentioned above are required.
- Buttons:
---- Submit: if no errors, tapping the button displays the Landing page (see #3 below).
---- see Desktop07.png for error display style.
3) Participant Landing Page
Mobile03.png
- Current Testing Product:
---- Prototype Code is text.
---- tapping the title bar OR area with prototype code displays the Prototype Questions (see #5 below).
- Upcoming Testing Product:
---- Product Name is text.
---- tapping the title bar OR area with product code does nothing.
---- add Upcoming Testing Product to your code but then comment out title bar and prototype code area; this feature is for a later phase.
- Buttons:
---- Test a Prototype: tapping the button displays Test a Prototype (see #4 below).
---- All Prototype Testing Completed: tapping the button displays Post-Testing Questions (see #6 below).
4) Test a Prototype
Mobile04.png
- Prototype code field is alpha numeric and is required.
- Save Button: if no errors, clicking the Save button displays the Participant Landing Page (see #3 above).
5) Prototype Questions (5 screens)
Mobile05.png, Mobile07.png, Mobile08.png, Mobile09.png, Mobile10.png
- Required Fields
---- all fields are required; user cannot move to the next screen until the question has been answered.
- Code the screens in this order:
---- Mobile05.png - upload photo from their phone; show progress bar at 20% width of screen; Select Photo button lets user select a photo from their phone; Next button displays Mobile07.png screen.
---- Mobile07.png - code as single select; show progress bar at 40% width of screen; Next button displays Mobile08.png screen.
---- Mobile08.png - code as multi-select; show progress bar at 60% width of screen; Next button displays Mobile09.png screen.
---- Mobile09.png - slider; show progress bar at 80% width of screen; Next button displays Mobile10.png screen.
---- Mobile10.png - textarea; show progress bar at 100% width of screen; Save button displays Participant Landing Page (see #3 above).
6) Post-Testing Questions (2 screens)
Mobile11.png, Mobile12.png
- Required Fields
---- all fields are required; user cannot move to the next screen until the question has been answered.
- Screen elements:
---- Mobile11.png - slider; show progress bar at 50% width of screen; Next button displays Mobile12.png.
---- Mobile12.png - single select with text area; show progress bar at 100% width of screen; Submit button displays Thank You page (see #7 below).
7) Thank You
Mobile13.png
- Thank you is an image not text.
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.
- Angular.js for javascript framework (https://angularjs.org/)
- Zurb Foundation for responsive framework (http://foundation.zurb.com/)
-- a comparision of Zurb and Bootstrap http://responsive.vermilion.com/compare.php
- You are allowed to use JQuery for this contest.
Browsers Requirements:
- Survey Manager screens:
---- IE11 is a priority.
---- Latest FF, Safari and Chrome Browsers.
- Participant screens:
---- Mobile Safari and Android Chrome
Documentation Provided:
- Storyboard Screens and PSD files.
- Clickable wireframe (http://ned4bd.axshare.com/ and .zip file).
- User Workflow.
- Zurb Foundation responsive javascript (http://foundation.zurb.com/)
- Angular javascript framework (https://angularjs.org/)
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.