This front-end platform for FuturePreneurs 8.0, hosted over 1800 participants for a multitude of different adventures. For over a month in production, with more than 600 commits in toll, this virtual arena incorporates a legion of features including realtime drag and drop gameplay, and synchronous, all-inclusive team formation. From uniquely structured RPG game rounds to a melange of quiz-based bouts, it handled every activity in succession, for the journey of this event. Explore the whole project here!
Checkout the back-end for this application at --> https://github.com/ecellvit/FuturePreneurs-22-Backend
Here the user can either choose to create a team as shown below:
-
Once a team is created by the user,he/she has the full control of the team(accept/decline user join requests, remove existing members, delete the team, invite users by sending them invite link)
-
Here the user is joining a team through an invite link shared by the leader of the team.
The user can join an existing team by sending a joining request to the respective team leader by searching the desired team.
- On approval by the team leader,the user will automatically join the team.
- The leader can also choose to decline the request.
- Each user can send only 4 requests at a given time,
- If they wish to send requests to more that 4 teams,they can easily delete their previously sent requests and then send in new requests.
Round 0 Or Qualifying Round was a round to filter out top teams. It was a quiz based round where team leader could answer the questions based on his team's behalf.
-
-
-
-
-
-
-
-
-
Questions were fetched and answers were stored in the backend successively
-
There was no free navigation in the quiz, once the user moves to the next question, they weren't allowed to move back.
-
If one wasn't to solve all the questions in the given time period, answered questions will be auto saved and submitted.
When the quiz instructions page loads, a callback is triggered to check whether the user has logged in and whether is a team leader, if the above conditions are fullfilled...the user is allowed to attempt quiz give the user has not previously submitted the quiz.
Questions from backend consisted of multiple answer correct and single answer correct.Questions from backend may or may not contain Images. These type of Multiple choice questions are recieved from backend in response to a fetch call
-
Multiple Answer Correct Match the following
-
Single Answer Correct Match the following
-
Single Answer Correct Case Study
-
Multiple Answer Correct Case study
-
Descriptive Question Answers
-
For descriptive type questions: One can type the answers. There is no word limit. -:
-
For Match the following type questions:
First select the question and then its corresponding answer. Both the entities will be highlighted with the same colour after this is done. Repeat the process for all the options in the question. If you want to deselect your choice in Match the following type, click on that particular question.
-
To answer any question regarding a case study, read through the case study thoroughly. -:
-
One can use the clear all button, to deselect all the options incase you face any ambiguity.
-
For moving to the Next Question ,one can click on Next Button to view next Question. Everytime user clicks on new button , answer of previous question from user will be send to backend and new question will appear on the user's Screen from backend.
-
Once all the questions are finished, then a finish button will appear and once submitted, user will be directed to Thank You Page.
- If and only if all the correct options are selected, you'll be awarded 4 points.
- If even one incorrect option is selected, the team will lose 1 point.
- No points will be awarded if the question is left unanswered.
- 4 points will be awarded if the correct option is selected.
- Team will lose 1 point if any incorrect option is selected.
- No points will be awarded if the question is left unanswered.
Here the user had to choose between five locations to place the resort into.
Beach
Hospital
Tech Park
Temple
School
we display time on top
These are the 5 locations:
In this round we let the player choose where exactly do they want to place the resort. The green squares are the available places and the brown ones are the ones where your competetor has already placed one!
After every round we redirect to a dynamically rendered instructions page
In This Round The User Has To Place 10 Amenities From A Given Set of 30 Amenities. Each Time A User Drags And Drops The Amenity A Request Is Made To The Backend. The Backend On Initial Start Request Sends Us-Initial Balance,30 Amenities. Each Amenities Price and isLeft Property is also recieved from the Backend.
As we place an amenity directed in the gif above a request to the backend is made. In the backend the amenity is added to the user list and the updated balance is sent back.
In case of placing an amenity if the balance is not sufficient than an error popup will be showed.
As we remove an amenity directed in the gif above a request to the backend is made.
In the backend the amenity is remove from the user list and the updated balance is sent back.
If we remove the Amenity which was orignally at left side and place it at right side or vice versa than it will be automatically handled and placed to its orignal position. This is a frontend implementation and makes use of isLeft property sent from backend for each amenity in the beginning.
If we swap an amenity with a new amenity ,two requests to the backend are made.One for removing the existing amenity and another for adding the new amenity.The balance is calculated respectively and sent back.
If we swap two position of two pre-existing amenity than there positionis switched on the frontend.No call to the backend is made.
If we swap an amenity with a new amenity. In this if the balance of the new amenity can be achieved after removing the old one than only it will be placed else an error popup will be showed.