| license: mit |
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.
| <!DOCTYPE html> | |
| <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> |