{"id":396,"date":"2026-05-05T18:24:28","date_gmt":"2026-05-05T17:24:28","guid":{"rendered":"https:\/\/itdd.au.dk\/404-team-not-found\/?page_id=396"},"modified":"2026-05-28T06:35:24","modified_gmt":"2026-05-28T05:35:24","slug":"5-5-reflect","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/404-team-not-found\/5-5-reflect\/","title":{"rendered":"5\/5 &#8211; Reflect"},"content":{"rendered":"\n<div style=\"background-image:url(&apos;https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/IMG_6882-scaled.jpg&apos;);background-size:cover;\" class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover alignfull is-light has-contrast-color has-text-color has-link-color has-medium-font-size wp-elements-8b8f3e95b97046c775affd713ad35c38 wp-duotone-purple-green\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40);min-height:50px;aspect-ratio:unset;\"><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-61\" alt=\"\" src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a017-eberhard-cco-the-after-rain.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=e7b4ca0a0edcc84ba48c1f7ebf02dd5a\" style=\"object-position:38% 20%\" data-object-fit=\"cover\" data-object-position=\"38% 20%\"\/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-vivid-green-cyan-background-color has-background-dim-20 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-a89ae279 wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-group alignwide has-base-color has-text-color has-link-color wp-elements-c98a510498365018f43749c687bc0894 is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-62191192 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0\">\n<div class=\"wp-block-group is-layout-flex wp-block-group-is-layout-flex\"><div class=\"is-default-size is-style-default wp-block-site-logo\"><a href=\"https:\/\/itdd.au.dk\/404-team-not-found\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed.webp\" class=\"custom-logo\" alt=\"4\u00f84 &#8211; Team Not Found\" srcset=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed.webp 512w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-300x300.webp 300w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-150x150.webp 150w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-270x270.webp 270w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-192x192.webp 192w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-180x180.webp 180w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/03\/cropped-Praksisfaglighed-32x32.webp 32w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n\n<h1 class=\"has-link-color wp-elements-8544ffcc602c861f1a6f94c4e1013f02 wp-block-site-title has-text-color has-white-color has-large-font-size\"><a href=\"https:\/\/itdd.au.dk\/404-team-not-found\" target=\"_self\" rel=\"home\">4\u00f84 &#8211; Team Not Found<\/a><\/h1><\/div>\n\n\n<nav class=\"has-text-color has-white-color is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-de66bf79 wp-block-navigation-is-layout-flex\" aria-label=\"HJEM\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"\u00c5bn menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Luk menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container has-text-color has-white-color is-responsive items-justified-right wp-block-navigation\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/itdd.au.dk\/404-team-not-found\/sample-page\/\"><span class=\"wp-block-navigation-item__label\">4\u00f84 \u2013 Team Not Found!<\/span><span class=\"wp-block-navigation-item__description\">Hvem er jeg?<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n\n\n\n<div style=\"height:0vw\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-base-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-buttons alignwide has-custom-font-size has-small-font-size is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-68643a9e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/1-5-discover\/\">1 &#8211; Discover<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/2-5-define\">2 &#8211; Define<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/3-5-develop\/\">3 &#8211; Develop<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/4-5-deliver\/\">4 &#8211; Deliver<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/5-5-reflect\/\">5 &#8211; Reflect<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/litteraturliste\/\">Litteraturliste<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/404-team-not-found\/begreber\/\">Begrebsafklaring<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-section-5 has-cyan-bluish-gray-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-7cd6098a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h1 class=\"wp-block-heading\" style=\"font-size:clamp(1.976rem, 1.976rem + ((1vw - 0.2rem) * 2.771), 3.5rem);\"><strong>Reflect<\/strong><\/h1>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Projektet begyndte med en bred interesse for forholdet mellem digitale l\u00e6remidler, makerspace og praksisfaglighed, men er undervejs blevet sk\u00e6rpet til et mere pr\u00e6cist designproblem: Hvordan kan l\u00e6rer og it-vejleder sammen overs\u00e6tte eksisterende undervisningsforl\u00f8b til mere praksisfaglige, skabende og elevaktive aktiviteter?<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><br><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"393\" src=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Reflect4.png\" alt=\"\" class=\"wp-image-881\" style=\"border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px\" srcset=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Reflect4.png 787w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Reflect4-300x150.png 300w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Reflect4-768x384.png 768w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I den sidste fase af designprocessen samler jeg tr\u00e5dene fra projektet og vurderer, hvad <em>min prototype (Den didaktisk overs\u00e6tter)<\/em> forel\u00f8bigt kan bidrage med \u2014 og hvad der stadig skal unders\u00f8ges. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-top:var(--wp--preset--spacing--40);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0\">Projektets forskningssp\u00f8rgsm\u00e5l handlede om, hvilke designprincipper et dialogv\u00e6rkt\u00f8j b\u00f8r bygge p\u00e5, hvis det skal underst\u00f8tte f\u00e6lles didaktisk overs\u00e6ttelse fra portalforl\u00f8b til praksisfaglige, postdigitale l\u00e6ringsaktiviteter. P\u00e5 baggrund af empiri, litteraturreview, ideation og prototypeudvikling peger projektet is\u00e6r p\u00e5 disse principper:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol style=\"background-color:#97db0b4d\" class=\"wp-block-list has-background\">\n<li>V\u00e6rkt\u00f8jet skal synligg\u00f8re muligheder og begr\u00e6nsninger ved l\u00e6remidler, teknologier og materialer.<\/li>\n\n\n\n<li>Det skal guide brugeren gennem en sekventiel proces fra analyse til redesign.<\/li>\n\n\n\n<li>Det skal bruge \u00e5bne \u201cHvad hvis&#8230;?\u201d-sp\u00f8rgsm\u00e5l som motor for didaktisk gent\u00e6nkning.<\/li>\n\n\n\n<li>Det skal visualisere sammenh\u00e6nge mellem fagligt m\u00e5l, elevhandling, teknologi, materiale, produkt og l\u00e6rerrolle.<\/li>\n\n\n\n<li>Det skal have lav adgangsbarriere, s\u00e5 det kan bruges i realistiske forberedelses- og vejledningssituationer.<\/li>\n\n\n\n<li>Det skal fastholde v\u00e6rdier som elevdeltagelse, meningsfuld anvendelse, kreativitet og faglig forankring.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Der er dog ogs\u00e5 tydelige begr\u00e6nsninger. Den f\u00f8rste risiko er, at v\u00e6rkt\u00f8jet bliver for begrebstungt. Begreber som affordances, postdigitalitet og praksisfaglighed er vigtige i opgaven, men de skal overs\u00e6ttes til enkle sp\u00f8rgsm\u00e5l, hvis v\u00e6rkt\u00f8jet skal fungere i praksis. Den anden risiko er teknologisk overflod. Vallensb\u00e6k Kommunes ressource\u00f8kologi rummer mange sp\u00e6ndende teknologier, men v\u00e6rkt\u00f8jet m\u00e5 ikke blive endnu et katalog. Det skal hj\u00e6lpe med at v\u00e6lge og begrunde \u2014 ikke bare inspirere. Den tredje risiko er, at praksisfaglighed reduceres til \u201cnoget praktisk\u201d ved siden af fagligheden. Derfor skal v\u00e6rkt\u00f8jet hele tiden fastholde koblingen mellem fagligt m\u00e5l, elevhandling, produkt og refleksion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Den nuv\u00e6rende prototype kan ikke dokumentere effekt p\u00e5 elevers l\u00e6ring. Det er heller ikke dens form\u00e5l i denne iteration. Dens kvalitet skal vurderes p\u00e5, om den g\u00f8r didaktiske valg synlige, samtalbare og handlingsorienterede for fagprofessionelle. N\u00e6ste skridt er derfor at teste arbejdsh\u00e6ftet i reelle eller simulerede co-teaching-situationer, hvor l\u00e6rer og it-vejleder arbejder med et konkret forl\u00f8b.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reflect-fasen viser dermed, at prototypen ikke er en f\u00e6rdig l\u00f8sning, men et kvalificeret f\u00f8rste bud. Det vigtigste designbidrag er ikke selve arbejdsh\u00e6ftet som produkt, men den proces det \u00e5bner for: en mere bevidst samtale om, hvordan digitale, analoge og materielle ressourcer kan kobles til faglige m\u00e5l og praksisfaglige elevhandlinger. Det videre arbejde b\u00f8r derfor unders\u00f8ge, hvordan v\u00e6rkt\u00f8jet faktisk p\u00e5virker planl\u00e6gningssamtalen \u2014 og om det kan hj\u00e6lpe l\u00e6rere og vejledere med at skabe undervisningsdesigns, hvor elever ikke kun forbruger og besvarer, men ogs\u00e5 unders\u00f8ger, skaber og formidler.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px\">\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"725\" src=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Prototype-dug-1024x725.png\" alt=\"\" class=\"wp-image-888\" style=\"border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px\" srcset=\"https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Prototype-dug-1024x725.png 1024w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Prototype-dug-300x212.png 300w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Prototype-dug-768x543.png 768w, https:\/\/itdd.au.dk\/404-team-not-found\/wp-content\/uploads\/sites\/101\/2026\/05\/Prototype-dug.png 1491w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Version 2.0<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"alignwide wp-block-paragraph\">Min prototype fungerer derfor som et slags gr\u00e6nseobjekt mellem l\u00e6rerens faglige planl\u00e6gning og it-vejlederens teknologiske og didaktiske sparring. Det skal v\u00e6re mere struktureret end en \u00e5ben samtale, men mere dialogisk end en traditionel skabelon. Det skal ikke levere et f\u00e6rdigt undervisningsforl\u00f8b, men st\u00f8tte de fagprofessionelle i at stille bedre sp\u00f8rgsm\u00e5l sammen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Herunder er en interaktiv Aktionskort-generator, der er designet specifikt som en overbygning til den trykte\/digitale prototype.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e6rkt\u00f8jet lader l\u00e6rere og p\u00e6dagogiske konsulenter tr\u00e6kke tilf\u00e6ldige didaktiske bensp\u00e6nd, teknologier, elevroller og modtagere. Man kan generere en samlet &#8220;Didaktisk Menu&#8221; (en kombination af kort til et forl\u00f8b) eller sammens\u00e6tte sine egne kort.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Applikationen har en indbygget print-funktion, der formaterer kortene i \u00e6gte &#8220;spillekorts-st\u00f8rrelse&#8221;, s\u00e5 de kan klippes ud og l\u00e6gges direkte p\u00e5 den centrale cirkel i din &#8220;Didaktisk Overs\u00e6tter&#8221;-dug.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Didaktisk Aktionskort-Generator<\/title>\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Lucide Icons -->\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n    <!-- Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: #f8fafc;\n        }\n        \n        \/* Card Flip Animation Styles *\/\n        .perspective {\n            perspective: 1000px;\n        }\n        .preserve-3d {\n            transform-style: preserve-3d;\n        }\n        .backface-hidden {\n            backface-visibility: hidden;\n            -webkit-backface-visibility: hidden;\n        }\n        .rotate-y-180 {\n            transform: rotateY(180deg);\n        }\n        \n        \/* Custom print styling *\/\n        @media print {\n            body {\n                background: white !important;\n            }\n            .no-print {\n                display: none !important;\n            }\n            .print-layout {\n                display: grid !important;\n                grid-template-columns: repeat(2, 1fr) !important;\n                gap: 1.5rem !important;\n                padding: 0 !important;\n            }\n            .print-card {\n                break-inside: avoid;\n                page-break-inside: avoid;\n                border: 2px dashed #cbd5e1 !important;\n                box-shadow: none !important;\n                background: white !important;\n                color: black !important;\n                width: 100% !important;\n                height: 350px !important;\n                display: flex !important;\n                flex-direction: column !important;\n                justify-content: space-between !important;\n                padding: 1.5rem !important;\n            }\n        }\n    <\/style>\n\n\n\n    <!-- Toast Notification Container -->\n    <div id=\"toast-container\" class=\"fixed bottom-5 right-5 z-50 space-y-2 pointer-events-none\"><\/div>\n\n    <!-- Header Section (no-print) -->\n    <header class=\"bg-white border-b border-slate-200 py-6 px-4 md:px-8 no-print shadow-sm\">\n        <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\n            <div class=\"flex items-center gap-4\">\n                <div class=\"p-3 bg-orange-500 text-white rounded-2xl shadow-lg shadow-orange-500\/20\">\n                    <i data-lucide=\"zap\" class=\"w-8 h-8\"><\/i>\n                <\/div>\n                <div>\n                    <h1 class=\"text-2xl font-black text-slate-800 tracking-tight\">AKTIONSKORT-GENERATOR<\/h1>\n                    <p class=\"text-sm text-slate-500 font-medium\">Det kreative v\u00e6rkt\u00f8j til din <span class=\"text-orange-600 font-semibold\">Didaktiske Overs\u00e6tter<\/span><\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex items-center gap-3\">\n                <button onclick=\"openCustomCardModal()\" class=\"flex items-center gap-2 px-4 py-2.5 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-all text-sm shadow-sm\">\n                    <i data-lucide=\"plus\" class=\"w-4 h-4\"><\/i> Opret eget kort\n                <\/button>\n                <button onclick=\"printSelectedCards()\" class=\"flex items-center gap-2 px-4 py-2.5 bg-orange-600 text-white rounded-xl font-bold hover:bg-orange-700 transition-all text-sm shadow-md shadow-orange-600\/10\">\n                    <i data-lucide=\"printer\" class=\"w-4 h-4\"><\/i> Print valgte (<span id=\"print-count\">0<\/span>)\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Main Workspace -->\n    <main class=\"flex-grow max-w-7xl w-full mx-auto p-4 md:p-8 grid lg:grid-cols-12 gap-8 no-print\">\n        \n        <!-- Left Side: Draw Dashboard & Settings (4 cols) -->\n        <div class=\"lg:col-span-4 space-y-6\">\n            \n            <!-- Quick Generator Board -->\n            <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-6\">\n                <h3 class=\"text-lg font-bold text-slate-800 flex items-center gap-2\">\n                    <i data-lucide=\"dices\" class=\"text-orange-500\"><\/i> Lyn-generator\n                <\/h3>\n                <p class=\"text-sm text-slate-500\">Generer \u00f8jeblikkeligt nye bensp\u00e6nd til din didaktiske overs\u00e6ttelse.<\/p>\n                \n                <div class=\"space-y-3 pt-2\">\n                    <button onclick=\"drawFullMenu()\" class=\"w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl font-black text-sm hover:opacity-95 transition-all shadow-md shadow-orange-500\/10 group\">\n                        <span class=\"flex items-center gap-2\">\n                            <i data-lucide=\"sparkles\" class=\"w-4 h-4 group-hover:animate-spin\"><\/i>\n                            TR\u00c6K EN FULD DIDAKTISK MENU\n                        <\/span>\n                        <i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i>\n                    <\/button>\n                    <p class=\"text-xs text-center text-slate-400 italic\">Tr\u00e6kker automatisk 1 kort fra hver af de 4 didaktiske kategorier<\/p>\n                <\/div>\n\n                <div class=\"border-t border-slate-100 my-4 pt-4 space-y-2\">\n                    <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider\">Tr\u00e6k enkeltvis per kategori<\/h4>\n                    <div class=\"grid grid-cols-2 gap-2\">\n                        <button onclick=\"drawSingleCategory('hvad-hvis')\" class=\"flex items-center gap-1.5 p-2.5 bg-orange-50 hover:bg-orange-100 text-orange-800 rounded-lg text-xs font-bold transition-all\">\n                            <span class=\"w-2 h-2 rounded-full bg-orange-500\"><\/span> Hvad hvis&#8230;?\n                        <\/button>\n                        <button onclick=\"drawSingleCategory('materiale')\" class=\"flex items-center gap-1.5 p-2.5 bg-blue-50 hover:bg-blue-100 text-blue-800 rounded-lg text-xs font-bold transition-all\">\n                            <span class=\"w-2 h-2 rounded-full bg-blue-500\"><\/span> Materialer\n                        <\/button>\n                        <button onclick=\"drawSingleCategory('elevrolle')\" class=\"flex items-center gap-1.5 p-2.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-lg text-xs font-bold transition-all\">\n                            <span class=\"w-2 h-2 rounded-full bg-emerald-500\"><\/span> Elevrolle\n                        <\/button>\n                        <button onclick=\"drawSingleCategory('modtager')\" class=\"flex items-center gap-1.5 p-2.5 bg-purple-50 hover:bg-purple-100 text-purple-800 rounded-lg text-xs font-bold transition-all\">\n                            <span class=\"w-2 h-2 rounded-full bg-purple-500\"><\/span> Modtager\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Didactic Combination Card (The Generated Menu) -->\n            <div id=\"combination-box\" class=\"bg-slate-900 text-white p-6 rounded-2xl border border-slate-800 shadow-xl hidden relative overflow-hidden\">\n                <div class=\"absolute -right-10 -bottom-10 opacity-5 pointer-events-none\">\n                    <i data-lucide=\"blocks\" style=\"width: 200px; height: 200px;\"><\/i>\n                <\/div>\n                \n                <div class=\"flex justify-between items-start mb-4\">\n                    <span class=\"px-2.5 py-1 bg-orange-500\/20 text-orange-400 border border-orange-500\/30 rounded-full text-xs font-black tracking-wide uppercase\">Genereret Menu<\/span>\n                    <button onclick=\"clearCombination()\" class=\"text-slate-400 hover:text-white transition-colors\">\n                        <i data-lucide=\"x\" class=\"w-4 h-4\"><\/i>\n                    <\/button>\n                <\/div>\n                <h4 class=\"text-base font-bold mb-4 text-slate-100\">Din Overs\u00e6ttelsesmenu:<\/h4>\n                \n                <ul class=\"space-y-3.5 text-xs\">\n                    <li class=\"p-3 bg-slate-800\/80 rounded-xl border border-slate-700\/50\">\n                        <span class=\"text-[10px] uppercase font-black text-orange-400 block mb-0.5\">Bensp\u00e6nd<\/span>\n                        <p id=\"menu-hvad-hvis\" class=\"font-medium text-slate-200\">Ingen valgt<\/p>\n                    <\/li>\n                    <li class=\"p-3 bg-slate-800\/80 rounded-xl border border-slate-700\/50\">\n                        <span class=\"text-[10px] uppercase font-black text-blue-400 block mb-0.5\">Materiale \/ Teknologi<\/span>\n                        <p id=\"menu-materiale\" class=\"font-medium text-slate-200\">Ingen valgt<\/p>\n                    <\/li>\n                    <li class=\"p-3 bg-slate-800\/80 rounded-xl border border-slate-700\/50\">\n                        <span class=\"text-[10px] uppercase font-black text-emerald-400 block mb-0.5\">Elevrolle<\/span>\n                        <p id=\"menu-elevrolle\" class=\"font-medium text-slate-200\">Ingen valgt<\/p>\n                    <\/li>\n                    <li class=\"p-3 bg-slate-800\/80 rounded-xl border border-slate-700\/50\">\n                        <span class=\"text-[10px] uppercase font-black text-purple-400 block mb-0.5\">Modtager \/ Ramme<\/span>\n                        <p id=\"menu-modtager\" class=\"font-medium text-slate-200\">Ingen valgt<\/p>\n                    <\/li>\n                <\/ul>\n\n                <button onclick=\"selectAllMenuCards()\" class=\"w-full mt-4 py-2 bg-slate-800 hover:bg-slate-750 border border-slate-700 text-white rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-1.5\">\n                    <i data-lucide=\"check-square\" class=\"w-3.5 h-3.5\"><\/i> V\u00e6lg alle 4 til print\n                <\/button>\n            <\/div>\n\n            <!-- Categories and filters -->\n            <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n                <h4 class=\"text-sm font-bold text-slate-800\">Filtrer kortgalleri<\/h4>\n                <div class=\"flex flex-col gap-1.5\">\n                    <button onclick=\"setFilter('all')\" id=\"filter-all\" class=\"flex items-center justify-between p-2.5 rounded-xl font-bold text-xs transition-all bg-slate-100 text-slate-900 border border-slate-200\">\n                        <span>Alle kort<\/span>\n                        <span class=\"px-2 py-0.5 bg-slate-200 text-slate-700 rounded-full text-[10px]\" id=\"count-all\">0<\/span>\n                    <\/button>\n                    <button onclick=\"setFilter('hvad-hvis')\" id=\"filter-hvad-hvis\" class=\"flex items-center justify-between p-2.5 rounded-xl font-bold text-xs transition-all text-orange-800 hover:bg-orange-50 border border-transparent\">\n                        <span class=\"flex items-center gap-2\"><span class=\"w-2.5 h-2.5 rounded-full bg-orange-500\"><\/span> Hvad hvis&#8230;?<\/span>\n                        <span class=\"px-2 py-0.5 bg-orange-100 text-orange-700 rounded-full text-[10px]\" id=\"count-hvad-hvis\">0<\/span>\n                    <\/button>\n                    <button onclick=\"setFilter('materiale')\" id=\"filter-materiale\" class=\"flex items-center justify-between p-2.5 rounded-xl font-bold text-xs transition-all text-blue-800 hover:bg-blue-50 border border-transparent\">\n                        <span class=\"flex items-center gap-2\"><span class=\"w-2.5 h-2.5 rounded-full bg-blue-500\"><\/span> Materiale &amp; teknologi<\/span>\n                        <span class=\"px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-[10px]\" id=\"count-materiale\">0<\/span>\n                    <\/button>\n                    <button onclick=\"setFilter('elevrolle')\" id=\"filter-elevrolle\" class=\"flex items-center justify-between p-2.5 rounded-xl font-bold text-xs transition-all text-emerald-800 hover:bg-emerald-50 border border-transparent\">\n                        <span class=\"flex items-center gap-2\"><span class=\"w-2.5 h-2.5 rounded-full bg-emerald-500\"><\/span> Ny elevrolle<\/span>\n                        <span class=\"px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full text-[10px]\" id=\"count-elevrolle\">0<\/span>\n                    <\/button>\n                    <button onclick=\"setFilter('modtager')\" id=\"filter-modtager\" class=\"flex items-center justify-between p-2.5 rounded-xl font-bold text-xs transition-all text-purple-800 hover:bg-purple-50 border border-transparent\">\n                        <span class=\"flex items-center gap-2\"><span class=\"w-2.5 h-2.5 rounded-full bg-purple-500\"><\/span> Modtager \/ Scenarie<\/span>\n                        <span class=\"px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full text-[10px]\" id=\"count-modtager\">0<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Right Side: Interactive Cards Gallery (8 cols) -->\n        <div class=\"lg:col-span-8 space-y-6\">\n            <div class=\"flex justify-between items-center bg-white p-4 rounded-xl border border-slate-200 shadow-sm\">\n                <span class=\"text-sm font-semibold text-slate-500\">Viser <span id=\"gallery-count\" class=\"text-slate-800 font-bold\">0<\/span> kort i alt<\/span>\n                <div class=\"flex gap-2\">\n                    <button onclick=\"selectAllCards(true)\" class=\"text-xs font-bold text-slate-600 hover:text-slate-900 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-200 transition-all\">V\u00e6lg alle<\/button>\n                    <button onclick=\"selectAllCards(false)\" class=\"text-xs font-bold text-slate-600 hover:text-slate-900 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-200 transition-all\">Frav\u00e6lg alle<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Card Grid -->\n            <div id=\"card-grid\" class=\"grid sm:grid-cols-2 md:grid-cols-3 gap-6\">\n                <!-- Cards will be populated here -->\n            <\/div>\n        <\/div>\n\n    <\/main>\n\n    <!-- Custom Modal for Creating a Card -->\n    <div id=\"custom-card-modal\" class=\"fixed inset-0 z-50 bg-slate-900\/60 backdrop-blur-sm hidden items-center justify-center p-4\">\n        <div class=\"bg-white rounded-3xl border border-slate-200 max-w-lg w-full overflow-hidden shadow-2xl animate-in fade-in duration-200\">\n            <div class=\"p-6 bg-slate-900 text-white flex justify-between items-center\">\n                <h3 class=\"text-lg font-black tracking-tight flex items-center gap-2\">\n                    <i data-lucide=\"plus-circle\" class=\"text-orange-500\"><\/i> OPRET DIT EGET AKTIONSKORT\n                <\/h3>\n                <button onclick=\"closeCustomCardModal()\" class=\"text-slate-400 hover:text-white transition-colors\">\n                    <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n                <\/button>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <div>\n                    <label class=\"block text-xs font-black uppercase text-slate-500 mb-1\">V\u00e6lg Kategori<\/label>\n                    <select id=\"modal-category\" class=\"w-full p-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-orange-500 outline-none text-sm font-semibold text-slate-700 bg-slate-50\">\n                        <option value=\"hvad-hvis\">Hvad hvis&#8230;? (Bensp\u00e6nd)<\/option>\n                        <option value=\"materiale\">Materiale &amp; Teknologi<\/option>\n                        <option value=\"elevrolle\">Ny Elevrolle<\/option>\n                        <option value=\"modtager\">Modtager &amp; Scenarie<\/option>\n                    <\/select>\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-black uppercase text-slate-500 mb-1\">Titel p\u00e5 kortet<\/label>\n                    <input type=\"text\" id=\"modal-title\" placeholder=\"F.eks. Tidsrejse, Pap-bensp\u00e6nd, Eksperimentator...\" class=\"w-full p-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-orange-500 outline-none text-sm font-medium\">\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-black uppercase text-slate-500 mb-1\">Beskrivelse \/ Didaktisk Udfordring<\/label>\n                    <textarea id=\"modal-desc\" rows=\"3\" placeholder=\"Beskriv hvad l\u00e6rere\/elever skal g\u00f8re, t\u00e6nke eller medbringe...\" class=\"w-full p-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-orange-500 outline-none text-sm font-medium\"><\/textarea>\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-black uppercase text-slate-500 mb-1\">Eksempel \/ St\u00f8ttesp\u00f8rgsm\u00e5l<\/label>\n                    <textarea id=\"modal-hint\" rows=\"2\" placeholder=\"F.eks. 'Hvordan p\u00e5virker materialet elevens agens?'\" class=\"w-full p-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-orange-500 outline-none text-sm font-medium\"><\/textarea>\n                <\/div>\n            <\/div>\n            <div class=\"p-6 bg-slate-50 border-t border-slate-100 flex justify-end gap-3\">\n                <button onclick=\"closeCustomCardModal()\" class=\"px-5 py-2.5 bg-white text-slate-700 border border-slate-200 rounded-xl font-bold text-sm hover:bg-slate-100 transition-all\">Annuller<\/button>\n                <button onclick=\"saveCustomCard()\" class=\"px-5 py-2.5 bg-orange-600 text-white rounded-xl font-bold text-sm hover:bg-orange-700 transition-all shadow-md shadow-orange-600\/10\">Opret kort<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Print Container (Only visible during print) -->\n    <div id=\"print-area\" class=\"hidden print-layout\">\n        <!-- Will be filled dynamically by JavaScript before printing -->\n    <\/div>\n\n    <!-- Footer (no-print) -->\n    <footer class=\"bg-white border-t border-slate-100 py-6 text-center text-xs text-slate-400 font-medium no-print\">\n        <p>\u00a9 Vallensb\u00e6k Kommune Skoleudvikling &#8211; Didaktisk Redesign<\/p>\n    <\/footer>\n\n    <!-- App State and Logic -->\n    <script>\n        \/\/ Core card templates\n        const defaultCards = [\n            \/\/ Kategori: Hvad hvis...?\n            {\n                id: \"hvad-hvis-1\",\n                category: \"hvad-hvis\",\n                title: \"Skaberen i fokus\",\n                desc: \"Hvad hvis eleverne ikke skal besvare opgaven med skriftlig tekst, men udelukkende designe og bygge en fysisk prototype, der formidler eller l\u00f8ser problemet?\",\n                hint: \"T\u00e6nk med h\u00e6nderne: Lad eleverne oms\u00e6tte abstrakte begreber til tredimensionelle, taktile objekter.\"\n            },\n            {\n                id: \"hvad-hvis-2\",\n                category: \"hvad-hvis\",\n                title: \"Det materielle bensp\u00e6nd\",\n                desc: \"Hvad hvis opgaven skal l\u00f8ses udelukkende ved brug af pap, lim og genbrugsmaterialer, f\u00f8r der m\u00e5 skrives eller kodes?\",\n                hint: \"Brug af lav-teknologiske materialer tvinger eleverne til at konkretisere deres ideer hurtigt (low-fidelity prototyping).\"\n            },\n            {\n                id: \"hvad-hvis-3\",\n                category: \"hvad-hvis\",\n                title: \"Den virkelige modtager\",\n                desc: \"Hvad hvis elevernes l\u00f8sning eller produkt skal overleveres til, bruges af eller testes af en reel modtager uden for klasselokalet?\",\n                hint: \"Dette skaber autentisk form\u00e5l. F.eks. pedellen, lokalr\u00e5det, skolens mindste klasser eller for\u00e6ldrene.\"\n            },\n            {\n                id: \"hvad-hvis-4\",\n                category: \"hvad-hvis\",\n                title: \"Kropslig forankring\",\n                desc: \"Hvad hvis kroppen, bev\u00e6gelse eller sanserne skal v\u00e6re den prim\u00e6re metode til at unders\u00f8ge og formidle det faglige emne?\",\n                hint: \"Design et forl\u00f8b hvor eleverne f.eks. fysisk skal agere brikker i et spil, repr\u00e6sentere kredsl\u00f8b eller bygge sanselige installationer.\"\n            },\n            {\n                id: \"hvad-hvis-5\",\n                category: \"hvad-hvis\",\n                title: \"Fejlkultur som ressource\",\n                desc: \"Hvad hvis opgaven bevidst l\u00e6gger op til, at det f\u00f8rste fors\u00f8g SKAL fejle, og processen i h\u00f8jere grad handler om at fejls\u00f8ge og forbedre?\",\n                hint: \"Underst\u00f8t 'Tinkerability'. Bel\u00f8n eksperimentet frem for det fejlfrie slutsvar.\"\n            },\n            \n            \/\/ Kategori: Materiale & teknologi\n            {\n                id: \"materiale-1\",\n                category: \"materiale\",\n                title: \"Micro:bit & Fysisk Kodning\",\n                desc: \"Bring mikroteknologi og sensorer i spil. Hvordan kan sensorer (lys, temperatur, ryst) eller lysdioder g\u00f8re det faglige emne interaktivt?\",\n                hint: \"Lad eleverne kode en interaktiv m\u00e5ler, et spil eller en digital alarm, der relaterer sig til faget.\"\n            },\n            {\n                id: \"materiale-2\",\n                category: \"materiale\",\n                title: \"Pap, limpistol & papsk\u00e6rere\",\n                desc: \"Bring det taktile og hurtige paparbejde i spil. Byg lynhurtige papskulpturer, spilleplader eller modeller til at t\u00e6nke i rumlighed.\",\n                hint: \"Pap giver umiddelbar skabegl\u00e6de og lader eleverne hurtigt \u00e6ndre retning undervejs.\"\n            },\n            {\n                id: \"materiale-3\",\n                category: \"materiale\",\n                title: \"AI som samtalepartner\",\n                desc: \"Lad eleverne bruge generative sprogmodeller til at g\u00e5 i dialog med sv\u00e6re tekster, historiske personer eller naturfaglige begreber.\",\n                hint: \"Lad eleverne prompte en AI til at agere f.eks. 'Iltmolekylet' eller 'H.C. Andersen' og foretage et struktureret interview.\"\n            },\n            {\n                id: \"materiale-4\",\n                category: \"materiale\",\n                title: \"Scratch & Skoletube\",\n                desc: \"Brug visuel blokkodning eller medieproduktion til at lade eleverne formidle faget som et spil, en animation eller en dokumentar.\",\n                hint: \"I stedet for en traditionel stil, kan eleverne designe et interaktivt Scratch-spil om emnet.\"\n            },\n            {\n                id: \"materiale-5\",\n                category: \"materiale\",\n                title: \"Lyd, Podcasting & Soundscape\",\n                desc: \"Fokuser p\u00e5 det auditive. Lad eleverne optage interviews, redigere reallyde, eller producere et lyddrama, der forklarer emnet.\",\n                hint: \"At fjerne den visuelle dimension tvinger eleverne til at fokusere skarpt p\u00e5 det pr\u00e6cise mundtlige sprog og stemningsskabelse.\"\n            },\n\n            \/\/ Kategori: Elevrolle\n            {\n                id: \"elevrolle-1\",\n                category: \"elevrolle\",\n                title: \"Eksperimentatoren\",\n                desc: \"Eleven skal unders\u00f8ge f\u00e6nomener uden en kendt facitliste, opstille egne hypoteser og pille eksisterende systemer fra hinanden.\",\n                hint: \"Flyt l\u00e6reren v\u00e6k fra tavlen. Eleven er forskeren, der skal finde m\u00f8nstre og dokumentere processen fysisk eller digitalt.\"\n            },\n            {\n                id: \"elevrolle-2\",\n                category: \"elevrolle\",\n                title: \"Designeren\",\n                desc: \"Eleven skal identificere et reelt behov eller problem hos en m\u00e5lgruppe, id\u00e9generere bredt, bygge prototyper og teste dem.\",\n                hint: \"Dette styrker elevernes empati, kreativitet og projektledelsesevner i en iterativ proces.\"\n            },\n            {\n                id: \"elevrolle-3\",\n                category: \"elevrolle\",\n                title: \"Kritikeren\",\n                desc: \"Eleven skal unders\u00f8ge en teknologi, en kilde eller en samfundsm\u00e6ssig udfordring kritisk og designe etiske alternativer.\",\n                hint: \"Fremmer kritisk t\u00e6nkning. F.eks: 'Hvordan manipulerer sociale medier os, og hvordan designer vi et sundere medie?'\"\n            },\n            {\n                id: \"elevrolle-4\",\n                category: \"elevrolle\",\n                title: \"Spildesigneren\",\n                desc: \"Eleven skal oms\u00e6tte t\u00f8rt og tungt fagstof til regler, mekanikker og udfordringer i et analogt eller digitalt spil.\",\n                hint: \"At designe et spil til andre kr\u00e6ver, at man fuldst\u00e6ndig mestrer og strukturerer den underliggende faglige logik.\"\n            },\n\n            \/\/ Kategori: Modtager\n            {\n                id: \"modtager-1\",\n                category: \"modtager\",\n                title: \"Den lokale b\u00f8rnehave\",\n                desc: \"Formidlingen eller produktet skal designes specifikt til b\u00f8rn p\u00e5 4-5 \u00e5r og efterf\u00f8lgende testes i praksis p\u00e5 en lokal institution.\",\n                hint: \"Tvinger eleverne til at forenkle komplekse begreber og t\u00e6nke ekstremt meget i leg og sanselighed.\"\n            },\n            {\n                id: \"modtager-2\",\n                category: \"modtager\",\n                title: \"Skolens pedel eller ledelse\",\n                desc: \"Udfordringen skal tage udgangspunkt i et reelt problem p\u00e5 jeres egen skole, f.eks. indeklima, energiforbrug, affaldssortering eller uderum.\",\n                hint: \"Produktet skal pr\u00e6senteres som et professionelt l\u00f8sningsforslag til skolens beslutningstagere.\"\n            },\n            {\n                id: \"modtager-3\",\n                category: \"modtager\",\n                title: \"Biblioteket \/ Lokalsamfundet\",\n                desc: \"Eleverne skal skabe en interaktiv udstilling, en fysisk installation eller et informationsspil til det lokale bibliotek.\",\n                hint: \"Giver eleverne en stolthed og f\u00f8lelse af medborgerskab, n\u00e5r deres skolearbejde bliver synligt for byens borgere.\"\n            },\n            {\n                id: \"modtager-4\",\n                category: \"modtager\",\n                title: \"Parallelklassen \/ Kammeraterne\",\n                desc: \"Modtageren er eleverne fra naboklassen, som skal l\u00e6re om emnet udelukkende ved at interagere med det, jeres elever designer.\",\n                hint: \"Skaber en sund dynamik, hvor eleverne skiftevis er producenter og nysgerrige modtagere\/testere for hinanden.\"\n            }\n        ];\n\n        let cards = [...defaultCards];\n        let selectedCardsForPrint = new Set();\n        let currentFilter = 'all';\n\n        \/\/ Initialize App\n        window.addEventListener('DOMContentLoaded', () => {\n            loadCardsFromLocalStorage();\n            renderGallery();\n            lucide.createIcons();\n        });\n\n        function loadCardsFromLocalStorage() {\n            const saved = localStorage.getItem('didaktisk_custom_cards');\n            if (saved) {\n                const customCards = JSON.parse(saved);\n                cards = [...defaultCards, ...customCards];\n            }\n        }\n\n        \/\/ Render Card Gallery\n        function renderGallery() {\n            const grid = document.getElementById('card-grid');\n            grid.innerHTML = '';\n\n            const filtered = cards.filter(card => currentFilter === 'all' || card.category === currentFilter);\n\n            filtered.forEach(card => {\n                const isSelected = selectedCardsForPrint.has(card.id);\n                const cardEl = document.createElement('div');\n                cardEl.className = \"perspective h-[350px] w-full cursor-pointer\";\n                \n                \/\/ Color schemes based on category\n                let borderTheme = \"\";\n                let bgTheme = \"\";\n                let iconColor = \"\";\n                let badgeText = \"\";\n                let badgeClass = \"\";\n\n                if (card.category === 'hvad-hvis') {\n                    borderTheme = \"border-orange-500\";\n                    bgTheme = \"bg-orange-500\";\n                    iconColor = \"text-orange-500\";\n                    badgeText = \"Bensp\u00e6nd\";\n                    badgeClass = \"bg-orange-100 text-orange-800\";\n                } else if (card.category === 'materiale') {\n                    borderTheme = \"border-blue-500\";\n                    bgTheme = \"bg-blue-500\";\n                    iconColor = \"text-blue-500\";\n                    badgeText = \"Materiale\";\n                    badgeClass = \"bg-blue-100 text-blue-800\";\n                } else if (card.category === 'elevrolle') {\n                    borderTheme = \"border-emerald-500\";\n                    bgTheme = \"bg-emerald-500\";\n                    iconColor = \"text-emerald-500\";\n                    badgeText = \"Elevrolle\";\n                    badgeClass = \"bg-emerald-100 text-emerald-800\";\n                } else if (card.category === 'modtager') {\n                    borderTheme = \"border-purple-500\";\n                    bgTheme = \"bg-purple-500\";\n                    iconColor = \"text-purple-500\";\n                    badgeText = \"Modtager\";\n                    badgeClass = \"bg-purple-100 text-purple-800\";\n                }\n\n                cardEl.innerHTML = `\n                    <div id=\"flip-card-${card.id}\" class=\"relative w-full h-full preserve-3d transition-transform duration-500 ease-out\">\n                        \n                        <!-- CARD FRONT -->\n                        <div class=\"absolute inset-0 w-full h-full backface-hidden bg-white border-2 ${borderTheme} rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between\">\n                            <div>\n                                <div class=\"flex justify-between items-center mb-3\">\n                                    <span class=\"px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider ${badgeClass}\">${badgeText}<\/span>\n                                    <button onclick=\"toggleCardSelection(event, '${card.id}')\" class=\"p-1 rounded-full hover:bg-slate-100 transition-colors\">\n                                        <i data-lucide=\"${isSelected ? 'check-square' : 'square'}\" class=\"w-5 h-5 ${isSelected ? 'text-slate-900 fill-slate-900' : 'text-slate-300'}\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <h4 class=\"text-lg font-extrabold text-slate-800 mb-2 leading-snug\">${card.title}<\/h4>\n                                <p class=\"text-xs text-slate-600 font-medium leading-relaxed\">${card.desc}<\/p>\n                            <\/div>\n                            \n                            <div class=\"flex justify-between items-center pt-4 border-t border-slate-100 no-print\">\n                                <span onclick=\"flipCard('${card.id}')\" class=\"text-[10px] font-bold uppercase text-slate-400 hover:text-slate-800 transition-colors flex items-center gap-1\">\n                                    <i data-lucide=\"help-circle\" class=\"w-3.5 h-3.5\"><\/i> Vis didaktiske tips\n                                <\/span>\n                                ${card.id.startsWith('custom-') ? `\n                                    <button onclick=\"deleteCard(event, '${card.id}')\" class=\"p-1 text-slate-300 hover:text-red-500 transition-colors\">\n                                        <i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i>\n                                    <\/button>\n                                ` : ''}\n                            <\/div>\n                        <\/div>\n\n                        <!-- CARD BACK (Didactic Tips) -->\n                        <div onclick=\"flipCard('${card.id}')\" class=\"absolute inset-0 w-full h-full backface-hidden ${bgTheme} text-white rounded-2xl p-6 shadow-lg rotate-y-180 flex flex-col justify-between\">\n                            <div>\n                                <span class=\"text-[10px] font-black tracking-widest uppercase opacity-75\">Praksisfagligt tip<\/span>\n                                <h5 class=\"text-base font-black mt-1 mb-3\">Hvordan underst\u00f8ttes dette?<\/h5>\n                                <p class=\"text-xs font-medium leading-relaxed opacity-95\">${card.hint}<\/p>\n                            <\/div>\n                            <div class=\"flex justify-between items-center border-t border-white\/20 pt-3\">\n                                <span class=\"text-[10px] font-black tracking-wider uppercase opacity-75\">Klik for at vende kort<\/span>\n                                <i data-lucide=\"corner-down-right\" class=\"w-4 h-4 opacity-75\"><\/i>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n                `;\n                grid.appendChild(cardEl);\n            });\n\n            \/\/ Update lucide icons inside generated HTML\n            lucide.createIcons();\n            updateCounts();\n        }\n\n        \/\/ Count updates\n        function updateCounts() {\n            document.getElementById('gallery-count').innerText = cards.filter(card => currentFilter === 'all' || card.category === currentFilter).length;\n            document.getElementById('count-all').innerText = cards.length;\n            document.getElementById('count-hvad-hvis').innerText = cards.filter(c => c.category === 'hvad-hvis').length;\n            document.getElementById('count-materiale').innerText = cards.filter(c => c.category === 'materiale').length;\n            document.getElementById('count-elevrolle').innerText = cards.filter(c => c.category === 'elevrolle').length;\n            document.getElementById('count-modtager').innerText = cards.filter(c => c.category === 'modtager').length;\n            document.getElementById('print-count').innerText = selectedCardsForPrint.size;\n        }\n\n        \/\/ Card Flips\n        function flipCard(id) {\n            const cardInner = document.getElementById(`flip-card-${id}`);\n            if (cardInner.style.transform === 'rotateY(180deg)') {\n                cardInner.style.transform = 'rotateY(0deg)';\n            } else {\n                cardInner.style.transform = 'rotateY(180deg)';\n            }\n        }\n\n        \/\/ Select and select all cards\n        function toggleCardSelection(event, id) {\n            event.stopPropagation(); \/\/ Avoid flipping when clicking the checkbox\n            if (selectedCardsForPrint.has(id)) {\n                selectedCardsForPrint.delete(id);\n            } else {\n                selectedCardsForPrint.add(id);\n            }\n            renderGallery();\n        }\n\n        function selectAllCards(select) {\n            const filtered = cards.filter(card => currentFilter === 'all' || card.category === currentFilter);\n            filtered.forEach(card => {\n                if (select) {\n                    selectedCardsForPrint.add(card.id);\n                } else {\n                    selectedCardsForPrint.delete(card.id);\n                }\n            });\n            renderGallery();\n        }\n\n        \/\/ Filter selection\n        function setFilter(category) {\n            currentFilter = category;\n            \n            \/\/ Remove active style from all filter buttons\n            const filters = ['all', 'hvad-hvis', 'materiale', 'elevrolle', 'modtager'];\n            filters.forEach(f => {\n                const el = document.getElementById(`filter-${f}`);\n                el.classList.remove('bg-slate-100', 'text-slate-900', 'border-slate-200');\n                el.classList.add('hover:bg-slate-50', 'border-transparent');\n            });\n\n            \/\/ Set active class\n            const activeEl = document.getElementById(`filter-${category}`);\n            activeEl.classList.remove('hover:bg-slate-50', 'border-transparent');\n            activeEl.classList.add('bg-slate-100', 'text-slate-900', 'border-slate-200');\n\n            renderGallery();\n        }\n\n        \/\/ Drawer logic - Tr\u00e6k en fuld didaktisk menu\n        function drawFullMenu() {\n            const catHvadHvis = cards.filter(c => c.category === 'hvad-hvis');\n            const catMateriale = cards.filter(c => c.category === 'materiale');\n            const catElevrolle = cards.filter(c => c.category === 'elevrolle');\n            const catModtager = cards.filter(c => c.category === 'modtager');\n\n            if (catHvadHvis.length === 0 || catMateriale.length === 0 || catElevrolle.length === 0 || catModtager.length === 0) {\n                showToast(\"Der mangler kort i en eller flere kategorier for at lave en fuld menu.\", \"error\");\n                return;\n            }\n\n            const randHvadHvis = catHvadHvis[Math.floor(Math.random() * catHvadHvis.length)];\n            const randMateriale = catMateriale[Math.floor(Math.random() * catMateriale.length)];\n            const randElevrolle = catElevrolle[Math.floor(Math.random() * catElevrolle.length)];\n            const randModtager = catModtager[Math.floor(Math.random() * catModtager.length)];\n\n            \/\/ Update Combination Box text\n            document.getElementById('menu-hvad-hvis').innerText = randHvadHvis.title;\n            document.getElementById('menu-hvad-hvis').dataset.id = randHvadHvis.id;\n\n            document.getElementById('menu-materiale').innerText = randMateriale.title;\n            document.getElementById('menu-materiale').dataset.id = randMateriale.id;\n\n            document.getElementById('menu-elevrolle').innerText = randElevrolle.title;\n            document.getElementById('menu-elevrolle').dataset.id = randElevrolle.id;\n\n            document.getElementById('menu-modtager').innerText = randModtager.title;\n            document.getElementById('menu-modtager').dataset.id = randModtager.id;\n\n            \/\/ Show box\n            document.getElementById('combination-box').classList.remove('hidden');\n            \n            showToast(\"Ny didaktisk menu udtrukket!\", \"success\");\n        }\n\n        function drawSingleCategory(category) {\n            const possibleCards = cards.filter(c => c.category === category);\n            if (possibleCards.length === 0) {\n                showToast(\"Der er ingen kort i denne kategori.\", \"error\");\n                return;\n            }\n\n            const randCard = possibleCards[Math.floor(Math.random() * possibleCards.length)];\n            \n            \/\/ Show or update combination box focusing only on that slot\n            document.getElementById('combination-box').classList.remove('hidden');\n\n            const slotMap = {\n                'hvad-hvis': 'menu-hvad-hvis',\n                'materiale': 'menu-materiale',\n                'elevrolle': 'menu-elevrolle',\n                'modtager': 'menu-modtager'\n            };\n\n            const targetId = slotMap[category];\n            document.getElementById(targetId).innerText = randCard.title;\n            document.getElementById(targetId).dataset.id = randCard.id;\n\n            showToast(`Udtrak nyt kort i: ${category.replace('-', ' ')}`, \"success\");\n        }\n\n        function clearCombination() {\n            document.getElementById('combination-box').classList.add('hidden');\n        }\n\n        function selectAllMenuCards() {\n            const slots = ['menu-hvad-hvis', 'menu-materiale', 'menu-elevrolle', 'menu-modtager'];\n            let countAdded = 0;\n            slots.forEach(slotId => {\n                const cardId = document.getElementById(slotId).dataset.id;\n                if (cardId) {\n                    selectedCardsForPrint.add(cardId);\n                    countAdded++;\n                }\n            });\n            if (countAdded > 0) {\n                showToast(`${countAdded} kort tilf\u00f8jet til print-k\u00f8en!`, \"success\");\n                renderGallery();\n            }\n        }\n\n        \/\/ Custom card creation modal\n        function openCustomCardModal() {\n            document.getElementById('custom-card-modal').classList.remove('hidden');\n            document.getElementById('custom-card-modal').classList.add('flex');\n        }\n\n        function closeCustomCardModal() {\n            document.getElementById('custom-card-modal').classList.remove('flex');\n            document.getElementById('custom-card-modal').classList.add('hidden');\n            \/\/ Clean values\n            document.getElementById('modal-title').value = '';\n            document.getElementById('modal-desc').value = '';\n            document.getElementById('modal-hint').value = '';\n        }\n\n        function saveCustomCard() {\n            const category = document.getElementById('modal-category').value;\n            const title = document.getElementById('modal-title').value.trim();\n            const desc = document.getElementById('modal-desc').value.trim();\n            const hint = document.getElementById('modal-hint').value.trim();\n\n            if (!title || !desc) {\n                showToast(\"Udfyld venligst mindst titel og didaktisk beskrivelse.\", \"error\");\n                return;\n            }\n\n            const newCard = {\n                id: `custom-${Date.now()}`,\n                category,\n                title,\n                desc,\n                hint: hint || \"Overvej hvordan dette kort rykker elevens position og materialets agens.\"\n            };\n\n            \/\/ Read existing customs\n            const saved = localStorage.getItem('didaktisk_custom_cards');\n            const customList = saved ? JSON.parse(saved) : [];\n            customList.push(newCard);\n\n            localStorage.setItem('didaktisk_custom_cards', JSON.stringify(customList));\n\n            \/\/ Refresh state\n            loadCardsFromLocalStorage();\n            renderGallery();\n            closeCustomCardModal();\n            showToast(\"Dit eget kort er oprettet og klar!\", \"success\");\n        }\n\n        function deleteCard(event, id) {\n            event.stopPropagation();\n            if (!id.startsWith('custom-')) return;\n\n            const saved = localStorage.getItem('didaktisk_custom_cards');\n            if (saved) {\n                let customList = JSON.parse(saved);\n                customList = customList.filter(c => c.id !== id);\n                localStorage.setItem('didaktisk_custom_cards', JSON.stringify(customList));\n            }\n\n            selectedCardsForPrint.delete(id);\n            loadCardsFromLocalStorage();\n            renderGallery();\n            showToast(\"Kortet er slettet.\", \"success\");\n        }\n\n        \/\/ Dynamic Print Logic\n        function printSelectedCards() {\n            if (selectedCardsForPrint.size === 0) {\n                showToast(\"V\u00e6lg mindst \u00e9t kort i galleriet f\u00f8rst for at kunne printe.\", \"error\");\n                return;\n            }\n\n            const printArea = document.getElementById('print-area');\n            printArea.innerHTML = ''; \/\/ Clear\n\n            selectedCardsForPrint.forEach(cardId => {\n                const card = cards.find(c => c.id === cardId);\n                if (card) {\n                    let categoryColor = \"\";\n                    let categoryLabel = \"\";\n\n                    if (card.category === 'hvad-hvis') {\n                        categoryColor = \"border-orange-500 text-orange-600\";\n                        categoryLabel = \"bensp\u00e6nd \u2014 hvad hvis...?\";\n                    } else if (card.category === 'materiale') {\n                        categoryColor = \"border-blue-500 text-blue-600\";\n                        categoryLabel = \"materiale & teknologi\";\n                    } else if (card.category === 'elevrolle') {\n                        categoryColor = \"border-emerald-500 text-emerald-600\";\n                        categoryLabel = \"ny elevrolle\";\n                    } else if (card.category === 'modtager') {\n                        categoryColor = \"border-purple-500 text-purple-600\";\n                        categoryLabel = \"modtager & scenarie\";\n                    }\n\n                    const cardHtml = `\n                        <div class=\"print-card flex flex-col justify-between border-2 rounded-2xl p-6 bg-white min-h-[350px]\">\n                            <div>\n                                <div class=\"flex justify-between items-center mb-4 pb-2 border-b border-slate-100\">\n                                    <span class=\"text-[10px] font-black uppercase tracking-widest ${categoryColor}\">${categoryLabel}<\/span>\n                                    <span class=\"text-[9px] text-slate-400 font-bold\">Didaktisk Overs\u00e6tter<\/span>\n                                <\/div>\n                                <h3 class=\"text-xl font-extrabold text-slate-900 mb-3\">${card.title}<\/h3>\n                                <p class=\"text-xs text-slate-800 leading-relaxed\">${card.desc}<\/p>\n                            <\/div>\n                            <div class=\"pt-4 border-t border-dashed border-slate-200\">\n                                <span class=\"text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-1\">Didaktisk r\u00e5d & tip:<\/span>\n                                <p class=\"text-[11px] text-slate-600 italic leading-snug\">${card.hint}<\/p>\n                            <\/div>\n                        <\/div>\n                    `;\n                    printArea.innerHTML += cardHtml;\n                }\n            });\n\n            \/\/ Trigger browser print\n            window.print();\n        }\n\n        \/\/ Custom Toast system\n        function showToast(message, type = 'success') {\n            const container = document.getElementById('toast-container');\n            const toast = document.createElement('div');\n            toast.className = `p-4 rounded-xl text-xs font-bold text-white shadow-lg pointer-events-auto flex items-center gap-2 transform transition-all translate-y-2 opacity-0 duration-300`;\n            \n            if (type === 'success') {\n                toast.classList.add('bg-slate-900', 'border', 'border-slate-800');\n                toast.innerHTML = `<i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400\"><\/i> ${message}`;\n            } else {\n                toast.classList.add('bg-red-600');\n                toast.innerHTML = `<i data-lucide=\"alert-circle\" class=\"w-4 h-4\"><\/i> ${message}`;\n            }\n\n            container.appendChild(toast);\n            lucide.createIcons();\n\n            \/\/ Trigger animation\n            setTimeout(() => {\n                toast.classList.remove('translate-y-2', 'opacity-0');\n            }, 10);\n\n            \/\/ Hide and remove\n            setTimeout(() => {\n                toast.classList.add('translate-y-2', 'opacity-0');\n                setTimeout(() => {\n                    toast.remove();\n                }, 300);\n            }, 3000);\n        }\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>Reflect Projektet begyndte med en bred interesse for forholdet mellem digitale l\u00e6remidler, makerspace og praksisfaglighed, men er undervejs blevet sk\u00e6rpet til et mere pr\u00e6cist designproblem: Hvordan kan l\u00e6rer og it-vejleder sammen overs\u00e6tte eksisterende undervisningsforl\u00f8b til mere praksisfaglige, skabende og elevaktive aktiviteter? I den sidste fase af designprocessen samler jeg tr\u00e5dene fra projektet og vurderer, hvad [&hellip;]<\/p>\n","protected":false},"author":84,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-396","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/pages\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":19,"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":895,"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/pages\/396\/revisions\/895"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/404-team-not-found\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}