reorganize files

2025-12-21 21:22:24 +00:00 · 2025-01-30 16:28:56 +02:00
parent 594a5fc0d5
commit f8bb71a184
94 changed files with 2 additions and 25 deletions
--- a/public/charts/areachart-original.vl.json
+++ b/public/charts/areachart-original.vl.json
@@ -0,0 +1,167 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Robusta Coffee Price",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "values": [
+      {
+        "month": "2018-01",
+        "price": 0.8865
+      },
+      {
+        "month": "2018-02",
+        "price": 0.8924
+      },
+      {
+        "month": "2018-03",
+        "price": 0.8818
+      },
+      {
+        "month": "2018-04",
+        "price": 0.8831
+      },
+      {
+        "month": "2018-05",
+        "price": 0.8874
+      },
+      {
+        "month": "2018-06",
+        "price": 0.8607
+      },
+      {
+        "month": "2018-07",
+        "price": 0.8442
+      },
+      {
+        "month": "2018-08",
+        "price": 0.8074
+      },
+      {
+        "month": "2018-09",
+        "price": 0.7670
+      },
+      {
+        "month": "2018-10",
+        "price": 0.8532
+      },
+      {
+        "month": "2018-11",
+        "price": 0.8352
+      },
+      {
+        "month": "2018-12",
+        "price": 0.7757
+      },
+      {
+        "month": "2019-01",
+        "price": 0.7824
+      },
+      {
+        "month": "2019-02",
+        "price": 0.7865
+      },
+      {
+        "month": "2019-03",
+        "price": 0.7696
+      },
+      {
+        "month": "2019-04",
+        "price": 0.7328
+      },
+      {
+        "month": "2019-05",
+        "price": 0.7112
+      },
+      {
+        "month": "2019-06",
+        "price": 0.7402
+      },
+      {
+        "month": "2019-07",
+        "price": 0.7393
+      },
+      {
+        "month": "2019-08",
+        "price": 0.7078
+      },
+      {
+        "month": "2019-09",
+        "price": 0.7064
+      },
+      {
+        "month": "2019-10",
+        "price": 0.71
+      },
+      {
+        "month": "2019-11",
+        "price": 0.7328
+      },
+      {
+        "month": "2019-12",
+        "price": 0.7322
+      }
+    ]
+  },
+  "mark": {
+    "type": "area",
+    "color": "#3182bd",
+    "opacity": 0.6,
+    "line": true,
+    "strokeWidth": 1.5
+  },
+  "encoding": {
+    "x": {
+      "field": "month",
+      "type": "temporal",
+      "title": null,
+      "axis": {
+        "grid": true,
+        "tickCount": 4,
+        "labelExpr": "timeFormat(datum.value, '%b %Y')"
+      }
+    },
+    "y": {
+      "field": "price",
+      "type": "quantitative",
+      "title": "Coffee Price ($/lb)",
+      "axis": {
+        "titleFontWeight": "bold",
+        "grid": true
+      },
+      "stack": null,
+      "scale": {
+        "zero": false,
+        "domainMin": 0.5
+      }
+    },
+    "tooltip": [
+      {
+        "field": "month",
+        "type": "temporal",
+        "title": "Month"
+      },
+      {
+        "field": "price",
+        "type": "quantitative",
+        "title": "Price",
+        "format": "$.3f"
+      }
+    ]
+  },
+  "config": {
+    "axis": {
+      "gridColor": "#ddd",
+      "gridOpacity": 0.5,
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/areachart-ukrainian.vl.json
+++ b/public/charts/areachart-ukrainian.vl.json
@@ -0,0 +1,167 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Ціна кави Робуста",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "values": [
+      {
+        "month": "2018-01",
+        "price": 0.8865
+      },
+      {
+        "month": "2018-02",
+        "price": 0.8924
+      },
+      {
+        "month": "2018-03",
+        "price": 0.8818
+      },
+      {
+        "month": "2018-04",
+        "price": 0.8831
+      },
+      {
+        "month": "2018-05",
+        "price": 0.8874
+      },
+      {
+        "month": "2018-06",
+        "price": 0.8607
+      },
+      {
+        "month": "2018-07",
+        "price": 0.8442
+      },
+      {
+        "month": "2018-08",
+        "price": 0.8074
+      },
+      {
+        "month": "2018-09",
+        "price": 0.7670
+      },
+      {
+        "month": "2018-10",
+        "price": 0.8532
+      },
+      {
+        "month": "2018-11",
+        "price": 0.8352
+      },
+      {
+        "month": "2018-12",
+        "price": 0.7757
+      },
+      {
+        "month": "2019-01",
+        "price": 0.7824
+      },
+      {
+        "month": "2019-02",
+        "price": 0.7865
+      },
+      {
+        "month": "2019-03",
+        "price": 0.7696
+      },
+      {
+        "month": "2019-04",
+        "price": 0.7328
+      },
+      {
+        "month": "2019-05",
+        "price": 0.7112
+      },
+      {
+        "month": "2019-06",
+        "price": 0.7402
+      },
+      {
+        "month": "2019-07",
+        "price": 0.7393
+      },
+      {
+        "month": "2019-08",
+        "price": 0.7078
+      },
+      {
+        "month": "2019-09",
+        "price": 0.7064
+      },
+      {
+        "month": "2019-10",
+        "price": 0.71
+      },
+      {
+        "month": "2019-11",
+        "price": 0.7328
+      },
+      {
+        "month": "2019-12",
+        "price": 0.7322
+      }
+    ]
+  },
+  "mark": {
+    "type": "area",
+    "color": "#3182bd",
+    "opacity": 0.6,
+    "line": true,
+    "strokeWidth": 1.5
+  },
+  "encoding": {
+    "x": {
+      "field": "month",
+      "type": "temporal",
+      "title": null,
+      "axis": {
+        "grid": true,
+        "tickCount": 4,
+        "labelExpr": "timeFormat(datum.value, '%b %Y')"
+      }
+    },
+    "y": {
+      "field": "price",
+      "type": "quantitative",
+      "title": "Ціна кави ($/фунт)",
+      "axis": {
+        "titleFontWeight": "bold",
+        "grid": true
+      },
+      "stack": null,
+      "scale": {
+        "zero": false,
+        "domainMin": 0.5
+      }
+    },
+    "tooltip": [
+      {
+        "field": "month",
+        "type": "temporal",
+        "title": "Month"
+      },
+      {
+        "field": "price",
+        "type": "quantitative",
+        "title": "Price",
+        "format": "$.3f"
+      }
+    ]
+  },
+  "config": {
+    "axis": {
+      "gridColor": "#ddd",
+      "gridOpacity": 0.5,
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/barchart-original.vl.json
+++ b/public/charts/barchart-original.vl.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Global Internet Speed (Mbps)",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "data": {
+    "url": "data/barchart.csv", "format": {"type": "csv"}
+  },
+  "width": 600,
+  "height": 400,
+  "mark": {
+    "type": "bar"
+  },
+  "encoding": {
+    "x": {
+      "field": "Country",
+      "type": "nominal",
+      "axis": {
+        "labelAngle": 40,
+        "labelAlign": "left",
+        "title": null,
+        "labelPadding": 10
+      },
+      "sort": {
+        "field": "index",
+        "order": "ascending"
+      }
+    },
+    "y": {
+      "field": "Speed",
+      "type": "quantitative",
+      "axis": {
+        "title": "Internet Speed (Mbps)",
+        "titleFontWeight": "bold",
+        "grid": true
+      }
+    }
+  }
+}
--- a/public/charts/barchart-ukrainian.vl.json
+++ b/public/charts/barchart-ukrainian.vl.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Світова швидкість інтернету (МБіт/с)",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "data": {
+    "url": "data/barchart.csv", "format": {"type": "csv"}
+  },
+  "width": 600,
+  "height": 400,
+  "mark": {
+    "type": "bar"
+  },
+  "encoding": {
+    "x": {
+      "field": "Country_UK",
+      "type": "nominal",
+      "title": "Країна",
+      "axis": {
+        "labelAngle": 40,
+        "labelAlign": "left",
+        "title": null,
+        "labelPadding": 10
+      },
+      "sort": {
+        "field": "index",
+        "order": "ascending"
+      }
+    },
+    "y": {
+      "field": "Speed",
+      "type": "quantitative",
+      "axis": {
+        "title": "Швидкість інтернету (МБіт/с)",
+        "titleFontWeight": "bold",
+        "grid": true
+      },
+      "scale": {
+        "zero": true
+      }
+    }
+  }
+}
--- a/public/charts/bubblechart-original.vl.json
+++ b/public/charts/bubblechart-original.vl.json
@@ -0,0 +1,82 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+      "text": "Metro Systems of the World",
+      "fontSize": 16,
+      "fontWeight": "bold"
+    },
+    "width": 600,
+    "height": 400,
+    "data": {
+      "url": "data/bubblechart.csv"
+    },
+    "layer": [
+      {
+        "mark": {
+          "type": "circle",
+          "opacity": 0.7,
+          "stroke": "black",
+          "strokeWidth": 1,
+          "fill": "#3182bd"
+        },
+        "encoding": {
+          "x": {
+            "field": "NumberofStations",
+            "type": "quantitative",
+            "scale": {"domain": [150, 800]},
+            "axis": {
+              "title": "Number of Stations",
+              "titleFontWeight": "bold",
+              "grid": true
+            }
+          },
+          "y": {
+            "field": "Length",
+            "type": "quantitative",
+            "scale": {"domain": [150, 500]},
+            "axis": {
+              "title": "Total System Length (Km)",
+              "titleFontWeight": "bold",
+              "grid": true
+            }
+          },
+          "size": {
+            "field": "Ridership",
+            "type": "quantitative",
+            "scale": {
+              "domain": [0, 5],
+              "range": [0, 1500]
+            },
+            "legend": {
+              "title": "Ridership (bn per year)",
+              "orient": "right",
+              "symbolType": "circle",
+              "values": [1.5, 2.5, 3.5]
+            }
+          }
+        }
+      },
+      {
+        "mark": {
+          "type": "text",
+          "fontSize": 11,
+          "dx": 15,
+          "align": "left"
+        },
+        "encoding": {
+          "x": {"field": "NumberofStations", "type": "quantitative"},
+          "y": {"field": "Length", "type": "quantitative"},
+          "text": {"field": "City", "type": "nominal"}
+        }
+      }
+    ],
+    "config": {
+      "axis": {
+        "gridColor": "#ddd",
+        "gridDash": [1, 1],
+        "labelFontSize": 11,
+        "titleFontSize": 12
+      },
+      "view": {"stroke": null}
+    }
+  }
--- a/public/charts/bubblechart-ukrainian.vl.json
+++ b/public/charts/bubblechart-ukrainian.vl.json
@@ -0,0 +1,82 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+      "text": "Системи метро світу",
+      "fontSize": 16,
+      "fontWeight": "bold"
+    },
+    "width": 600,
+    "height": 400,
+    "data": {
+      "url": "data/bubblechart.csv"
+    },
+    "layer": [
+      {
+        "mark": {
+          "type": "circle",
+          "opacity": 0.7,
+          "stroke": "black",
+          "strokeWidth": 1,
+          "fill": "#3182bd"
+        },
+        "encoding": {
+          "x": {
+            "field": "NumberofStations",
+            "type": "quantitative",
+            "scale": {"domain": [150, 800]},
+            "axis": {
+              "title": "Кількість станцій",
+              "titleFontWeight": "bold",
+              "grid": true
+            }
+          },
+          "y": {
+            "field": "Length",
+            "type": "quantitative",
+            "scale": {"domain": [150, 500]},
+            "axis": {
+              "title": "Загальна довжина системи (км)",
+              "titleFontWeight": "bold",
+              "grid": true
+            }
+          },
+          "size": {
+            "field": "Ridership",
+            "type": "quantitative",
+            "scale": {
+              "domain": [0, 5],
+              "range": [0, 1500]
+            },
+            "legend": {
+              "title": "Пасажиропотік (млрд на рік)",
+              "orient": "right",
+              "symbolType": "circle",
+              "values": [1.5, 2.5, 3.5]
+            }
+          }
+        }
+      },
+      {
+        "mark": {
+          "type": "text",
+          "fontSize": 11,
+          "dx": 15,
+          "align": "left"
+        },
+        "encoding": {
+          "x": {"field": "NumberofStations", "type": "quantitative"},
+          "y": {"field": "Length", "type": "quantitative"},
+          "text": {"field": "CityUK", "type": "nominal"}
+        }
+      }
+    ],
+    "config": {
+      "axis": {
+        "gridColor": "#ddd",
+        "gridDash": [1, 1],
+        "labelFontSize": 11,
+        "titleFontSize": 12
+      },
+      "view": {"stroke": null}
+    }
+  }
--- a/public/charts/choropleth-original.vl.json
+++ b/public/charts/choropleth-original.vl.json
@@ -0,0 +1,113 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+      "text": "Unemployment Rates for States in 2020",
+      "fontSize": 16,
+      "fontWeight": "bold"
+    },
+    "width": 600,
+    "height": 500,
+    "projection": {
+      "type": "albersUsa"
+    },
+    "layer": [
+      {
+        "data": {
+          "url": "data/topo-USA.json",
+          "format": {
+            "type": "topojson",
+            "feature": "states"
+          }
+        },
+        "transform": [
+          {
+            "lookup": "id",
+            "from": {
+              "data": {
+                "url": "data/choropleth.csv"
+              },
+              "key": "id",
+              "fields": ["rate"]
+            }
+          }
+        ],
+        "mark": {
+          "type": "geoshape",
+          "stroke": "#fff",
+          "strokeWidth": 0.5
+        },
+        "encoding": {
+          "color": {
+            "field": "rate",
+            "type": "quantitative",
+            "title": "Unemployment Rate (%)",
+            "scale": {
+              "scheme": "blues"
+            },
+            "legend": {
+              "title": "Unemployment Rate (%)",
+              "orient": "top",
+              "direction": "horizontal"
+            }
+          }
+        }
+      },
+      {
+        "data": {
+          "url": "data/topo-USA.json",
+          "format": {
+            "type": "topojson",
+            "feature": "states"
+          }
+        },
+        "mark": {
+          "type": "geoshape",
+          "filled": false,
+          "stroke": "#ccc",
+          "strokeWidth": 0.5
+        }
+      },
+      {
+        "data": {
+          "url": "data/choropleth.csv"
+        },
+        "transform": [
+          {
+            "lookup": "code",
+            "from": {
+              "data": {
+                "url": "data/state-coordinates.json"
+              },
+              "key": "code",
+              "fields": ["latitude", "longitude"]
+            }
+          }
+        ],
+        "mark": {
+          "type": "text",
+          "color": "black",
+          "fontSize": 10,
+          "fontWeight": "bold"
+        },
+        "encoding": {
+          "longitude": {
+            "field": "longitude",
+            "type": "quantitative"
+          },
+          "latitude": {
+            "field": "latitude",
+            "type": "quantitative"
+          },
+          "text": {
+            "field": "code",
+            "type": "nominal"
+          }
+        }
+      }
+    ],
+    "config": {
+      "view": {
+        "stroke": null
+      }
+    }
+  }
--- a/public/charts/choropleth-ukrainian.vl.json
+++ b/public/charts/choropleth-ukrainian.vl.json
@@ -0,0 +1,308 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "height": 500,
+  "width": 600,
+  "title": "Кількість шлюбів в першому півріччі 2024 р.",
+  "config": {
+    "padding": 0,
+    "legend": {
+      "orient": "top",
+      "padding": 20,
+      "gradientLength": 300,
+      "titleFontWeight": "normal",
+      "titleAlign": "center",
+      "titleAnchor": "middle",
+      "titleLimit": 1000
+    }
+  },
+  "layer": [
+    {
+      "data": {
+        "url": "https://raw.githubusercontent.com/org-scn-design-studio-community/sdkcommunitymaps/master/geojson/Europe/Ukraine-regions.json",
+        "format": {
+          "feature": "UKR_adm1",
+          "type": "topojson"
+        }
+      },
+      "mark": {
+        "type": "geoshape",
+        "stroke": "white",
+        "strokeOpacity": 0.3,
+        "strokeWidth": 0.5
+      },
+      "encoding": {
+        "color": {
+          "field": "value",
+          "legend": {
+            "title": null
+          },
+          "scale": {
+            "scheme": "blues",
+            "reverse": false
+          },
+          "type": "quantitative"
+        }
+      },
+      "projection": {
+        "type": "mercator"
+      },
+      "transform": [
+        {
+          "lookup": "properties.ID_1",
+          "from": {
+            "data": {
+              "name": "referendum"
+            },
+            "key": "id",
+            "fields": [
+              "value"
+            ]
+          }
+        }
+      ]
+    },
+    {
+      "data": {
+        "name": "referendum"
+      },
+      "mark": {
+        "type": "text",
+        "color": "#111"
+      },
+      "encoding": {
+        "latitude": {
+          "field": "lat",
+          "type": "quantitative"
+        },
+        "longitude": {
+          "field": "lon",
+          "type": "quantitative"
+        },
+        "text": {
+          "field": "short_region",
+          "type": "ordinal"
+        }
+      }
+    }
+  ],
+  "datasets": {
+    "referendum": [
+      {
+        "region": "Львівська область",
+        "short_region": "Льв",
+        "id": 3150,
+        "value": 4616,
+        "lat": 49.8397,
+        "lon": 24.0297
+      },
+      {
+        "region": "Івано-Франківська область",
+        "short_region": "ІвФ",
+        "id": 3142,
+        "value": 2333,
+        "lat": 48.7226,
+        "lon": 24.7105
+      },
+      {
+        "region": "Тернопільська область",
+        "short_region": "Тер",
+        "id": 3157,
+        "value": "1512",
+        "lat": 49.3535,
+        "lon": 25.5948
+      },
+      {
+        "region": "м.Київ",
+        "short_region": "м.К",
+        "id": 3147,
+        "value": 9392,
+        "lat": 50.4501,
+        "lon": 30.5234
+      },
+      {
+        "region": "Волинська область",
+        "short_region": "Вол",
+        "id": 3160,
+        "value": 1791,
+        "lat": 51.3424,
+        "lon": 25
+      },
+      {
+        "region": "Рівненська область",
+        "short_region": "Рів",
+        "id": 3154,
+        "value": 2682,
+        "lat": 51,
+        "lon": 26.8
+      },
+      {
+        "region": "Закарпатська область",
+        "short_region": "Зак",
+        "id": 3158,
+        "value": 1859,
+        "lat": 48.4,
+        "lon": 23
+      },
+      {
+        "region": "Чернівецька область",
+        "short_region": "Чнц",
+        "id": 3138,
+        "value": 1376,
+        "lat": 48.2915,
+        "lon": 25.9403
+      },
+      {
+        "region": "Київська область",
+        "short_region": "К.о",
+        "id": 3146,
+        "value": 4848,
+        "lat": 49.92,
+        "lon": 30.57
+      },
+      {
+        "region": "Харківська область",
+        "short_region": "Хар",
+        "id": 3143,
+        "value": 4148,
+        "lat": 49.5935,
+        "lon": 36.5304
+      },
+      {
+        "region": "Черкаська область",
+        "short_region": "Чрк",
+        "id": 3136,
+        "value": 3001,
+        "lat": 49.2,
+        "lon": 31.4
+      },
+      {
+        "region": "Дніпропетровська область",
+        "short_region": "Дні",
+        "id": 3140,
+        "value": 7076,
+        "lat": 48.4647,
+        "lon": 35.0462
+      },
+      {
+        "region": "Сумська область",
+        "short_region": "Сум",
+        "id": 3156,
+        "value": 1670,
+        "lat": 50.8077,
+        "lon": 34.4981
+      },
+      {
+        "region": "Полтавська область",
+        "short_region": "Пол",
+        "id": 3153,
+        "value": 3065,
+        "lat": 49.5883,
+        "lon": 34.0514
+      },
+      {
+        "region": "Запорізька область",
+        "short_region": "Зап",
+        "id": 3161,
+        "value": 2205,
+        "lat": 47.1388,
+        "lon": 35.5396
+      },
+      {
+        "region": "Херсонська область",
+        "short_region": "Хер",
+        "id": 3144,
+        "value": 323,
+        "lat": 46.6354,
+        "lon": 33.5169
+      },
+      {
+        "region": "Вінницька область",
+        "short_region": "Він",
+        "id": 3159,
+        "value": 3362,
+        "lat": 49.0331,
+        "lon": 28.6682
+      },
+      {
+        "region": "Житомирська область",
+        "short_region": "Жит",
+        "id": 3162,
+        "value": 2717,
+        "lat": 50.2649,
+        "lon": 28.6767
+      },
+      {
+        "region": "Хмельницька область",
+        "short_region": "Хме",
+        "id": 3145,
+        "value": 2925,
+        "lat": 49.4228,
+        "lon": 26.9871
+      },
+      {
+        "region": "Одеська область",
+        "short_region": "Оде",
+        "id": 3152,
+        "value": 4896,
+        "lat": 46.9825,
+        "lon": 30.3233
+      },
+      {
+        "region": "Кіровоградська область",
+        "short_region": "Кір",
+        "id": 3148,
+        "value": 1801,
+        "lat": 48.5079,
+        "lon": 32.2623
+      },
+      {
+        "region": "м.Севастополь",
+        "short_region": "Сев",
+        "id": 3155,
+        "value": 0,
+        "lat": 44.58,
+        "lon": 33.58
+      },
+      {
+        "region": "Чернігівська область",
+        "short_region": "Чнг",
+        "id": 3137,
+        "value": 1776,
+        "lat": 51.2982,
+        "lon": 31.8893
+      },
+      {
+        "region": "Донецька область",
+        "short_region": "Дон",
+        "id": 3141,
+        "value": 933,
+        "lat": 48.0159,
+        "lon": 37.8028
+      },
+      {
+        "region": "Миколаївська область",
+        "short_region": "Мик",
+        "id": 3151,
+        "value": 2459,
+        "lat": 47.275,
+        "lon": 31.9946
+      },
+      {
+        "region": "Луганська область",
+        "short_region": "Луг",
+        "id": 3149,
+        "value": 0,
+        "lat": 48.974,
+        "lon": 39.0078
+      },
+      {
+        "region": "Автономна Республіка Крим",
+        "short_region": "АРК",
+        "id": 3139,
+        "value": 0,
+        "lat": 45.3657,
+        "lon": 34.4708
+      }
+    ]
+  }
+}
--- a/public/charts/histogram-original.vl.json
+++ b/public/charts/histogram-original.vl.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Trip Distance and Customers",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "url": "data/histogram.csv"
+  },
+  "mark": {
+    "type": "bar",
+    "fill": "#3182bd",
+    "tooltip": true
+  },
+  "encoding": {
+    "x": {
+      "field": "Trip_Distance",
+      "type": "quantitative",
+      "bin": {
+        "step": 10
+      },
+      "axis": {
+        "title": "Distance (in Km)",
+        "titleFontWeight": "bold",
+        "grid": false
+      }
+    },
+    "y": {
+      "aggregate": "count",
+      "axis": {
+        "title": "Number of Customers",
+        "titleFontWeight": "bold",
+        "grid": true
+      }
+    }
+  },
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd",
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    },
+    "bar": {
+      "binSpacing": 1
+    }
+  }
+}
--- a/public/charts/histogram-ukrainian.vl.json
+++ b/public/charts/histogram-ukrainian.vl.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Відстань поїздки та клієнти",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "url": "data/histogram.csv"
+  },
+  "mark": {
+    "type": "bar",
+    "fill": "#3182bd",
+    "tooltip": true
+  },
+  "encoding": {
+    "x": {
+      "field": "Trip_Distance",
+      "type": "quantitative",
+      "bin": {
+        "step": 10
+      },
+      "axis": {
+        "title": "Відстань (км)",
+        "titleFontWeight": "bold",
+        "grid": false
+      }
+    },
+    "y": {
+      "aggregate": "count",
+      "axis": {
+        "title": "Кількість клієнтів",
+        "titleFontWeight": "bold",
+        "grid": true
+      }
+    }
+  },
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd",
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    },
+    "bar": {
+      "binSpacing": 1
+    }
+  }
+}
--- a/public/charts/linechart-original.vl.json
+++ b/public/charts/linechart-original.vl.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "width": 600,
+  "height": 400,
+  "title": "Oil Prices",
+  "data": {
+    "url": "data/linechart.json"
+  },
+  "mark": {
+    "type": "line",
+    "point": true
+  },
+  "encoding": {
+    "x": {
+      "field": "date",
+      "type": "temporal",
+      "title": "Month",
+      "axis": {
+        "format": "%b %Y",
+        "labelOverlap": false,
+        "labelAngle": -25,
+        "labelAlign": "right",
+        "tickCount": "month"
+      }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "title": "Oil Price (USD)",
+      "scale": {
+        "zero": true
+      }
+    }
+  }
+}
--- a/public/charts/linechart-ukrainian.vl.json
+++ b/public/charts/linechart-ukrainian.vl.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "width": 600,
+  "height": 400,
+  "title": "Ціни на нафту",
+  "data": {
+    "url": "data/linechart.json"
+  },
+  "mark": {
+    "type": "line",
+    "point": true
+  },
+  "encoding": {
+    "x": {
+      "field": "date",
+      "type": "temporal",
+      "title": "Місяць",
+      "axis": {
+        "format": "%b %Y",
+        "labelOverlap": false,
+        "labelAngle": -25,
+        "labelAlign": "right",
+        "tickCount": "month"
+      }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "title": "Ціна за барель нафти ($)",
+      "scale": {
+        "zero": true
+      }
+    }
+  }
+}
--- a/public/charts/piechart-original.vl.json
+++ b/public/charts/piechart-original.vl.json
@@ -0,0 +1,53 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+      "text": "Global Smartphone Market Share in 2021",
+      "fontSize": 16,
+      "fontWeight": "bold"
+    },
+    "config": {
+      "legend": {
+        "labelFontSize": 11,
+        "titleFontSize": 12,
+        "titleFontWeight": "bold"
+      }
+    },
+    "width": 600, "height": 400,
+    "data": {
+      "values": [        
+        {"index": 1, "brand": "Samsung", "share": 17.6},
+        {"index": 2, "brand": "Xiaomi", "share": 15.5},
+        {"index": 3, "brand": "Apple", "share": 15.0},
+        {"index": 4, "brand": "Oppo", "share": 10.2},
+        {"index": 5, "brand": "Vivo", "share": 9.8},
+        {"index": 6, "brand": "Others", "share": 31.9}
+      ]
+    },
+    "encoding": {
+      "theta": {
+        "field": "share",
+        "type": "quantitative",
+        "stack": true,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "color": {
+        "field": "brand",
+        "type": "nominal",
+        "legend": null,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "order": {
+        "field": "index",
+        "type": "quantitative"
+      }
+    },
+    "layer": [{
+      "mark": {"type": "arc", "outerRadius": 120}
+    }, {
+      "mark": {"type": "text", "radius": 90},
+      "encoding": {
+        "text": {"field": "brand", "type": "nominal"},
+        "color": {"value": "black"}
+      }
+    }]
+}
--- a/public/charts/piechart-ukrainian.vl.json
+++ b/public/charts/piechart-ukrainian.vl.json
@@ -0,0 +1,53 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+      "text": "Розподіл світового ринку смартфонів у 2021 році",
+      "fontSize": 16,
+      "fontWeight": "bold"
+    },
+    "config": {
+      "legend": {
+        "labelFontSize": 11,
+        "titleFontSize": 12,
+        "titleFontWeight": "bold"
+      }
+    },
+    "width": 600, "height": 400,
+    "data": {
+      "values": [        
+        {"index": 1, "brand": "Samsung", "share": 17.6},
+        {"index": 2, "brand": "Xiaomi", "share": 15.5},
+        {"index": 3, "brand": "Apple", "share": 15.0},
+        {"index": 4, "brand": "Oppo", "share": 10.2},
+        {"index": 5, "brand": "Vivo", "share": 9.8},
+        {"index": 6, "brand": "Інші", "share": 31.9}
+      ]
+    },
+    "encoding": {
+      "theta": {
+        "field": "share",
+        "type": "quantitative",
+        "stack": true,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "color": {
+        "field": "brand",
+        "type": "nominal",
+        "legend": null,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "order": {
+        "field": "index",
+        "type": "quantitative"
+      }
+    },
+    "layer": [{
+      "mark": {"type": "arc", "outerRadius": 120}
+    }, {
+      "mark": {"type": "text", "radius": 90},
+      "encoding": {
+        "text": {"field": "brand", "type": "nominal"},
+        "color": {"value": "black"}
+      }
+    }]
+}
--- a/public/charts/scatterplot-original.vl.json
+++ b/public/charts/scatterplot-original.vl.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Weight and Height of 85 Individuals",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "url": "data/scatterplot.csv"
+  },
+  "mark": {
+    "type": "circle",
+    "size": 40,
+    "fill": "#3182bd",
+    "opacity": 1
+  },
+  "encoding": {
+    "x": {
+      "field": "Height",
+      "type": "quantitative",
+      "scale": {
+        "domain": [155, 190]
+      },
+      "axis": {
+        "title": "Height (cm)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 1],
+        "ticks": 5
+      }
+    },
+    "y": {
+      "field": "Weight",
+      "type": "quantitative",
+      "scale": {
+        "domain": [40, 75]
+      },
+      "axis": {
+        "title": "Weight (kg)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 1],
+        "ticks": 8
+      }
+    },
+    "tooltip": [
+      {"field": "Height", "title": "Height", "format": ".1f"},
+      {"field": "Weight", "title": "Weight", "format": ".1f"}
+    ]
+  },
+  "config": {
+    "axis": {
+      "gridColor": "#ddd",
+      "gridOpacity": 0.5,
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/scatterplot-ukrainian.vl.json
+++ b/public/charts/scatterplot-ukrainian.vl.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Вага та зріст 85 осіб",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "width": 600,
+  "height": 400,
+  "data": {
+    "url": "data/scatterplot.csv"
+  },
+  "mark": {
+    "type": "circle",
+    "size": 40,
+    "fill": "#3182bd",
+    "opacity": 1
+  },
+  "encoding": {
+    "x": {
+      "field": "Height",
+      "type": "quantitative",
+      "scale": {
+        "domain": [155, 190]
+      },
+      "axis": {
+        "title": "Зріст (см)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 1],
+        "ticks": 5
+      }
+    },
+    "y": {
+      "field": "Weight",
+      "type": "quantitative",
+      "scale": {
+        "domain": [40, 75]
+      },
+      "axis": {
+        "title": "Вага (кг)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 1],
+        "ticks": 8
+      }
+    },
+    "tooltip": [
+      {"field": "Height", "title": "Зріст", "format": ".1f"},
+      {"field": "Weight", "title": "Вага", "format": ".1f"}
+    ]
+  },
+  "config": {
+    "axis": {
+      "gridColor": "#ddd",
+      "gridOpacity": 0.5,
+      "labelFontSize": 11,
+      "titleFontSize": 12
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/stacked100-original.vl.json
+++ b/public/charts/stacked100-original.vl.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Olympic Medal Distribution by Country",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "data": {
+    "url": "data/stacked100.csv"
+  },
+  "width": 600,
+  "height": 400,
+  "encoding": {
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": {
+        "title": "Percentage",
+        "format": ".0%",
+        "grid": true
+      },
+      "stack": "normalize"
+    },
+    "x": {
+      "field": "Countries",
+      "type": "nominal",
+      "axis": {
+        "title": null,
+        "labelAngle": 40,
+        "titleFontWeight": "bold"
+      }
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "domain": [
+          "Gold",
+          "Silver",
+          "Bronze"
+        ],
+        "range": [
+          "#FFD700",
+          "#C0C0C0",
+          "#CD7F32"
+        ]
+      },
+      "legend": {
+        "title": "Medals",
+        "orient": "right"
+      }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "ascending"
+    }
+  },
+  "mark": "bar",
+  "transform": [
+    {
+      "fold": [
+        "Gold",
+        "Silver",
+        "Bronze"
+      ],
+      "as": [
+        "category",
+        "value"
+      ]
+    },
+    {
+      "calculate": "datum.category === 'Gold' ? 1 : datum.category === 'Silver' ? 2 : 3",
+      "as": "order"
+    }
+  ],
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd"
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/stacked100-ukrainian.vl.json
+++ b/public/charts/stacked100-ukrainian.vl.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Розподіл олімпійських медалей за країною",
+    "fontSize": 16,
+    "fontWeight": "bold"
+  },
+  "data": {
+    "url": "data/stacked100.csv"
+  },
+  "width": 600,
+  "height": 400,
+  "encoding": {
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": {
+        "title": "Відсоток",
+        "format": ".0%",
+        "grid": true
+      },
+      "stack": "normalize"
+    },
+    "x": {
+      "field": "CountriesUK",
+      "type": "nominal",
+      "axis": {
+        "title": null,
+        "labelAngle": 40,
+        "titleFontWeight": "bold"
+      }
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "domain": [
+          "Золото",
+          "Срібло",
+          "Бронза"
+        ],
+        "range": [
+          "#FFD700",
+          "#C0C0C0",
+          "#CD7F32"
+        ]
+      },
+      "legend": {
+        "title": "Медалі",
+        "orient": "right"
+      }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "ascending"
+    }
+  },
+  "mark": "bar",
+  "transform": [
+    {
+      "fold": [
+        "Gold",
+        "Silver",
+        "Bronze"
+      ],
+      "as": [
+        "category",
+        "value"
+      ]
+    },
+    {
+      "calculate": "datum.category === 'Gold' ? 'Золото' : datum.category === 'Silver' ? 'Срібло' : 'Бронза'",
+      "as": "category"
+    },
+    {
+      "calculate": "datum.category === 'Gold' ? 1 : datum.category === 'Silver' ? 2 : 3",
+      "as": "order"
+    }
+  ],
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd"
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/stackedareachart-original.vl.json
+++ b/public/charts/stackedareachart-original.vl.json
@@ -0,0 +1,133 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+        "text": "Popular Girls' names in the UK",
+        "fontSize": 16,
+        "fontWeight": "bold"
+    },
+    "width": 600,
+    "height": 400,
+    "data": {
+        "values": [
+            {
+                "Year": "2009-01-01",
+                "Amelia": 3625,
+                "Isla": 1908,
+                "Olivia": 5201
+            },
+            {
+                "Year": "2010-01-01",
+                "Amelia": 4227,
+                "Isla": 2384,
+                "Olivia": 5279
+            },
+            {
+                "Year": "2011-01-01",
+                "Amelia": 5054,
+                "Isla": 2849,
+                "Olivia": 4938
+            },
+            {
+                "Year": "2012-01-01",
+                "Amelia": 7061,
+                "Isla": 3501,
+                "Olivia": 4585
+            },
+            {
+                "Year": "2013-01-01",
+                "Amelia": 5570,
+                "Isla": 3526,
+                "Olivia": 4598
+            },
+            {
+                "Year": "2014-01-01",
+                "Amelia": 5327,
+                "Isla": 4012,
+                "Olivia": 4724
+            }
+        ]
+    },
+    "encoding": {
+        "x": {
+            "field": "Year",
+            "type": "temporal",
+            "timeUnit": "year",
+            "axis": {
+                "title": "Year",
+                "titleFontWeight": "bold",
+                "grid": true
+            }
+        },
+        "y": {
+            "field": "value",
+            "type": "quantitative",
+            "axis": {
+                "title": "Number of Girls",
+                "titleFontWeight": "bold",
+                "grid": true
+            }
+        },
+        "color": {
+            "field": "name",
+            "type": "nominal",
+            "scale": {
+                "domain": [
+                    "Amelia",
+                    "Isla",
+                    "Olivia"
+                ],
+                "range": [
+                    "#3182bd",
+                    "#9ecae1",
+                    "#deebf7"
+                ]
+            },
+            "legend": {
+                "title": null,
+                "orient": "right"
+            }
+        }
+    },
+    "layer": [
+        {
+            "mark": {
+                "type": "area",
+                "opacity": 0.7
+            },
+            "transform": [
+                {
+                    "fold": [
+                        "Amelia",
+                        "Isla",
+                        "Olivia"
+                    ],
+                    "as": [
+                        "name",
+                        "value"
+                    ]
+                },
+                {
+                    "calculate": "datum.name === 'Amelia' ? 1 : datum.name === 'Isla' ? 2 : 3",
+                    "as": "order"
+                }
+            ],
+            "encoding": {
+                "order": {
+                    "field": "order",
+                    "type": "quantitative"
+                }
+            }
+        }
+    ],
+    "config": {
+        "axis": {
+            "gridColor": "#ddd",
+            "gridOpacity": 0.5,
+            "labelFontSize": 11,
+            "titleFontSize": 12
+        },
+        "view": {
+            "stroke": null
+        }
+    }
+}
--- a/public/charts/stackedareachart-ukrainian.vl.json
+++ b/public/charts/stackedareachart-ukrainian.vl.json
@@ -0,0 +1,123 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "title": {
+        "text": "Популярність виробництва сортів меду",
+        "fontSize": 16,
+        "fontWeight": "bold"
+    },
+    "width": 600,
+    "height": 400,
+    "data": {
+        "values": [
+            {
+                "Year": "2009-01-01",
+                "Липовий": 3625,
+                "Гречаний": 1908,
+                "Акацієвий": 5201
+            },
+            {
+                "Year": "2010-01-01",
+                "Липовий": 4227,
+                "Гречаний": 2384,
+                "Акацієвий": 5279
+            },
+            {
+                "Year": "2011-01-01",
+                "Липовий": 5054,
+                "Гречаний": 2849,
+                "Акацієвий": 4938
+            },
+            {
+                "Year": "2012-01-01",
+                "Липовий": 7061,
+                "Гречаний": 3501,
+                "Акацієвий": 4585
+            },
+            {
+                "Year": "2013-01-01",
+                "Липовий": 5570,
+                "Гречаний": 3526,
+                "Акацієвий": 4598
+            },
+            {
+                "Year": "2014-01-01",
+                "Липовий": 5327,
+                "Гречаний": 4012,
+                "Акацієвий": 4724
+            }
+        ]
+    },
+    "encoding": {
+        "x": {
+            "field": "Year",
+            "type": "temporal",
+            "timeUnit": "year",
+            "axis": {
+                "title": "Year",
+                "titleFontWeight": "bold",
+                "grid": true
+            }
+        },
+        "y": {
+            "field": "value",
+            "type": "quantitative",
+            "axis": {
+                "title": "Кількість тонн",
+                "titleFontWeight": "bold",
+                "grid": true
+            }
+        },
+        "color": {
+            "field": "name",
+            "type": "nominal",
+            "scale": {
+                "domain": [
+                    "Липовий",
+                    "Гречаний",
+                    "Акацієвий"
+                ],
+                "range": [
+                    "#3182bd",
+                    "#9ecae1",
+                    "#deebf7"
+                ]
+            },
+            "legend": {
+                "title": null,
+                "orient": "right"
+            }
+        }
+    },
+    "layer": [
+        {
+            "mark": {
+                "type": "area",
+                "opacity": 0.7
+            },
+            "transform": [
+                {
+                    "fold": [
+                        "Липовий",
+                        "Гречаний",
+                        "Акацієвий"
+                    ],
+                    "as": [
+                        "name",
+                        "value"
+                    ]
+                }
+            ]
+        }
+    ],
+    "config": {
+        "axis": {
+            "gridColor": "#ddd",
+            "gridOpacity": 0.5,
+            "labelFontSize": 11,
+            "titleFontSize": 12
+        },
+        "view": {
+            "stroke": null
+        }
+    }
+}
--- a/public/charts/stackedbarchart-original.vl.json
+++ b/public/charts/stackedbarchart-original.vl.json
@@ -0,0 +1,97 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Room Service Prices"
+  },
+  "data": {
+    "url": "data/stackedbarchart.csv"
+  },
+  "width": 600,
+  "height": 400,
+  "encoding": {
+    "x": {
+      "field": "City",
+      "type": "nominal",
+      "axis": {
+        "title": "Cities",
+        "labelAngle": 40,
+        "titleFontWeight": "bold"
+      }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": {
+        "title": "Cost ($)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 0],
+        "tickCount": 15
+      },
+      "scale": {
+        "domain": [
+          0,
+          70
+        ]
+      }
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "domain": [
+          "Vodka",
+          "Soda",
+          "Peanut",
+          "Water",
+          "Sandwich"
+        ],
+        "range": [
+          "#386cb0",
+          "#7fc97f",
+          "#beaed4",
+          "#fdc086",
+          "#fb9a99"
+        ]
+      },
+      "legend": {
+        "title": null,
+        "orient": "right"
+      }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "descending"
+    }
+  },
+  "mark": "bar",
+  "transform": [
+    {
+      "fold": [
+        "Sandwich",
+        "Water",
+        "Peanut",
+        "Soda",
+        "Vodka"
+      ],
+      "as": [
+        "category",
+        "value"
+      ]
+    },
+    {
+      "calculate": "datum.category === 'Vodka' ? 1 : datum.category === 'Soda' ? 2 : datum.category === 'Peanut' ? 3 : datum.category === 'Water' ? 4 : 5",
+      "as": "order"
+    }
+  ],
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd"
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/stackedbarchart-ukrainian.vl.json
+++ b/public/charts/stackedbarchart-ukrainian.vl.json
@@ -0,0 +1,98 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "title": {
+    "text": "Ціни на обслуговування в номері"
+  },
+  "data": {
+    "url": "data/stackedbarchart.csv"
+  },
+  "width": 600,
+  "height": 400,
+  "encoding": {
+    "x": {
+      "field": "CityUK",
+      "type": "nominal",
+      "axis": {
+        "title": "Місто",
+        "labelAngle": 40,
+        "titleFontWeight": "bold"
+      }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": {
+        "title": "Ціна ($)",
+        "titleFontWeight": "bold",
+        "grid": true,
+        "gridDash": [1, 0],
+        "tickCount": 15
+      },
+      "scale": {
+        "domain": [
+          0,
+          70
+        ]
+      }
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "domain": [
+          "Vodka",
+          "Soda",
+          "Peanut",
+          "Water",
+          "Sandwich"
+        ],
+        "range": [
+          "#386cb0",
+          "#7fc97f",
+          "#beaed4",
+          "#fdc086",
+          "#fb9a99"
+        ]
+      },
+      "legend": {
+        "title": null,
+        "orient": "right",
+        "labelExpr": "datum.label == 'Sandwich' ? 'Сендвіч' : datum.label == 'Water' ? 'Вода' : datum.label == 'Peanut' ? 'Арахіс' : datum.label == 'Soda' ? 'Газована вода' : 'Горілка'"
+      }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "descending"
+    }
+  },
+  "mark": "bar",
+  "transform": [
+    {
+      "fold": [
+        "Sandwich",
+        "Water",
+        "Peanut",
+        "Soda",
+        "Vodka"
+      ],
+      "as": [
+        "category",
+        "value"
+      ]
+    },
+    {
+      "calculate": "datum.category === 'Vodka' ? 1 : datum.category === 'Soda' ? 2 : datum.category === 'Peanut' ? 3 : datum.category === 'Water' ? 4 : 5",
+      "as": "order"
+    }
+  ],
+  "config": {
+    "axis": {
+      "grid": true,
+      "gridColor": "#ddd"
+    },
+    "view": {
+      "stroke": null
+    }
+  }
+}
--- a/public/charts/treemap-original.vl.json
+++ b/public/charts/treemap-original.vl.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 500,
+  "height": 500,
+  "marks": [
+    {
+      "type": "image",
+      "encode": {
+        "enter": {
+          "url": {
+            "value": "data/treemap-en.png"
+          },
+          "x": {
+            "value": 0
+          },
+          "y": {
+            "value": 0
+          },
+          "width": {
+            "value": 500
+          },
+          "height": {
+            "value": 500
+          },
+          "aspect": {
+            "value": true
+          },
+          "align": {
+            "value": "left"
+          },
+          "baseline": {
+            "value": "top"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/public/charts/treemap-ukrainian.vl.json
+++ b/public/charts/treemap-ukrainian.vl.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 500,
+  "height": 500,
+  "marks": [
+    {
+      "type": "image",
+      "encode": {
+        "enter": {
+          "url": {
+            "value": "data/treemap-uk.png"
+          },
+          "x": {
+            "value": 0
+          },
+          "y": {
+            "value": 0
+          },
+          "width": {
+            "value": 500
+          },
+          "height": {
+            "value": 500
+          },
+          "aspect": {
+            "value": true
+          },
+          "align": {
+            "value": "left"
+          },
+          "baseline": {
+            "value": "top"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -0,0 +1,194 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    height: 100%;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+h1, h2, h3 {
+    color: #333;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+
+button {
+    background-color: #5cb85c;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
+
+.quiz-question {
+    margin: 20px 0;
+}
+
+.questionnaire {
+    display: none;
+    background-color: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.results {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+form label {
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+form input, form select, form textarea {
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+form button {
+    align-self: flex-start;
+    margin-top: 20px;
+}
+
+#quiz-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+#quiz {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+#chart {
+    flex: 2; /* Take 2/3 of the width */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    width: 100%;
+    height: 75%; /* Ensure the container takes full height */
+}
+
+#chart img {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%; /* Ensure the image fits vertically 100% */
+    width: 100%; /* Ensure the image spans 100% width */
+    object-fit: contain; /* Ensure the image fits within the container */
+}
+
+#question-block {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    width: 100%; /* Ensure question block takes full width */
+}
+
+@media (min-width: 768px) {
+    #quiz {
+        flex-direction: row;
+    }
+
+    #chart {
+        margin-bottom: 0;
+        flex: 2; /* Ensure it takes 2/3 of the width on larger screens */
+    }
+
+    #question-block {
+        flex: 1; /* Take 1/3 of the width */
+    }
+}
+
+#question-text, #options {
+    margin-bottom: 20px;
+}
+
+#options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.option-button {
+    margin-bottom: 10px;
+    width: 100%;
+    max-width: 300px;
+}
+
+#options label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+#submit {
+    margin-top: 20px;
+}
+
+#timer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+td {
+    text-align: center;
+}
--- a/public/data/barchart.csv
+++ b/public/data/barchart.csv
@@ -0,0 +1,15 @@
+index,Country,Speed,Country_UK
+1,Australia,79.24,Австралія
+2,China,78.61,Китай
+3,Hong Kong,43.88,Гонконг
+4,India,13.45,Індія
+5,Indonesia,16.16,Індонезія
+6,Japan,40.51,Японія
+7,Malaysia,23.74,Малайзія
+8,New Zealand,92.05,Нова Зеландія
+9,Singapore,68.32,Сінгапур
+10,South Korea,98.93,Південна Корея
+11,Sri Lanka,12.60,Шрі-Ланка
+12,Taiwan,51.67,Тайвань
+13,Thailand,31.38,Таїланд
+14,Vietnam,35.33,В'єтнам
--- a/public/data/bubblechart.csv
+++ b/public/data/bubblechart.csv
@@ -0,0 +1,11 @@
+City,Length,NumberofStations,Ridership,CityUK
+Delhi,230,348.12,1.7,Делі
+Guangzhow,247,531.1,2.4,Гуанчжоу
+Tokyo,249,316.3,3.6,Токіо
+Mexico City,163,200.9,0.93,Мехіко
+London,317,439.2,0.335,Лондон
+Seoul,436,547.9,2.7,Сеул
+Paris,304,219.9,2.3,Париж
+Beijing,342,727,0.75,Пекін
+Shanghai,369,743,2.8,Шанхай
+N.Y.C.,458,443.7,0.67,Нью-Йорк
--- a/public/data/choropleth.csv
+++ b/public/data/choropleth.csv
@@ -0,0 +1,52 @@
+state,rate,code,id
+Nebraska,4.2,NE,31
+South Dakota,4.6,SD,46
+Utah,4.7,UT,49
+North Dakota,5.1,ND,38
+Iowa,5.3,IA,19
+Idaho,5.4,ID,16
+Maine,5.4,ME,23
+Vermont,5.6,VT,50
+Wyoming,5.8,WY,56
+Alabama,5.9,AL,01
+Kansas,5.9,KS,20
+Montana,5.9,MT,30
+Arkansas,6.1,AR,05
+Missouri,6.1,MO,29
+Oklahoma,6.1,OK,40
+Minnesota,6.2,MN,27
+South Carolina,6.2,SC,45
+Virginia,6.2,VA,51
+Wisconsin,6.3,WI,55
+Georgia,6.5,GA,13
+Kentucky,6.6,KY,21
+New Hampshire,6.7,NH,33
+Maryland,6.8,MD,24
+Indiana,7.1,IN,18
+Colorado,7.3,CO,08
+North Carolina,7.3,NC,37
+Tennessee,7.5,TN,47
+Oregon,7.6,OR,41
+Texas,7.6,TX,48
+Florida,7.7,FL,12
+Alaska,7.8,AK,02
+Delaware,7.8,DE,10
+Arizona,7.9,AZ,04
+Connecticut,7.9,CT,09
+District of Columbia,8,DC,11
+Mississippi,8.1,MS,28
+Ohio,8.1,OH,39
+Louisiana,8.3,LA,22
+West Virginia,8.3,WV,54
+New Mexico,8.4,NM,35
+Washington,8.4,WA,53
+Massachusetts,8.9,MA,25
+Pennsylvania,9.1,PN,42
+Rhode Island,9.4,RI,44
+Illinois,9.5,IL,17
+New Jersey,9.8,NJ,34
+Michigan,9.9,MI,26
+New York,10,NY,36
+California,10.1,CA,06
+Hawaii,11.6,HI,15
+Nevada,12.8,NV,32
--- a/public/data/histogram.csv
+++ b/public/data/histogram.csv
--- a/public/data/linechart.json
+++ b/public/data/linechart.json
@@ -0,0 +1,50 @@
+[
+    {
+        "date": "2020-01-01",
+        "value": 57.52
+    },
+    {
+        "date": "2020-02-01",
+        "value": 50.54
+    },
+    {
+        "date": "2020-03-01",
+        "value": 29.21
+    },
+    {
+        "date": "2020-04-01",
+        "value": 16.55
+    },
+    {
+        "date": "2020-05-01",
+        "value": 28.56
+    },
+    {
+        "date": "2020-06-01",
+        "value": 38.31
+    },
+    {
+        "date": "2020-07-01",
+        "value": 40.71
+    },
+    {
+        "date": "2020-08-01",
+        "value": 42.34
+    },
+    {
+        "date": "2020-09-01",
+        "value": 39.63
+    },
+    {
+        "date": "2020-10-01",
+        "value": 39.40
+    },
+    {
+        "date": "2020-11-01",
+        "value": 40.94
+    },
+    {
+        "date": "2020-12-01",
+        "value": 47.02
+    }
+]
--- a/public/data/piechart.csv
+++ b/public/data/piechart.csv
@@ -0,0 +1,7 @@
+Brand,Share
+Samsung,25
+Xiaomi,16
+Apple,15
+Oppo,10
+Vivo,10
+Others,24
--- a/public/data/questions.json
+++ b/public/data/questions.json
@@ -0,0 +1,502 @@
+{
+  "quizzes": {
+    "original": {
+      "questions": [
+        {
+          "chart": "linechart",
+          "chart_uk": "лінійний графік",
+          "question": "What was the price of a barrel of oil in February 2020?",
+          "options": [
+            "$50.54",
+            "$47.02",
+            "$42.34",
+            "$54.40",
+            "Skip"
+          ],
+          "answer": "$50.54",
+          "image": "svg"
+        },
+        {
+          "chart": "barchart",
+          "chart_uk": "стовпчаста діаграма",
+          "question": "What is the average internet speed in Japan?",
+          "options": [
+            "42.30 Mbps",
+            "40.51 Mbps",
+            "35.25 Mbps",
+            "16.16 Mbps",
+            "Skip"
+          ],
+          "answer": "40.51 Mbps",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedbarchart",
+          "chart_uk": "накопичувана стовпчаста діаграма",
+          "question": "What is the cost of peanuts in Seoul?",
+          "options": [
+            "$6.1",
+            "$5.2",
+            "$7.5",
+            "$4.5",
+            "Skip"
+          ],
+          "answer": "$6.1",
+          "image": "svg"
+        },
+        {
+          "chart": "stacked100",
+          "chart_uk": "накопичувана стовпчаста діаграма 100%",
+          "question": "Which country has the lowest proportion of Gold medals?",
+          "options": [
+            "Great Britain",
+            "U.S.A.",
+            "Japan",
+            "Australia",
+            "Skip"
+          ],
+          "answer": "Great Britain",
+          "image": "svg"
+        },
+        {
+          "chart": "piechart",
+          "chart_uk": "кругова діаграма",
+          "question": "What is the approximate global smartphone market share of Samsung?",
+          "options": [
+            "17.6%",
+            "25.3%",
+            "10.9%",
+            "35.2%",
+            "Skip"
+          ],
+          "answer": "17.6%",
+          "image": "svg"
+        },
+        {
+          "chart": "histogram",
+          "chart_uk": "гістограма",
+          "question": "What distance have customers traveled in the taxi the most?",
+          "options": [
+            "60 - 70 Km",
+            "30 - 40 Km",
+            "20 - 30 Km",
+            "50 - 60 Km",
+            "Skip"
+          ],
+          "answer": "30 - 40 Km",
+          "image": "svg"
+        },
+        {
+          "chart": "scatterplot",
+          "chart_uk": "точкова діаграма",
+          "question": "There is a negative linear relationship between the height and the weight of the 85 males.",
+          "options": [
+            "True",
+            "False",
+            "Skip"
+          ],
+          "answer": "False",
+          "image": "svg"
+        },
+        {
+          "chart": "areachart",
+          "chart_uk": "площева діаграма",
+          "question": "What was the average price of a pound of coffee beans in October 2019?",
+          "options": [
+            "$0.71",
+            "$0.90",
+            "$0.80",
+            "$0.63",
+            "Skip"
+          ],
+          "answer": "$0.71",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedareachart",
+          "chart_uk": "накопичувана площева діаграма",
+          "question": "What was the ratio of girls named 'Isla' to girls named 'Amelia' in 2012 in the UK?",
+          "options": [
+            "1 to 1",
+            "1 to 2",
+            "1 to 3",
+            "1 to 4",
+            "Skip"
+          ],
+          "answer": "1 to 2",
+          "image": "svg"
+        },
+        {
+          "chart": "bubblechart",
+          "chart_uk": "бульбашкова діаграма",
+          "question": "Which city's metro system has the largest number of stations?",
+          "options": [
+            "Beijing",
+            "Shanghai",
+            "London",
+            "Seoul",
+            "Skip"
+          ],
+          "answer": "Shanghai",
+          "image": "svg"
+        },
+        {
+          "chart": "choropleth",
+          "chart_uk": "хороплетна карта",
+          "question": "In 2020, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI).",
+          "options": [
+            "True",
+            "False",
+            "Skip"
+          ],
+          "answer": "True",
+          "image": "svg"
+        },
+        {
+          "chart": "treemap",
+          "chart_uk": "деревоподібна діаграма",
+          "question": "eBay is nested in the Software category.",
+          "options": [
+            "True",
+            "False",
+            "Skip"
+          ],
+          "answer": "False",
+          "image": "png"
+        }
+      ]
+    },
+    "ukrainian": {
+      "questions": [
+        {
+          "chart": "linechart",
+          "chart_uk": "лінійний графік",
+          "question": "Яка була ціна за барель нафти у лютому 2020 року?",
+          "options": [
+            "$50.54",
+            "$47.02",
+            "$42.34",
+            "$54.40",
+            "Пропустити"
+          ],
+          "answer": "$50.54",
+          "image": "svg"
+        },
+        {
+          "chart": "barchart",
+          "chart_uk": "стовпчаста діаграма",
+          "question": "Яка середня швидкість інтернету в Японії?",
+          "options": [
+            "42.30 Мбіт/с",
+            "40.51 Мбіт/с",
+            "35.25 Мбіт/с",
+            "16.16 Мбіт/с",
+            "Пропустити"
+          ],
+          "answer": "40.51 Мбіт/с",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedbarchart",
+          "chart_uk": "накопичувана стовпчаста діаграма",
+          "question": "Яка вартість арахісу в Сеулі?",
+          "options": [
+            "$6.1",
+            "$5.2",
+            "$7.5",
+            "$4.5",
+            "Пропустити"
+          ],
+          "answer": "$6.1",
+          "image": "svg"
+        },
+        {
+          "chart": "stacked100",
+          "chart_uk": "накопичувана стовпчаста діаграма 100%",
+          "question": "Яка країна має найменшу частку золотих медалей?",
+          "options": [
+            "Велика Британія",
+            "США",
+            "Японія",
+            "Австралія",
+            "Пропустити"
+          ],
+          "answer": "Велика Британія",
+          "image": "svg"
+        },
+        {
+          "chart": "piechart",
+          "chart_uk": "кругова діаграма",
+          "question": "Яка приблизна глобальна частка ринку смартфонів Samsung?",
+          "options": [
+            "17.6%",
+            "25.3%",
+            "10.9%",
+            "35.2%",
+            "Пропустити"
+          ],
+          "answer": "17.6%",
+          "image": "svg"
+        },
+        {
+          "chart": "histogram",
+          "chart_uk": "гістограма",
+          "question": "Яку відстань клієнти найчастіше подорожували на таксі?",
+          "options": [
+            "60 - 70 км",
+            "30 - 40 км",
+            "20 - 30 км",
+            "50 - 60 км",
+            "Пропустити"
+          ],
+          "answer": "30 - 40 км",
+          "image": "svg"
+        },
+        {
+          "chart": "scatterplot",
+          "chart_uk": "точкова діаграма",
+          "question": "Існує негативний лінійний зв'язок між зростом та вагою 85 чоловіків.",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Неправда",
+          "image": "svg"
+        },
+        {
+          "chart": "areachart",
+          "chart_uk": "площева діаграма",
+          "question": "Яка була середня ціна фунта кавових зерен у жовтні 2019 року?",
+          "options": [
+            "$0.71",
+            "$0.90",
+            "$0.80",
+            "$0.63",
+            "Пропустити"
+          ],
+          "answer": "$0.71",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedareachart",
+          "chart_uk": "накопичувана площева діаграма",
+          "question": "Яке було співвідношення гречаного меду до липового у 2012 році?",
+          "options": [
+            "1 до 1",
+            "1 до 2",
+            "1 до 3",
+            "1 до 4",
+            "Пропустити"
+          ],
+          "answer": "1 до 2",
+          "image": "svg"
+        },
+        {
+          "chart": "bubblechart",
+          "chart_uk": "бульбашкова діаграма",
+          "question": "Метро якого міста має найбільшу кількість станцій?",
+          "options": [
+            "Пекін",
+            "Шанхай",
+            "Лондон",
+            "Сеул",
+            "Пропустити"
+          ],
+          "answer": "Шанхай",
+          "image": "svg"
+        },
+        {
+          "chart": "choropleth",
+          "chart_uk": "хороплетна карта",
+          "question": "У першому півріччі 2024 р. кількість шлюбів в Харківській області була більшою, ніж у Волинській області.",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Правда",
+          "image": "svg"
+        },
+        {
+          "chart": "treemap",
+          "chart_uk": "деревоподібна діаграма",
+          "question": "eBay вкладено в категорію \"програмне забезпечення\".",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Неправда",
+          "image": "png"
+        }
+      ]
+    },
+    "translated": {
+      "questions": [
+        {
+          "chart": "linechart",
+          "chart_uk": "лінійний графік",
+          "question": "Яка була ціна за барель нафти у лютому 2020 року?",
+          "options": [
+            "$50.54",
+            "$47.02",
+            "$42.34",
+            "$54.40",
+            "Пропустити"
+          ],
+          "answer": "$50.54",
+          "image": "svg"
+        },
+        {
+          "chart": "barchart",
+          "chart_uk": "стовпчаста діаграма",
+          "question": "Яка середня швидкість інтернету в Японії?",
+          "options": [
+            "42.30 Мбіт/с",
+            "40.51 Мбіт/с",
+            "35.25 Мбіт/с",
+            "16.16 Мбіт/с",
+            "Пропустити"
+          ],
+          "answer": "40.51 Мбіт/с",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedbarchart",
+          "chart_uk": "накопичувана стовпчаста діаграма",
+          "question": "Яка вартість арахісу в Сеулі?",
+          "options": [
+            "$6.1",
+            "$5.2",
+            "$7.5",
+            "$4.5",
+            "Пропустити"
+          ],
+          "answer": "$6.1",
+          "image": "svg"
+        },
+        {
+          "chart": "stacked100",
+          "chart_uk": "накопичувана стовпчаста діаграма 100%",
+          "question": "Яка країна має найменшу частку золотих медалей?",
+          "options": [
+            "Велика Британія",
+            "США",
+            "Японія",
+            "Австралія",
+            "Пропустити"
+          ],
+          "answer": "Велика Британія",
+          "image": "svg"
+        },
+        {
+          "chart": "piechart",
+          "chart_uk": "кругова діаграма",
+          "question": "Яка приблизна глобальна частка ринку смартфонів Samsung?",
+          "options": [
+            "17.6%",
+            "25.3%",
+            "10.9%",
+            "35.2%",
+            "Пропустити"
+          ],
+          "answer": "17.6%",
+          "image": "svg"
+        },
+        {
+          "chart": "histogram",
+          "chart_uk": "гістограма",
+          "question": "Яку відстань клієнти найчастіше подорожували на таксі?",
+          "options": [
+            "60 - 70 км",
+            "30 - 40 км",
+            "20 - 30 км",
+            "50 - 60 км",
+            "Пропустити"
+          ],
+          "answer": "30 - 40 км",
+          "image": "svg"
+        },
+        {
+          "chart": "scatterplot",
+          "chart_uk": "точкова діаграма",
+          "question": "Існує негативний лінійний зв'язок між зростом та вагою 85 чоловіків.",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Неправда",
+          "image": "svg"
+        },
+        {
+          "chart": "areachart",
+          "chart_uk": "площева діаграма",
+          "question": "Яка була середня ціна фунта кавових зерен у жовтні 2019 року?",
+          "options": [
+            "$0.71",
+            "$0.90",
+            "$0.80",
+            "$0.63",
+            "Пропустити"
+          ],
+          "answer": "$0.71",
+          "image": "svg"
+        },
+        {
+          "chart": "stackedareachart",
+          "chart_uk": "накопичувана площева діаграма",
+          "question": "Яке було співвідношення дівчат на ім'я 'Isla' до дівчат на ім'я 'Amelia' у 2012 році у Великобританії?",
+          "options": [
+            "1 до 1",
+            "1 до 2",
+            "1 до 3",
+            "1 до 4",
+            "Пропустити"
+          ],
+          "answer": "1 до 2",
+          "image": "svg"
+        },
+        {
+          "chart": "bubblechart",
+          "chart_uk": "бульбашкова діаграма",
+          "question": "Метро якого міста має найбільшу кількість станцій?",
+          "options": [
+            "Пекін",
+            "Шанхай",
+            "Лондон",
+            "Сеул",
+            "Пропустити"
+          ],
+          "answer": "Шанхай",
+          "image": "svg"
+        },
+        {
+          "chart": "choropleth",
+          "chart_uk": "хороплетна карта",
+          "question": "У 2020 році рівень безробіття у Вашингтоні (WA) був вищим, ніж у Вісконсині (WI).",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Правда",
+          "image": "svg"
+        },
+        {
+          "chart": "treemap",
+          "chart_uk": "деревоподібна діаграма",
+          "question": "eBay вкладено в категорію \"програмне забезпечення\".",
+          "options": [
+            "Правда",
+            "Неправда",
+            "Пропустити"
+          ],
+          "answer": "Неправда",
+          "image": "png"
+        }
+      ]
+    }
+  }
+}
--- a/public/data/scatterplot.csv
+++ b/public/data/scatterplot.csv
@@ -0,0 +1,86 @@
+Height,Weight
+167.0812,51.25136008
+181.6608,61.91077208
+176.276,69.41318376
+173.2788,64.56428528
+172.1866,65.4533256
+174.498,55.9278936
+177.292,64.17873208
+177.8254,61.89716432
+172.466,50.97013304
+169.6212,54.73494664
+168.8846,57.8103004
+171.7548,51.77299088
+173.482,56.97569112
+170.4848,55.54687632
+173.4312,52.65749528
+180.5686,63.50288
+168.8084,58.740164
+174.371,64.85004824
+180.9242,62.5503368
+170.5102,56.26355168
+172.2882,64.08347776
+174.9552,65.10859568
+161.2392,44.4066568
+173.7868,58.740164
+171.7802,64.3420252
+170.7134,58.83995424
+179.9336,64.60057264
+171.4246,59.6700276
+168.9862,49.13762136
+166.2176,51.65959288
+176.5808,46.8560536
+167.1574,54.771234
+172.2628,57.05733768
+179.324,61.78830224
+182.372,63.5482392
+175.7934,58.39997
+169.672,64.3193456
+171.8564,54.98895816
+172.2374,59.5793092
+162.687,48.40280232
+174.1678,56.40870112
+165.5572,56.63549712
+176.9364,63.35319464
+172.6438,62.30993304
+167.5892,48.2848684
+174.4218,58.40450592
+169.8752,66.07928256
+171.958,52.98861744
+177.3428,65.14488304
+175.4886,61.20316856
+177.5714,66.68709584
+171.0182,57.30227736
+178.4858,56.91672416
+175.514,52.48513032
+166.0652,56.01407608
+178.2572,67.08172088
+178.8414,70.7149928
+169.0116,58.09152744
+168.5544,54.14527704
+171.5516,60.69514552
+168.91,58.39089816
+175.26,62.3915796
+173.482,58.85809792
+170.2054,58.43172144
+179.8574,61.38006944
+173.2788,49.71821912
+175.4124,64.62325224
+172.0342,60.214338
+170.7388,73.96037976
+171.1198,56.57653016
+165.7858,58.65398152
+179.9336,60.79039984
+177.5968,63.6843168
+163.2966,46.64740128
+173.355,58.29564384
+168.5544,54.5671176
+173.6344,62.8678512
+166.3192,60.30959232
+177.0888,52.44430704
+172.0342,55.57409184
+174.3456,61.06709096
+169.6212,55.2928648
+177.927,70.47912496
+168.3512,58.48615248
+175.768,58.5587272
--- a/public/data/stacked100.csv
+++ b/public/data/stacked100.csv
@@ -0,0 +1,5 @@
+Countries,CountriesUK,Gold,Silver,Bronze
+U.S.A.,США,34.5,36.3,29.2
+Great Britain,Велика Британія,33.8,32.3,33.9
+Japan,Японія,46.6,24.1,29.3
+Australia,Австралія,37,15.2,47.8
--- a/public/data/stackedbarchart.csv
+++ b/public/data/stackedbarchart.csv
@@ -0,0 +1,11 @@
+City,CityUK,Sandwich,Water,Peanut,Soda,Vodka
+Helsinki,Гельсінкі,38.2,6.4,12.1,6.4,5.5
+Oslo,Осло,29.4,7.4,15.8,7.1,5.1
+Seoul,Сеул,27.4,7.4,6.1,7.9,9.9
+Zurich,Цюрих,31.3,5.9,10.8,5.6,4.3
+Stockholm,Стокгольм,28.4,4.1,11.3,4.9,5
+Paris,Париж,23.6,6.8,12.6,6.8,7.0
+N.Y.C.,Нью-Йорк,24.2,3.9,16.8,3.9,7.1
+Singapore,Сінгапур,19.4,5.2,14.8,6.6,6.2
+Toronto,Торонто,20.8,5.4,18.2,3.4,8.0
+Copenhagen,Копенгаген,24.3,2.8,10.8,5.0,3.7
--- a/public/data/state-coordinates.json
+++ b/public/data/state-coordinates.json
@@ -0,0 +1,53 @@
+[
+  { "code": "NE", "latitude": 41.5, "longitude": -99.68 },
+  { "code": "SD", "latitude": 44.5, "longitude": -100.23 },
+  { "code": "UT", "latitude": 39.32, "longitude": -111.09 },
+  { "code": "ND", "latitude": 47.5, "longitude": -100.47 },
+  { "code": "IA", "latitude": 42.07, "longitude": -93.5 },
+  { "code": "ID", "latitude": 44.24, "longitude": -114.47 },
+  { "code": "ME", "latitude": 45.37, "longitude": -69.24 },
+  { "code": "VT", "latitude": 44.07, "longitude": -72.67 },
+  { "code": "WY", "latitude": 43.07, "longitude": -107.29 },
+  { "code": "AL", "latitude": 32.8, "longitude": -86.79 },
+  { "code": "KS", "latitude": 38.5, "longitude": -98.38 },
+  { "code": "MT", "latitude": 46.92, "longitude": -110.45 },
+  { "code": "AR", "latitude": 34.75, "longitude": -92.29 },
+  { "code": "MO", "latitude": 38.57, "longitude": -92.6 },
+  { "code": "OK", "latitude": 35.47, "longitude": -97.52 },
+  { "code": "MN", "latitude": 46.39, "longitude": -94.64 },
+  { "code": "SC", "latitude": 33.84, "longitude": -81.16 },
+  { "code": "VA", "latitude": 37.77, "longitude": -78.17 },
+  { "code": "WI", "latitude": 44.5, "longitude": -89.5 },
+  { "code": "GA", "latitude": 32.64, "longitude": -83.44 },
+  { "code": "KY", "latitude": 37.53, "longitude": -85.3 },
+  { "code": "NH", "latitude": 43.68, "longitude": -71.58 },
+  { "code": "MD", "latitude": 39.05, "longitude": -76.64 },
+  { "code": "IN", "latitude": 40.27, "longitude": -86.13 },
+  { "code": "CO", "latitude": 39.11, "longitude": -105.36 },
+  { "code": "NC", "latitude": 35.78, "longitude": -80.79 },
+  { "code": "TN", "latitude": 35.86, "longitude": -86.66 },
+  { "code": "OR", "latitude": 43.93, "longitude": -120.55 },
+  { "code": "TX", "latitude": 31.47, "longitude": -99.33 },
+  { "code": "FL", "latitude": 27.99, "longitude": -81.76 },
+  { "code": "AK", "latitude": 64.2, "longitude": -149.49 },
+  { "code": "DE", "latitude": 38.99, "longitude": -75.51 },
+  { "code": "AZ", "latitude": 34.05, "longitude": -111.09 },
+  { "code": "CT", "latitude": 41.6, "longitude": -72.76 },
+  { "code": "DC", "latitude": 38.91, "longitude": -77.01 },
+  { "code": "MS", "latitude": 32.74, "longitude": -89.67 },
+  { "code": "OH", "latitude": 40.19, "longitude": -82.67 },
+  { "code": "LA", "latitude": 30.98, "longitude": -91.96 },
+  { "code": "WV", "latitude": 38.64, "longitude": -80.62 },
+  { "code": "NM", "latitude": 34.52, "longitude": -106.1 },
+  { "code": "WA", "latitude": 47.39, "longitude": -121.49 },
+  { "code": "MA", "latitude": 42.24, "longitude": -71.53 },
+  { "code": "PA", "latitude": 40.88, "longitude": -77.79 },
+  { "code": "RI", "latitude": 41.68, "longitude": -71.51 },
+  { "code": "IL", "latitude": 40.34, "longitude": -89.0 },
+  { "code": "NJ", "latitude": 40.14, "longitude": -74.67 },
+  { "code": "MI", "latitude": 44.18, "longitude": -84.51 },
+  { "code": "NY", "latitude": 42.95, "longitude": -75.53 },
+  { "code": "CA", "latitude": 37.25, "longitude": -119.61 },
+  { "code": "HI", "latitude": 20.79, "longitude": -156.33 },
+  { "code": "NV", "latitude": 38.5, "longitude": -117.02 }
+]
--- a/public/data/topo-USA.json
+++ b/public/data/topo-USA.json
--- a/public/data/treemap-en.png
+++ b/public/data/treemap-en.png
--- a/public/data/treemap-uk.png
+++ b/public/data/treemap-uk.png
--- a/public/images/areachart-original.svg
+++ b/public/images/areachart-original.svg
--- a/public/images/areachart-ukrainian.svg
+++ b/public/images/areachart-ukrainian.svg
--- a/public/images/barchart-original.svg
+++ b/public/images/barchart-original.svg
--- a/public/images/barchart-ukrainian.svg
+++ b/public/images/barchart-ukrainian.svg
--- a/public/images/bubblechart-original.svg
+++ b/public/images/bubblechart-original.svg
--- a/public/images/bubblechart-ukrainian.svg
+++ b/public/images/bubblechart-ukrainian.svg
--- a/public/images/choropleth-original.svg
+++ b/public/images/choropleth-original.svg
--- a/public/images/choropleth-ukrainian.svg
+++ b/public/images/choropleth-ukrainian.svg
--- a/public/images/histogram-original.svg
+++ b/public/images/histogram-original.svg
--- a/public/images/histogram-ukrainian.svg
+++ b/public/images/histogram-ukrainian.svg
--- a/public/images/linechart-original.svg
+++ b/public/images/linechart-original.svg
--- a/public/images/linechart-ukrainian.svg
+++ b/public/images/linechart-ukrainian.svg
--- a/public/images/piechart-original.svg
+++ b/public/images/piechart-original.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="610" height="430" viewBox="0 0 610 430"><rect width="610" height="430" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(5,25)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h600v400h-600Z"/><g><g class="mark-arc role-mark layer_0_marks" role="graphics-object" aria-roledescription="arc mark container"><path aria-label="share: 17.6; brand: Samsung; index: 1" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M107.261,-53.806A120,120,0,0,0,0,-120L0,0Z" fill="#4c78a8"/><path aria-label="share: 15.5; brand: Xiaomi; index: 2" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M104.791,58.47A120,120,0,0,0,107.261,-53.806L0,0Z" fill="#f58518"/><path aria-label="share: 15; brand: Apple; index: 3" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M14.292,119.146A120,120,0,0,0,104.791,58.47L0,0Z" fill="#e45756"/><path aria-label="share: 10.2; brand: Oppo; index: 4" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-59.782,104.048A120,120,0,0,0,14.292,119.146L0,0Z" fill="#72b7b2"/><path aria-label="share: 9.8; brand: Vivo; index: 5" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-108.898,50.41A120,120,0,0,0,-59.782,104.048L0,0Z" fill="#54a24b"/><path aria-label="share: 31.9; brand: Others; index: 6" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M0,-120A120,120,0,0,0,-108.898,50.41L0,0Z" fill="#eeca3b"/></g><g class="mark-text role-mark layer_1_marks" role="graphics-object" aria-roledescription="text mark container"><text aria-label="share: 17.6; index: 1; brand: Samsung" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(347.2657166965166,126.41049663847774)" font-family="sans-serif" font-size="11px" fill="black">Samsung</text><text aria-label="share: 15.5; index: 2; brand: Xiaomi" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(389.9782383993286,204.97904384832546)" font-family="sans-serif" font-size="11px" fill="black">Xiaomi</text><text aria-label="share: 15; index: 3; brand: Apple" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(350.1188054839369,277.75363092762313)" font-family="sans-serif" font-size="11px" fill="black">Apple</text><text aria-label="share: 10.2; index: 4; brand: Oppo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(282.02610175370336,291.1869547145822)" font-family="sans-serif" font-size="11px" fill="black">Oppo</text><text aria-label="share: 9.8; index: 5; brand: Vivo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(233.62381943776435,263.7799527308922)" font-family="sans-serif" font-size="11px" fill="black">Vivo</text><text aria-label="share: 31.9; index: 6; brand: Others" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(224.1623629055611,154.53709872560057)" font-family="sans-serif" font-size="11px" fill="black">Others</text></g><g class="mark-group role-title"><g transform="translate(300,-20)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Global Smartphone Market Share in 2021'" pointer-events="none"><text text-anchor="middle" transform="translate(0,13)" font-family="sans-serif" font-size="16px" font-weight="bold" fill="#000" opacity="1">Global Smartphone Market Share in 2021</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>
--- a/public/images/piechart-ukrainian.svg
+++ b/public/images/piechart-ukrainian.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="610" height="430" viewBox="0 0 610 430"><rect width="610" height="430" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(5,25)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h600v400h-600Z"/><g><g class="mark-arc role-mark layer_0_marks" role="graphics-object" aria-roledescription="arc mark container"><path aria-label="share: 17.6; brand: Samsung; index: 1" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M107.261,-53.806A120,120,0,0,0,0,-120L0,0Z" fill="#4c78a8"/><path aria-label="share: 15.5; brand: Xiaomi; index: 2" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M104.791,58.47A120,120,0,0,0,107.261,-53.806L0,0Z" fill="#f58518"/><path aria-label="share: 15; brand: Apple; index: 3" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M14.292,119.146A120,120,0,0,0,104.791,58.47L0,0Z" fill="#e45756"/><path aria-label="share: 10.2; brand: Oppo; index: 4" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-59.782,104.048A120,120,0,0,0,14.292,119.146L0,0Z" fill="#72b7b2"/><path aria-label="share: 9.8; brand: Vivo; index: 5" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-108.898,50.41A120,120,0,0,0,-59.782,104.048L0,0Z" fill="#54a24b"/><path aria-label="share: 31.9; brand: Інші; index: 6" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M0,-120A120,120,0,0,0,-108.898,50.41L0,0Z" fill="#eeca3b"/></g><g class="mark-text role-mark layer_1_marks" role="graphics-object" aria-roledescription="text mark container"><text aria-label="share: 17.6; index: 1; brand: Samsung" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(347.2657166965166,126.41049663847774)" font-family="sans-serif" font-size="11px" fill="black">Samsung</text><text aria-label="share: 15.5; index: 2; brand: Xiaomi" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(389.9782383993286,204.97904384832546)" font-family="sans-serif" font-size="11px" fill="black">Xiaomi</text><text aria-label="share: 15; index: 3; brand: Apple" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(350.1188054839369,277.75363092762313)" font-family="sans-serif" font-size="11px" fill="black">Apple</text><text aria-label="share: 10.2; index: 4; brand: Oppo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(282.02610175370336,291.1869547145822)" font-family="sans-serif" font-size="11px" fill="black">Oppo</text><text aria-label="share: 9.8; index: 5; brand: Vivo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(233.62381943776435,263.7799527308922)" font-family="sans-serif" font-size="11px" fill="black">Vivo</text><text aria-label="share: 31.9; index: 6; brand: Інші" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(224.1623629055611,154.53709872560057)" font-family="sans-serif" font-size="11px" fill="black">Інші</text></g><g class="mark-group role-title"><g transform="translate(300,-20)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Розподіл світового ринку смартфонів у 2021 році'" pointer-events="none"><text text-anchor="middle" transform="translate(0,13)" font-family="sans-serif" font-size="16px" font-weight="bold" fill="#000" opacity="1">Розподіл світового ринку смартфонів у 2021 році</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>
--- a/public/images/scatterplot-original.svg
+++ b/public/images/scatterplot-original.svg
--- a/public/images/scatterplot-ukrainian.svg
+++ b/public/images/scatterplot-ukrainian.svg
--- a/public/images/stacked100-original.svg
+++ b/public/images/stacked100-original.svg
--- a/public/images/stacked100-ukrainian.svg
+++ b/public/images/stacked100-ukrainian.svg
--- a/public/images/stackedareachart-original.svg
+++ b/public/images/stackedareachart-original.svg
--- a/public/images/stackedareachart-ukrainian.svg
+++ b/public/images/stackedareachart-ukrainian.svg
--- a/public/images/stackedbarchart-original.svg
+++ b/public/images/stackedbarchart-original.svg
--- a/public/images/stackedbarchart-ukrainian.svg
+++ b/public/images/stackedbarchart-ukrainian.svg
--- a/public/images/treemap-original.png
+++ b/public/images/treemap-original.png
--- a/public/images/treemap-ukrainian.png
+++ b/public/images/treemap-ukrainian.png
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -0,0 +1,55 @@
+// src/js/app.js
+
+document.addEventListener('DOMContentLoaded', function() {
+    const currentPage = window.location.pathname.split('/').pop();
+
+    if (currentPage === 'consent.html') {
+        initConsentPage();
+    } else if (currentPage === 'quiz.html') {
+        initQuizPage();
+    } else if (currentPage === 'questionnaire.html') {
+        initQuestionnairePage();
+    } else if (currentPage === 'results.html') {
+        initResultsPage();
+    }
+});
+
+function initConsentPage() {
+    const consentButton = document.getElementById('consent-button');
+    consentButton.addEventListener('click', function() {
+        fetch('../data/questions.json')
+            .then(response => response.json())
+            .then(data => {
+                const quizVersions = Object.keys(data.quizzes);
+                const randomVersion = quizVersions[Math.floor(Math.random() * quizVersions.length)];
+                localStorage.setItem('quizVersion', randomVersion);
+                window.location.href = 'quiz.html';
+            });
+    });
+}
+
+function initQuizPage() {
+    const version = localStorage.getItem('quizVersion');
+    loadQuestions(version);
+}
+
+function initQuestionnairePage() {
+    // Logic for initializing the questionnaire page
+}
+
+function initResultsPage() {
+    // Logic for displaying results
+}
+
+function loadQuestions(version) {
+    fetch('../data/questions.json')
+        .then(response => response.json())
+        .then(data => {
+            const questions = data.quizzes[version];
+            displayQuestions(questions);
+        });
+}
+
+function displayQuestions(questions) {
+    // Logic to display questions on the quiz page
+}
--- a/public/js/consent.js
+++ b/public/js/consent.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const consentButton = document.getElementById('consentButton');
+
+    consentButton.addEventListener('click', function() {
+        fetch('../data/questions.json')
+            .then(response => response.json())
+            .then(data => {
+                const quizVersions = Object.keys(data.quizzes);
+                const randomVersion = quizVersions[Math.floor(Math.random() * quizVersions.length)];
+                localStorage.setItem('quizVersion', randomVersion);
+                window.location.href = 'quiz.html';
+            });
+    });
+});
--- a/public/js/questionnaire.js
+++ b/public/js/questionnaire.js
@@ -0,0 +1,80 @@
+// This file handles the logic for the questionnaire, including collecting additional participant information after the quiz.
+
+document.addEventListener('DOMContentLoaded', function() {
+    const questionnaireForm = document.getElementById('questionnaire-form');
+
+    questionnaireForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        
+        // Form validation
+        const age = document.getElementById('age').value;
+        if (age < 0 || age > 120) {
+            showError('Please enter a valid age between 0 and 120');
+            return;
+        }
+
+        const participantData = {
+            age: age,
+            gender: document.getElementById('gender').value,
+            education: document.getElementById('education').value,
+            colorBlind: document.getElementById('color-blind').value,
+            familiarity: document.getElementById('familiarity').value,
+            englishLevel: document.getElementById('english-level').value,
+            ukrainianLevel: document.getElementById('ukrainian-level').value,
+            visualizationDifficulty: document.getElementById('visualization-difficulty').value,
+            quizDifficulty: document.getElementById('quiz-difficulty').value,
+            kseAffiliation: document.getElementById('kse-affiliation').value,
+            comments: document.getElementById('comments').value
+        };
+
+        // Disable form while submitting
+        const submitButton = document.querySelector('button[type="submit"]');
+        submitButton.disabled = true;
+
+        // Store participant data in local storage
+        localStorage.setItem('participantData', JSON.stringify(participantData));
+
+        // Retrieve existing quiz data
+        const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
+        const quizId = 'quiz';
+        if (allQuizzes[quizId]) {
+            allQuizzes[quizId].participantData = participantData;
+            allQuizzes[quizId].iterationVersion = 'v1.0.0'; // Add semantic versioning
+            localStorage.setItem('allQuizzes', JSON.stringify(allQuizzes));
+        }
+
+        // Send data to the backend
+        fetch('/api/responses', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(allQuizzes)
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.success) {
+                console.log('Success:', data);
+                window.location.href = 'results.html';
+            } else {
+                throw new Error(data.message || 'Failed to submit the form');
+            }
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+            showError('Failed to submit the form. Please try again.');
+            submitButton.disabled = false;
+        });
+    });
+
+    function showError(message) {
+        const errorDiv = document.getElementById('error-message');
+        errorDiv.textContent = message;
+        errorDiv.style.display = 'block';
+    }
+});
--- a/public/js/quiz.js
+++ b/public/js/quiz.js
@@ -0,0 +1,201 @@
+// This file manages the quiz functionality, including loading questions from the JSON file, displaying them to the user, and collecting answers.
+
+document.addEventListener('DOMContentLoaded', function () {
+    const quizContainer = document.getElementById('quiz');
+    const resultsContainer = document.getElementById('results');
+    const timerDisplay = document.getElementById('time');
+    const timerLabel = document.getElementById('timer-label'); // Add a label for the timer
+    const version = localStorage.getItem('quizVersion');
+    const quizId = 'quiz';
+    let questions = [];
+    let currentQuestionIndex = 0;
+    let score = 0;
+    let quizResults = [];
+    const initialTimeLeft = 25000; // 25 seconds in milliseconds
+    let timeLeft = initialTimeLeft;
+    let timer;
+    let startTime = new Date().toISOString();
+
+    // Set timer label based on version
+    if (version === 'ukrainian') {
+        timerLabel.textContent = 'Час, що залишився:';
+    } else {
+        timerLabel.textContent = 'Time remaining:';
+    }
+
+    // Generate and store browser ID
+    function generateBrowserId() {
+        return 'xxxx-xxxx-4xxx-yxxx-xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g, function(c) {
+            const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+
+    const browserId = localStorage.getItem('browserId') || generateBrowserId();
+    localStorage.setItem('browserId', browserId);
+
+    const browserInfo = {
+        userAgent: navigator.userAgent,
+        screenResolution: `${window.screen.width}x${window.screen.height}`,
+        operatingSystem: navigator.platform,
+        hostname: window.location.hostname // Store hostname
+    };
+
+    // Check if there is a completed quiz
+    const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
+    if (allQuizzes[quizId] && allQuizzes[quizId].completed) {
+        alert("Ви вже пройшли дослідження. Дякуємо! Перенаправлення на головну сторінку тесту.");
+        window.location.href = 'index.html';
+        return;
+    }
+
+    fetch('data/questions.json')
+        .then(response => response.json())
+        .then(data => {
+            if (!data.quizzes || !data.quizzes[version] || !data.quizzes[version].questions) {
+                throw new Error('Invalid quiz data or version');
+            }
+            questions = data.quizzes[version].questions;
+            questions = shuffleArray(questions); // Randomize the order of questions
+            displayQuestion();
+        })
+        .catch(error => {
+            console.error('Error loading quiz:', error);
+            quizContainer.innerHTML = '<p>Error loading quiz. Please try again later.</p>';
+        });
+
+    // Function to shuffle an array
+    function shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+        return array;
+    }
+
+    function displayQuestion() {
+        if (!questions || currentQuestionIndex >= questions.length) {
+            showResults();
+            return;
+        }
+
+        // Complete timer reset
+        stopTimer();
+        timeLeft = initialTimeLeft; // Reset to initial time
+        timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds
+
+        const question = questions[currentQuestionIndex];
+        const imageVersion = version === 'translated' ? 'original' : version;
+        const imagePath = `/images/${question.chart}-${imageVersion}.${question.image}`;
+        document.getElementById('chart').innerHTML = `<img src="${imagePath}" alt="${question.chart_uk}">`;
+
+        // Update question and options
+        document.getElementById('question-text').innerHTML = question.question;
+        document.getElementById('options').innerHTML = question.options.map((option, index) => `
+            <button class="option-button" data-value="${option}">${option}</button>
+        `).join('');
+
+        // Start fresh timer
+        startTimer();
+
+        // Add event listeners to option buttons
+        document.querySelectorAll('.option-button').forEach(button => {
+            button.addEventListener('click', () => submitAnswer(button.dataset.value));
+        });
+    }
+
+    function stopTimer() {
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+
+    function startTimer() {
+        // Clear any existing timer
+        stopTimer();
+
+        // Ensure display shows starting value
+        timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds
+
+        timer = setInterval(() => {
+            timeLeft -= 100; // Decrease by 100 milliseconds
+            timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds
+
+            if (timeLeft <= 0) {
+                stopTimer();
+                alert("Time's up! Moving to the next question.");
+                submitAnswer(true);
+            }
+        }, 100);
+    }
+
+    function storeQuizProgress() {
+        const currentProgress = {
+            quizId: quizId,
+            version: version,
+            score: score,
+            currentQuestionIndex: currentQuestionIndex,
+            totalQuestions: questions.length,
+            answers: quizResults,
+            lastUpdated: new Date().toISOString(),
+            participantData: JSON.parse(localStorage.getItem('participantData') || '{}'),
+            startTime: startTime, // Store start time
+            browserId: browserId, // Store browser ID
+            browserInfo: browserInfo // Store browser info including hostname
+        };
+        const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
+        allQuizzes[quizId] = currentProgress;
+        localStorage.setItem('allQuizzes', JSON.stringify(allQuizzes));
+    }
+
+    function submitAnswer(selectedAnswer = null) {
+        // Stop the timer first
+        stopTimer();
+
+        if (!selectedAnswer) {
+            alert('Please select an answer before proceeding.');
+            startTimer(); // Restart timer if no answer selected
+            return;
+        }
+
+        const currentQuestion = questions[currentQuestionIndex];
+        const isCorrect = selectedAnswer === currentQuestion.answer;
+        if (isCorrect) {
+            score++;
+        }
+
+        // Store the question result
+        quizResults.push({
+            question: currentQuestion.question,
+            selectedAnswer: selectedAnswer,
+            correctAnswer: currentQuestion.answer,
+            isCorrect: isCorrect,
+            questionIndex: currentQuestionIndex,
+            ordinalNumber: currentQuestionIndex + 1, // Store the ordinal number of the question
+            timestamp: new Date().toISOString(),
+            timeSpent: 25000 - timeLeft, // Time spent in milliseconds
+            chartType: currentQuestion.chart,
+            chartTypeUk: currentQuestion.chart_uk // Include chart_uk type
+        });
+
+        // Store progress after each answer
+        storeQuizProgress();
+
+        currentQuestionIndex++;
+        // Reset timer state before showing next question
+        timeLeft = initialTimeLeft; // Reset to initial time
+        displayQuestion();
+    }
+
+    function showResults() {
+        // Mark quiz as completed
+        const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
+        allQuizzes[quizId].completed = true;
+        allQuizzes[quizId].completedAt = new Date().toISOString();
+        localStorage.setItem('allQuizzes', JSON.stringify(allQuizzes));
+
+        // Redirect to the questionnaire page
+        window.location.href = 'questionnaire.html';
+    }
+});
--- a/public/js/results.js
+++ b/public/js/results.js
@@ -0,0 +1,30 @@
+const resultsContainer = document.getElementById('results');
+const resultsHeader = document.getElementById('results-header');
+const resultsTableBody = document.getElementById('results-table-body');
+
+const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
+const quizData = allQuizzes['quiz'];
+
+function displayResults() {
+    const totalQuestions = quizData.totalQuestions;
+    const correctAnswers = quizData.score;
+    const percentage = ((correctAnswers / totalQuestions) * 100).toFixed(2);
+
+    resultsHeader.textContent = `Результати тесту: ${correctAnswers}/${totalQuestions}, ${percentage}%`;
+
+    let resultsHTML = '';
+
+    quizData.answers.forEach(answer => {
+        resultsHTML += `
+            <tr>
+                <td>${answer.question}</td>
+                <td>${answer.chartTypeUk}</td>
+                <td>${answer.isCorrect ? '✅' : '❌'}</td>
+            </tr>
+        `;
+    });
+
+    resultsTableBody.innerHTML = resultsHTML;
+}
+
+window.onload = displayResults;
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="610" height="430" viewBox="0 0 610 430"><rect width="610" height="430" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(5,25)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h600v400h-600Z"/><g><g class="mark-arc role-mark layer_0_marks" role="graphics-object" aria-roledescription="arc mark container"><path aria-label="share: 17.6; brand: Samsung; index: 1" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M107.261,-53.806A120,120,0,0,0,0,-120L0,0Z" fill="#4c78a8"/><path aria-label="share: 15.5; brand: Xiaomi; index: 2" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M104.791,58.47A120,120,0,0,0,107.261,-53.806L0,0Z" fill="#f58518"/><path aria-label="share: 15; brand: Apple; index: 3" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M14.292,119.146A120,120,0,0,0,104.791,58.47L0,0Z" fill="#e45756"/><path aria-label="share: 10.2; brand: Oppo; index: 4" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-59.782,104.048A120,120,0,0,0,14.292,119.146L0,0Z" fill="#72b7b2"/><path aria-label="share: 9.8; brand: Vivo; index: 5" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M-108.898,50.41A120,120,0,0,0,-59.782,104.048L0,0Z" fill="#54a24b"/><path aria-label="share: 31.9; brand: Others; index: 6" role="graphics-symbol" aria-roledescription="arc mark" transform="translate(300,200)" d="M0,-120A120,120,0,0,0,-108.898,50.41L0,0Z" fill="#eeca3b"/></g><g class="mark-text role-mark layer_1_marks" role="graphics-object" aria-roledescription="text mark container"><text aria-label="share: 17.6; index: 1; brand: Samsung" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(347.2657166965166,126.41049663847774)" font-family="sans-serif" font-size="11px" fill="black">Samsung</text><text aria-label="share: 15.5; index: 2; brand: Xiaomi" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(389.9782383993286,204.97904384832546)" font-family="sans-serif" font-size="11px" fill="black">Xiaomi</text><text aria-label="share: 15; index: 3; brand: Apple" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(350.1188054839369,277.75363092762313)" font-family="sans-serif" font-size="11px" fill="black">Apple</text><text aria-label="share: 10.2; index: 4; brand: Oppo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(282.02610175370336,291.1869547145822)" font-family="sans-serif" font-size="11px" fill="black">Oppo</text><text aria-label="share: 9.8; index: 5; brand: Vivo" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(233.62381943776435,263.7799527308922)" font-family="sans-serif" font-size="11px" fill="black">Vivo</text><text aria-label="share: 31.9; index: 6; brand: Others" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(224.1623629055611,154.53709872560057)" font-family="sans-serif" font-size="11px" fill="black">Others</text></g><g class="mark-group role-title"><g transform="translate(300,-20)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Global Smartphone Market Share in 2021'" pointer-events="none"><text text-anchor="middle" transform="translate(0,13)" font-family="sans-serif" font-size="16px" font-weight="bold" fill="#000" opacity="1">Global Smartphone Market Share in 2021</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>