Challenge Overview
Welcome to GE Brilliant Career - Implement Activities of type Slider Contest. As part of this contest, you will implement the activities in our website.
There will be 6+ contests in this project in the next 10 days. The only difference will be the activity types to work with. We have already launched one. Get on board before it’s too late!
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.
Project Details
We have 11 types / categories of activities in our app - short interactive pages that contain questions for the end user to answer. We, until now, built the prototype for these activities. However, we now need to actually implement these activities. With 11 types of activities, we have lots of questions to ask the end user.
As part of this contest, you will be implementing the activities of the following type:
1. Emoticon Slider (represented in the data as emoticon_slider)
2. Regular Slider (represented in the data as regular_slider)
3. Multi Direction Slider (represented in the data as multi_direction_slider)
For each activity type, we have lots of activities. To be precise, we have the following (each activity falls under a module) :
emoticon_slider
Module 1 Activity 5
regular_slider
Module 2 Activity 1
Module 6 Activity 1
Module 6 Activity 4
Module 7 Activity 4
Module 10 Activity 7
multi_direction_slider
Module 2 Activity 3
Module 2 Activity 4
You need to implement each activity in the app provided Use the API service that we have created in the app for you to fetch the activity details and use the details to render the activity.
For each activity type, refer to the following pages in the UI prototype:
emoticon_slider
Info: Essential_Skills_Activity_5_1.html
Activity: Module1_Activity5_Gameplay.html
Post Answer: Module1_Activity5_Gameplay.html
regular_slider
Info: Same as the emoticon_slider info
Activity: No UI prototype. See the design / images in the contest forum. It will be similar to multi direction slider.
Post Answer: Same as the emoticon_slider’s Post Answer
multi_direction_slider
Info: Same as the emoticon_slider info
Activity: Multi_Direction_Slider.html
Post Answer: Same as the emoticon_slider’s Post Answer
The pages mentioned above are just prototype. You will make it fully functional using the activity details for the above mentioned activities under each type. Each activity will have its own set of data which you need to read from the activity details.
Some activity type-specific points:
emoticon_slider
- There are 5 emotions to the slider.
- The slider is not set until the user select an emoticon.
- Only when all sliders have emotions set, the activity is completed.
Regular_slider / multi_direction_slider
- Multi Direction sliders always start at the center. They allow the slider to go in any direction but the value of the slider increases AND is associated with the value of the direction it moves in.
- Regular slider will always start from the left and move to the right, with the lowest value on the left and the larger value on the right
- The sliders have a value set when they are moved. To set 0, then they at least need to be clicked.
- Only when all sliders have values, the activity is completed.
Points to Note
- Do not give much important to the module. It exists to identify which module the activity falls under. It is only needed to get the activity from the API
- Do not depend on the activity id attribute. It’s just randomly assigned for now. The moduleId and the order attributes are important fields to identify the activity. “order” field is basically the activity number under that module
- DO NOT create three separate routes or pages for the activity. There will be three screens per activity and you need to show / hide each screen using jQuery only.
- Although the activity detail shows a time limit, in reality there is none. The timer at the top starts when the user starts an activity (when they click on Play in the Info screen) and stops when the submit their answers.
- When the user starts an activity (that is, when the user clicks on Play button in the Info screen), mock an API call to the backend - something like POST /essential-skills/module/:moduleId/activity/:activityId/startActivity. There is no request body. The response will be 200 OK. On receiving this response, start the activity and show the Activity page for that activity type.
- Submit button in the activity is only active when all the answers have been provided. See the points mentioned above for each activity type to know when the activity is “completed”.
- When the user submits an activity, stop the timer. Then make the HTTP request and pass the answer to the Web Server. Store the response in a variable / mock it in the Web Server. Ensure that this happens inside a service, as we will replace the code inside the service with an actual API call.
- If the user has already completed an activity, then when the user tries to re-visit that activity, they should directly see the Post Answer screen with the earlier entered answers. To achieve this, when the activity URL is entered, before getting the activity details, check if the user has already completed the activity earlier through your mock API call. If yes, then display the results from the earlier activity. The user can still reset the activity from the Post answer screen page to run the activity once more.
- We will share the format of the answer with you within 24 hours of launching the contest.
- Make sure to isolate your code as much as possible. We will be running contests simultaneously and thus, please do not make code changes where it is not necessary.
- Organize the views well. Better to organize them under the src/views/activities folder inside another folder named after the activity type. You need to create the activities folder.
- Organize the scripts well. Each activity type will have its own script so make sure that it can be easily located and maintained.
- The current app will undergo many changes. We believe that it could do with some improvements. As much as possible, we will isolate the changes so that you can continue to work on the items in scope for this contest. The winner will be asked to help us merge their code.
- We wish to again emphasize that this will not be a Single Page Application. You don’t have to use Angularjs.
- Use Eslint for the backend and follow AirBnb’s Javascript styleguide by extending the linter configuration. Make sure that there are no errors. The eslint has already been set up for you. Simply run npm run lint to check for errors.
- Use ejs as your server side templating engine and render the HTML pages.