An example how to make a quiz with you-draw-it about Allianz facts.
For documentation see https://github.com/EE2dev/you-draw-it
Adopted the you-draw-it implementation from the great work at https://github.com/wdr-data/you-draw-it. Original idea developed by the New York Times.
xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>My quiz</title>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1,minimum-scale=1">
<link rel="stylesheet" href="https://ee2dev.github.io/ydi/css/style.css">
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://ee2dev.github.io/ydi/js/youdrawit.min.js"></script>
<script>
var questions = [];
var question = {};
var globals = {
default: "en",
header: "Enjoy this quiz",
subHeader: "Try to guess the right answer and see how good you are!",
};
question = {
data: 140,
heading: "Question 1/3 - Allianz Employees",
subHeading: "How many employees does Allianz have (worldwide)?",
unit: "thous.",
precision: 0,
};
questions.push(question);
question = {
heading: "Question 2/3 - Awards categories",
subHeading: "For which categories can you receive the best in data awards at the Global Data Summit?",
data: [
{"Data driven business impact": true},
{"Data alligator": false},
{"Data availability and quality": true},
{"Data culture": true},
{"Data for the masses": false},
]
};
questions.push(question);
question = {
heading: "Question 3/3 - Allianz shares",
subHeading: "How did the Allianz share price develop over the past 10 years? (at the end of november for each year)",
data: [
{"'09": 82.59},
{"'10": 86.90},
{"'11": 65.79},
{"'12": 99.95},
{"'13": 126.70},
{"'14": 138.45},
{"'15": 167.30},
{"'16": 150.70},
{"'17": 197.95},
{"'18": 189.52},
],
lastPointShownAt: "'11",
precision: 2,
unit: "€",
yAxisMax: 220,
};
questions.push(question);
var myChart = youdrawit
.chart()
.globals(globals)
.questions(questions);
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
https://d3js.org/d3.v5.min.js
https://ee2dev.github.io/ydi/js/youdrawit.min.js