KlickmeGame<\/title>\r\n <link rel=\"stylesheet\" href=\"KlickmeGame.css\">\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: sans-serif;\r\n background-color:white;\r\n}\r\n\r\n.spielfeld {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100vh;\r\n}\r\n\r\n.div2 {\r\n border-radius: 20px;\r\n padding: 20px;\r\n background: linear-gradient( #d4cfc9, #848484);\r\n width: 35%;\r\n margin: 0 auto;\r\n}\r\n\r\n.div3 {\r\n margin: 0 auto;\r\n text-align: center;\r\n background: linear-gradient(#146e15, #30f032, #146e15);\r\n padding: 2% 5%;\r\n height: 80vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n border-radius: 20px;\r\n box-shadow: inset 5px 5px 25px #111111;\r\n color: white;\r\n}\r\n\r\nh2 {\r\n font-size: max(2.5vw, 1.8em);\r\n margin: 0;\r\n text-shadow: 2px 2px 2px black;\r\n}\r\n\r\n.div4 {\r\n border: 5px solid #d4cfc9;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n background-image: url(https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/hintergrund.png);\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: bottom center;\r\n display: flex;\r\n align-items: flex-end;\r\n box-shadow: inset 0px 0px 25px black;\r\n}\r\n\r\n#kartenbild {\r\n width: 100%;\r\n}\r\n\r\n.erfahrungsbehaelter {\r\n display: flex;\r\n justify-content: center;\r\n margin: 0 auto;\r\n padding: 10px 0;\r\n width: 75%;\r\n background: linear-gradient(to right, #000899, #4072bd, #000899);\r\n border: 3px solid #d4cfc9;\r\n border-radius: 7%\/50%;\r\n box-shadow: inset 0px 0px 10px black;\r\n}\r\n\r\n.kartentext {\r\n padding: 0 5%;\r\n font-size: xx-large;\r\n margin: 0;\r\n text-shadow: 1px 1px 1px black;\r\n}\r\n\r\n#giessen-button {\r\n font-size: xx-large;\r\n margin: 0 auto;\r\n padding: 10px 50px;\r\n background-image: linear-gradient(#d4cfc9, #848484);\r\n font-weight: bold;\r\n border: 5px solid #d4cfc9;\r\n border-radius: 10%\/50%;\r\n box-shadow: inset 0px 0px 10px black;\r\n color: white;\r\n text-shadow: 1px 1px 5px black;\r\n}\r\n\r\n#giessen-button:hover {\r\n box-shadow: inset 0px 0px 5px black, 0px 0px 10px wheat;\r\n cursor: pointer;\r\n}\r\n\r\n#giessen-button:focus {\r\n outline: 0;\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n .div2 {\r\n width: 50%;\r\n } \r\n}\r\n\r\n@media (max-width: 575px) {\r\n .div2 {\r\n width: 75%;\r\n }\r\n\r\n .erfahrungsbehaelter {\r\n padding: 5px 0;\r\n width: 95%;\r\n }\r\n\r\n #giessen-button {\r\n font-size: xx-large;\r\n padding: 5px 15%;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"div1\">\r\n <div class=\"div2\">\r\n <div class=\"div3\">\r\n <h2>Gie\u00dfe die Pflanze!<\/h2>\r\n <div class=\"div4\">\r\n <img decoding=\"async\" id=\"kartenbild\" src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze1.png\" alt=\"\">\r\n <\/div>\r\n <div class=\"erfahrungsbehaelter\">\r\n <p id=\"bereits-gegossen\" class=\"kartentext\">0<\/p>\r\n <p class=\"kartentext\">von<\/p>\r\n <p id=\"benoetigtes-giessen\" class=\"kartentext\">3<\/p>\r\n <\/div>\r\n <button id=\"giessen-button\">Gie\u00dfen!<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let bereitsgegossen = document.getElementById(\"bereits-gegossen\");\r\nlet giessenbutton = document.getElementById(\"giessen-button\");\r\nlet kartenbild = document.getElementById(\"kartenbild\");\r\nlet benoetigtesgiessen = document.getElementById(\"benoetigtes-giessen\");\r\nlet anzahlGegossen = 0;\r\n\r\ngiessenbutton.addEventListener(\"click\", function () {\r\n giessen();\r\n \/\/ console.log(anzahlGegossen);\r\n});\r\n\r\nfunction giessen() {\r\n if (anzahlGegossen < 12) {\r\n anzahlGegossen++;\r\n bereitsgegossen.innerHTML = anzahlGegossen;\r\n } else {\r\n alert(\"Gratulation - du hast gewonnen!\");\r\n }\r\n if (anzahlGegossen == 3) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze2.png\");\r\n benoetigtesgiessen.innerHTML = 6;\r\n }\r\n if (anzahlGegossen == 6) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze3.png\");\r\n benoetigtesgiessen.innerHTML = 9;\r\n }\r\n if (anzahlGegossen == 9) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze4.png\");\r\n benoetigtesgiessen.innerHTML = 12;\r\n }\r\n if (anzahlGegossen == 12) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze5.png\");\r\n }\r\n}\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KlickmeGame Gie\u00dfe die Pflanze! 0 von 3 Gie\u00dfen!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2901","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2901"}],"version-history":[{"count":7,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901\/revisions"}],"predecessor-version":[{"id":3310,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901\/revisions\/3310"}],"wp:attachment":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n KlickmeGame<\/title>\r\n <link rel=\"stylesheet\" href=\"KlickmeGame.css\">\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: sans-serif;\r\n background-color:white;\r\n}\r\n\r\n.spielfeld {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 100vh;\r\n}\r\n\r\n.div2 {\r\n border-radius: 20px;\r\n padding: 20px;\r\n background: linear-gradient( #d4cfc9, #848484);\r\n width: 35%;\r\n margin: 0 auto;\r\n}\r\n\r\n.div3 {\r\n margin: 0 auto;\r\n text-align: center;\r\n background: linear-gradient(#146e15, #30f032, #146e15);\r\n padding: 2% 5%;\r\n height: 80vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n border-radius: 20px;\r\n box-shadow: inset 5px 5px 25px #111111;\r\n color: white;\r\n}\r\n\r\nh2 {\r\n font-size: max(2.5vw, 1.8em);\r\n margin: 0;\r\n text-shadow: 2px 2px 2px black;\r\n}\r\n\r\n.div4 {\r\n border: 5px solid #d4cfc9;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n background-image: url(https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/hintergrund.png);\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: bottom center;\r\n display: flex;\r\n align-items: flex-end;\r\n box-shadow: inset 0px 0px 25px black;\r\n}\r\n\r\n#kartenbild {\r\n width: 100%;\r\n}\r\n\r\n.erfahrungsbehaelter {\r\n display: flex;\r\n justify-content: center;\r\n margin: 0 auto;\r\n padding: 10px 0;\r\n width: 75%;\r\n background: linear-gradient(to right, #000899, #4072bd, #000899);\r\n border: 3px solid #d4cfc9;\r\n border-radius: 7%\/50%;\r\n box-shadow: inset 0px 0px 10px black;\r\n}\r\n\r\n.kartentext {\r\n padding: 0 5%;\r\n font-size: xx-large;\r\n margin: 0;\r\n text-shadow: 1px 1px 1px black;\r\n}\r\n\r\n#giessen-button {\r\n font-size: xx-large;\r\n margin: 0 auto;\r\n padding: 10px 50px;\r\n background-image: linear-gradient(#d4cfc9, #848484);\r\n font-weight: bold;\r\n border: 5px solid #d4cfc9;\r\n border-radius: 10%\/50%;\r\n box-shadow: inset 0px 0px 10px black;\r\n color: white;\r\n text-shadow: 1px 1px 5px black;\r\n}\r\n\r\n#giessen-button:hover {\r\n box-shadow: inset 0px 0px 5px black, 0px 0px 10px wheat;\r\n cursor: pointer;\r\n}\r\n\r\n#giessen-button:focus {\r\n outline: 0;\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n .div2 {\r\n width: 50%;\r\n } \r\n}\r\n\r\n@media (max-width: 575px) {\r\n .div2 {\r\n width: 75%;\r\n }\r\n\r\n .erfahrungsbehaelter {\r\n padding: 5px 0;\r\n width: 95%;\r\n }\r\n\r\n #giessen-button {\r\n font-size: xx-large;\r\n padding: 5px 15%;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"div1\">\r\n <div class=\"div2\">\r\n <div class=\"div3\">\r\n <h2>Gie\u00dfe die Pflanze!<\/h2>\r\n <div class=\"div4\">\r\n <img decoding=\"async\" id=\"kartenbild\" src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze1.png\" alt=\"\">\r\n <\/div>\r\n <div class=\"erfahrungsbehaelter\">\r\n <p id=\"bereits-gegossen\" class=\"kartentext\">0<\/p>\r\n <p class=\"kartentext\">von<\/p>\r\n <p id=\"benoetigtes-giessen\" class=\"kartentext\">3<\/p>\r\n <\/div>\r\n <button id=\"giessen-button\">Gie\u00dfen!<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let bereitsgegossen = document.getElementById(\"bereits-gegossen\");\r\nlet giessenbutton = document.getElementById(\"giessen-button\");\r\nlet kartenbild = document.getElementById(\"kartenbild\");\r\nlet benoetigtesgiessen = document.getElementById(\"benoetigtes-giessen\");\r\nlet anzahlGegossen = 0;\r\n\r\ngiessenbutton.addEventListener(\"click\", function () {\r\n giessen();\r\n \/\/ console.log(anzahlGegossen);\r\n});\r\n\r\nfunction giessen() {\r\n if (anzahlGegossen < 12) {\r\n anzahlGegossen++;\r\n bereitsgegossen.innerHTML = anzahlGegossen;\r\n } else {\r\n alert(\"Gratulation - du hast gewonnen!\");\r\n }\r\n if (anzahlGegossen == 3) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze2.png\");\r\n benoetigtesgiessen.innerHTML = 6;\r\n }\r\n if (anzahlGegossen == 6) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze3.png\");\r\n benoetigtesgiessen.innerHTML = 9;\r\n }\r\n if (anzahlGegossen == 9) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze4.png\");\r\n benoetigtesgiessen.innerHTML = 12;\r\n }\r\n if (anzahlGegossen == 12) {\r\n kartenbild.setAttribute(\"src\", \"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/Pflanze5.png\");\r\n }\r\n}\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KlickmeGame Gie\u00dfe die Pflanze! 0 von 3 Gie\u00dfen!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2901","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2901"}],"version-history":[{"count":7,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901\/revisions"}],"predecessor-version":[{"id":3310,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2901\/revisions\/3310"}],"wp:attachment":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}