Challenge Overview
Welcome to GE Brilliant Career - Implement Activities of type Yes or No Contest. As part of this contest, you will implement the activities in our website.
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:
- Yes or No (represented in the data as yes_no)
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 11
Module 4 Activity 1
Module 5 Activity 1
Module 8 Activity 1
Module 10 Activity 2
Module 10 Activity 5
Module 10 Activity 6
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_5.html
Activity: Module3_Activity2.html
Post Answer: Module3_Activity2.html (after submitting all the answers)
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 no correct answers, some may have only Yes as the correct answer while some may have either yes or no.
- The point calculation depends on the pointCalculationLogic specified. In case of pointTotal, the potentialPoints itself is the total activity points. In case of pointPerCorrectAnswer, depending on the number of correct answers, multiple the number by potentialPoint. In case of pointPerYesAnswer, all questions with Yes as the answer are considered and the count is multipled with the potentialPoints
- Either Yes or No can be selected, Both cannot be selected at the same time
- Some sections will have no title, In such a case, do not show the section header in the UI
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.
- DONE 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.