I need a simple website with drag and drop game of pair matching.
For example, in the attached screenshot we have two lists:
1. European Countries
2. European Capitals
The user has to drag a capital and drop it onto the correspond country.
After a matching is done concat the capital name to the country name, e.g.:
Albania - Tirana
Use JavaScript to do this. (AngularJS is possible)
Use different colors for countries and capitals, in addition, use special color for correct matching and another one when a capital is hovering on country. (see screenshot)
Note that it should be working also on mobile device browsers!
You can use this json:
[
{
"country": "Albania",
"capital": "Tirana"
},
{
"country": "Andorra",
"capital": "Andorra la Vella"
},
{
"country": "Armenia",
"capital": "Yerevan"
},
{
"country": "Austria",
"capital": "Vienna"
},
{
"country": "Azerbaijan",
"capital": "Baku"
},
{
"country": "Belarus",
"capital": "Minsk"
},
{
"country": "Belgium",
"capital": "Brussels"
},
{
"country": "Bosnia and Herzegovina",
"capital": "Sarajevo"
},
{
"country": "Bulgaria",
"capital": "Sofia"
},
{
"country": "Croatia",
"capital": "Zagreb"
},
{
"country": "Cyprus",
"capital": "Nicosia"
},
{
"country": "Czech Republic",
"capital": "Prague"
},
{
"country": "Denmark",
"capital": "Copenhagen"
},
{
"country": "Estonia",
"capital": "Tallinn"
},
{
"country": "Finland",
"capital": "Helsinki"
},
{
"country": "France",
"capital": "Paris"
},
{
"country": "Georgia",
"capital": "Tbilisi"
},
{
"country": "Germany",
"capital": "Berlin"
},
{
"country": "Greece",
"capital": "Athens"
},
{
"country": "Hungary",
"capital": "Budapest"
},
{
"country": "Iceland",
"capital": "Reykjavik"
},
{
"country": "Ireland",
"capital": "Dublin"
},
{
"country": "Italy",
"capital": "Rome"
},
{
"country": "Kazakhstan",
"capital": "Astana"
},
{
"country": "Kosovo",
"capital": "Pristina"
},
{
"country": "Latvia",
"capital": "Riga"
},
{
"country": "Liechtenstein",
"capital": "Vaduz"
},
{
"country": "Lithuania",
"capital": "Vilnius"
},
{
"country": "Luxembourg",
"capital": "Luxembourg (city)"
},
{
"country": "Macedonia (FYROM)",
"capital": "Skopje"
},
{
"country": "Malta",
"capital": "Valletta"
},
{
"country": "Moldova",
"capital": "Chisinau"
},
{
"country": "Monaco",
"capital": "Monaco"
},
{
"country": "Montenegro",
"capital": "Podgorica"
},
{
"country": "Netherlands",
"capital": "Amsterdam"
},
{
"country": "Norway",
"capital": "Oslo"
},
{
"country": "Poland",
"capital": "Warsaw"
},
{
"country": "Portugal",
"capital": "Lisbon"
},
{
"country": "Romania",
"capital": "Bucharest"
},
{
"country": "Russia",
"capital": "Moscow"
},
{
"country": "San Marino",
"capital": "San Marino"
},
{
"country": "Serbia",
"capital": "Belgrade"
},
{
"country": "Slovakia",
"capital": "Bratislava"
},
{
"country": "Slovenia",
"capital": "Ljubljana"
},
{
"country": "Spain",
"capital": "Madrid"
},
{
"country": "Sweden",
"capital": "Stockholm"
},
{
"country": "Switzerland",
"capital": "Bern"
},
{
"country": "Turkey",
"capital": "Ankara"
},
{
"country": "Ukraine",
"capital": "Kiev"
},
{
"country": "United Kingdom",
"capital": "London"
},
{
"country": "Vatican City (Holy See)",
"capital": "Vatican City"
}
]