Challenge Overview
Welcome to the GE Brilliant Career - Create Questions Part 2. 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:
- Activity 4
- 04-02_Mod 1_Act 4_Gameplay, 04-03_Mod 1_Act 4_Gameplay, 04-04_Mod 1_Act 4_Gameplay, 04-05_Mod 1_Act 4_Gameplay, 04-06_Mod 1_Act 4_End Game
- Activity 5
- 05-02_Mod 1_Act 5_Gameplay, 05-03_Mod 1_Act 5_Gameplay, 05-04_Mod 1_Act 5_End Game, 05-05_Mod 1_Act 5_End Game_Tool Tips
- Other Pages
- 06-01_Mod 1_End Module
- 07-01_Mod 2_Lesson, 07-02_Mod 2_Lesson_Card Tips
- 08-01_Mod 3_Welcome
MODULE 1 ACTIVITY 4
04-01_Mod 1_Act 4_Preview
- This page is NOT in scope. It is being developed in the Part 1 contest
04-02_Mod 1_Act 4_Gameplay,
04-03_Mod 1_Act 4_Gameplay,
04-04_Mod 1_Act 4_Gameplay,
04-05_Mod 1_Act 4_Gameplay,
04-06_Mod 1_Act 4_End Game
- These pages demonstrate how the user can answer the question
- Show 04-02_Mod 1_Act 4_Gameplay when the user clicks on Activity 4 in Module 1.
- When the user clicks on a card, show the question for that card. All questions are in 04-05_Mod 1_Act 4_Gameplay.
- Restrict the answer length to fit only that single row (with sufficient padding on the left and right).
- Note that the answer is center aligned
- Clicking on Reset Answers will erase all answers
- Clicking on Done will show 04-06_Mod 1_Act 4_End Game
- In 04-06_Mod 1_Act 4_End Game, clicking on View All Answers will expand the section to show the remaining answers in two columns with two cards per row.
- In 04-06_Mod 1_Act 4_End Game, clicking on Reset Answers will take the user back to 04-02_Mod 1_Act 4_Gameplay with no answers entered. Clicking on Next Activity will take the user to Activity 5 page.
- All screens here need to happen in a single page
MODULE 1 ACTIVITY 5
05-01_Mod 1_Act 5_Preview
- This page is NOT in scope. It is being developed in the Part 1 contest
05-02_Mod 1_Act 5_Gameplay,
05-03_Mod 1_Act 5_Gameplay,
05-04_Mod 1_Act 5_End Game,
05-05_Mod 1_Act 5_End Game_Tool Tips
- Show 05-02_Mod 1_Act 5_Gameplay when the user clicks on Activity 5 in Module 1 page.
- Here, we are looking at multiple sliders. Initially, the slider emojis are neutral. As the user slides them left and right, the slider emoji gets updated. Each slider is independent of the other
- Clicking on Reset Sliders will reset the sliders and bring them to the center as in 05-02_Mod 1_Act 5_Gameplay. Clicking on Done will take the user to 05-04_Mod 1_Act 5_End Game.
- In 05-04_Mod 1_Act 5_End Game, the sliders will reflect the values selected earlier with a value of red being equivalent to setting the slider to the extreme left.
- All screens here need to happen in a single page
- Clicking on Reset Slides takes the user to 05-02_Mod 1_Act 5_Gameplay with all the sliders at the center
- Clicking on Next Activity shows the 06-01_Mod 1_End Module page.
- The tooltip in 05-05_Mod 1_Act 5_End Game_Tool Tips is shown on hover
OTHER PAGES
06-01_Mod 1_End Module
- Shown when the user clicks on Next Activity at the end of the Activity 5 page (05-04_Mod 1_Act 5_End Game)
- Clicking on Next Module shows the 07-01_Mod 2_Lesson page.
07-01_Mod 2_Lesson,
07-02_Mod 2_Lesson_Card Tips
- Page shown when the user clicks Next Module in 06-01_Mod 1_End Module. Also shown when the user clicks on Module 2 in the Essential Skills page. You can move the “Continue Module” section to Module 6.
- When user clicks on Self Awareness, show the section as seen in 07-02_Mod 2_Lesson_Card Tips
- Clicking on Close will take the user to the Essential Skills page (where all the modules are shown)
08-01_Mod 3_Welcome
- Shown when the user clicks on Module 3
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 Activity 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.