Challenge Overview
Welcome to the GE Brilliant Career - Create Questions Part 3. 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:
- Module 3 Activity 1
- 09-02_Mod 3_Act 1_Gameplay, 09-03_Mod 3_Act 1_Gameplay, 09-04_Mod 3_Act 1_End Game
- Module 3 Activity 2
- 09-06_Mod 3_Act 1-B_Gameplay, 09-07_Mod 3_Act 1-B_Gameplay, 09-08_Mod 3_Act 1-B_End Game
- Module 3 Activity 3
- 10-02_Mod 3_Act 6_Gameplay, 10-03_Mod 3_Act 6_Gameplay, 10-04_Mod 3_Act 6_Gameplay, 10-05_Mod 3_Act 6_End Game
MODULE 3 ACTIVITY 1
09-01_Mod 3_Act 1_Preview
- This page is NOT in scope. It will be created in Part 1 contest.
09-02_Mod 3_Act 1_Gameplay,
09-03_Mod 3_Act 1_Gameplay,
09-04_Mod 3_Act 1_End Game
- These pages demonstrate how the question will be answered
- This page is shown when the user clicks on Activity 1 in Module 3 page
- The user can select either True or False for each row in 09-02_Mod 3_Act 1_Gameplay. Clicking on the icon or the text will select / activate that option.
- Clicking on Reset Answers will undo all selections
- Clicking on Done will take the user to 09-04_Mod 3_Act 1_End Game. You DO NOT have to remember the previous selection. You can simply show the page as seen in the storyboard.
- Clicking on Reset Answer will take the user back to 09-02_Mod 3_Act 1_Gameplay without any options selected Clicking on Next Activity will take the user to Activity 2 page (09-06_Mod 3_Act 1-B_Gameplay)
MODULE 3 ACTIVITY 2
09-05_Mod 3_Act 1-B_Preview
- This page is NOT in scope. It will be created in Part 1 contest.
09-06_Mod 3_Act 1-B_Gameplay,
09-07_Mod 3_Act 1-B_Gameplay,
09-08_Mod 3_Act 1-B_End Game
- Although the title in the design says Activity 1 Continue, you can assume this to be Activity 2 and this page is shown when the user clicks on Activity 2 in Module 3. You DON’T have to update the title to say Activity 2. You can use Activity 1 Continue itself.
- This is similar to Activity 1, except there is now a header to the question and left and right buttons to load multiple questions.
- This is NOT a carousel. You don’t have to create slides. When the user clicks the left and right buttons, you update the question, the header and the options.
- Clicking Clear Answers will clear the answers for all questions
- Clicking Done will show 09-08_Mod 3_Act 1-B_End Game
- In 09-08_Mod 3_Act 1-B_End Game, you DON’T have to remember the answers selected earlier. You can show the options as seen in the design.
- In 09-08_Mod 3_Act 1-B_End Game, clicking on Reset Answer will take the user back to 09-06_Mod 3_Act 1-B_Gameplay page with all answers reset. Clicking on Next Activity will take the user to Activity 3 (10-02_Mod 3_Act 6_Gameplay)
MODULE 3 ACTIVITY 3
10-01_Mod 3_Act 6_Preview
- This page is NOT in scope. It will be created in Part 2 contest.
10-02_Mod 3_Act 6_Gameplay,
10-03_Mod 3_Act 6_Gameplay,
10-04_Mod 3_Act 6_Gameplay,
10-05_Mod 3_Act 6_End Game
- Although it says Activity 6, you can assume this to be Activity 3 and this page is shown when the user clicks on Activity 3 in Module 3. You DON’T have to update the title to say Activity 3. You can use Activity 6 itself.
- The user will drag a block from the right on to the resume and drop on the left. If the block has been dropped on the right section, it gets the green check mark icon next to it. Else the X red icon.
- The implementation of this can be tricky as you will need to determine the position where the block was dropped and compare it with the position of the section. Thus, it will be important how to set up the markup for the resume to be able to easily carry this out.
- Clicking on Clear Selection will clear all blocks and their icons.
- Clicking on Next Resume will take the user to the 10-05_Mod 3_Act 6_End Game page.
- In 10-05_Mod 3_Act 6_End Game page, you need not remember the states of the previous blocks. You can show them exactly as seen in the design.
- In 10-05_Mod 3_Act 6_End Game, clicking on Reset Answer will take the user to 10-02_Mod 3_Act 6_Gameplay with none of the blocks having any icons next to them.
- Clicking on Next Activity will do nothing.
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
- Use font shared in the contest forums
- 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.