you-draw-it template English

.block

license: mit

README.md

Template - version English for you-draw-it.

For documentation see https://github.com/EE2dev/you-draw-it

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!",
        // 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.",
        // showScore: true,
        // 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 = { 
        heading: "Question 1",
        // subHeading: "More info about question 1",
        resultHtml: "Wasn't that <b>too</b> easy? How could you not know this?",
        // unit: "Pts",
        // precision: 1,
        // lastPointShownAt: ,
        // yAxisMin: ,
        // yAxisMax: , 
        data: [
          {2017: 150}, 
          {2018: 142}, 
          {2019: 145}, 
          {2020: 170},
          ],
      };
      questions.push(question);
      // ----- for additional questions, copy TO here     

      // ----- for additional questions, copy FROM here
      question = {
        heading: "Question 2",
        // subHeading: "More info about question 2",
        // resultHtml: "Wasn't that <b>too</b> easy? How could you not know this?",
        // unit: "Pts",
        // precision: 1,
        // lastPointShownAt: ,
        // yAxisMin: ,
        // yAxisMax: , 
        data: 17.1
      };
      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>

thumbnail.png