{"id":2106,"date":"2026-08-29T13:00:39","date_gmt":"2026-08-29T13:00:39","guid":{"rendered":"https:\/\/programmering-for-alle.dk\/?page_id=2106"},"modified":"2026-08-30T13:09:43","modified_gmt":"2026-08-30T13:09:43","slug":"spil-planen","status":"publish","type":"page","link":"https:\/\/programmering-for-alle.dk\/index.php\/spil-planen\/","title":{"rendered":"Spil-planen"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Planl\u00e6g dit spil<\/title>\n  <style>\n    :root {\n      font-family: 'Segoe UI', system-ui, sans-serif;\n      color: #1f2937;\n      background: #f0f4ff;\n    }\n    * { box-sizing: border-box; }\n    body {\n      max-width: 800px;\n      margin: 0 auto;\n      padding: 20px 16px 50px;\n      line-height: 1.6;\n    }\n    header {\n      text-align: center;\n      margin-bottom: 24px;\n      padding-bottom: 16px;\n      border-bottom: 3px solid #4f46e5;\n    }\n    header h1 { font-size: 1.7em; color: #4f46e5; margin: 0 0 6px; }\n    header p { font-size: 1em; color: #6b7280; margin: 2px 0; }\n    .toolbar {\n      position: sticky; top: 0; background: #f0f4ff; padding: 8px 0;\n      z-index: 10; display: flex; gap: 8px; justify-content: center;\n      flex-wrap: wrap; border-bottom: 2px solid #c7d2fe; margin-bottom: 16px;\n    }\n    .toolbar button {\n      background: #40B1E0; color: #fff; border: none; padding: 8px 16px;\n      border-radius: 16px; font-size: 0.88em; font-family: inherit;\n      cursor: pointer; font-weight: bold; transition: background 0.2s;\n    }\n    .toolbar button:hover { background: #2d97c2; }\n    .toolbar button.sec { background: #FECD09; color: #1f2937; }\n    .toolbar button.sec:hover { background: #e0b808; }\n    .toolbar button.save { background: #37B63A; }\n    .toolbar button.save:hover { background: #2d9a31; }\n    .toolbar button.load { background: #8647FE; }\n    .toolbar button.load:hover { background: #6d36d0; }\n    .save-status {\n      display: inline-flex; align-items: center; gap: 4px;\n      font-size: 0.78em; color: #37B63A; font-weight: bold;\n      padding: 6px 10px; opacity: 0; transition: opacity 0.3s;\n    }\n    .save-status.visible { opacity: 1; }\n    section {\n      background: #fff; border-radius: 12px; padding: 18px 22px;\n      margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);\n      border-left: 5px solid #4f46e5;\n    }\n    .s2 { border-left-color: #0ea5e9; }\n    .s3 { border-left-color: #f59e0b; }\n    .s4 { border-left-color: #10b981; }\n    .s5 { border-left-color: #8b5cf6; }\n    .s6 { border-left-color: #ec4899; }\n    .s7 { border-left-color: #ef4444; }\n    h2 { font-size: 1.2em; margin: 0 0 6px; color: #4f46e5; }\n    .s2 h2 { color: #0284c7; }\n    .s3 h2 { color: #b45309; }\n    .s4 h2 { color: #047857; }\n    .s5 h2 { color: #6d28d9; }\n    .s6 h2 { color: #be185d; }\n    .s7 h2 { color: #b91c1c; }\n    .extra-tag {\n      display: inline-block; background: #fce7f3; color: #be185d;\n      font-size: 0.75em; font-weight: bold; padding: 2px 10px;\n      border-radius: 10px; margin-left: 8px; vertical-align: middle;\n    }\n    p { margin: 6px 0; font-size: 0.92em; }\n    .field {\n      display: flex; align-items: flex-start; gap: 8px;\n      margin: 8px 0; flex-wrap: wrap;\n    }\n    .field label {\n      font-weight: bold; min-width: 160px; color: #374151;\n      font-size: 0.88em; padding-top: 7px;\n    }\n    input[type=\"text\"], textarea {\n      flex: 1; min-width: 200px; padding: 7px 10px;\n      border: 2px solid #c7d2fe; border-radius: 8px;\n      font-family: inherit; font-size: 0.9em; background: #f8faff;\n      color: #1f2937; transition: border-color 0.2s;\n    }\n    input[type=\"text\"]:focus, textarea:focus {\n      outline: none; border-color: #4f46e5;\n      box-shadow: 0 0 0 3px rgba(79,70,229,0.15);\n    }\n    textarea { resize: vertical; min-height: 50px; }\n    .sprite-block {\n      background: #f0fdf4; border: 2px solid #86efac; border-radius: 10px;\n      padding: 12px 16px; margin: 10px 0;\n    }\n    .sprite-block h3 {\n      font-size: 1em; margin: 0 0 8px; color: #047857;\n    }\n    .source-row {\n      display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0;\n    }\n    .source-pill {\n      display: inline-flex; align-items: center; gap: 5px;\n      background: #e0e7ff; border: 2px solid transparent;\n      border-radius: 20px; padding: 5px 12px; font-size: 0.82em;\n      cursor: pointer; font-family: inherit; color: #374151;\n      transition: all 0.15s;\n    }\n    .source-pill:hover { border-color: #818cf8; }\n    .source-pill.active {\n      background: #4f46e5; color: #fff; border-color: #4338ca;\n    }\n    .source-pill a {\n      color: inherit;\n      text-decoration: underline;\n      text-underline-offset: 2px;\n    }\n    .source-pill.active a { color: #fff; }\n    .source-pill input { display: none; }\n    .level-block {\n      background: #faf5ff; border: 2px solid #d8b4fe; border-radius: 10px;\n      padding: 10px 14px; margin: 8px 0;\n    }\n    .level-block h3 { font-size: 0.95em; margin: 0 0 6px; color: #6b28d9; }\n    .hint {\n      background: #fef9c3; border-radius: 8px; padding: 6px 12px;\n      margin: 8px 0; font-size: 0.85em; border-left: 3px solid #eab308;\n    }\n    .hint::before { content: \"\ud83d\udca1 \"; }\n    .check-row {\n      display: flex; align-items: center; gap: 8px;\n      margin: 5px 0; padding: 5px 8px; border-radius: 6px;\n      transition: background 0.15s;\n    }\n    .check-row:hover { background: #e0f2fe; }\n    .check-row input[type=\"checkbox\"] {\n      width: 20px; height: 20px; cursor: pointer;\n      accent-color: #4f46e5; flex-shrink: 0;\n    }\n    .check-row label { font-size: 0.88em; cursor: pointer; color: #374151; }\n    .baner-table { width: 100%; border-collapse: collapse; margin: 8px 0; }\n    .baner-table th {\n      background: #4f46e5; color: #fff; padding: 6px 8px;\n      text-align: left; font-size: 0.8em; border-radius: 6px 6px 0 0;\n    }\n    .baner-table td { padding: 3px; }\n    .baner-table input {\n      width: 100%; border: 2px solid #ddd6fe; border-radius: 6px;\n      padding: 5px 7px; font-family: inherit; font-size: 0.85em;\n      background: #faf5ff;\n    }\n    .baner-table input:focus { outline: none; border-color: #8b5cf6; }\n    footer {\n      text-align: center; margin-top: 24px; padding: 16px;\n      background: #e0e7ff; border-radius: 12px; color: #3730a3;\n    }\n    @media print {\n      .toolbar { display: none; }\n      body { background: #fff; padding: 0; }\n      section { box-shadow: none; page-break-inside: avoid; }\n      input, textarea { border: 1px solid #d1d5db; background: #fff; }\n      .source-pill { border: 1px solid #d1d5db; }\n    }\n  <\/style>\n\n\n\n  <div class=\"toolbar\">\n    <button class=\"save\" onclick=\"saveForm()\">\ud83d\udcbe Gem min spilplan<\/button>\n    <button class=\"load\" onclick=\"document.getElementById('file-input').click()\">\ud83d\udcc2 Hent spilplan<\/button>\n    <input type=\"file\" id=\"file-input\" accept=\".html,.htm\" style=\"display:none;\" onchange=\"loadForm(event)\">\n    <button onclick=\"window.print()\">\ud83d\udda8\ufe0f Udskriv \/ Gem som PDF<\/button>\n    <button class=\"sec\" onclick=\"clearAll()\">\ud83d\uddd1\ufe0f Slet alt<\/button>\n    <span class=\"save-status\" id=\"save-status\">\u2713 Gemt<\/span>\n  <\/div>\n\n  <header>\n    <h1>\ud83c\udfae Planl\u00e6g dit spil<\/h1>\n    <p>Du kan spare meget tid ved at t\u00e6nke over dit spil \u2013 f\u00f8r du begynder at kode det. Hvis du gemmer din spilplan (gr\u00f8n knap), kan du \u00e5bne den igen (lilla knap) og redigere i planen. N\u00e6ste gang du gemmer det, gemmer det i en ny fil.<\/p>\n  <\/header>\n\n  <!-- 1. Beskriv spillet -->\n  <section>\n    <h2>1. \ud83d\uddbc\ufe0f Beskriv spillet<\/h2>\n    <p>Hvad handler spillet om? Beskriv rammerne: hvilken baggrund er der, og hvilke sprites er med?<\/p>\n    <div class=\"hint\">T\u00e6nk p\u00e5 det som en filmplakat \u2013 hvad ser man, n\u00e5r spillet starter?<\/div>\n    <div class=\"field\">\n      <label>Hvad handler spillet om?<\/label>\n      <textarea placeholder=\"F.eks: Et rumv\u00e6sen der hopper rundt p\u00e5 planeter og samler stjerner...\"><\/textarea>\n    <\/div>\n    <div class=\"field\">\n      <label>Baggrund(e):<\/label>\n      <textarea placeholder=\"F.eks: M\u00f8rk himmel med stjerner, planeter i forskellige farver...\"><\/textarea>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvilke sprites er med?<\/label>\n      <textarea placeholder=\"F.eks: Rumv\u00e6sen (spiller), asteroider (forhindringer), stjerner (samleobjekter)...\"><\/textarea>\n    <\/div>\n  <\/section>\n\n  <!-- 2. Form\u00e5l -->\n  <section class=\"s2\">\n    <h2>2. \ud83c\udfaf Form\u00e5let med spillet<\/h2>\n    <p>Hvordan spiller man spillet? Og hvorn\u00e5r vinder eller taber man?<\/p>\n    <div class=\"field\">\n      <label>Hvordan spiller man?<\/label>\n      <textarea placeholder=\"F.eks: Man styrer rumv\u00e6snet med piletasterne og hopper med mellemrum...\"><\/textarea>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvordan vinder man?<\/label>\n      <input type=\"text\" placeholder=\"F.eks: N\u00e5r man har samlet 10 stjerner\">\n    <\/div>\n    <div class=\"field\">\n      <label>Hvordan taber man?<\/label>\n      <input type=\"text\" placeholder=\"F.eks: N\u00e5r man mister alle sine liv eller rammer en asteroide\">\n    <\/div>\n  <\/section>\n\n  <!-- 3. Spilleregler -->\n  <section class=\"s3\">\n    <h2>3. \ud83d\udcdc Spilleregler<\/h2>\n    <p>Hvilke spilelementer skal der v\u00e6re med, og hvad skal de indeholde?<\/p>\n    <div class=\"hint\">V\u00e6lg de elementer, der skal med i dit spil, og udfyld detaljerne.<\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"r-points\"><label for=\"r-points\"><strong>Point<\/strong> \u2013 spilleren skal samle point<\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad giver point, og hvor meget?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. 1 stjerne = 10 point, fjende = 50 point\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"r-lives\"><label for=\"r-lives\"><strong>Liv<\/strong> \u2013 spilleren har et antal liv<\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvor mange liv starter man med?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. 3 liv\">\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad koster et liv?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. at r\u00f8re en asteroide eller falde ned\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"r-timer\"><label for=\"r-timer\"><strong>Nedt\u00e6lling \/ timer<\/strong> \u2013 der er en tidsgr\u00e6nse<\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvor lang tid har man?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. 60 sekunder pr. bane\">\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad sker der, n\u00e5r tiden udl\u00f8ber?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. man taber og skal starte forfra\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"r-highscore\"><label for=\"r-highscore\"><strong>Highscore<\/strong> \u2013 den bedste score gemmes<\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvorn\u00e5r skal man kunne se highscoren?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. vist p\u00e5 sk\u00e6rmen n\u00e5r spillet er slut\">\n    <\/div>\n  <\/section>\n\n  <!-- 4. Sprites -->\n  <section class=\"s4\">\n    <h2>4. \ud83d\udc31 Sprites<\/h2>\n    <p>Hvilke sprites er med i spillet? Hvor finder du dem? Og hvad er deres rolle?<\/p>\n    <div class=\"hint\">\n      Sprites kan findes 3 steder: Scratch&#8217;s indbyggede bibliotek, Pixabay.com, eller du tegner dem selv.\n    <\/div>\n    <p style=\"font-size:0.85em;color:#6b7280;\">\n      Klik p\u00e5 en kilde for at v\u00e6lge den:\n    <\/p>\n\n    <div class=\"sprite-block\">\n      <h3>Sprite 1: Hovedfiguren (spilleren)<\/h3>\n      <div class=\"field\">\n        <label>Navn \/ beskrivelse:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Rumv\u00e6sen, kat, robot...\">\n      <\/div>\n      <div class=\"field\">\n        <label>Rolle i spillet:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Spilleren styrer denne sprite\">\n      <\/div>\n      <div class=\"field\">\n        <label>Hvor findes den?<\/label>\n      <\/div>\n      <div class=\"source-row\">\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src1\" value=\"scratch\">\ud83d\udcda Scratch-biblioteket<\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src1\" value=\"pixabay\">\ud83c\udf10 <a href=\"https:\/\/pixabay.com\/da\/\" target=\"_blank\" rel=\"noopener\">Pixabay.com<\/a><\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src1\" value=\"self\">\u270f\ufe0f Tegner selv<\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"sprite-block\">\n      <h3>Sprite 2: Samleobjekt \/ m\u00e5l<\/h3>\n      <div class=\"field\">\n        <label>Navn \/ beskrivelse:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Stjerne, m\u00f8nt, \u00e6ble...\">\n      <\/div>\n      <div class=\"field\">\n        <label>Rolle i spillet:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Spilleren skal samle disse for point\">\n      <\/div>\n      <div class=\"field\">\n        <label>Hvor findes den?<\/label>\n      <\/div>\n      <div class=\"source-row\">\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src2\" value=\"scratch\">\ud83d\udcda Scratch-biblioteket<\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src2\" value=\"pixabay\">\ud83c\udf10 <a href=\"https:\/\/pixabay.com\/da\/\" target=\"_blank\" rel=\"noopener\">Pixabay.com<\/a><\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src2\" value=\"self\">\u270f\ufe0f Tegner selv<\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"sprite-block\">\n      <h3>Sprite 3: Forhindring \/ fjende (valgfrit)<\/h3>\n      <div class=\"field\">\n        <label>Navn \/ beskrivelse:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Asteroide, edderkop, ildkugle...\">\n      <\/div>\n      <div class=\"field\">\n        <label>Rolle i spillet:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Spilleren skal undg\u00e5 disse\">\n      <\/div>\n      <div class=\"field\">\n        <label>Hvor findes den?<\/label>\n      <\/div>\n      <div class=\"source-row\">\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src3\" value=\"scratch\">\ud83d\udcda Scratch-biblioteket<\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src3\" value=\"pixabay\">\ud83c\udf10 <a href=\"https:\/\/pixabay.com\/da\/\" target=\"_blank\" rel=\"noopener\">Pixabay.com<\/a><\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src3\" value=\"self\">\u270f\ufe0f Tegner selv<\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"sprite-block\">\n      <h3>Sprite 4: Ekstra (valgfrit)<\/h3>\n      <div class=\"field\">\n        <label>Navn \/ beskrivelse:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Boss, power-up, bonus-objekt...\">\n      <\/div>\n      <div class=\"field\">\n        <label>Rolle i spillet:<\/label>\n        <input type=\"text\" placeholder=\"F.eks. Besejres til sidst for at vinde\">\n      <\/div>\n      <div class=\"field\">\n        <label>Hvor findes den?<\/label>\n      <\/div>\n      <div class=\"source-row\">\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src4\" value=\"scratch\">\ud83d\udcda Scratch-biblioteket<\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src4\" value=\"pixabay\">\ud83c\udf10 <a href=\"https:\/\/pixabay.com\/da\/\" target=\"_blank\" rel=\"noopener\">Pixabay.com<\/a><\/label>\n        <label class=\"source-pill\"><input type=\"radio\" name=\"src4\" value=\"self\">\u270f\ufe0f Tegner selv<\/label>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 5. Levels -->\n  <section class=\"s5\">\n    <h2>5. \ud83d\uddfa\ufe0f Levels<\/h2>\n    <p>Er der flere levels i spillet? Hvor mange, og hvad skal der ske i hvert level?<\/p>\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"multi-level\"><label for=\"multi-level\"><strong>Ja, mit spil har flere levels<\/strong><\/label>\n    <\/div>\n    <div class=\"hint\">Begynder med \u00e9t level? S\u00e5 er det ogs\u00e5 helt fint \u2013 mange gode spil har kun \u00e9n bane!<\/div>\n    <table class=\"baner-table\">\n      <tbody><tr>\n        <th>Level<\/th>\n        <th>Hvad sker der?<\/th>\n        <th>Bliver det sv\u00e6rere?<\/th>\n      <\/tr>\n      <tr>\n        <td><input type=\"text\" value=\"1\" style=\"width:50px;\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. L\u00e6re at spille \u2013 f\u00e5 stjerner\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. Nemt\"><\/td>\n      <\/tr>\n      <tr>\n        <td><input type=\"text\" value=\"2\" style=\"width:50px;\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. Flere asteroider kommer\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. Sv\u00e6rere\"><\/td>\n      <\/tr>\n      <tr>\n        <td><input type=\"text\" value=\"3\" style=\"width:50px;\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. Boss-kamp til sidst\"><\/td>\n        <td><input type=\"text\" placeholder=\"F.eks. Sv\u00e6rest\"><\/td>\n      <\/tr>\n    <\/tbody><\/table>\n    <div class=\"field\">\n      <label>Hvad sker der mellem levels?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. 'Level klar!' sk\u00e6rm, s\u00e5 n\u00e6ste bane starter\">\n    <\/div>\n  <\/section>\n\n  <!-- 6. Ekstra: Lyd -->\n  <section class=\"s6\">\n    <h2>6. \ud83d\udd0a Lyd og musik<\/h2>\n    <p>Hvilke lyde skal der v\u00e6re med, og hvor finder du dem?<\/p>\n    <div class=\"hint\">\n      Lyde kan findes p\u00e5 Pixabay.com eller de kan laves selv (f.eks. optag dem med mikrofon eller brug Scratch&#8217;s lydv\u00e6rkt\u00f8j).\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"snd-music\"><label for=\"snd-music\"><strong>Baggrundsmusik<\/strong><\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvilken musik?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. Rolig rum-musik i baggrunden\">\n    <\/div>\n    <div class=\"field\">\n      <label>Hvor findes den?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. Pixabay.com, laver selv eller Scratch-biblioteket\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"snd-jump\"><label for=\"snd-jump\"><strong>Effektlyd 1<\/strong><\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad er det for en lyd?<\/label>\n      <input type=\"text\" placeholder=\"Skriv selv: f.eks. hop, samle, tabe, vinde...\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"snd-collect\"><label for=\"snd-collect\"><strong>Effektlyd 2<\/strong><\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad er det for en lyd?<\/label>\n      <input type=\"text\" placeholder=\"Skriv selv: f.eks. hop, samle, tabe, vinde...\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"snd-lose\"><label for=\"snd-lose\"><strong>Effektlyd 3<\/strong><\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad er det for en lyd?<\/label>\n      <input type=\"text\" placeholder=\"Skriv selv: f.eks. hop, samle, tabe, vinde...\">\n    <\/div>\n\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"snd-win\"><label for=\"snd-win\"><strong>Effektlyd 4<\/strong><\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad er det for en lyd?<\/label>\n      <input type=\"text\" placeholder=\"Skriv selv: f.eks. hop, samle, tabe, vinde...\">\n    <\/div>\n\n    <div class=\"field\">\n      <label>Hvor findes effektlyde?<\/label>\n    <\/div>\n    <div class=\"source-row\">\n      <label class=\"source-pill\"><input type=\"radio\" name=\"sfxsrc\" value=\"pixabay\">\ud83c\udf10 <a href=\"https:\/\/pixabay.com\/da\/\" target=\"_blank\" rel=\"noopener\">Pixabay.com<\/a><\/label>\n      <label class=\"source-pill\"><input type=\"radio\" name=\"sfxsrc\" value=\"self\">\ud83c\udfa4 Laver selv<\/label>\n      <label class=\"source-pill\"><input type=\"radio\" name=\"sfxsrc\" value=\"scratch\">\ud83d\udcda Scratch-biblioteket<\/label>\n    <\/div>\n  <\/section>\n\n  <!-- 7. Ekstra: Baggrundshistorie -->\n  <section class=\"s7\">\n    <h2>7. \ud83d\udcd6 Baggrundshistorie<\/h2>\n    <p>Skal der v\u00e6re en indledende historie til spillet? En lille fort\u00e6lling, der forklarer hvorfor spillet foreg\u00e5r?<\/p>\n    <div class=\"check-row\">\n      <input type=\"checkbox\" id=\"has-story\"><label for=\"has-story\"><strong>Ja, jeg vil have en indledende historie<\/strong><\/label>\n    <\/div>\n    <div class=\"hint\">En god historie g\u00f8r spillet mere sp\u00e6ndende! F.eks: &#8220;Rumv\u00e6snet Zobo har mistet sine stjerner \u2013 kan du hj\u00e6lpe ham med at samle dem alle?&#8221;.<\/div>\n    <div class=\"field\">\n      <label>Hvordan starter historien?<\/label>\n      <textarea placeholder=\"F.eks: For l\u00e6nge siden, p\u00e5 en fjern planet, boede en lille robot ved navn Bolt...\"><\/textarea>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvad er opdraget \/ missionen?<\/label>\n      <textarea placeholder=\"F.eks: Bolt skal samle alle krystallerne for at redde sin planet fra m\u00f8rket...\"><\/textarea>\n    <\/div>\n    <div class=\"field\">\n      <label>Hvordan vises historien i spillet?<\/label>\n      <input type=\"text\" placeholder=\"F.eks. Som tekst p\u00e5 f\u00f8rste sk\u00e6rm, f\u00f8r spillet starter\">\n    <\/div>\n  <\/section>\n\n  <footer>\n    <p style=\"font-size:1.05em;margin:0 0 6px;\">\ud83d\ude80 Nu er du klar til at bygge dit spil i Scratch!<\/p>\n    <p style=\"margin:0;font-size:0.85em;\">\n      Start med det vigtigste \u2013 s\u00e5 kan du altid tilf\u00f8je ekstra-ting senere.\n    <\/p><br>\n<p style=\"margin:0;font-size:0.85em;\">\n      Denne spilplan er udviklet i samarbejde med Vibe, en AI-model fra Mistral i Frankrig.\n    <\/p>\n  <\/footer>\n\n  <script>\n    var STORAGE_KEY = 'spilplan-data-v1';\n    var saveTimer = null;\n\n    \/\/ --- Highlight selected source pills ---\n    document.querySelectorAll('.source-pill input').forEach(function(input) {\n      input.addEventListener('change', function() {\n        var name = this.name;\n        document.querySelectorAll('.source-pill input[name=\"' + name + '\"]').forEach(function(other) {\n          other.closest('.source-pill').classList.remove('active');\n        });\n        this.closest('.source-pill').classList.add('active');\n        autoSave();\n      });\n    });\n\n    \/\/ --- Collect all form data into a JSON object ---\n    function collectData() {\n      var data = {};\n      document.querySelectorAll('input[type=\"text\"]').forEach(function(el, i) {\n        data['text_' + i] = el.value;\n      });\n      document.querySelectorAll('textarea').forEach(function(el, i) {\n        data['ta_' + i] = el.value;\n      });\n      document.querySelectorAll('input[type=\"checkbox\"]').forEach(function(el, i) {\n        data['cb_' + i] = el.checked;\n      });\n      document.querySelectorAll('input[type=\"radio\"]').forEach(function(el, i) {\n        data['radio_' + i] = el.checked;\n      });\n      return data;\n    }\n\n    \/\/ --- Restore form data from a JSON object ---\n    function restoreData(data) {\n      var textEls = document.querySelectorAll('input[type=\"text\"]');\n      var taEls = document.querySelectorAll('textarea');\n      var cbEls = document.querySelectorAll('input[type=\"checkbox\"]');\n      var radioEls = document.querySelectorAll('input[type=\"radio\"]');\n      Object.keys(data).forEach(function(key) {\n        if (key.indexOf('text_') === 0 && textEls[parseInt(key.slice(5))]) {\n          textEls[parseInt(key.slice(5))].value = data[key];\n        } else if (key.indexOf('ta_') === 0 && taEls[parseInt(key.slice(3))]) {\n          taEls[parseInt(key.slice(3))].value = data[key];\n        } else if (key.indexOf('cb_') === 0 && cbEls[parseInt(key.slice(3))]) {\n          cbEls[parseInt(key.slice(3))].checked = data[key];\n        } else if (key.indexOf('radio_') === 0 && radioEls[parseInt(key.slice(6))]) {\n          radioEls[parseInt(key.slice(6))].checked = data[key];\n          if (data[key]) radioEls[parseInt(key.slice(6))].closest('.source-pill').classList.add('active');\n        }\n      });\n    }\n\n    \/\/ --- Auto-save to browser localStorage ---\n    function autoSave() {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(collectData()));\n        showSaveStatus();\n      } catch(e) {}\n    }\n\n    \/\/ --- Auto-load from browser localStorage on page load ---\n    function autoLoad() {\n      try {\n        var saved = localStorage.getItem(STORAGE_KEY);\n        if (saved) restoreData(JSON.parse(saved));\n      } catch(e) {}\n    }\n\n    \/\/ --- Show \"Gemt\" status indicator briefly ---\n    function showSaveStatus() {\n      var status = document.getElementById('save-status');\n      status.classList.add('visible');\n      clearTimeout(saveTimer);\n      saveTimer = setTimeout(function() { status.classList.remove('visible'); }, 1500);\n    }\n\n    \/\/ --- Auto-resize when embedded in iframe (e.g. WordPress) ---\n    function sendResize() {\n      if (window.parent !== window) {\n        window.parent.postMessage({ type: 'spilplan-resize', height: document.body.scrollHeight }, '*');\n      }\n    }\n\n    \/\/ --- Save filled form as downloadable HTML file ---\n    function saveForm() {\n      autoSave();\n      var clone = document.documentElement.cloneNode(true);\n\n      var origText = document.querySelectorAll('input[type=\"text\"]');\n      var cloneText = clone.querySelectorAll('input[type=\"text\"]');\n      origText.forEach(function(el, i) { cloneText[i].setAttribute('value', el.value); });\n\n      var origTA = document.querySelectorAll('textarea');\n      var cloneTA = clone.querySelectorAll('textarea');\n      origTA.forEach(function(el, i) { cloneTA[i].textContent = el.value; });\n\n      var origCB = document.querySelectorAll('input[type=\"checkbox\"]');\n      var cloneCB = clone.querySelectorAll('input[type=\"checkbox\"]');\n      origCB.forEach(function(el, i) {\n        if (el.checked) cloneCB[i].setAttribute('checked', 'checked');\n        else cloneCB[i].removeAttribute('checked');\n      });\n\n      var origRadio = document.querySelectorAll('input[type=\"radio\"]');\n      var cloneRadio = clone.querySelectorAll('input[type=\"radio\"]');\n      origRadio.forEach(function(el, i) {\n        if (el.checked) cloneRadio[i].setAttribute('checked', 'checked');\n        else cloneRadio[i].removeAttribute('checked');\n      });\n\n      var origPill = document.querySelectorAll('.source-pill');\n      var clonePill = clone.querySelectorAll('.source-pill');\n      origPill.forEach(function(el, i) {\n        if (el.classList.contains('active')) clonePill[i].classList.add('active');\n      });\n\n      var html = '<!doctype html>\\n' + clone.outerHTML;\n      var blob = new Blob([html], { type: 'text\/html;charset=utf-8' });\n      var url = URL.createObjectURL(blob);\n      var a = document.createElement('a');\n      a.href = url;\n      a.download = 'min-spilplan.html';\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n      URL.revokeObjectURL(url);\n    }\n\n    \/\/ --- Load a previously saved HTML file ---\n    function loadForm(event) {\n      var file = event.target.files[0];\n      if (!file) return;\n      var reader = new FileReader();\n      reader.onload = function(e) {\n        var parser = new DOMParser();\n        var doc = parser.parseFromString(e.target.result, 'text\/html');\n\n        var loadedText = doc.querySelectorAll('input[type=\"text\"]');\n        var loadedTA = doc.querySelectorAll('textarea');\n        var loadedCB = doc.querySelectorAll('input[type=\"checkbox\"]');\n        var loadedRadio = doc.querySelectorAll('input[type=\"radio\"]');\n\n        var myText = document.querySelectorAll('input[type=\"text\"]');\n        var myTA = document.querySelectorAll('textarea');\n        var myCB = document.querySelectorAll('input[type=\"checkbox\"]');\n        var myRadio = document.querySelectorAll('input[type=\"radio\"]');\n\n        loadedText.forEach(function(el, i) { if (myText[i]) myText[i].value = el.value; });\n        loadedTA.forEach(function(el, i) { if (myTA[i]) myTA[i].value = el.textContent; });\n        loadedCB.forEach(function(el, i) { if (myCB[i]) myCB[i].checked = el.checked; });\n        loadedRadio.forEach(function(el, i) {\n          if (myRadio[i]) {\n            myRadio[i].checked = el.checked;\n            if (el.checked) myRadio[i].closest('.source-pill').classList.add('active');\n            else myRadio[i].closest('.source-pill').classList.remove('active');\n          }\n        });\n        autoSave();\n        sendResize();\n      };\n      reader.readAsText(file);\n      event.target.value = '';\n    }\n\n    \/\/ --- Clear all fields ---\n    function clearAll() {\n      if (confirm('Er du sikker p\u00e5, at du vil slette alt?')) {\n        document.querySelectorAll('input[type=\"text\"]').forEach(function(el) {\n          if (!el.value.match(\/^[1-5]$\/)) el.value = '';\n        });\n        document.querySelectorAll('textarea').forEach(function(el) { el.value = ''; });\n        document.querySelectorAll('input[type=\"checkbox\"]').forEach(function(el) { el.checked = false; });\n        document.querySelectorAll('input[type=\"radio\"]').forEach(function(el) { el.checked = false; });\n        document.querySelectorAll('.source-pill').forEach(function(el) { el.classList.remove('active'); });\n        localStorage.removeItem(STORAGE_KEY);\n        sendResize();\n      }\n    }\n\n    \/\/ --- Initialize on page load ---\n    window.addEventListener('DOMContentLoaded', function() {\n      autoLoad();\n      sendResize();\n    });\n    window.addEventListener('resize', sendResize);\n    document.querySelectorAll('input[type=\"text\"], textarea').forEach(function(el) {\n      el.addEventListener('input', function() { autoSave(); sendResize(); });\n    });\n    document.querySelectorAll('input[type=\"checkbox\"]').forEach(function(el) {\n      el.addEventListener('change', function() { autoSave(); });\n    });\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Planl\u00e6g dit spil \ud83d\udcbe Gem min spilplan \ud83d\udcc2 Hent spilplan \ud83d\udda8\ufe0f Udskriv \/ Gem som PDF \ud83d\uddd1\ufe0f Slet alt \u2713 Gemt \ud83c\udfae Planl\u00e6g dit spil Du kan spare meget tid ved at t\u00e6nke over dit spil \u2013 f\u00f8r du begynder at kode det. Hvis du gemmer din spilplan (gr\u00f8n knap), kan du \u00e5bne den igen &#8230; <a title=\"Spil-planen\" class=\"read-more\" href=\"https:\/\/programmering-for-alle.dk\/index.php\/spil-planen\/\" aria-label=\"Read more about Spil-planen\">L\u00e6s Mere<\/a><\/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-2106","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/pages\/2106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/comments?post=2106"}],"version-history":[{"count":7,"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/pages\/2106\/revisions"}],"predecessor-version":[{"id":2146,"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/pages\/2106\/revisions\/2146"}],"wp:attachment":[{"href":"https:\/\/programmering-for-alle.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}