Challenge Overview
Welcome to GE Brilliant Career - Implement Activities of type True or False 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 two. 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. True or False (represented in the data as true_false)
We have lots of activities under this activity type. To be precise, we have the following (each activity falls under a module) :
Module 3 Activity 1
Module 3 Activity 4
Module 3 Activity 5
Module 3 Activity 8
Module 4 Activity 2
Module 4 Activity 3
Module 5 Activity 5
Module 6 Activity 5
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.
Refer to the following pages in the UI prototype:
Info: Essential_Skills_Activity_9_1.html
Activity: Module3_Activity1.html
Post Answer: Module3_Activity1.html (screen shown after answering all questions and submitting them)
The pages mentioned above are just prototype. You will make it fully functional using the activity details for the above mentioned activities. Each activity will have its own set of data which you need to read from the activity details.
For this activity, kindly note the following:
- Some questions may have correct answers. The points are assigned as either pointPerCorrectAnswer or pointTotal (see the pointCalculationLogic in the activity details). The former means that multiply the number of correct answers by the potentialPoint attribute. The latter means that the potentialPoint itself is the total score.
- All questions needs answers. Only when all questions have been answered, the submit button gets active and the activity is thought of as completed.
- Some values are not True or False. Sometimes, the values will be Include, Don’t Include etc. Read the characteristics.options array to know the label for the values.
- The prototype has only 4 questions. However, the actual activities may contain more than 4. In such a case, randomize the left border color used for each question. Select among the four colors currently shown
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 in the activity details. 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 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.
- 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.