{"id":2164,"date":"2026-01-16T20:27:19","date_gmt":"2026-01-16T19:27:19","guid":{"rendered":"https:\/\/weddingpanel.pl\/?page_id=2164"},"modified":"2026-01-16T21:02:58","modified_gmt":"2026-01-16T20:02:58","slug":"demo-2-losowanie-zadan","status":"publish","type":"page","link":"https:\/\/weddingpanel.pl\/en\/demo-2-losowanie-zadan\/","title":{"rendered":"Demo 2 Losowanie zada\u0144"},"content":{"rendered":"\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns2164_64ba09-ba{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns2164_64ba09-ba .kt-button{font-weight:normal;font-style:normal;}.kt-btns2164_64ba09-ba .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns2164_64ba09-ba .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns2164_64ba09-ba\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn2164_27bdde-54.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn2164_27bdde-54.kb-button{color:#ffffff;background:#fcb900;}.wp-block-kadence-advancedbtn .kb-btn2164_27bdde-54.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn2164_27bdde-54.kb-button:focus{color:#000000;}<\/style><a class=\"kb-button kt-button button kb-btn2164_27bdde-54 kt-btn-size-large kt-btn-width-type-auto kb-btn-global-inherit  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-button__link wp-block-kadence-singlebtn\" href=\"https:\/\/weddingpanel.pl\/demo-2\/\"><span class=\"kt-btn-inner-text\">Powr\u00f3t<\/span><\/a><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-text-align-center has--font-size\">Losowanie zada\u0144<\/h1>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:16px\">Zadania do wykonania dla go\u015bci mo\u017cna wykorzysta\u0107 np. podczas zabaw oczepinowych. Efekt losowania dodaje emocji. Wersja demo zawiera 9 przyk\u0142adowych zada\u0144, natomiast mo\u017cna ich zamie\u015bci\u0107 o wiele wi\u0119cej wed\u0142ug potrzeb. Tre\u015bci zada\u0144 r\u00f3wnie\u017c mog\u0105 by\u0107 w 100% spersonalizowane. Aby zadania by\u0142y dla go\u015bci niespodziank\u0105, podstrona z losowaniem mo\u017ce by\u0107 wst\u0119pnie zabezpieczona dodatkowym has\u0142em.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wpanel-taskdraw\" data-wpanel-taskdraw>\n  <div class=\"wpanel-taskcard\">\n    <div class=\"wpanel-tasklabel\">Wylosowane zadanie<\/div>\n    <div class=\"wpanel-taskresult\" data-result>Dotknij \u201eLosuj\u201d, aby zacz\u0105\u0107 \ud83c\udfb2<\/div>\n    <div class=\"wpanel-taskmeta\">\n      <span class=\"wpanel-taskleft\" data-left>Pozosta\u0142o: \u2014<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"wpanel-taskactions\">\n    <button type=\"button\" class=\"wpanel-taskbtn\" data-draw>\ud83c\udfb2 Losuj zadanie<\/button>\n    <button type=\"button\" class=\"wpanel-taskbtn is-ghost\" data-reset>Reset<\/button>\n  <\/div>\n\n  <div class=\"wpanel-taskhint\"><\/div>\n<\/div>\n\n<script>\n(() => {\n  document.querySelectorAll('[data-wpanel-taskdraw]').forEach((root) => {\n    const resultEl = root.querySelector('[data-result]');\n    const leftEl   = root.querySelector('[data-left]');\n    const drawBtn  = root.querySelector('[data-draw]');\n    const resetBtn = root.querySelector('[data-reset]');\n\n    \/\/ \u2705 TU EDYTUJ LIST\u0118 ZADA\u0143 (bez powt\u00f3rek)\n    const tasks = [\n      \"Zr\u00f3b selfie z 3 osobami, kt\u00f3rych jeszcze nie znasz \ud83e\udd33\",\n      \"Powiedz komplement Pannie M\u0142odej (konkretny!) \ud83d\udcac\",\n      \"Podejd\u017a do DJ i zadedykuj piosenk\u0119 dla Pary M\u0142odej \ud83c\udfb6\",\n      \"Zata\u0144cz 20 sekund bez muzyki \ud83d\udd7a\",\n      \"Zbij pi\u0105tk\u0119 z 5 osobami \u270b\",\n      \"Przynie\u015b Parze M\u0142odej szklank\u0119 wody \ud83d\udca7\",\n      \"Zr\u00f3b zdj\u0119cie czego\u015b \u201ez\u0142otego\u201d na sali \u2728\",\n      \"Zaproponuj toast (kr\u00f3tki i mi\u0142y) \ud83e\udd42\",\n      \"Wygraj w kamie\u0144-papier-no\u017cyce z 2 osobami \u2702\ufe0f\"\n    ];\n\n    const setBusy = (busy) => {\n      drawBtn.disabled = busy;\n      drawBtn.setAttribute('aria-busy', busy ? 'true' : 'false');\n    };\n\n    const shuffle = (arr) => {\n      for (let i = arr.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [arr[i], arr[j]] = [arr[j], arr[i]];\n      }\n      return arr;\n    };\n\n    let bag = [];\n\n    const updateLeft = () => {\n      if (!tasks.length) {\n        leftEl.textContent = \"Pozosta\u0142o: 0\";\n        return;\n      }\n      leftEl.textContent = `Pozosta\u0142o: ${bag.length}`;\n    };\n\n    const refill = () => {\n      bag = shuffle([...tasks]);\n      drawBtn.disabled = false;\n      drawBtn.removeAttribute('aria-busy');\n      updateLeft();\n    };\n\n    const randomPreview = () => tasks[Math.floor(Math.random() * tasks.length)];\n\n    const spinEffect = (ms = 850) => new Promise((resolve) => {\n      const start = performance.now();\n      const tick = (now) => {\n        const t = (now - start) \/ ms;\n        if (t >= 1) return resolve();\n        resultEl.textContent = randomPreview();\n        resultEl.classList.add('is-spinning');\n        requestAnimationFrame(tick);\n      };\n      requestAnimationFrame(tick);\n    });\n\n    const confetti = () => {\n      const layer = document.createElement('div');\n      layer.className = 'wpanel-confetti';\n      for (let i = 0; i < 18; i++) {\n        const p = document.createElement('i');\n        p.style.left = Math.random() * 100 + '%';\n        p.style.animationDelay = (Math.random() * 180) + 'ms';\n        p.style.transform = `rotate(${Math.random()*180}deg)`;\n        layer.appendChild(p);\n      }\n      root.appendChild(layer);\n      setTimeout(() => layer.remove(), 1200);\n    };\n\n    \/\/ init\n    refill();\n\n    drawBtn.addEventListener('click', async () => {\n      if (!tasks.length) return;\n\n      \/\/ je\u015bli pula si\u0119 sko\u0144czy\u0142a \u2192 blokujemy losowanie do resetu\n      if (bag.length === 0) {\n        resultEl.classList.remove('is-spinning', 'is-reveal');\n        resultEl.textContent = \"Pula zada\u0144 si\u0119 sko\u0144czy\u0142a \u2014 kliknij \u201eReset\u201d, aby wymiesza\u0107 od nowa \ud83d\udd01\";\n        drawBtn.disabled = true;\n        updateLeft();\n        return;\n      }\n\n      setBusy(true);\n      await spinEffect(850);\n\n      const chosen = bag.pop(); \/\/ \u2705 bez powt\u00f3rek\n      resultEl.classList.remove('is-spinning');\n      resultEl.textContent = chosen;\n      resultEl.classList.add('is-reveal');\n      confetti();\n\n      setTimeout(() => resultEl.classList.remove('is-reveal'), 650);\n      setBusy(false);\n\n      updateLeft();\n\n      \/\/ po wylosowaniu ostatniego zadania: dopisek + blokada\n      if (bag.length === 0) {\n        setTimeout(() => {\n          resultEl.textContent = chosen + \"\\n\\n(Pula wyczerpana \u2014 kliknij \u201eReset\u201d, aby zacz\u0105\u0107 od nowa \ud83d\udd01)\";\n          drawBtn.disabled = true;\n          updateLeft();\n        }, 250);\n      }\n    });\n\n    resetBtn.addEventListener('click', () => {\n      refill();\n      resultEl.classList.remove('is-spinning', 'is-reveal');\n      resultEl.textContent = \"Dotknij \u201eLosuj\u201d, aby zacz\u0105\u0107 \ud83c\udfb2\";\n    });\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:150px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Losowanie zada\u0144 Zadania do wykonania dla go\u015bci mo\u017cna wykorzysta\u0107 np. podczas zabaw oczepinowych. Efekt losowania dodaje emocji. Wersja demo zawiera 9 przyk\u0142adowych zada\u0144, natomiast mo\u017cna ich zamie\u015bci\u0107 o wiele wi\u0119cej wed\u0142ug potrzeb. Tre\u015bci zada\u0144 r\u00f3wnie\u017c mog\u0105 by\u0107 w 100% spersonalizowane. Aby zadania by\u0142y dla go\u015bci niespodziank\u0105, podstrona z losowaniem mo\u017ce by\u0107 wst\u0119pnie zabezpieczona dodatkowym has\u0142em. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","iawp_total_views":51,"footnotes":""},"class_list":["post-2164","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/pages\/2164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/comments?post=2164"}],"version-history":[{"count":17,"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/pages\/2164\/revisions"}],"predecessor-version":[{"id":2190,"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/pages\/2164\/revisions\/2190"}],"wp:attachment":[{"href":"https:\/\/weddingpanel.pl\/en\/wp-json\/wp\/v2\/media?parent=2164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}