you-draw-it wip by EE2dev

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.

index.html

<!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>