Challenge Summary
This contest is to build the prototype for the Sun Examination interface - a system that integrates the TopCoder competition engine with Sun's examination process to provide the candidate(s) with a test that is more dynamic than multiple choice questions and better demonstrates the skills of the candidates.
You will be using the provided storyboard as a design basis for this contest. The client is looking for clean and well-structured code.
Entries must be your original work, and must not infringe on the copyright or licenses of others. Stock art, clip art, templates and other design elements from other sources are prohibited unless specifically permitted here in the Contest Details.
The prototype should simulate the full functionality of the web-based application with the exception of the login screens. When the application is built, the user will not be required to login because the credentials will be established by a third-party system. You will be responsible for coding the following sections of screens: - Demonstration - Main Problem Statement & Solution (3 problems) - Tests - Test Results - Timeout - Completion Demonstration Screen When the user enters the application they will first be presented with the demonstration screen. The user will be able to spend up to five minutes looking at the demonstration of how the application works. The user can choose to skip the demonstration or they will be forced to move onto the first problem after the five (5) minute demonstration period has elapsed. Your prototype should simulate this countdown and redirect to the first problem after the 5 minutes has elapsed. Problem & Solutions Screens When the user enters the problem statement/solution screen the timer will begin the count-down. There will be three (3) problems in the prototype, each with a different time limit. The problems should be displayed one at a time. As the user submits the solution for the problem, they will be moved to the next problem statement until they have completed all problems. The example problem statements (as well as time limits) are included as additional files for this contest. The user of the prototype will be allowed to enter any text into problem solution window. Test Screens When the user presses the "Test" button, they will be brought to the test screen at which point the user will be able to enter in as many test inputs as the problem statement requires. Prior to entering the input values into the screen, your prototype should simulate the compile process. The compile simulation can provide two different results; Error or Success. The user will only see a message from the compile simulation if the result is an Error, which will be triggered by the user entering "COMPILE ERROR" into the previous problem solution window. In that event, the compiler error message described in the attached example problem documents will be displayed to the user and the user will not be able to continue entering test inputs. The user will then be forced to return to the problem statement/solution window and fix their solution. In the event that the user enters anything other than "COMPILE ERROR" into the problem solution window and presses "Test", the user will be allowed to enter problem solution test values into the test screen. The results of the test will be randomly generated so that the prototype demonstrates different results based on different inputs. Storyboard Changes The storyboard shows that after the user presses "Test" in the test window, they are displayed a "Test Failure" or "Test Successful" screen. The prototype should instead display a "Test Results" screen which shows the results of the test to the user, rather than "Success" or "Failure". Once the user is done testing their solution they may return to the previous problem statement/solution window and either 1) continue modifying their solution or 2) submit their solution permanently and move onto the next problem statement. The prototype should allow the user to time-out and should keep track of which problem the user timed out on so that it can properly display the time-out on the completion screen. Completion Screen Once the user of the prototype has submitted (or timed out of) all three problem statement solutions they will be presented with the completion screen. The completion screen will demonstrate that the solution is being compiled and tested. The prototype should show a timer of five (5) seconds for the progress bar. Once the progress bar has reached 100% the prototype should display the results of the test to the user. The prototype should randomly generate a successful test percentage for each of the problems and should display these results on the completion screen as well as a compiled percentage based on the randomly generated percentages. Example 1: Problem 1: 85% tests passed. Problem 2: 0% timed out. Problem 3: 96% tests passed. Your score: 60% Example 2: Problem 1: 87% tests passed. Problem 2: 90% tests passed. Problem 3: 92% tests passed. Your score: 89% At this point the user can press the Exit button and the prototype closes. The following text changes will be required in your submission: - Demo screen's test button explanation text should be changed to: "Pressing this button will open the test window. The test window will allow you to provide values that your solution should be executed against and will show you the results." - Demo screens' problem statement explanation text should be changed to: "This is where the problem is described that you will need to provide a coded solution to. Additionally, this area provides example test inputs and outputs. - Problem statement/solution window's "Elapsed Time" should be changed to "Time Left". - Completion screen's message should be changed to: "Your results will be ready soon." HTML/CSS Basic Guidelines - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - No inline CSS styles - all styles must be placed in an external stylesheet. - Use semantically correct tags - use H tags for headers etc... - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. - Class and ID names should not visually describe the content (e.g .bigRedTextLeft) - The prototype may not force additional browser windows to open. - Do not use html frames. - AJAX may be used if needed. 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, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You may use the jQuery library for this contest. Judging Criteria This prototype will be used as a basis for the completed application. The winning submission will have taken into consideration reusability. For example, when the user begins a problem a beginTimer(timeout) method is called and when the timer runs out, a timeOut() method is called. One of the important goals of this prototype is to be as easy as possible to modify for use in the completed application. - Easily modifiable JavaScript and AJAX code. - Methods are clearly commented. - Clean HTML and CSS that follows the "HTML/CSS Basic Guidelines". - Meaningful structure of files. (ex: don't just throw your files in a folder named 'xyz', name the files and folders appropriately)
The prototype should simulate the full functionality of the web-based application with the exception of the login screens. When the application is built, the user will not be required to login because the credentials will be established by a third-party system. You will be responsible for coding the following sections of screens: - Demonstration - Main Problem Statement & Solution (3 problems) - Tests - Test Results - Timeout - Completion Demonstration Screen When the user enters the application they will first be presented with the demonstration screen. The user will be able to spend up to five minutes looking at the demonstration of how the application works. The user can choose to skip the demonstration or they will be forced to move onto the first problem after the five (5) minute demonstration period has elapsed. Your prototype should simulate this countdown and redirect to the first problem after the 5 minutes has elapsed. Problem & Solutions Screens When the user enters the problem statement/solution screen the timer will begin the count-down. There will be three (3) problems in the prototype, each with a different time limit. The problems should be displayed one at a time. As the user submits the solution for the problem, they will be moved to the next problem statement until they have completed all problems. The example problem statements (as well as time limits) are included as additional files for this contest. The user of the prototype will be allowed to enter any text into problem solution window. Test Screens When the user presses the "Test" button, they will be brought to the test screen at which point the user will be able to enter in as many test inputs as the problem statement requires. Prior to entering the input values into the screen, your prototype should simulate the compile process. The compile simulation can provide two different results; Error or Success. The user will only see a message from the compile simulation if the result is an Error, which will be triggered by the user entering "COMPILE ERROR" into the previous problem solution window. In that event, the compiler error message described in the attached example problem documents will be displayed to the user and the user will not be able to continue entering test inputs. The user will then be forced to return to the problem statement/solution window and fix their solution. In the event that the user enters anything other than "COMPILE ERROR" into the problem solution window and presses "Test", the user will be allowed to enter problem solution test values into the test screen. The results of the test will be randomly generated so that the prototype demonstrates different results based on different inputs. Storyboard Changes The storyboard shows that after the user presses "Test" in the test window, they are displayed a "Test Failure" or "Test Successful" screen. The prototype should instead display a "Test Results" screen which shows the results of the test to the user, rather than "Success" or "Failure". Once the user is done testing their solution they may return to the previous problem statement/solution window and either 1) continue modifying their solution or 2) submit their solution permanently and move onto the next problem statement. The prototype should allow the user to time-out and should keep track of which problem the user timed out on so that it can properly display the time-out on the completion screen. Completion Screen Once the user of the prototype has submitted (or timed out of) all three problem statement solutions they will be presented with the completion screen. The completion screen will demonstrate that the solution is being compiled and tested. The prototype should show a timer of five (5) seconds for the progress bar. Once the progress bar has reached 100% the prototype should display the results of the test to the user. The prototype should randomly generate a successful test percentage for each of the problems and should display these results on the completion screen as well as a compiled percentage based on the randomly generated percentages. Example 1: Problem 1: 85% tests passed. Problem 2: 0% timed out. Problem 3: 96% tests passed. Your score: 60% Example 2: Problem 1: 87% tests passed. Problem 2: 90% tests passed. Problem 3: 92% tests passed. Your score: 89% At this point the user can press the Exit button and the prototype closes. The following text changes will be required in your submission: - Demo screen's test button explanation text should be changed to: "Pressing this button will open the test window. The test window will allow you to provide values that your solution should be executed against and will show you the results." - Demo screens' problem statement explanation text should be changed to: "This is where the problem is described that you will need to provide a coded solution to. Additionally, this area provides example test inputs and outputs. - Problem statement/solution window's "Elapsed Time" should be changed to "Time Left". - Completion screen's message should be changed to: "Your results will be ready soon." HTML/CSS Basic Guidelines - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - No inline CSS styles - all styles must be placed in an external stylesheet. - Use semantically correct tags - use H tags for headers etc... - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. - Class and ID names should not visually describe the content (e.g .bigRedTextLeft) - The prototype may not force additional browser windows to open. - Do not use html frames. - AJAX may be used if needed. 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, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You may use the jQuery library for this contest. Judging Criteria This prototype will be used as a basis for the completed application. The winning submission will have taken into consideration reusability. For example, when the user begins a problem a beginTimer(timeout) method is called and when the timer runs out, a timeOut() method is called. One of the important goals of this prototype is to be as easy as possible to modify for use in the completed application. - Easily modifiable JavaScript and AJAX code. - Methods are clearly commented. - Clean HTML and CSS that follows the "HTML/CSS Basic Guidelines". - Meaningful structure of files. (ex: don't just throw your files in a folder named 'xyz', name the files and folders appropriately)
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.