Update chart configurations to set fixed width and enhance export options in quiz

src/charts/areachart-original.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "values": [

src/charts/areachart-ukrainian.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "values": [

src/charts/barchart-original.vl.json

@@ -8,7 +8,7 @@
   "data": {
     "url": "data/barchart.csv", "format": {"type": "csv"}
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "mark": {
     "type": "bar"

src/charts/barchart-ukrainian.vl.json

@@ -8,7 +8,7 @@
   "data": {
     "url": "data/barchart.csv", "format": {"type": "csv"}
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "mark": {
     "type": "bar"

src/charts/bubblechart-original.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": "container",
+    "width": 800,
     "height": 400,
     "data": {
       "url": "data/bubblechart.csv"

src/charts/bubblechart-ukrainian.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": "container",
+    "width": 800,
     "height": 400,
     "data": {
       "url": "data/bubblechart.csv"

src/charts/choropleth-original.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": "container",
+    "width": 800,
     "height": 500,
     "projection": {
       "type": "albersUsa"

src/charts/choropleth-ukrainian.vl.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "height": 500,
-  "width": "container",
+  "width": 800,
   "title": "Кількість шлюбів в першому півріччі 2024 р.",
   "config": {
     "padding": 0,

src/charts/histogram-original.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "url": "data/histogram.csv"

src/charts/histogram-ukrainian.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "url": "data/histogram.csv"

src/charts/linechart-original.vl.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "width": "container",
+  "width": 800,
   "height": 400,
   "title": "Oil Prices",
   "data": {

src/charts/linechart-ukrainian.vl.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "width": "container",
+  "width": 800,
   "height": 400,
   "title": "Ціни на нафту",
   "data": {

src/charts/piechart-original.vl.json

@@ -12,7 +12,7 @@
         "titleFontWeight": "bold"
       }
     },
-    "width": "container", "height": 400,
+    "width": 800, "height": 400,
     "data": {
       "values": [        
         {"brand": "Samsung", "share": 17.6},

src/charts/piechart-ukrainian.vl.json

@@ -12,7 +12,7 @@
         "titleFontWeight": "bold"
       }
     },
-    "width": "container", "height": 400,
+    "width": 800, "height": 400,
     "data": {
       "values": [        
         {"brand": "Samsung", "share": 17.6},

src/charts/scatterplot-original.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "url": "data/scatterplot.csv"

src/charts/scatterplot-ukrainian.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "data": {
     "url": "data/scatterplot.csv"

src/charts/stacked100-original.vl.json

@@ -8,7 +8,7 @@
   "data": {
     "url": "data/stacked100.csv"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "encoding": {
     "y": {

src/charts/stacked100-ukrainian.vl.json

@@ -8,7 +8,7 @@
   "data": {
     "url": "data/stacked100.csv"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "encoding": {
     "y": {

src/charts/stackedareachart-original.vl.json

@@ -5,7 +5,7 @@
         "fontSize": 16,
         "fontWeight": "bold"
     },
-    "width": "container",
+    "width": 800,
     "height": 400,
     "data": {
         "values": [

src/charts/stackedareachart-ukrainian.vl.json

@@ -5,7 +5,7 @@
         "fontSize": 16,
         "fontWeight": "bold"
     },
-    "width": "container",
+    "width": 800,
     "height": 400,
     "data": {
         "values": [

src/charts/stackedbarchart-original.vl.json

@@ -6,7 +6,7 @@
   "data": {
     "url": "data/stackedbarchart.csv"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "encoding": {
     "x": {

src/charts/stackedbarchart-ukrainian.vl.json

@@ -6,7 +6,7 @@
   "data": {
     "url": "data/stackedbarchart.csv"
   },
-  "width": "container",
+  "width": 800,
   "height": 400,
   "encoding": {
     "x": {

src/js/quiz.js

@@ -79,7 +79,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
         // Embed the Vega-Lite chart
         const embedOptions = {
-            actions: false, // Disable kebab menu
+            downloadFileName: `${question.chart}-${version}`,
+            actions: {
+                export: {
+                    svg: true,
+                    png: true
+                },
+                source: false,
+                compiled: false,
+                editor: false
+            },
             tooltip: false  // Disable tooltips
         };