Challenge Overview
Welcome to the GE Brilliant Career - Create Questions Part 1. As part of this contest, you will create the designs for Questions in our application. We are launching three contests in parallel to design all the questions and each contest will have its own set of designs that need to be implemented.
Project Overview
GE Brilliant Career Labs wants to build a website to help students navigate their way into a STEM career using multiple resources aggregated into one simple, information site. The first phase will build out the initial website, allowing students to register, gather information and fill out modules to help them develop their soft skills.
Contest Overview
Only the following pages are in scope. All pages can be found under the Essential Skills tab page:
- Activity 1
- 01-01_Mod 1_Act 1_Preview
- 01-02_Mod 1_Act 1_Gameplay, 01-03_Mod 1_Act 1_Gameplay, 01-04_Mod 1_Act 1_Mr-X tool_tips, 01-05_Mod 1_Act 1_End Game,
- Activity 2
- 02-01_Mod 1_Act 2_Preview
- 02-02_Mod 1_Act 2_Gameplay, 02-03_Mod 1_Act 2_Gameplay, 02-04_Mod 1_Act 2_End Game
- Activity 3
- 03-01_Mod 1_Act 3_Preview
- 03-02_Mod 1_Act 3_Gameplay, 03-03_Mod 1_Act 3_Gameplay, 03-04_Mod 1_Act 3_Gameplay, 03-05_Mod 1_Act 3_Gameplay, 03-06_Mod 1_Act 3_Gameplay, 03-07_Mod 1_Act 3_Gameplay, 03-08_Mod 1_Act 3_End Game, 03-09_Mod 1_Act 3_End Game
MODULE 1 ACTIVITY 1
01-01_Mod 1_Act 1_Preview
- Shown when the user clicks on Activity 1 under Module 1.
- On clicking play, show 01-02_Mod 1_Act 1_Gameplay
- Will be displayed as a new page (or can be displayed as a single page for Activity 1 as a whole - see the rest of the Activity 1 pages below - you can decide whichever approach is easiest)
01-02_Mod 1_Act 1_Gameplay,
01-03_Mod 1_Act 1_Gameplay,
01-04_Mod 1_Act 1_Mr-X tool_tips,
01-05_Mod 1_Act 1_End Game
- 01-02_Mod 1_Act 1_Gameplay Shown when the user clicks Play in 01-01_Mod 1_Act 1_Preview
- Only 01-02_Mod 1_Act 1_Gameplay will be displayed as a new page
- 01-03_Mod 1_Act 1_Gameplay allows the user to select any word in the list. Randomize the background color to any of the three colors shown. Use CSS classes to achieve this and not inline styles.
- You have your work cut out for you because you can reuse the existing Activity 1 page here but with updates to the CSS.
- Clicking on Reset Selection will remove any selected words.
- 01-04_Mod 1_Act 1_Mr-X tool_tips - tooltip will be shown on click. Clicking the X in the tooltip closes the tooltip.
- Clicking on Done will take the user to 01-05_Mod 1_Act 1_End_Game
- Remember which words were selected by user because in 01-05_Mod 1_Act 1_End Game you will show the selected words. You can assume that not more than 4 words will be selected.
- Clicking on Reset Answer will take the user back to 01-02_Mod 1_Act 1_Gameplay with no words selected. Clicking on Next Activity will take the user to Module 1 Activity 2
MODULE 1 ACTIVITY 2
02-01_Mod 1_Act 2_Preview
- Displayed when user clicks on Activity 2 in Module 1 page
- On Clicking Play, show 02-02_Mod 1_Act 2_Gameplay
- Will be displayed as a new page (or can be displayed as a single page for Activity 2 as a whole - see the rest of the Activity 2 pages below - you can decide whichever approach is easiest)
02-02_Mod 1_Act 2_Gameplay,
02-03_Mod 1_Act 2_Gameplay,
02-04_Mod 1_Act 2_End Game
- 02-02_Mod 1_Act 2_Gameplay shown when user clicks on Play in 02-01_Mod 1_Act 2_Preview
- We have three questions here. You will find them in 02-04_Mod 1_Act 2_End Game. When the user clicks on the left and right buttons, the three questions are shown in order. The left and right buttons are NOT part of a carousel. So no need to create slides markup. Just replace the text and background color accordingly.
- Remember the answer to each question as you will display it in 02-04_Mod 1_Act 2_End Game
- Clicking on Clear Answers will erase any answer that the user entered
- Clicking on Done takes the user to 02-04_Mod 1_Act 2_End Game. Here, show the text that was entered previously. In this page, clicking on Clear Answers will take the user back to 02-02_Mod 1_Act 2_Gameplay with all answers cleared.
- Clicking on Next Activity will take the user to Module 1 Activity 3
MODULE 1 ACTIVITY 3
03-01_Mod 1_Act 3_Preview
- Displayed when user clicks on Activity 3 in Module 1 page
- On Clicking Play, show 03-02_Mod 1_Act 3_Gameplay
- Will be displayed as a new page (or can be displayed as a single page for Activity 3 as a whole - see the rest of the Activity 3 pages below - you can decide whichever approach is easiest)
03-02_Mod 1_Act 3_Gameplay,
03-03_Mod 1_Act 3_Gameplay,
03-04_Mod 1_Act 3_Gameplay,
03-05_Mod 1_Act 3_Gameplay,
03-06_Mod 1_Act 3_Gameplay,
03-07_Mod 1_Act 3_Gameplay,
03-08_Mod 1_Act 3_End Game,
03-09_Mod 1_Act 3_End Game
- These set of pages demonstrate how the user will answer that question.
- The user selects a value on the right and places it into onto the colored box in the left. The user will NOT select them in order and can randomly place the values into the box
- Once all the values have been selected, the two columns become one column. The user can then rearrange the colored boxes again to set the order of importance.
- Reset Values will bring them back to 03-02_Mod 1_Act 3_Gameplay
- Done will show 03-09_Mod 1_Act 3_End Game with the order shown before.
- Reset Answer will take the user back to 03-02_Mod 1_Act 3_Gameplay. Next Activity will be dummy for now.
- This activity will use a lot of jQuery. Please make sure that you comment your code well so that it is clear which jQuery code is responsible for which activity
INTRO PAGES
- These pages would have already been developed as part of the earlier activities in 01-01_Mod 1_Act 1_Preview, 02-01_Mod 1_Act 2_Preview and 03-01_Mod 1_Act 3_Preview. The only difference in these pages is that you need to change the text and the title and the Activity number.
- The pages in scope for this section are:
- 04-01_Mod 1_Act 4_Preview
- 05-01_Mod 1_Act 5_Preview
- 09-01_Mod 3_Act 1_Preview
- 09-05_Mod 3_Act 1-B_Preview
- 10-01_Mod 3_Act 6_Preview
- These pages need to be provided by the winner during Final Fix only.
Points to Note
- Browsers to support: Latest IE, Firefox, Google Chrome and Safari
- Use HTML5 and CSS3. Use Javascript only if the functionality cannot be achieved using HTML and CSS alone.
- Use texts wherever possible. Only logos and icons are images. Some instances, it has been clearly specified if you need to use image or text. Feel free to clarify in the contest forum if there is any confusion
- NO ANGULARJS. jQuery use to be limited to third party libraries only. Please make sure that the libraries that you use are MIT licensed and that they are actively maintained. In case you wish to use Javascript / jQuery for a dynamic feature, make sure that you comment it well and organize the code into sections where each section is responsible for a feature. Comment it well so that when we convert the app to AngularJS (in the future), we know exactly what the code does.
- Please follow the same container width and responsiveness of the existing prototype.
- Please create a separate CSS and JS for the styles that you create. This is to prevent any merge conflicts since we are running multiple contests on this. Also note that each Acitivity gets its own page.
- The winner will help us merge the changes in with existing prototype - we have three contests running in parallel and the winner will be asked to help with the merges, in case there is a merge conflict. Keeping this in mind, make sure that you do not touch existing code and any updates to existing code are as little as possible to help with the merge.
Final Submission Guidelines
Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.
Upload your code as a .zip file to the Submit and Review tool for this contest.