Challenge Overview
Project Overview
TopCoder is implementing a Web-based Arena by using Web Socket protocol, AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started).
The frontend application is using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started), and using web socket protocol to exchange data with backend web socket listener.
The backend web socket listener is ready for exchanging messages over web socket protocol.
About Source Code Change
Recently, we have migrated all source code for TopCoder Competition Engine from svn to github repositories, please check https://github.com/appirio-tech/arena-web/wiki/Source-Code-Repositories-for-TopCoder-Competition-Engine for details.
About Web Arena
We are in the process of implementing and improving the web arena, the code can be found at appirio-tech/arena-web, please use the dev branch for your development.
Competition Task Overview
For this challenge, we'd like to implement the general floating live scoring widget for coding arena.
About UI Behavior
When opening the page with this floating live scoring widget, it will be shown as minimized mode at bottom, like
click on it will be changed to full mode, like
The widget should be general to be attached in any page.
Please adjust the UI for different themes.
About Behavior
There will be two mode for the Live Scoring widget,
- When user didn't submit a solution, it will show the elasped time and the possible scoring.
- If user already has submit a solution, it will show current score and the possible score with resubmit (we didn't design the UI, please adjust it properly, like changing "Your Possible Score" to "Your Possible Resubmission Score", after "1000 point", add string like "current score 888".
- The Elapsed Time and the possible score should be changed dynamically.
About Value Calulation
Following data will be inputs for the widget,
- problem open time
- problem point
- coding length
- num of submissions
- current score, can be optional for first submission.
Please check https://github.com/appirio-tech/arena-web/wiki/Latest-Code-Logic-for-Submission-Scoring to re-implement the submissiom score calulation logic in Javascript.
About Demonstration
You can provide the demo in dashboard page to show your implementation.
Where to setup the Web ArenaYou are expected to have your own environment to setup web arena, currently, it is verified that the Web Arena can be setup in different environment, like Windows, Ubuntu, CentOS, and Mac OS X, please check the wiki pages.
for backend, an Arena VM will be allocated to each competitor, to setup SRM contests data.
Winner Responsibility
Winner will be responsible to create pull requests, and be responsible to update the pull request to auto merge.
Arena VM
Before asking your own VM, you need to have a public key on your profile before asking for the VM. After your request confirmed, the VM is still requiring about 2 hours to initialize.
You can find more details on how to generate a key http://apps.topcoder.com/wiki/display/projects/Generate+SSH+Key and how to connect using it http://apps.topcoder.com/wiki/display/projects/Connect+Using+SSH+Key.
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:
- jQuery
- AngularJS
- All custom javascript (written by the competitors) must pass jslint checks
Browsers Requirements:
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome
Final Submission Guidelines
Submission Deliverables
Below is an overview of the deliverables:
- please only include changed files (removed, new and changed) with git commit hash.
- A complete and detailed deployment document explaining how to deploy the application including configuration information.
Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.
PROTOTYPE GOALS:
- We need clean documentation of the code. Please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please use Bootstrap 3 for css.
- Please use AngularJS framework for data binding.
- Please use angular-ui components:
1- ui-bootstrap
2- ui-router (for app structure as a state machine)
3- ui-ace or ui-codemirror (for the code editor)
4- other ui components as needed (date, calendar)
TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of 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
- Make sure all HTML files pass Validation without Error/Warning.
2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
3. JAVASCRIPT
- Provide comments on the JavaScript code to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
4. ANGULAR JS
- Angular models are plain old JavaScript objects. Use JSON objects for data binding with view.
- Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
- Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form.
- Use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) to populate JSON data.
5. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- If possible, using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference