Challenge Overview
Welcome to GE Brilliant Career - Implement Activities of type Word Select, Answer Questions and Drag -Drop 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. 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. Word Select (represented in the data as word_select)
2. Question Answer v1 (represented in the data as answer_type_1)
3. Drag and Drop with Rank (represented in the data as drag_drop_rank)
4. Question Answer v2 (represented in the data as answer_type_2)
For each activity type, we have lots of activities. To be precise, we have the following (each activity falls under a module) :
word_select
Module 1 Activity 1
Module 2 Activity 2
Module 3 Activity 3
answer_type_1
Module 1 Activity 2
drag_drop_rank
Module 1 Activity 3
answer_type_2
Module 1 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:
word_select
Info: Essential_Skills_Activity_1_1.html
Activity: Essential_Skills_Activity_1_2_tooltip.html
Post Answer: Essential_Skills_Activity_1_3
answer_type_1
Info: Essential_Skills_Activity_2_1.html
Activity: Essential_Skills_Activity_2_2.html
Post Answer: Essential_Skills_Activity_2_3.html
drag_drop_rank
Info: Essential_Skills_Activity_3_1.html
Activity: Essential_Skills_Activity_3_2.html
Post Answer: Essential_Skills_Activity_3_3.html
answer_type_2
Info: Essential_Skills_Activity_4_1.html
Activity: Module1_Activity4_Gameplay.html
Post Answer: Module1_Activity4_Gameplay.html
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:
word_select
- User is required to select a word.
- The only criteria to end the activity is that at least one word be selected
- Some activities in this type have additional descriptions. Use the “?” as an anchor tag and use the tooltip attribute of the anchor tag to show the show the additional description
- When user selects a word, currently, the prototype shows a random background (among a set of colors). Continue to have this functionality
answer_type_1
- User needs to answer all questions to complete the activity.
- Hide the left and right arrows of the carousel if there are no questions to answer on the left and right in the carousel
drag_drop_rank
- All words needs to be dragged and dropped to rank them to complete the activity
answer_type_2
- Click on the card to see the question and answer
- User has to answer all cards in order to complete the activity
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. When the Web Server responds in success, show the Post Answer screen.
- 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.
Final Submission Guidelines
Only submit the files that have changed. You can submit git patch too. If submitting files that have changed, ensure that you maintain the folder structure (provide the folder under which the files will exist and maintain the file and folder hierarchy).