{"id":26978,"date":"2024-08-23T13:13:45","date_gmt":"2024-08-23T11:13:45","guid":{"rendered":"https:\/\/fgu.antstudio.dev\/public-and-media\/try-it-out\/jak-dobre-znate-lidske-telo\/"},"modified":"2024-08-23T15:04:46","modified_gmt":"2024-08-23T13:04:46","slug":"how-do-you-know-the-human-body","status":"publish","type":"page","link":"https:\/\/fgu.cas.cz\/en\/public-and-media\/try-it-out\/how-do-you-know-the-human-body\/","title":{"rendered":"How do you know the human body?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26978\" class=\"elementor elementor-26978 elementor-26767\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1616051 e-flex e-con-boxed e-con e-parent\" data-id=\"1616051\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ecae08 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"0ecae08\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">How do you know the human body?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e94ee03 elementor-widget elementor-widget-text-editor\" data-id=\"e94ee03\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Try your hand at our online game to see if you can correctly place the human organs on our figurant Cyril.<\/p><p><strong><a href=\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/cyril-final.pdf\" target=\"_blank\" rel=\"noopener\">Correct solution<\/a><\/strong><\/p><p>Click to start playing.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72bb0c1 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"72bb0c1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"hra\">\r\n    <div>\r\n        <style media=\"screen\">\r\n            #hra {\r\n                overscroll-behavior: none;\r\n                height: 100%;\r\n                background-color: white;\r\n            }\r\n            #hra div{\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n\r\n            #hra canvas{\r\n                border: 3px solid black;\r\n                border-radius: 6mm;\r\n                background-color: white;\r\n                animation: bcg 2s infinite;\r\n                background-size: contain;\r\n                background-repeat: no-repeat;\r\n            }\r\n\r\n            #hra .game{\r\n                animation: gamebcg 2s 1;\r\n                background-image: url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/cyril.png\");\r\n            }\r\n\r\n            #hra .gameover{\r\n                animation: overbcg 1s 1;\r\n            }\r\n\r\n            #hra .restart{\r\n                animation: restart 2s infinite;\r\n            }\r\n\r\n            @keyframes restart{\r\n                0%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/gameover.png\");}\r\n                50%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/bcg.png\");}\r\n                100%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/gameover.png\");}\r\n            }\r\n\r\n            @keyframes overbcg{\r\n                0%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/cyril.png\");}\r\n                100%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/bcg.png\");}\r\n            }\r\n\r\n            @keyframes gamebcg{\r\n                0%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/menu-blank.png\");}\r\n                100%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/cyril.png\");}\r\n            }\r\n\r\n            @keyframes bcg{\r\n                0%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/menu-blank.png\");}\r\n                50%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/menu-con.png\");}\r\n                100%{background-image:  url(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/menu-blank.png\");}\r\n            }\r\n            \r\n            #hra canvas {\r\n                width: 100%;\r\n                max-width: 800px;\r\n                min-width: 220px;\r\n                height: 100%;\r\n            }\r\n        <\/style>\r\n\r\n        <canvas id=\"canvas\" class=\"game\"><\/canvas>\r\n\r\n        <script>\r\n            document.addEventListener(\"DOMContentLoaded\", function() {\r\n              main();\r\n            });\r\n\r\n            var finished = false;\r\n            var first = true;\r\n            var SELECTED_ORGAN = null;\r\n            var SELECTED = false;\r\n            var offset = {\r\n                x:0,\r\n                y:0\r\n            }\r\n            var numberOfMistakes = 0;\r\n            var numberOfFinished = 0;\r\n            var grayDot = new Image();\r\n            var redDot = new Image();\r\n            var greenDot = new Image();\r\n            redDot.src = \"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/red-dot.png\";\r\n            greenDot.src = \"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/green-dot.png\";\r\n            grayDot.src = \"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/gray-dot.png\";\r\n            var mistakes = new Array(8).fill(\"gray\");\r\n            var interval;\r\n\r\n            class Organ{\r\n                constructor(src, x, y, width, height, endX, endY, startX, startY, endZ) {\r\n                    this.img = new Image();\r\n                    this.img.src = src;\r\n                    this.x = x;\r\n                    this.y = y;\r\n                    this.width = width;\r\n                    this.height = height;\r\n                    this.endX = endX;\r\n                    this.endY = endY;\r\n                    this.endZ = endZ;\r\n                    this.startX = startX;\r\n                    this.startY = startY;\r\n                    this.fixed = false;\r\n                    this.wrong = false;\r\n                }\r\n\r\n            }\r\n\r\n            function repaint() {\r\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                drawMistakes(50*scale, 50*scale);\r\n                for(organ of notInserted) {\r\n                    var img = organ.organ.img;\r\n                    var o = organ.organ;\r\n                    if(o.wrong) {\r\n                        ctx.globalAlpha = 0.5;\r\n                        ctx.drawImage(img, o.x, o.y, o.width, o.height);\r\n                        ctx.globalAlpha = 1;\r\n                        continue;\r\n                    }\r\n                    ctx.drawImage(img, o.x, o.y, o.width, o.height);\r\n                }\r\n            }\r\n\r\n            function drawMistakes(x, y) {\r\n                for(let i = 0; i < 8; i++) {\r\n                    ctx.fillStyle = mistakes[i];\r\n                    if(i < 4){\r\n                        ctx.beginPath();\r\n                        ctx.arc(x+i*70*scale, y, 30*scale, 0, 2 * Math.PI, false);\r\n                        ctx.fill();\r\n                    } else {\r\n                        ctx.beginPath();\r\n                        ctx.arc(x+(i - 4)*70*scale, y + 70*scale, 30*scale, 0, 2 * Math.PI, false);\r\n                        ctx.fill();\r\n                    }\r\n                    ctx.fillStyle = \"black\";\r\n                }\r\n            }\r\n\r\n            function main() {\r\n                ctx.fillStyle = \"black\";\r\n                ctx.font = 100*scale + 'px Calibri';\r\n                ctx.textAlign = \"center\";\r\n                canvas.addEventListener(\"mousedown\", click);\r\n                canvas.addEventListener(\"touchstart\", tap);\r\n            }\r\n\r\n            function start() {\r\n                interval = setInterval(repaint, 1000\/144);\r\n\r\n                canvas.addEventListener(\"touchmove\", slide);\r\n                canvas.addEventListener(\"mousemove\", drag);\r\n                canvas.addEventListener(\"touchend\", touchRelease);\r\n                canvas.addEventListener(\"mouseup\", release);\r\n            }\r\n\r\n            function touchRelease(evt) {\r\n                release(evt);\r\n            }\r\n\r\n            function slide(evt) {\r\n                let loc = {x: evt.touches[0].clientX,\r\n                y: evt.touches[0].clientY}\r\n                drag(loc);\r\n            }\r\n\r\n            function tap(evt) {\r\n                let loc = {x: evt.touches[0].clientX,\r\n                y: evt.touches[0].clientY}\r\n                click(loc);\r\n            }\r\n\r\n            function release(evt) {\r\n                if(SELECTED) {\r\n                    if(isClose()) {\r\n                        SELECTED_ORGAN.x = SELECTED_ORGAN.endX;\r\n                        SELECTED_ORGAN.y = SELECTED_ORGAN.endY;\r\n                        SELECTED_ORGAN.fixed = true;\r\n                        numberOfFinished++;\r\n                        mistakes[numberOfFinished-1] = \"green\";\r\n                    } else {\r\n                        if(Math.sqrt(Math.pow(Math.abs(SELECTED_ORGAN.x - SELECTED_ORGAN.startX) , 2) + Math.pow(Math.abs(SELECTED_ORGAN.y - SELECTED_ORGAN.startY) , 2)) > 100*scale){\r\n                            numberOfMistakes++;\r\n                            SELECTED_ORGAN.fixed = true;\r\n                            SELECTED_ORGAN.wrong = true;\r\n                            numberOfFinished++;\r\n                            mistakes[numberOfFinished-1] = \"red\";\r\n                        }\r\n                        drawMistakes(20*scale, 50*scale);\r\n                        SELECTED_ORGAN.x = SELECTED_ORGAN.startX;\r\n                        SELECTED_ORGAN.y = SELECTED_ORGAN.startY;\r\n                    }\r\n                }\r\n                SELECTED = false;\r\n                SELECTED_ORGAN = null;\r\n\r\n                if((numberOfFinished == 8) && !finished) {\r\n                    setTimeout(wait, 100);\r\n                }\r\n            }\r\n\r\n            function wait() {\r\n                canvas.classList.remove(\"game\");\r\n                canvas.classList.add(\"gameover\");\r\n                clearInterval(interval);\r\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                canvas.removeEventListener(\"mousedown\", click);\r\n                canvas.removeEventListener(\"touchstart\", tap);\r\n                setTimeout(restartListeners, 1200);\r\n                setTimeout(gameover, 1000);\r\n                finished = true;\r\n            }\r\n\r\n            function restartListeners() {\r\n                canvas.addEventListener(\"mousedown\", click);\r\n                canvas.addEventListener(\"touchstart\", tap);\r\n            }\r\n\r\n\r\n            function gameover() {\r\n                canvas.classList.add(\"restart\");\r\n                ctx.font = 80*scale + \"px Arial\";\r\n                ctx.fillStyle = \"black\";\r\n                ctx.textAlign = \"center\";\r\n                ctx.fillText(\"V\u00fdsledek: \" + (8-numberOfMistakes) + \"\/\" + 8, canvas.width\/2, 500*scale);\r\n\r\n            }\r\n\r\n            function drag(evt) {\r\n                if(SELECTED) {\r\n                    x = getEvtX(evt.x);\r\n                    y = getEvtY(evt.y);\r\n                    SELECTED_ORGAN.x = x - offset.x;\r\n                    SELECTED_ORGAN.y = y - offset.y;\r\n                }\r\n            }\r\n\r\n            function restart() {\r\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                canvas.removeEventListener(\"mousedown\", click);\r\n                canvas.removeEventListener(\"touchstart\", tap);\r\n                setTimeout(restartListeners, 200);\r\n                canvas.classList.remove(\"gameover\");\r\n                canvas.classList.remove(\"restart\");\r\n                first = true;\r\n                for(organ of notInserted) {\r\n                    o = organ.organ;\r\n                    o.x = o.startX;\r\n                    o.y = o.startY;\r\n                    o.wrong = false;\r\n                    o.fixed = false;\r\n                }\r\n                numberOfFinished = 0;\r\n            }\r\n\r\n            function click(evt) {\r\n                if(!first) {\r\n                    SELECTED_ORGAN = getSelectedOrgan(getEvtX(evt.x), getEvtY(evt.y));\r\n                } else {\r\n                    first = false;\r\n                    canvas.classList.remove(\"gameover\");\r\n                    canvas.classList.remove(\"game\");\r\n                    canvas.classList.remove(\"gameover\");\r\n                    canvas.classList.add(\"game\");\r\n                    start();\r\n                    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                }\r\n                if(finished) {\r\n                    finished = false;\r\n                    numberOfMistakes = 0;\r\n                    mistakes = new Array(8).fill(\"gray\");\r\n                    restart();\r\n                }\r\n            }\r\n\r\n            function getSelectedOrgan(x, y) {\r\n                for(let i = notInserted.length-1; i >=0; i--) {\r\n                    var o = notInserted[i].organ;\r\n                    if((!o.fixed) && (x > o.x && x < o.x+o.width) && (y > o.y && y < o.y+o.height)) {\r\n                        offset = {\r\n                            x: x-o.x,\r\n                            y: y-o.y\r\n                        }\r\n                        SELECTED = true;\r\n                        return o;\r\n                    }\r\n                }\r\n                SELECTED = false;\r\n                return null;\r\n            }\r\n\r\n            function isClose() {\r\n                var o = SELECTED_ORGAN;\r\n                x0 = o.x;\r\n                y0 = o.y;\r\n                x1 = o.endX;\r\n                y1 = o.endY;\r\n                w = Math.abs(x0 - x1);\r\n                h = Math.abs(y0 - y1);\r\n                return (Math.sqrt( Math.pow(w, 2) + Math.pow(h, 2) )) < CLOSE;\r\n            }\r\n\r\n            function getEvtX(x) {\r\n                var rect = canvas.getBoundingClientRect();\r\n                return (x - rect.left) * (canvas.width \/ canvas.clientWidth);\r\n            }\r\n\r\n            function getEvtY(y) {\r\n                var rect = canvas.getBoundingClientRect();\r\n                return (y - rect.top) * (canvas.height \/ canvas.clientHeight);\r\n            }\r\n\r\n            const defWidth = 1300;\r\n            const defHeight = 1600;\r\n            const scale = window.outerWidth \/ 1920 * 2;\r\n            const CLOSE = 70 * scale;\r\n            const cWidth = defWidth * scale;\r\n            const cHeight = defHeight * scale;\r\n            var notInserted = [\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/intestines.png\", 700*scale, 20*scale, 200*scale, 240*scale, 280*scale, 620*scale, 700*scale, 20*scale, 1)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/bladder.png\", 850*scale, 1400*scale, 130*scale, 160*scale, 315*scale, 700*scale, 850*scale, 1400*scale, 2)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/stomach.png\", 600*scale, 1100*scale, 160*scale, 160*scale, 330*scale, 500*scale, 600*scale, 1100*scale, 3)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/kidneys.png\", 900*scale, 620*scale, 200*scale, 120*scale, 280*scale, 560*scale, 900*scale, 620*scale, 4)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/liver.png\", 1000*scale, 1000*scale, 190*scale, 130*scale, 260*scale, 500*scale, 1000*scale, 1000*scale, 5)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/lungs.png\", 1000*scale, 100*scale, 280*scale, 240*scale, 245*scale, 280*scale, 1000*scale, 100*scale, 6)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/heart.png\", 800*scale, 900*scale, 100*scale, 140*scale, 345*scale, 300*scale, 800*scale, 900*scale, 7)},\r\n                {organ: new Organ(\"https:\/\/fgu.cas.cz\/wp-content\/uploads\/2024\/08\/brain.png\", 700*scale, 400*scale, 120*scale, 90*scale, 320*scale, 10*scale, 700*scale, 400*scale, 8)}\r\n            ];\r\n\r\n            const canvas = document.getElementById(\"canvas\");\r\n            canvas.width = cWidth;\r\n            canvas.height = cHeight;\r\n            console.log(canvas.clientHeight);\r\n            if(window.innerHeight > window.innerWidth) {\r\n                canvas.style = \"width: \" + (window.outerWidth*0.9) + \"px;\";\r\n            } else {\r\n                canvas.style = \"width: \" + (window.outerWidth*0.35) + \"px;\";\r\n            }\r\n\r\n            const ctx = canvas.getContext(\"2d\");\r\n        <\/script>\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Try your hand at our online game to see if you can correctly place the human organs on our figurant Cyril. Correct solution Click to start playing.<\/p>\n","protected":false},"author":1,"featured_media":55280,"parent":25964,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-26978","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/pages\/26978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/comments?post=26978"}],"version-history":[{"count":0,"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/pages\/26978\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/pages\/25964"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/media\/55280"}],"wp:attachment":[{"href":"https:\/\/fgu.cas.cz\/en\/wp-json\/wp\/v2\/media?parent=26978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}