oleh/minivlat-local-ua
1
0
Fork 0
mirror of https://github.com/olehomelchenko/minivlat-local-ua.git synced 2025-12-21 21:22:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance quiz functionality by embedding images for charts and ensuring responsive design for chart display

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-29 17:18:27 +02:00
parent 4bf48b35da
commit 71712a86e6
3 changed files with 57 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/styles.css
View File

@@ -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;

72
src/data/questions.json
View File

@@ -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"
}
]
}

34
src/js/quiz.js
View File

@@ -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 = `<img src="${imagePath}" alt="${question.chart_uk}">`;
// Update question and options
document.getElementById('question-text').innerHTML = question.question;