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>