fun facts with you-draw-it

An example how to make a quiz with you-draw-it.

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

<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: 13,
        heading: "Question 1/5 - flying chicken",
        subHeading: "What is the longest recorded flight (in seconds) of a chicken?",
        unit: "sec",
      };
      questions.push(question);

question = {
        data: 85,
        heading: "Question 2/5 - plants",
        subHeading: "What is the percentage of plant life on our planet found in the ocean?",
        unit: "%",
        yAxisMax: 100, 
      };
      questions.push(question);

question = {
        data: 11,
        heading: "Question 3/5 - left handers",
        subHeading: "What is the percentage of people who are left handed?",
        unit: "%",
        yAxisMax: 100, 
      };
      questions.push(question);

question = {
        data: 23,
        heading: "Question 4/5 - photocopier faults",
        subHeading: "What is the percentage of all photocopier faults caused by people sitting on them and photocopying their butts?",
        unit: "%",
        yAxisMax: 100, 
      };
      questions.push(question);

question = { 
        heading: "Question 5/5 - Winter Olympics", 
        subHeading: "How many volunteers have been helping at the corresponding Winter Olympics event?", 
        data: [
          {"1998": 32000}, 
          {"2002": 22000}, 
          {"2006": 18000}, 
          {"2010": 18500}, 
          {"2014": 25000}, 
          {"2018": 22400},
          ],
        lastPointShownAt: "2002",   
        precision: 0, 
        yAxisMax: 50000,
      };
      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