block by ee2dev 17460b7600768ca9aca47090f0b85bd4

minecraft quiz - custom font

Full Screen

An example how to make a quiz with you-draw-it. It uses custom font (‘Indie Flower’ from Google fonts). Original example: http://bl.ocks.org/EE2dev/d2fe539e84c7fa27566bf4c1a1b16eeb

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">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <style>
      .update-font, .tick text {
        font-family: 'Indie Flower', cursive;
        font-size: 1.2em;
      }
    </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: "Minecraft quiz",
        subHeader: "Try to guess the right answer and see how good you are!",
      };

      question = {
        data: 10,
        heading: "Question (1/10):",
        subHeading: "How many Biomes are there?",
        precision: 0,
      };
      questions.push(question);

      question = {
        data: 385,
        heading: "Question (2/10):",
        subHeading: "How many times can you use a bow (not enchanted)?",
        unit: "times",
        precision: 0,
      };
      questions.push(question);

      question = {
        data: 11,
        heading: "Question (3/10):",
        subHeading: "How many music discs are there?",
        precision: 0,
      };
      questions.push(question);

      question = {
        data: 30,
        heading: "Question (4/10):",
        subHeading: "What is the chance (in %) of getting poisoned eating raw chicken?",
        unit: "%",
        yAxisMax: 100, 
      };
      questions.push(question);

      question = {
        data: 8,
        heading: "Question (5/10):",
        subHeading: "How many stages of wheat are there?",
        precision: 0,
      };
      questions.push(question);

      question = {
        data: 6,
        heading: "Question (6/10):",
        subHeading: "How many different ores are there?",
        precision: 0,
        resultHtml: "There are 6 different ores: <ul><li>Coal</li><li>Iron</li><li>Diamond</li><li>Gold</li><li>Redstone</li><li>Lapis</li></ul>",
      };
      questions.push(question);


      question = {
        data: 5,
        heading: "Question (7/10):",
        subHeading: "How many Villager types that appear are there?",
        precision: 0,
        resultHtml: "There are 5 different types of Villager: <b>Villager, Butcher, Librarian, Priest, </b>and <b>Blacksmith</b>", 
      };
      questions.push(question);
      
      question = {
        data: 3,
        heading: "Question (8/10):",
        subHeading: "How many different types of cat are there?",
        precision: 0,
        resultHtml: "There are 3 different types of cat: <b>Tuxedo, Orange, Siamesse</b>", 
      };
      questions.push(question);
      
      question = {
        data: 100,
        heading: "Question (9/10):",
        subHeading: "From how many blocks away can a ghast see you?",
        precision: 0,
        unit: "blocks", 
      };
      questions.push(question);

      question = {
        data: 64,
        heading: "Question (10/10):",
        subHeading: "At how many blocks is the sea level?",
        precision: 0,
        unit: "blocks", 
      };
      questions.push(question);

      var myChart = youdrawit
        .chart()
        .globals(globals)
        .questions(questions);

      d3.select("body")
        .append("div")
        .attr("class", "chart")
        .call(myChart);
    </script>
  </body>
</html>