{"id":12276,"date":"2024-05-17T15:02:13","date_gmt":"2024-05-17T13:02:13","guid":{"rendered":"https:\/\/afostodata.ro\/backtoschool\/?post_type=activitate&#038;p=12276"},"modified":"2024-05-17T15:03:18","modified_gmt":"2024-05-17T13:03:18","slug":"%ce%b7-%cf%84%ce%bf%cf%83%ce%bf%ce%b4%ce%bf%cf%8d%ce%bb%ce%b1-7","status":"publish","type":"activitate","link":"https:\/\/afostodata.ro\/backtoschool\/el\/activitate\/%ce%b7-%cf%84%ce%bf%cf%83%ce%bf%ce%b4%ce%bf%cf%8d%ce%bb%ce%b1-7\/","title":{"rendered":"\u0397 \u03a4\u03bf\u03c3\u03bf\u03b4\u03bf\u03cd\u03bb\u03b1"},"content":{"rendered":"\n<p>\u039d\u03b1 \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03bf\u03b9\u03c7\u03af\u03c3\u03b5\u03c4\u03b5 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bc\u03b5 \u03c4\u03b7 \u03c7\u03c1\u03bf\u03bd\u03b9\u03ba\u03ae \u03c3\u03c4\u03b9\u03b3\u03bc\u03ae \u03c0\u03bf\u03c5 \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03c6\u03bf\u03c1\u03ac \u03c3\u03c4\u03b7\u03bd \u03b9\u03c3\u03c4\u03bf\u03c1\u03af\u03b1: \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03ae, \u03c3\u03ce\u03bc\u03b1 \u03ae \u03c3\u03c5\u03bc\u03c0\u03ad\u03c1\u03b1\u03c3\u03bc\u03b1; \u03a0\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03c3\u03c5\u03bd\u03b1\u03b4\u03ad\u03bb\u03c6\u03bf\u03c5\u03c2 \u03c3\u03b1\u03c2 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03b1\u03c2!<\/p>\n\n\n\n<div class=\"container\">\n    <div id=\"pointer\"><\/div>\n    <canvas id=\"wheelCanvas\"><\/canvas>\n<\/div>\n<button id=\"spinButton\">\u0393\u03c5\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03bf\u03bd \u03c4\u03c1\u03bf\u03c7\u03cc!<\/button>\n\n<style>\n    .container {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: 0 auto;\n    }\n    #wheelCanvas {\n        border: 5px solid #000;\n        border-radius: 50%;\n        width: 80vmin; \/* responsive width *\/\n        height: 80vmin; \/* responsive height *\/\n    }\n    #spinButton {\n        display: block;\n        margin: 20px auto;\n        padding: 10px 20px;\n        font-size: 16px;\n    }\n    #pointer {\n        width: 0; \n        height: 0; \n        border-left: 15px solid transparent;\n        border-right: 15px solid transparent;\n        border-bottom: 30px solid #ff0000;\n        position: absolute;\n        top: 0; \/* Set top to 0 *\/\n        left: 50%;\n        transform: translateX(-50%) rotate(180deg);\n    }\n<\/style>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const canvas = document.getElementById('wheelCanvas');\n        const ctx = canvas.getContext('2d');\n        const spinButton = document.getElementById('spinButton');\n        const pointer = document.getElementById('pointer');\n        const segments = 6;\n        const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#A133FF', '#33FFF7'];\n        const images = [];\n        const imageSources = [\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/6-18.png',\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/5-18.png',\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/4-18.png',\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/3-18.png',\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/2-18.png',\n'https:\/\/afostodata.ro\/backtoschool\/wp-content\/uploads\/2024\/05\/1-18.png'\n        ];\n\n        \/\/ Load images\n        imageSources.forEach((src, index) => {\n            const img = new Image();\n            img.src = src;\n            img.onload = () => {\n                images[index] = img;\n                if (images.length === segments) drawWheel();\n            };\n        });\n\n        let angle = 0;\n        let isSpinning = false;\n\n        function resizeCanvas() {\n            const width = canvas.clientWidth;\n            const height = canvas.clientHeight;\n            canvas.width = width * 2;\n            canvas.height = height * 2;\n            ctx.scale(2, 2);\n\n            const pointerSize = width \/ 20;\n            pointer.style.borderLeftWidth = `${pointerSize}px`;\n            pointer.style.borderRightWidth = `${pointerSize}px`;\n            pointer.style.borderBottomWidth = `${pointerSize * 2}px`;\n            pointer.style.top = `0px`; \/* Set top to 0 *\/\n            pointer.style.left = `calc(50% - ${pointerSize}px)`;\n\n            drawWheel();\n        }\n\n        function drawWheel() {\n            const arc = Math.PI * 2 \/ segments;\n            const radius = canvas.clientWidth \/ 2;\n            const centerX = canvas.clientWidth \/ 2;\n            const centerY = canvas.clientHeight \/ 2;\n\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n            for (let i = 0; i < segments; i++) {\n                const startAngle = i * arc + angle;\n                const endAngle = startAngle + arc;\n\n                \/\/ Draw segment\n                ctx.beginPath();\n                ctx.arc(centerX, centerY, radius, startAngle, endAngle);\n                ctx.lineTo(centerX, centerY);\n                ctx.closePath();\n                ctx.fillStyle = colors[i]; \/\/ Fill with segment color\n                ctx.fill();\n                ctx.strokeStyle = '#000000'; \/\/ Border color\n                ctx.lineWidth = 5; \/\/ Border width\n                ctx.stroke();\n\n                \/\/ Draw icon on the edge of the segment\n                ctx.save();\n                ctx.translate(centerX, centerY);\n                ctx.rotate(startAngle + arc \/ 2);\n                const img = images[i];\n                if (img) {\n                    const imgSize = radius \/ 2.5; \/\/ Increase size of icons\n                    ctx.drawImage(img, radius - imgSize - 10, -imgSize \/ 2, imgSize, imgSize); \/\/ Adjust position and size of icons\n                }\n                ctx.restore();\n            }\n        }\n\n        function spinWheel() {\n            if (isSpinning) return;\n            isSpinning = true;\n            const spinTime = 3000;\n            const spinAngleStart = Math.random() * 10 + 10;\n            const spinAngleEnd = spinAngleStart + Math.PI * 4;\n\n            let start = null;\n            function animate(time) {\n                if (!start) start = time;\n                const progress = time - start;\n                angle = easeOut(progress, 0, spinAngleEnd, spinTime);\n                drawWheel();\n                if (progress < spinTime) {\n                    requestAnimationFrame(animate);\n                } else {\n                    isSpinning = false;\n                }\n            }\n            requestAnimationFrame(animate);\n        }\n\n        function easeOut(t, b, c, d) {\n            t \/= d;\n            t--;\n            return c * (t * t * t + 1) + b;\n        }\n\n        window.addEventListener('resize', resizeCanvas);\n        resizeCanvas(); \/\/ Initial resize to fit the window\n        spinButton.addEventListener('click', spinWheel);\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u039d\u03b1 \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03bf\u03b9\u03c7\u03af\u03c3\u03b5\u03c4\u03b5 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bc\u03b5 \u03c4\u03b7 \u03c7\u03c1\u03bf\u03bd\u03b9\u03ba\u03ae \u03c3\u03c4\u03b9\u03b3\u03bc\u03ae \u03c0\u03bf\u03c5 \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03c6\u03bf\u03c1\u03ac \u03c3\u03c4\u03b7\u03bd \u03b9\u03c3\u03c4\u03bf\u03c1\u03af\u03b1: \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03ae, \u03c3\u03ce\u03bc\u03b1 \u03ae \u03c3\u03c5\u03bc\u03c0\u03ad\u03c1\u03b1\u03c3\u03bc\u03b1; \u03a0\u03b5\u03af\u03c4\u03b5 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03c3\u03c5\u03bd\u03b1\u03b4\u03ad\u03bb\u03c6\u03bf\u03c5\u03c2 \u03c3\u03b1\u03c2 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03b1\u03c2! \u0393\u03c5\u03c1\u03af\u03c3\u03c4\u03b5 \u03c4\u03bf\u03bd \u03c4\u03c1\u03bf\u03c7\u03cc!<\/p>\n","protected":false},"author":1,"featured_media":12277,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":[],"activitate-categorie":[511],"acf":[],"lang":"el","translations":{"el":12276,"en":12273,"ro":12257,"es":12279},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/activitate\/12276"}],"collection":[{"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/activitate"}],"about":[{"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/types\/activitate"}],"author":[{"embeddable":true,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/comments?post=12276"}],"version-history":[{"count":1,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/activitate\/12276\/revisions"}],"predecessor-version":[{"id":12278,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/activitate\/12276\/revisions\/12278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/media\/12277"}],"wp:attachment":[{"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/media?parent=12276"}],"wp:term":[{"taxonomy":"activitate-categorie","embeddable":true,"href":"https:\/\/afostodata.ro\/backtoschool\/wp-json\/wp\/v2\/activitate-categorie?post=12276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}