The making of: a Treasure Hunt Website
The entire event was possible due to collaboration and efforts of Planning team, Tech Team and Tech Creative Team of CSI DMCE 2021-22. Below I have tried to pen down the process, problems faced and solutions we came up with to make this one of the most successful event of Technitude 2021.
T minus 3 days (31st Aug)
We discussed the complete flow of Treasure hunt event.
Basic plan is that the user will be shown certain question and will be required to enter a respective answer to move ahead. Php was selected as server side language due to availability of free hostings which serve php.
To make things interesting we came up with an idea that the final answer would be the word formed by taking 1st letter of each answer.
Word 'steal' was finalized and team started making questions for each letter.
Now the novice way of doing this might have been to make different pages for each questions and navigate to next page if the answer matches.
Dilemma: But that would have violated the basic principle of DRY (Don't repeat yourself) for every page we created.
Solution: One of the solution was to create a single page and just change the question content.
Dilemma: The length and contents of the question might differ, like it might need just one line or multiple lines of hint or it might even contain images.
Solution: so rather than sizing and shaping the data when displayed we decided to fix our data format and sizes beforehand. All the questions must be in a single image format. If its a text question just type it and take a screenshot. If there are multiple images just do a collage and take a screenshot.
Dilemma: Now we didn't wanted someone leaking the answers once they have solved them.
Solution: So we decided to make several questions for a same letter and then fetch them randomly so each player gets an unique set of questions.
Now the way we are executing this is set an char array ['s', 't', 'e', 'a', 'l']
For every question select a random element from the array and fetch the questions for that selected char from the database as we had also included a column called initial for each question. Now select a random question from the results and display it while also storing it so it can be again displayed at the end. After this the randomly selected element from initial array was removed. So this went on till the array was empty i.e. all 5 questions have been answered.
The last question page would look like:
T minus 2 days (1st Sep)
While testing we discovered that the word "STEAL" was too short as it meant the participants would have to answer just 5 questions. The questions were already framed and converted to images, having a new word would mean most of them going to waste so team came up with an extended word "STEALTHY".
Dilemma: The prior logic was solid and could have easily handled even a 50 lettered word but what we overlooked was that extra "T" in the word STEALTHY, which led to a probability of repeated questions as they were randomly selected.
Solution: Once noticed this was easy enough to fix by just adding a while loop until the question chosen has not been asked before and then moving on to display it.
Dilemma: The game was set but how do we record the time taken by each team? asking them for their names at the start would be very messy. Also anyone could just enter the game multiple times with different names.
Solution: Sticking to our theme of Money Heist names of cities were selected as usernames and assigned to each participating team. They would be given their passcodes at the time of event. Thus allowing us to control the number of attempts and foul plays.
Once the main part was done we thought of adding a bit of fun element to this by introducing a final challenge to the players.
We inserted a hyperlink somewhere on this page which would lead you to the real treasure. Now at
T minus 1 day (2nd Sep) Technitude Starts
Now we needed to host this website somewhere. No time to experiment around so we went with good ol' pal infinityfree which gave us the familiar phpMyAdmin tool.
But one thing I hate about it is not being able to connect a github repo directly. So for each update we made, we had to manually upload that file. It was like going back to stoneage when we already use the version control systems.
We soon discovered that the images took way too much time to load so we ended up compressing them even at the loss of some quality.
We were almost done as we placed our sponsor's logo at the landing page and noticed the funny irony which will not be mentioned here.
After this quite some time was spent in choosing and setting background music for better user experience. Problem with music autoplay
We also selected a video which would nicely showcase the feeling of truly completing a heist at the end.
The day (3rd Sept) Technitude Day 2
The TESORO HEIST was up and running ready for the event at http://tesoroheist.rf.gd/ Vamos!!
Kindly limit your visits as it is hosted on a free plan.
You can checkout code and submit PRs if interested at Github Repo
If you have any doubts or suggestions we can connect through These Platforms
Fellow coders: Harshad Karanjule Yash Nerkar Rishi Mule