Challenge Overview
~
Challenge Summary:
Welcome to RDD Chatbot UI Prototype Challenge.
This challenge is focussed on creating desktop UI prototype.
As part of this challenge you will need to comments HTML/JavaScript/CSS/etc code. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Have any questions, let’s discuss in forums!
~
Important Guidelines:
- Use SCSS/SASS for CSS Preprocessor.
- Please use JSON data for all question, answer, conversation - do not hardcode this.
- You are required to create a responsive prototype that will work on desktop,
- Create clear documentation to set-up your submission locally and on Herokuapp.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
Screens to be prototyped:
01-A-Chatbot
- Clicking ‘Next’ takes user to next screen
- Clicking ‘Cancel’ will be a dead link for now. The Chatbot will be used by client as an overlay window - in such cases, clicking 'Cancel' will close this overlay window.
01-B-Chatbot
- Clicking a question in the left panel should automatically select it in the right panel and trigger the chatbot
- Clicking on ‘x’ should cancel the current operation/ conversation and return to the first screen
01-C-Chatbot
- Show typeahead based on the characters that the user is typing- Implement keystroke behavior as shown
01-D-Chatbot
- Show this screen for a small duration of time (~2 seconds) before showing next screen with chatbot response
01-E-Chatbot
- Follow storyboard
01-F-Chatbot
- Follow storyboard
- The three buttons - Activities, Benefits, Step Involved are clickable
01-G-Chatbot
- Follow storyboard
- Shows hover state for one of the buttons
01-H-Chatbot
- Show this screen for a small duration of time (~2 seconds) before showing next screen with user response
01-I-Chatbot
- Follow storyboard
01-J-Chatbot
- Follow storyboard
01-K-Chatbot
- Follow storyboard
- Star is clickable
01-L-Chatbot
- Shows Star clicked state
01-M-Chatbot
- Shows state when clicking a question in the left panel - automatically selects it in the right panel and triggers the chatbot
~
TECHNOLOGIES
-
HTML 5
-
JavaScript (Cilent has not enforced any framework so you can use jQuery/ Angular)
-
CSS 3.0
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient UI Prototype that works in all the requested browsers.
- All elements should be consistent pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Images- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE 11
- Firefox, Chrome, Safari, Microsoft Edge latest version
Final Submission Guidelines
- Prototype Code
- Heroku Link hosting your prototype
- Documentation to run