TCO20 Development Spectator Contest - Code Your Way to TCO20 Treasures

TCO20 Development Spectator Contest - Code Your Way to TCO20 Treasures

Welcome, Everyone!
This is a fun code challenge open for everyone to join have fun during TCO20 Developments Finals.
Anyone that is able to complete all required requirements will have the rights to claim our mysterious TCO20 Treasures. Let’s jump now, map the treasure locations and win some exciting cash prizes and the mysterious TCO20 Treasure today!

Competition Structure

• The competition has three (3) steps of problems to solve.
• Complete all levels to get a chance winning the mysterious TCO20 Treasures.
• No limitation for the Programming language.
• Create proper documentation to help reviewer setup and check your solution.

Problem Statement

We found out TCO20 Treasure is hidden with the Topcoder Admins around the world. There are three steps mentioned below, to help you get the treasure.

Your journey for the TCO20 Treasures begins by retrieving initial data from Topcoder website itself. This will be the first step that you need to obtain as hints for the treasure location. The clue for the TCO20 Treasure is not far-away but in our proud Topcoder Website.

Step 1: Pull some required data from the website as a guide for the next hints.

You must have read through the data, and let us give you a hint. This data has the locations and the treasures these each admin has.

Display array of data from TCO20 Treasure page: https://tco20.topcoder.com/regional-events/eastern-asia/treasure

• Create a BUTTON tag, and set
  • "Retrieve Remote Data" as the title
• Clicking the BUTTON should retrieve data from an URL provided above
• Pull data from 3 javascript files (treasure.js, latlong.js, admin.js) that contains the array values.
• Your task need to render data from those 3 javascript files,
  • Create 3 separate sections for all arrays.
  • Display H2 for the variable names, like "Admin", "Treasure", "Latitude Longitude".
  • Use UL & LI tags to render each array list.

Step 2: Merge 3 arrays into single objects with random placement

• Create a random pairing from the previous 3 arrays.
• Each list should not repeat the same value.
• There will be only 9 lists with random pairing after the merge.
• Then you need update how the list displayed in page to be in separate rows using this format:
  • Display H2 for the title "TCO20 Treasures".
  • Each row need contains these values:
    • Admin: {admin}
    • Treasure: {treasure}
    • Latitude Longitude: {latlong}

You’re now one step closer to grab the prestigious TCO20 Treasure!
Did you notice that - the data also has the latitude and longitude information? Now, looking at the list we know that Topcoder Admins have all the TCO20 Treasure. This is the final step, you need to fetch their locations and map them on a Google map so that location is revealed to the world and they give all their treasure to you.

Step 3: You need to fetch their locations and map them on a Google map so that location is revealed to the world and they give all their treasure to you.

• Clicking the BUTTON for each row, and set
  • “View Location” as the title.
• Create the button need to load the map using the latitude and longitude data and display the tooltips on the map.
• Just need to show up 1 map location at the time. Click another BUTTON on another row need to open the related map location.
• Use Google Map API to render the treasure location on the map.
• Add new DIV tag for the map area
  • Use 200px height & 400px width
  • Place the map area below each location.
• When the map is loaded, display a tooltip on the centre of the map area based on latitude longitude values.
• Set {treasure} values for the content of the map tooltip.
• Make sure other rows render correct map latitude longitude.

Final Submission Guidelines

Submission Deliverables

• Host your submission to any public site for our review.
• Submit a zip file containing the whole source code.
• Create proper documentation to help us set up your review.