| license: mit |
An example how to make a quiz with you-draw-it.
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.
| <!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: "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> |
