A you-draw-it example with questions about datasketches.
For documentation see https://github.com/EE2dev/you-draw-it
Last active
September 9, 2018 21:58
-
-
Save EE2dev/fef9374c83cd2d860e52ca392ea22bf5 to your computer and use it in GitHub Desktop.
you-draw-datasketches
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment