Interaktiv tallinje<\/title>\n<style>\n .numberline-container {\n width: 700px;\n margin: 40px;\n }\n\n .line {\n position: relative;\n height: 4px;\n background: black;\n margin-top: 60px;\n cursor: crosshair;\n }\n\n .tick {\n position: absolute;\n width: 2px;\n height: 15px;\n background: black;\n top: -6px;\n }\n\n .label {\n position: absolute;\n top: 22px;\n transform: translateX(-50%);\n font-family: Arial, sans-serif;\n }\n\n .marker {\n position: absolute;\n width: 10px;\n height: 10px;\n background: red;\n border-radius: 50%;\n top: -4px;\n transform: translateX(-50%);\n }\n\n .green {\n background: green;\n }\n\n .hidden {\n display: none;\n }\n\n button {\n margin-top: 20px;\n padding: 8px 14px;\n font-size: 16px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"numberline-container\">\n <h3>Interaktiv tallinje<\/h3>\n\n <div class=\"line\" id=\"line\">\n \n\n \n <div class=\"tick\" style=\"left: calc((0 + 1.5) \/ 4 * 100%);\"><\/div>\n <div class=\"label\" style=\"left: calc((0 + 1.5) \/ 4 * 100%);\">0<\/div>\n\n \n <div class=\"tick\" style=\"left: calc((1 + 1.5) \/ 4 * 100%);\"><\/div>\n <div class=\"label\" style=\"left: calc((1 + 1.5) \/ 4 * 100%);\">1<\/div>\n\n \n <div id=\"c1\" class=\"marker green hidden\"><\/div>\n <div id=\"c2\" class=\"marker green hidden\"><\/div>\n <div id=\"c3\" class=\"marker green hidden\"><\/div>\n\n <div id=\"l1\" class=\"label hidden\"><\/div>\n <div id=\"l2\" class=\"label hidden\"><\/div>\n <div id=\"l3\" class=\"label hidden\"><\/div>\n <\/div>\n\n <button onclick=\"newNumbers()\">Nye tal<\/button>\n <button onclick=\"showCorrect()\">Tjek svar<\/button>\n\n <p id=\"taskText\" style=\"font-size: 18px; margin-top: 10px;\"><\/p>\n<\/div>\n\n<script>\nconst min = -1.5;\nconst span = 4;\n\nlet nums = [];\nlet values = [];\n\n\/\/ ----------------------------------------------------------\n\/\/ Generatorer til tal\/br\u00f8ker\/kvadratr\u00f8dder\n\/\/ ----------------------------------------------------------\nfunction randomExpression() {\n const type = Math.floor(Math.random() * 3);\n\n if (type === 0) {\n return (Math.random() * 3 - 1).toFixed(2) * 1;\n }\n\n if (type === 1) {\n const a = Math.floor(Math.random() * 5) - 2;\n const b = Math.floor(Math.random() * 4) + 1;\n return `${a}\/${b}`;\n }\n\n if (type === 2) {\n const a = Math.floor(Math.random() * 4) + 1;\n return `\u221a${a}`;\n }\n}\n\nfunction evaluateExpression(expr) {\n if (typeof expr === \"number\") return expr;\n if (expr.includes(\"\u221a\")) {\n return Math.sqrt(parseFloat(expr.replace(\"\u221a\", \"\")));\n }\n if (expr.includes(\"\/\")) {\n const [a, b] = expr.split(\"\/\").map(Number);\n return a \/ b;\n }\n return parseFloat(expr);\n}\n\n\/\/ ----------------------------------------------------------\nfunction newNumbers() {\n nums = [randomExpression(), randomExpression(), randomExpression()];\n values = nums.map(evaluateExpression);\n\n \/\/ sort\u00e9r efter numerisk v\u00e6rdi\n let zipped = nums.map((e, i) => ({expr: e, val: values[i]}));\n zipped.sort((a, b) => a.val - b.val);\n\n nums = zipped.map(z => z.expr);\n values = zipped.map(z => z.val);\n\n document.getElementById(\"taskText\").textContent =\n \"S\u00e6t punkter for tallene: \" + nums.join(\", \");\n\n \/\/ skjul facit\n hideCorrect();\n\n \/\/ slet ALLE g\u00e6t\n document.querySelectorAll(\".guessDot\").forEach(dot => dot.remove());\n}\n\n\/\/ ----------------------------------------------------------\nfunction setPosition(id, value) {\n const pos = (value - min) \/ span * 100;\n document.getElementById(id).style.left = pos + \"%\";\n}\n\nfunction hideCorrect() {\n [\"c1\", \"c2\", \"c3\", \"l1\", \"l2\", \"l3\"].forEach(id =>\n document.getElementById(id).classList.add(\"hidden\")\n );\n}\n\nfunction showCorrect() {\n const mids = [\"c1\", \"c2\", \"c3\"];\n const lids = [\"l1\", \"l2\", \"l3\"];\n\n values.forEach((v, i) => {\n setPosition(mids[i], v);\n setPosition(lids[i], v);\n\n document.getElementById(mids[i]).classList.remove(\"hidden\");\n const lab = document.getElementById(lids[i]);\n lab.textContent = nums[i];\n lab.classList.remove(\"hidden\");\n });\n}\n\n\/\/ ----------------------------------------------------------\n\/\/ Klik-g\u00e6t\n\/\/ ----------------------------------------------------------\ndocument.getElementById(\"line\").addEventListener(\"click\", function(event) {\n const box = this.getBoundingClientRect();\n const clickX = event.clientX - box.left;\n const percent = clickX \/ box.width * 100;\n\n const dot = document.createElement(\"div\");\n dot.className = \"marker guessDot\";\n dot.style.left = percent + \"%\";\n\n this.appendChild(dot);\n});\n\n\/\/ start\nnewNumbers();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Interaktiv tallinje Interaktiv tallinje 0 1 Nye tal Tjek svar<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","editor_plus_copied_stylings":"{}","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[67],"class_list":["post-3916","post","type-post","status-publish","format-standard","hentry","category-matematik","tag-hhx"],"featured_image_src":null,"author_info":{"display_name":"Henriksen","author_link":"https:\/\/mxth.dk\/?author=1"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3916"}],"version-history":[{"count":7,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916\/revisions"}],"predecessor-version":[{"id":3925,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916\/revisions\/3925"}],"wp:attachment":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3916,"date":"2025-11-23T21:19:31","date_gmt":"2025-11-23T20:19:31","guid":{"rendered":"https:\/\/mxth.dk\/?p=3916"},"modified":"2026-04-09T22:28:04","modified_gmt":"2026-04-09T20:28:04","slug":"tallinjen-og-generelle-maengder","status":"publish","type":"post","link":"https:\/\/mxth.dk\/?p=3916","title":{"rendered":"Tallinjen og generelle m\u00e6ngder"},"content":{"rendered":"\n\n\n\n\nInteraktiv tallinje<\/title>\n<style>\n .numberline-container {\n width: 700px;\n margin: 40px;\n }\n\n .line {\n position: relative;\n height: 4px;\n background: black;\n margin-top: 60px;\n cursor: crosshair;\n }\n\n .tick {\n position: absolute;\n width: 2px;\n height: 15px;\n background: black;\n top: -6px;\n }\n\n .label {\n position: absolute;\n top: 22px;\n transform: translateX(-50%);\n font-family: Arial, sans-serif;\n }\n\n .marker {\n position: absolute;\n width: 10px;\n height: 10px;\n background: red;\n border-radius: 50%;\n top: -4px;\n transform: translateX(-50%);\n }\n\n .green {\n background: green;\n }\n\n .hidden {\n display: none;\n }\n\n button {\n margin-top: 20px;\n padding: 8px 14px;\n font-size: 16px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"numberline-container\">\n <h3>Interaktiv tallinje<\/h3>\n\n <div class=\"line\" id=\"line\">\n \n\n \n <div class=\"tick\" style=\"left: calc((0 + 1.5) \/ 4 * 100%);\"><\/div>\n <div class=\"label\" style=\"left: calc((0 + 1.5) \/ 4 * 100%);\">0<\/div>\n\n \n <div class=\"tick\" style=\"left: calc((1 + 1.5) \/ 4 * 100%);\"><\/div>\n <div class=\"label\" style=\"left: calc((1 + 1.5) \/ 4 * 100%);\">1<\/div>\n\n \n <div id=\"c1\" class=\"marker green hidden\"><\/div>\n <div id=\"c2\" class=\"marker green hidden\"><\/div>\n <div id=\"c3\" class=\"marker green hidden\"><\/div>\n\n <div id=\"l1\" class=\"label hidden\"><\/div>\n <div id=\"l2\" class=\"label hidden\"><\/div>\n <div id=\"l3\" class=\"label hidden\"><\/div>\n <\/div>\n\n <button onclick=\"newNumbers()\">Nye tal<\/button>\n <button onclick=\"showCorrect()\">Tjek svar<\/button>\n\n <p id=\"taskText\" style=\"font-size: 18px; margin-top: 10px;\"><\/p>\n<\/div>\n\n<script>\nconst min = -1.5;\nconst span = 4;\n\nlet nums = [];\nlet values = [];\n\n\/\/ ----------------------------------------------------------\n\/\/ Generatorer til tal\/br\u00f8ker\/kvadratr\u00f8dder\n\/\/ ----------------------------------------------------------\nfunction randomExpression() {\n const type = Math.floor(Math.random() * 3);\n\n if (type === 0) {\n return (Math.random() * 3 - 1).toFixed(2) * 1;\n }\n\n if (type === 1) {\n const a = Math.floor(Math.random() * 5) - 2;\n const b = Math.floor(Math.random() * 4) + 1;\n return `${a}\/${b}`;\n }\n\n if (type === 2) {\n const a = Math.floor(Math.random() * 4) + 1;\n return `\u221a${a}`;\n }\n}\n\nfunction evaluateExpression(expr) {\n if (typeof expr === \"number\") return expr;\n if (expr.includes(\"\u221a\")) {\n return Math.sqrt(parseFloat(expr.replace(\"\u221a\", \"\")));\n }\n if (expr.includes(\"\/\")) {\n const [a, b] = expr.split(\"\/\").map(Number);\n return a \/ b;\n }\n return parseFloat(expr);\n}\n\n\/\/ ----------------------------------------------------------\nfunction newNumbers() {\n nums = [randomExpression(), randomExpression(), randomExpression()];\n values = nums.map(evaluateExpression);\n\n \/\/ sort\u00e9r efter numerisk v\u00e6rdi\n let zipped = nums.map((e, i) => ({expr: e, val: values[i]}));\n zipped.sort((a, b) => a.val - b.val);\n\n nums = zipped.map(z => z.expr);\n values = zipped.map(z => z.val);\n\n document.getElementById(\"taskText\").textContent =\n \"S\u00e6t punkter for tallene: \" + nums.join(\", \");\n\n \/\/ skjul facit\n hideCorrect();\n\n \/\/ slet ALLE g\u00e6t\n document.querySelectorAll(\".guessDot\").forEach(dot => dot.remove());\n}\n\n\/\/ ----------------------------------------------------------\nfunction setPosition(id, value) {\n const pos = (value - min) \/ span * 100;\n document.getElementById(id).style.left = pos + \"%\";\n}\n\nfunction hideCorrect() {\n [\"c1\", \"c2\", \"c3\", \"l1\", \"l2\", \"l3\"].forEach(id =>\n document.getElementById(id).classList.add(\"hidden\")\n );\n}\n\nfunction showCorrect() {\n const mids = [\"c1\", \"c2\", \"c3\"];\n const lids = [\"l1\", \"l2\", \"l3\"];\n\n values.forEach((v, i) => {\n setPosition(mids[i], v);\n setPosition(lids[i], v);\n\n document.getElementById(mids[i]).classList.remove(\"hidden\");\n const lab = document.getElementById(lids[i]);\n lab.textContent = nums[i];\n lab.classList.remove(\"hidden\");\n });\n}\n\n\/\/ ----------------------------------------------------------\n\/\/ Klik-g\u00e6t\n\/\/ ----------------------------------------------------------\ndocument.getElementById(\"line\").addEventListener(\"click\", function(event) {\n const box = this.getBoundingClientRect();\n const clickX = event.clientX - box.left;\n const percent = clickX \/ box.width * 100;\n\n const dot = document.createElement(\"div\");\n dot.className = \"marker guessDot\";\n dot.style.left = percent + \"%\";\n\n this.appendChild(dot);\n});\n\n\/\/ start\nnewNumbers();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Interaktiv tallinje Interaktiv tallinje 0 1 Nye tal Tjek svar<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","editor_plus_copied_stylings":"{}","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[67],"class_list":["post-3916","post","type-post","status-publish","format-standard","hentry","category-matematik","tag-hhx"],"featured_image_src":null,"author_info":{"display_name":"Henriksen","author_link":"https:\/\/mxth.dk\/?author=1"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3916"}],"version-history":[{"count":7,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916\/revisions"}],"predecessor-version":[{"id":3925,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3916\/revisions\/3925"}],"wp:attachment":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}