{"id":353,"date":"2021-10-18T05:42:20","date_gmt":"2021-10-18T05:42:20","guid":{"rendered":"https:\/\/www.code95afvalcursus.nl\/?page_id=353"},"modified":"2022-01-23T20:46:56","modified_gmt":"2022-01-23T20:46:56","slug":"spelbord-2","status":"publish","type":"page","link":"https:\/\/www.afvalkennis.nl\/index.php\/transbordspel\/spelbord-2\/","title":{"rendered":"Spelbord"},"content":{"rendered":"\n<script type=\"text\/javascript\">\t\n\t\t\n\tfunction dobbel2() {\ndocument.getElementById(\"output\").style.display = \"block\";   \n\n   var out = document.getElementById(\"output\");\n\n    var g = 1+Math.random()*5;\n    g = Math.round(g);\n\n    \/\/out.innerHTML = g;\n    var dbsteen = \"db\"+g+\".jpg\";\n    out.innerHTML = \"<img src='..\/..\/..\/wp-content\/uploads\/2021\/10\/\"+dbsteen+\"' width='100%'\/>\";\n}\n\n\n\t\n\t\tvar svgns = \"http:\/\/www.w3.org\/2000\/svg\"; \/\/ SVG Namespace (in case we need it)\n\t\tvar slices = []; \/\/ Array of wheel slice objects\n\t\tvar numSlices = 16;  \/\/ Size of the circle slices\n\t\tvar isSpinning = false; \/\/ Is the arrow spinning?\n\t\tvar rotation = 0; \/\/ Arrow rotation\n\t\tvar currentSlice = 0; \/\/ Current slice the arrow is over\n\t\tvar wheel; \/\/ DOM Object for the spinner board\n\t\tvar arrow; \/\/ DOM Object for the spinner arrow\n\t\tvar spinButton; \/\/ DOM Object for the spin wheel <button>\n\t\t\n\t\t\/\/ Basic wheel \"slice\" object for drawing SVG\n\t\tfunction Slice(num, parent) {\n\t\t\t\/\/ Set instance vars\n\t\t\tthis.parent = parent;\n\t\t\tthis.size = 360\/numSlices;\n\t\t\tthis.offset = num * this.size;\n\t\t\tthis.id = \"slice_\"+num;\n\t\t\t\/\/ Draw the object\n\t\t\tthis.object = this.create();\n\t\t\tthis.parent.appendChild(this.object);\n\t\t}\n\n\t\tSlice.prototype = {\n\t\t\tcreate:function() {\n\t\t\t\t\/\/ Create a group to store the slice in\n\t\t\t\tvar g = document.createElementNS(svgns, \"g\");\n\t\t\t\t\/\/ Create the slice object\n\t\t\t\tvar slice = document.createElementNS(svgns, \"path\");\n\t\t\t\tslice.setAttributeNS(null, \"id\", this.id);\n\t\t\t\tvar x1 = 300 + 150 * Math.cos(Math.PI*(-90+this.offset)\/180);\n\t\t\t\tvar y1 = 300 + 150 * Math.sin(Math.PI*(-90+this.offset)\/180);\n\t\t\t\tvar x2 = 300 + 150 * Math.cos(Math.PI*(-90+this.size+this.offset)\/180);\n\t\t\t\tvar y2 = 300 + 150 * Math.sin(Math.PI*(-90+this.size+this.offset)\/180);\n\t\t\t\tslice.setAttributeNS(null, \"d\", \"M 300 300 L \"+x1+\" \"+y1+\" A 180 180 0 0 1 \"+x2+\" \"+y2+\"  Z\");\n\t\t\t\t\/\/ Randomize the color of the slice and finish styling\n\t\t\t\t\/*var red = Math.floor(Math.random() * 215) + 20;\n\t\t\t\tvar green = Math.floor(Math.random() * 215) + 20;\n\t\t\t\tvar blue = Math.floor(Math.random() * 215) + 20;\n\t\t\t\tslice.setAttributeNS(null, \"fill\", \"rgb(\"+red+\",\"+green+\",\"+blue+\")\");\n\t\t\t\tslice.setAttributeNS(null, \"stroke\", \"#222222\");\n\t\t\t\tslice.setAttributeNS(null, \"style\", \"stroke-width:2px\");*\/\n\t\t\t\t\/\/ Add the slice to the group\n\t\t\t\tg.appendChild(slice);\n\t\t\t\t\/\/ Create the highlight for the slice\n\t\t\t\tvar overlay = document.createElementNS(svgns, \"path\");\n\t\t\t\toverlay.setAttributeNS(null, \"d\", \"M 300 300 L \"+x1+\" \"+y1+\" A 180 180 0 0 1 \"+x2+\" \"+y2+\"  Z\");\n\t\t\t\toverlay.setAttributeNS(null, \"fill\", \"#FFFFFF\");\n\t\t\t\t\/\/overlay.setAttributeNS(null, \"stroke\", \"#222222\");\n\t\t\t\toverlay.setAttributeNS(null, \"style\", \"stroke-width:1px\");\n\t\t\t\toverlay.setAttributeNS(null, \"opacity\", \"50\");\n\t\t\t\t\/\/ Add the highlight for the slice to the group\n\t\t\t\tg.appendChild(overlay);\n\t\t\t\treturn g;\n\t\t\t},\n\t\t\ttoggleOverlay:function() {\n\t\t\t\tvar overlay = this.object.childNodes[1];\n\t\t\t\tif (overlay.getAttribute(\"opacity\") == 0) {\n\t\t\t\t\toverlay.setAttributeNS(null, \"opacity\", 1);\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\toverlay.setAttributeNS(null, \"opacity\", 0);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t\/\/ Toggle the spinning of the wheel\n\t\tfunction toggleSpinning(next) {\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\/\/ Toggle the spinning animation\n\t\t\tif (isSpinning) {\n\t\n\t\t\t\tleegmaken();\n\t\t\t\t\n\t\t\t\treturn new Promise((resolve, reject) => {\n\t\t\t\n\t\t\t\t\t\/\/ Stop the arrow\n\t\t\t\t\tisSpinning = false;\n\t\t\t\t\tclearInterval(toggleSpinning.spinInt);\n\t\t\t\t\tspinButton.removeAttribute(\"disabled\");\n\t\t\t\t\t\n\t\t\t\t\tbericht();\n\t\t\t\t})\t\t\n\t\t\t}\n\t\t\telse {\n\n\t\t\t\t\/\/ Start spinning the arrow\n\t\t\t\tisSpinning = true;\n\t\t\t\ttoggleSpinning.spinInt = setInterval(spinWheel, 1000\/60);\n\t\t\t\t\/\/ Set how long the wheel will be spinning\n\t\t\t\tvar duration = Math.floor(Math.random() * 2000) + 1000;\n\t\t\t\tsetTimeout(toggleSpinning, duration);\n\t\t\t\t\/\/ Disable the spin button\n\t\t\t\tspinButton.setAttribute(\"disabled\", \"true\");\n\t\t\t}\n\t\t}\n\n\n\t\tfunction leegmaken(){\n\t\t\t\/\/if (document.getElementById(\"schatten\").style.display != \"none\"){\n\t\t\t\t\t\t\tdocument.getElementById(\"schatten\").style.display = \"none\";\n\t\t\t\t\t\t\tdocument.getElementById(\"output\").style.display = \"none\";\n\t\t\t\t\/\/\t\t}else if (document.getElementById(\"meerkeuze\").style.display != \"none\"){\n\t\t\t\t\t\t\tdocument.getElementById(\"meerkeuze\").style.display = \"none\";\n\t\t\t\t\t\/\/\t}else if (document.getElementById(\"open_alleen\").style.display != \"none\"){\n\t\t\t\t\t\t\tdocument.getElementById(\"openalleen\").style.display = \"none\";\n\t\t\t\t\t\t\/\/}else if (document.getElementById(\"open_samen\").style.display != \"none\"){\n\t\t\t\t\t\t\tdocument.getElementById(\"opensamen\").style.display = \"none\";\n\t\t\t\t\t\t\/\/}\n\t\t\t\t\t\t\n\t\t}\n\n\n\t\tfunction bericht() {\n\t\t\t\tif (currentSlice == 0 || currentSlice == 4 || currentSlice == 8 || currentSlice == 12){\n\t\t\t\t\/\/window.alert(currentSlice + \"Schatten\");\n\t\t\t\tconsole.log('Schatten');\n\t\t\t\tdocument.getElementById(\"schatten\").style.display = \"block\";\n\t\t\t\t}else if (currentSlice == 1 || currentSlice == 5 || currentSlice == 9 || currentSlice == 13){\n\t\t\t\t\/\/window.alert(currentSlice + \"Overleg\");\n\t\t\t\tconsole.log('Overleg');\n\t\t\t\tdocument.getElementById(\"opensamen\").style.display = \"block\";\n\t\t\t\t}else if (currentSlice == 2 || currentSlice == 6 || currentSlice == 10 || currentSlice == 14){\n\t\t\t\t\/\/window.alert(currentSlice + \"Meerkeuze\");\n\t\t\t\tconsole.log('Meerkeuze');\n\t\t\t\tdocument.getElementById(\"meerkeuze\").style.display = \"block\";\n\t\t\t\t}else if (currentSlice == 3 || currentSlice == 7 || currentSlice == 11 || currentSlice == 15){\n\t\t\t\t\/\/window.alert(currentSlice + \"Alleen\")\n\t\t\t\tconsole.log('Alleen');\n\t\t\t\tdocument.getElementById(\"openalleen\").style.display = \"block\";\n\t\t\t\t};\n\t\t}\n\t\n\t\t\/\/ Animation step for spinning the wheel arrow\n\t\tfunction spinWheel() {\n\t\t\t\/\/ Rotate the spinner arrow\n\t\t\trotation = (rotation + 12) % 360;\n\t\t\tarrow.setAttributeNS(null, \"transform\", \"rotate(\"+rotation+\",300,300)\");\n\t\t\t\/\/ Highlight the slice the arrow is above\n\t\t\tvar newSlice = Math.floor(rotation \/ (360\/numSlices));\n\t\t\tif (newSlice != currentSlice) {\n\t\t\t\tslices[currentSlice].toggleOverlay();\n\t\t\t\tslices[newSlice].toggleOverlay();\n\t\t\t\tcurrentSlice = newSlice;\n\t\t\t}\n\t\t}\n\n\t\t\t\t\n\t\t\/\/ Document ready event\n\t\tdocument.addEventListener(\"DOMContentLoaded\", function() {\n\t\t\t\/\/ Get a handle to all necessary DOM elements\n\t\t\twheel = document.getElementById(\"spinner-board\"); \/\/ DOM Object for the spinner board\n\t\t\tarrow = document.getElementById(\"spinner-arrow\"); \/\/ DOM Object for the spinner arrow\n\t\t\tspinButton = document.getElementById(\"spinner-button\"); \/\/ DOM Object for the spin wheel <button>\n\t\t\t\/\/ Generate the wheel sections\n\t\t\tfor (var i = 0; i < numSlices; i++) {\n\t\t\t\tslices[i] = new Slice(i, wheel);\n\t\t\t}\n\t\t\t\/\/ Highlight the first slice\n\t\t\tslices[0].toggleOverlay();\n\t\t}, false);\n\t\n\t<\/script>\n\n\n\n<div style=\"background-image: url('..\/..\/..\/wp-content\/uploads\/2021\/10\/spelbord.png'); background-size: 600px; background-repeat: no-repeat; \">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" width=\"100%\" height=\"600\">\n\t\t\t\t\t\t\t\t<!--<circle cx=\"400\" cy=\"400\" r=\"180\" fill=\"#222222\"\/>-->\n\t\t\t\t\t\t\t\t<g id=\"spinner-board\" opacity=\"0.05\"><\/g>\n\t\t\t\t\t\t\t\t<!--<path id=\"spinner-arrow\" d=\"M 195 200 L 195 70 L 188 70 L 200 55 L 212 70 L 205 70 205 200 0 V500 500 Z\" fill=\"#EEEEEE\" stroke=\"#222222\" style=\"stroke-width:2px\"\/>-->\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<!-- het pijltje-->\n\t\t\t\t\t\t\t\t<!--<path stroke=\"#000\" id=\"spinner-arrow\" d=\"m294,240.85601l6,-59.85601l6,59.85601l-3,0l0,60.14403l-6,0l0,-60.14403l-3,0z\" stroke-opacity=\"null\" stroke-dasharray=\"null\" stroke-width=\"4\" fill=\"#000000\"\/>-->\n\t\t\t\t\t\t\t\t<!--<path id=\"spinner-arrow\" d=\"M 294,240 424.572 H 609.252 L 609.252 422.071 L 636.309 425.571 L 609.252 429.071 L 609.252 426.571 H 540.309 V 424.572 Z\" style=\"\" transform=\"matrix(0.000013, -1, 1, 0.000013, -122.078041, 876.303528)\" bx:shape=\"arrow 540.309 422.071 96 7 1.999 27.057 0 1@671416b2\" bx:origin=\"0.500031 0.577734\"\/>-->\n\t\t\t\t\t\t\t\t<path id=\"spinner-arrow\" d=\"\" style=\"\" transform=\"\" bx:shape=\"\"><\/path>\n\t\t\t\t\t\t\t\t<!--<circle cx=\"400\" cy=\"400\" r=\"9\" fill=\"#666666\" stroke=\"#222222\" style=\"stroke-width:2px\"\/>-->\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t\t<div <!--id=\"button-holder\" --=\"\">\n\t\t\t\t\t\t\t\t<button id=\"spinner-button\" onclick=\"toggleSpinning()\">Draaien!<\/button>\n\t\t\t\t\t\t\t<\/div><\/div>\n\n\n\n<div style=\"display:none;\" id=\"opensamen\">\n   <h2>Je hebt het volgende gedraaid<\/h2>\n\t<div>\n\t   <img decoding=\"async\" src=\"..\/..\/..\/wp-content\/uploads\/2021\/10\/open_samen.png\" style=\"height:50px;\">\n\t   <p>Je bent uitgekomen op een open vraag. Bij beantoording van de vraag mag je overleggen met een concurrent (als je alleen speelt), of een teamgenoot (als je met een team speelt). Een goed antwoord levert 3 punten op.<\/p>\n\t<\/div>\t\n<\/div>\n\n<div style=\"display:none;\" id=\"openalleen\">\n   <h2>Je hebt het volgende gedraaid<\/h2>\n      <div>\n\t<img decoding=\"async\" src=\"..\/..\/..\/wp-content\/uploads\/2021\/10\/open_alleen.png\" style=\"height:50px;\">\n\t<p>Je bent uitgekomen op een open vraag. Deze vraag moet je alleen beantwoorden. Speel je in een team? Wijs dan \u00e9\u00e9n persoon aan die de vraag beantwoordt. Dat mag nadat bekend is waar de vraag over gaat. Goede beantwoording van de vraag levert 4 punten op.<\/p>\n      <\/div>\t\n<\/div>\n\t\t\t\t\t\n<div style=\"display:none;\" id=\"meerkeuze\">\n   <h2>Je hebt het volgende gedraaid<\/h2>\n       <div>\n          <img decoding=\"async\" src=\"..\/..\/..\/wp-content\/uploads\/2021\/10\/meerkeuze.png\" style=\"height:50px;\">\n\t  <p>Je bent uitgekomen op een meerkeuzevraag. Speel je in een team? Dan mag je met elkaar overleggen. Juiste beantwoording van de vraag levert 2 punten op.<\/p>\n       <\/div>\t\n<\/div>\n\t\t\t\t\t\n<div style=\"display:none;\" id=\"schatten\">\n   <h2>Je hebt het volgende gedraaid<\/h2>\n      <div>\n\t<img decoding=\"async\" src=\"..\/..\/..\/wp-content\/uploads\/2021\/10\/schatten.png\" style=\"height:50px;\">\n\t<p>Je bent uitgekomen op een schattingsvraag. iedereen of ieder team mag meedoen. Degene of het team dat het dichtst bij het juiste antwoord zit, verdient de punten. De hoeveelheid punten die je kunt verdienen hangt af van het aantal ogen dat je met de dobbelsteen gooit.<\/p>\n\t\t\t\t\n\t<button onclick=\"dobbel2()\">Gooi de dobbelsteen<\/button><br>&nbsp;<br>\n\t<div id=\"output\" style=\"width:50px;\"><\/div>\n      <\/div>\t\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":390,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-353","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/pages\/353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/comments?post=353"}],"version-history":[{"count":22,"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/pages\/353\/revisions"}],"predecessor-version":[{"id":477,"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/pages\/353\/revisions\/477"}],"up":[{"embeddable":true,"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/pages\/390"}],"wp:attachment":[{"href":"https:\/\/www.afvalkennis.nl\/index.php\/wp-json\/wp\/v2\/media?parent=353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}