you-draw-datasketches

A you-draw-it example with questions about datasketches.

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

<!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">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <style>
      .ta-left {
        text-align: left;
      }

.update-font, .tick text{
        font-family: 'Indie Flower', cursive;
        font-size: 1.3em;
      }
    </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: "A quiz about datasketches",
        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.",
        scoreButtonText: "I want to see how well I did on the datasketches quiz!",
        // scoreButtonTooltip: "Click here to see your result",
        // scoreTitle: "Your result:",
        // scoreHtml: "Next time you can do better!",
        scoreHtml: [{lower: 0, upper: 50, html: 'That wasn\'t much, was it?? You should follow datasketches more closely!<br>Thank you for taking the quiz!'}, 
        {lower: 50, upper: 80, html: 'Congratulations, that\'s a good score!<br>Thank you for taking the quiz!'},
        {lower: 81, upper: 101, html: 'Wow, what a score! You are amazing!!<br>Thank you for taking the quiz!'},],
      };

// ----- for additional questions, copy FROM here
      question = { 
        heading: "July - movies (Nadieh)<br><br><img src='https://ee2dev.github.io/ydi/img/datasketches/ds_july_nb.jpg'>",
        subHeading: "<b>Question (1/3)</b>:<br><div class ='ta-left'>Nadieh discovered a dataset about the number of words spoken \
        by character of all 3 Lord of the Ring movies. However, the reference to the scenes seemed somewhat\
         arbitary. Thus Nadieh went ahead and manually added an on-screen location to the data.</div> <br><br>\
          For how many data rows did Nadieh manually add an on-screen location?",
        resultHtml: "Yes, <b>eight hundred rows</b>!<br> When was the last time you have put so much effort into improving the contents of your data? 🙄",
        // unit: "Pts",
        precision: 0,
        // lastPointShownAt: ,
        // yAxisMin: ,
        yAxisMax: 1000, 
        data: 800,
      };
      questions.push(question);
      // ----- for additional questions, copy TO here

// ----- for additional questions, copy FROM here
      question = {
        heading: "July - movies (Shirley)<br><br><img src='https://ee2dev.github.io/ydi/img/datasketches/ds_july_sw.jpg'>",
        subHeading: "<b>Question (2/3)</b>:<br><div class ='ta-left'>Shirley decided to visualize the top rated summer movies in \
        the last decade. At the beginning, she looked through the data to find out how many of the 140 selected \
        movies she had already watched.</div> <br><br> What is the percentage of the summer movies which \
         Shirley already knew ?",
        resultHtml: "Though Shirley hasn't watched that many movies when growing up, she clearly has a trendsetting taste: Out of the top 20 best rated movies, Shirley has watched 15 ➛ a whopping rate of 75%! 😉",
        unit: "%",
        // precision: 1,
        // lastPointShownAt: ,
        // yAxisMin: ,
        yAxisMax: 100, 
        data: 25,
      };
      questions.push(question);
      // ----- for additional questions, copy TO here

// ----- for additional questions, copy FROM here
      question = {
        heading: "Datasketches - commitment to commit",
        subHeading: "<b>Question (3/3)</b>:<br><div class ='ta-left'>Given their skill, Nadieh and Shirley are in high demand and as such very busy people! \
        Working on dataketches as a <i>side</i> project means endurance, dedication, sweat and focus whenever there is limited \
        time in between <i>main</i> projects.</div> <br><br> How many commits per month have Nadieh & Shirley made<br> \
        in their datasketches github repository in 2018?",
        resultHtml: "Over the course of these 54 commits, 86,132 lines have been added and 35,568 lines have been deleted.",
        // unit: "%",
        precision: 0,
        lastPointShownAt: "Mar",
        // yAxisMin: ,
        yAxisMax: 34, 
        data: [
          {Jan: 11}, 
          {Feb: 1}, 
          {Mar: 2}, 
          {Apr: 2},
          {May: 1}, 
          {Jun: 8}, 
          {Jul: 29},
          {Aug: 0},
          ],
      };
      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