A single HTML page, with 3 drop-down menus, Tags for filtering data, and an area to display results in rows. - A simple database may be required.

A single HTML page, that contains three drop-down menus, an area containing tags for filtering purposes, and an area displaying rows (which are generated/ordered depending on the drop-down menu selections). These rows will contain text that summarizes the selections chosen in the drop-down menus and tags, along with a calculated numerical value (detailed below). The first drop-down menu will contain a list of Countries. "All countries" will also be an option. The second drop-down menu will contain a list of Cities. "All cities" will be an option if no Country has been selected in the first drop-down menu. Once a Country is selected, the second drop-down menu will display only the Cities contained in that Country. The third drop-down menu will contain a list of Sports. There are 9 different tags, these will be words relating to sport equipment ("ball", "net", "whistle" etc.). Each Country and City will have one or more tags associated with it, each Sport in the third drop-down menu will also have one or more tags associated with it. In this sense, the tags will act as a way to link and filter each Country and City to Sports. The calculated value for each combination of selections will be calculated like this: Each City will have two values associated with it: "Value 1" and "Value 2". Each Sport will have two values associated with it: "Value 3" and "Value 4". The calculated formula is: (Value 1 X Value 3) + (Value 2 X Value 4) = Score. I want the "Score" for every possible combination of City and Sport to be generated (perhaps this should be done one time and then the results stored in a database). I need all the results to be ordered by largest score first, and then displayed in rows on the page. Each row should contain text that details the City, Sport and Tags chosen, along with the associated Score. For example, if the user Selects "Italy" in the first drop-down menu, and "Rome" in the second, then they should see a list of all Sports whose tags match Rome's tags. The output in the area containing the rows should look something like this: 1. Rome uses a Ball and Net to play Volleyball, with a Score of 64,400. 2. Rome uses a Ball and Racket and Net to play Table Tennis, with a Score of 51,700. etc. Any tags that belong to "Rome" should automatically become highlighted in the filter-box area, and the non-applicable tags should be greyed out. The user should then be able to deselect tags if they wish. For example, if they deselect the tags "Ball" and "Net, then the first row in the above example should disappear from the list, but the second row should remain visible because the tag "Racket" is still selected/active. The user should be able to select multiple Cities, and multiple Sports if they wish, and the rows should automatically reload and be ordered by largest score first. This project will probably require a database of some sort to link the Country/City selections to the Sport selections through the use of the tags. A database may also be beneficial to store all the possible scores in order to rank the results rows, and then all database queries could be limited to return a max of 200 rows to improve performance. I've attached a wireframe image of the layout. And I've attached a list of Countries, Cities and Sports for you to use. Along with the values (Value 1, Value 2, Value 3, Value 4) for each to calculate the Score used to order each row.