you-draw-it reference values (with style)

An example how to make a quiz with you-draw-it with displaying reference values. Reference values are styled individually. For the bar chart, the option question.referenceShape is set to "tick".

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">
    <style>
      .question-referenceValues {
        color: red;
        stroke: red;
      }
      
      .question-referenceValues.referenceLine.line-myLine {
        fill: deeppink;
        stroke: deeppink;
      }
    </style>
  </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 to right answer and see how good you are!",
        // drawAreaTitle: "Your\nguess",
        // drawLine: "drag the line\nfrom here to the end",
        // drawBar: "drag the bar\nto the estimated height",        
        // resultButtonText: "Show me the result!", 
        // resultButtonTooltip: "Draw your guess. Upon clicking here, you see if you're right.",
        // scoreButtonText: "Show me how good I am!",
        // scoreButtonTooltip: "Click here to see your result",
        // scoreTitle: "Your result:",
        // scoreHtml: "Next time you can do better!",
        // or scoreHtml: [{lower: 0, upper: 50, html: "<b>That wasn't much, was it??</b>"}, {lower: 50, upper: 101, html: "<b>Excellent!!</b>"}],
      };
           
     // ----- for additional questions, copy FROM here
      question = {
        data: 11,
        heading: "Question - left handers",
        subHeading: "What is the percentage of people who are left handed?",
        // resultHtml: "The data tell the truth.",
        unit: "%",
        // precision: 0,
        // lastPointShownAt: ,
        // yAxisMin: ,
        yAxisMax: 100, 
        referenceValues: [
          {text: "12% right-handers (Europe)", value: 12},
          {text: "12,5% right-handers (US)", value: 12.5},
          {text: "13% right-handers (Asia)", value: 13},
        ], 
        referenceShape: "tick",
      };
      questions.push(question);
      // ----- for additional questions, copy TO here

// ----- for additional questions, copy FROM here
      question = { 
        heading: "Question - 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},
          ],
        referenceValues: [
          {text: "myLine", textPosition: "end", value: [
            {"1998": 12000}, 
            {"2002": 12000}, 
            {"2006": 8000}, 
            {"2010": 8500}, 
            {"2014": 15000}, 
            {"2018": 2400},
            ]
          },
          {text: "your Line", textPosition: "start", value: [
            {"2010": 28500}, 
            {"2014": 5000}, 
            {"2018": 16400},
            ]
          },
        ], 
        lastPointShownAt: "2002", 
        precision: 0, 
        yAxisMax: 50000,
      };
      questions.push(question);
      // ----- for additional questions, copy TO here

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