Challenge Overview
Project Overview:
Welcome to The Brain Architecture Game Moderator and Admin Portal UI Prototype Challenge!
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society.
We’ve digitized the elements of the game so that it can be played as an app, but what we need now is a web-based Moderator and Admin portal. The portal will allow an Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and will allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
We have desktop versions of the screen designs. We will not be testing for responsive functionality on different devices, but we would like to have media queries in place for the standard breakpoints (phone portrait and landscape, tablet portrait and landscape, so we can build upon them later.
The goal of this challenge is to create the HTML5 Prototype for an application using the provided "The Brain Architecture Game" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
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/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use Bootstrap 3 (http://getbootstrap.com/getting-started).
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.
Required Pages:
1- Rules Page:
- Please refer to 02_1_rules.png
- Clicking on edit icon will allow the user to edit the rules (02_2_rules.png).
- Clicking on delete icon in (02_2_rules.png) will allow the user to browse images from his machine to select a new image (02_3_rules.png).
- Clicking on upload PDF will allow the user to upload a PDF from his machine (02_4_rules.png).
- Clicking copy icon will allow user to clone rules to a another language (02_5_rules.png).
2- Brain Bases Master Page:
- Please refer to 03_1_brain_bases_master.png
- Clicking on edit icon will allow the user to edit the Base (03_2_brain_bases_master.png) to increase/decrease number of pipe cleaners and straws. Changing this number also changes the picture to match (3 pipe cleaners shows a triangle shape, 4 pipe cleaners shows square; straws are represented with the blue color over the shape)
- Clicking on upload New Base will allow the user to upload a new base image from his machine (03_3_brain_bases_master.png).
3- Edit Configuration Tab:
- Please refer to 04_edit_configurations.png
4- Card Master Page:
- Please refer to 05_1_manage_card_library.png
- If user clicks on all languages dropdown list he will be able to select the languages he wants (05_2_manage_card_library.png).
5- Manage Card Sets Tab:
- Please refer to 06_1_manage_card_sets.png
- If user clicks on edit icon he will be able to edit the card sets (06_2_manage_card_sets.png).
-- If user click on “Choose Cards” button he will be able to choose cards (06_3_manage_card_sets.png).
- User can toggle selected state of “Default” button and “Active/Inactive” button.
6- Session View Page:
- Please refer to 08_1_session_view_started.png
- If user clicks on Help Guide button he will be able to see the teams that needs help (08_2_session_view_started.png)
- If user clicks on team name he will be redirected to team details view.
7- Team Details View:
- Please refer to 09_session_details_team_view.png
CODE REQUIREMENTS
Client Priorities (The items that are considered highest prototype priorities):
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers on desktop. Responsive is not the top priority, and code will not be QA’d on other devices, but should have appropriate media queries in place for phone and tablet portrait and landscape orientations.
- All elements should be consistent: pay attention to padding, margin, line-height, etc.
- Matching the designs (as closely as possible) across the required browsers.
HTML5
-- Provide comments on the page elements 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 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 camelback 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 in 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
-- Please use CSS3 styles when creating shapes.
-- 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.
-- Minimum width for the page should be 1280px and accommodate desktop.
-- If not responsive, at a minimum have some media queries as placeholders for standard breakpoints (phone portrait and landscape, tablet portrait and landscape) - so that we can build upon them in a later phase.
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 and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web UI Framework
- You are highly encouraged to use the Bootstrap framework
- Responsive
- Recommended versions:
-- Bootstrap v3.3.7 or latest stable
Images
-- Images should be properly compressed while still having good visual quality.
-- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
-- IE11
-- Chrome Latest Browser
-- Safari Latest Browser
-- Firefox Latest Browser
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip
Welcome to The Brain Architecture Game Moderator and Admin Portal UI Prototype Challenge!
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society.
We’ve digitized the elements of the game so that it can be played as an app, but what we need now is a web-based Moderator and Admin portal. The portal will allow an Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and will allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
We have desktop versions of the screen designs. We will not be testing for responsive functionality on different devices, but we would like to have media queries in place for the standard breakpoints (phone portrait and landscape, tablet portrait and landscape, so we can build upon them later.
The goal of this challenge is to create the HTML5 Prototype for an application using the provided "The Brain Architecture Game" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
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/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use Bootstrap 3 (http://getbootstrap.com/getting-started).
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.
Required Pages:
1- Rules Page:
- Please refer to 02_1_rules.png
- Clicking on edit icon will allow the user to edit the rules (02_2_rules.png).
- Clicking on delete icon in (02_2_rules.png) will allow the user to browse images from his machine to select a new image (02_3_rules.png).
- Clicking on upload PDF will allow the user to upload a PDF from his machine (02_4_rules.png).
- Clicking copy icon will allow user to clone rules to a another language (02_5_rules.png).
2- Brain Bases Master Page:
- Please refer to 03_1_brain_bases_master.png
- Clicking on edit icon will allow the user to edit the Base (03_2_brain_bases_master.png) to increase/decrease number of pipe cleaners and straws. Changing this number also changes the picture to match (3 pipe cleaners shows a triangle shape, 4 pipe cleaners shows square; straws are represented with the blue color over the shape)
- Clicking on upload New Base will allow the user to upload a new base image from his machine (03_3_brain_bases_master.png).
3- Edit Configuration Tab:
- Please refer to 04_edit_configurations.png
4- Card Master Page:
- Please refer to 05_1_manage_card_library.png
- If user clicks on all languages dropdown list he will be able to select the languages he wants (05_2_manage_card_library.png).
5- Manage Card Sets Tab:
- Please refer to 06_1_manage_card_sets.png
- If user clicks on edit icon he will be able to edit the card sets (06_2_manage_card_sets.png).
-- If user click on “Choose Cards” button he will be able to choose cards (06_3_manage_card_sets.png).
- User can toggle selected state of “Default” button and “Active/Inactive” button.
6- Session View Page:
- Please refer to 08_1_session_view_started.png
- If user clicks on Help Guide button he will be able to see the teams that needs help (08_2_session_view_started.png)
- If user clicks on team name he will be redirected to team details view.
7- Team Details View:
- Please refer to 09_session_details_team_view.png
CODE REQUIREMENTS
Client Priorities (The items that are considered highest prototype priorities):
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers on desktop. Responsive is not the top priority, and code will not be QA’d on other devices, but should have appropriate media queries in place for phone and tablet portrait and landscape orientations.
- All elements should be consistent: pay attention to padding, margin, line-height, etc.
- Matching the designs (as closely as possible) across the required browsers.
HTML5
-- Provide comments on the page elements 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 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 camelback 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 in 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
-- Please use CSS3 styles when creating shapes.
-- 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.
-- Minimum width for the page should be 1280px and accommodate desktop.
-- If not responsive, at a minimum have some media queries as placeholders for standard breakpoints (phone portrait and landscape, tablet portrait and landscape) - so that we can build upon them in a later phase.
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 and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web UI Framework
- You are highly encouraged to use the Bootstrap framework
- Responsive
- Recommended versions:
-- Bootstrap v3.3.7 or latest stable
Images
-- Images should be properly compressed while still having good visual quality.
-- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
-- IE11
-- Chrome Latest Browser
-- Safari Latest Browser
-- Firefox Latest Browser
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Final Submission Guidelines:- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip