From 71712a86e6672c9fa4f3d08d89e125a9a47ca44b Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Wed, 29 Jan 2025 17:18:27 +0200 Subject: [PATCH] Enhance quiz functionality by embedding images for charts and ensuring responsive design for chart display --- src/css/styles.css | 5 +++ src/data/questions.json | 72 +++++++++++++++++++++++++++-------------- src/js/quiz.js | 34 +++---------------- 3 files changed, 57 insertions(+), 54 deletions(-) diff --git a/src/css/styles.css b/src/css/styles.css index b95e105..ac03579 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -104,6 +104,11 @@ form button { width: 100%; /* Ensure chart takes full width */ } +#chart img { + max-width: 100%; + height: auto; +} + #question-block { flex: 1; display: flex; diff --git a/src/data/questions.json b/src/data/questions.json index 4946582..9e27eed 100644 --- a/src/data/questions.json +++ b/src/data/questions.json @@ -13,7 +13,8 @@ "$42.34", "Skip" ], - "answer": "$50.54" + "answer": "$50.54", + "image": "svg" }, { "chart": "barchart", @@ -26,7 +27,8 @@ "16.16 Mbps", "Skip" ], - "answer": "40.51 Mbps" + "answer": "40.51 Mbps", + "image": "svg" }, { "chart": "stackedbarchart", @@ -39,7 +41,8 @@ "$4.5", "Skip" ], - "answer": "$6.1" + "answer": "$6.1", + "image": "svg" }, { "chart": "stacked100", @@ -52,7 +55,8 @@ "Australia", "Skip" ], - "answer": "Great Britain" + "answer": "Great Britain", + "image": "svg" }, { "chart": "piechart", @@ -65,7 +69,8 @@ "35.2%", "Skip" ], - "answer": "17.6%" + "answer": "17.6%", + "image": "svg" }, { "chart": "histogram", @@ -78,7 +83,8 @@ "50 - 60 Km", "Skip" ], - "answer": "30 - 40 Km" + "answer": "30 - 40 Km", + "image": "svg" }, { "chart": "scatterplot", @@ -89,7 +95,8 @@ "False", "Skip" ], - "answer": "False" + "answer": "False", + "image": "svg" }, { "chart": "areachart", @@ -102,7 +109,8 @@ "$0.63", "Skip" ], - "answer": "$0.71" + "answer": "$0.71", + "image": "svg" }, { "chart": "stackedareachart", @@ -115,7 +123,8 @@ "1 to 4", "Skip" ], - "answer": "1 to 2" + "answer": "1 to 2", + "image": "svg" }, { "chart": "bubblechart", @@ -128,7 +137,8 @@ "Seoul", "Skip" ], - "answer": "Shanghai" + "answer": "Shanghai", + "image": "svg" }, { "chart": "choropleth", @@ -139,7 +149,8 @@ "False", "Skip" ], - "answer": "True" + "answer": "True", + "image": "svg" }, { "chart": "treemap", @@ -150,7 +161,8 @@ "False", "Skip" ], - "answer": "False" + "answer": "False", + "image": "png" } ] }, @@ -167,7 +179,8 @@ "$42.34", "Пропустити" ], - "answer": "$50.54" + "answer": "$50.54", + "image": "svg" }, { "chart": "barchart", @@ -180,7 +193,8 @@ "16.16 Мбіт/с", "Пропустити" ], - "answer": "40.51 Мбіт/с" + "answer": "40.51 Мбіт/с", + "image": "svg" }, { "chart": "stackedbarchart", @@ -193,7 +207,8 @@ "$4.5", "Пропустити" ], - "answer": "$6.1" + "answer": "$6.1", + "image": "svg" }, { "chart": "stacked100", @@ -206,7 +221,8 @@ "Австралія", "Пропустити" ], - "answer": "Велика Британія" + "answer": "Велика Британія", + "image": "svg" }, { "chart": "piechart", @@ -219,7 +235,8 @@ "35.2%", "Пропустити" ], - "answer": "17.6%" + "answer": "17.6%", + "image": "svg" }, { "chart": "histogram", @@ -232,7 +249,8 @@ "50 - 60 км", "Пропустити" ], - "answer": "30 - 40 км" + "answer": "30 - 40 км", + "image": "svg" }, { "chart": "scatterplot", @@ -243,7 +261,8 @@ "Неправда", "Пропустити" ], - "answer": "Неправда" + "answer": "Неправда", + "image": "svg" }, { "chart": "areachart", @@ -256,7 +275,8 @@ "$0.63", "Пропустити" ], - "answer": "$0.71" + "answer": "$0.71", + "image": "svg" }, { "chart": "stackedareachart", @@ -269,7 +289,8 @@ "1 до 4", "Пропустити" ], - "answer": "1 до 2" + "answer": "1 до 2", + "image": "svg" }, { "chart": "bubblechart", @@ -282,7 +303,8 @@ "Сеул", "Пропустити" ], - "answer": "Шанхай" + "answer": "Шанхай", + "image": "svg" }, { "chart": "choropleth", @@ -293,7 +315,8 @@ "Неправда", "Пропустити" ], - "answer": "Правда" + "answer": "Правда", + "image": "svg" }, { "chart": "treemap", @@ -304,7 +327,8 @@ "Неправда", "Пропустити" ], - "answer": "Неправда" + "answer": "Неправда", + "image": "png" } ] } diff --git a/src/js/quiz.js b/src/js/quiz.js index 201f55c..552b085 100644 --- a/src/js/quiz.js +++ b/src/js/quiz.js @@ -75,37 +75,11 @@ document.addEventListener('DOMContentLoaded', function () { timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds const question = questions[currentQuestionIndex]; - const chartFile = `charts/${question.chart}-${version}.vl.json`; + // const chartFile = `charts/${question.chart}-${version}.vl.json`; // Comment out vegaEmbed chart file - // Embed the Vega-Lite chart - const embedOptions = { - downloadFileName: `${question.chart}-${version}`, - actions: { - export: { - svg: true, - png: true - }, - source: false, - compiled: false, - editor: false - }, - tooltip: false // Disable tooltips - }; - - if (version === 'ukrainian') { - embedOptions.timeFormatLocale = { - dateTime: "%A, %e %B %Y р. %X", - date: "%d.%m.%Y", - time: "%H:%M:%S", - periods: ["", ""], - days: ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"], - shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"], - months: ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"], - shortMonths: ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"] - }; - } - - vegaEmbed('#chart', chartFile, embedOptions).catch(console.error); + // Embed the image instead of the Vega-Lite chart + const imagePath = `/images/${question.chart}-${version}.${question.image}`; + document.getElementById('chart').innerHTML = `${question.chart_uk}`; // Update question and options document.getElementById('question-text').innerHTML = question.question;