{"id":19,"date":"2026-05-19T07:06:01","date_gmt":"2026-05-19T07:06:01","guid":{"rendered":"https:\/\/skipperud.dk\/?page_id=19"},"modified":"2026-05-19T07:32:48","modified_gmt":"2026-05-19T07:32:48","slug":"fysik-kemi","status":"publish","type":"page","link":"https:\/\/skipperud.dk\/?page_id=19","title":{"rendered":"Fysik\/kemi"},"content":{"rendered":"<style>\r\n.ph-sim *, .ph-sim *::before, .ph-sim *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n.ph-sim {\r\n  --acid: #E24B4A; --base: #378ADD; --neutral: #1D9E75;\r\n  --bg: #ffffff; --bg2: #f5f5f3; --text: #1a1a18; --text2: #6b6b67;\r\n  --border: rgba(0,0,0,0.15); --border2: rgba(0,0,0,0.25);\r\n  font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n  font-size: 16px; line-height: 1.6; color: var(--text);\r\n  background: var(--bg); max-width: 680px; margin: 0 auto; padding: 2rem 1.25rem;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  .ph-sim {\r\n    --bg: #1e1e1c; --bg2: #2a2a28; --text: #e8e6de; --text2: #9c9a92;\r\n    --border: rgba(255,255,255,0.15); --border2: rgba(255,255,255,0.25);\r\n  }\r\n}\r\n.ph-sim header { margin-bottom: 1.5rem; }\r\n.ph-sim header h2 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }\r\n.ph-sim header p  { font-size: 14px; color: var(--text2); }\r\n.ph-sim .section-label { font-size: 13px; color: var(--text2); margin-bottom: 6px; }\r\n\r\n.ph-sim #ps-grid {\r\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));\r\n  gap: 8px; margin-bottom: 1.25rem;\r\n}\r\n.ph-sim .sub-btn {\r\n  border: 0.5px solid var(--border2); background: var(--bg); border-radius: 8px;\r\n  padding: 10px 8px; cursor: pointer; text-align: center; color: var(--text);\r\n  transition: border-color 0.2s, background 0.2s, transform 0.15s;\r\n}\r\n.ph-sim .sub-btn:hover { background: var(--bg2); }\r\n.ph-sim .sub-btn.active { border-width: 1.5px; transform: scale(1.02); }\r\n.ph-sim .sub-btn.active.acid    { border-color: var(--acid);    background: #FCEBEB; color: #501313; }\r\n.ph-sim .sub-btn.active.base    { border-color: var(--base);    background: #E6F1FB; color: #042C53; }\r\n.ph-sim .sub-btn.active.neutral { border-color: var(--neutral); background: #E1F5EE; color: #04342C; }\r\n@media (prefers-color-scheme: dark) {\r\n  .ph-sim .sub-btn.active.acid    { background: #501313; color: #F7C1C1; }\r\n  .ph-sim .sub-btn.active.base    { background: #042C53; color: #B5D4F4; }\r\n  .ph-sim .sub-btn.active.neutral { background: #04342C; color: #9FE1CB; }\r\n}\r\n.ph-sim .sub-emoji { font-size: 20px; display: block; margin-bottom: 4px; }\r\n.ph-sim .sub-name  { font-size: 12px; font-weight: 500; display: block; }\r\n.ph-sim .sub-ph    { font-size: 11px; color: var(--text2); display: block; margin-top: 2px; }\r\n\r\n.ph-sim #ps-custom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }\r\n.ph-sim #ps-custom-row label { font-size: 13px; color: var(--text2); white-space: nowrap; }\r\n.ph-sim #ps-slider { flex: 1; accent-color: var(--neutral); }\r\n.ph-sim #ps-custom-val { font-size: 13px; font-weight: 500; min-width: 28px; text-align: right; }\r\n\r\n.ph-sim #ps-scale-wrap { position: relative; margin-bottom: 0.5rem; }\r\n.ph-sim #ps-bar {\r\n  height: 28px; border-radius: 14px; position: relative;\r\n  background: linear-gradient(to right,\r\n    #E24B4A 0%, #E24B4A 7%, #EF9F27 14%, #F9CB42 21%,\r\n    #97C459 35%, #1D9E75 50%, #378ADD 64%,\r\n    #534AB7 78%, #3C3489 92%, #26215C 100%);\r\n}\r\n.ph-sim #ps-ticks { display: flex; justify-content: space-between; padding: 3px 0 0; margin-bottom: 1rem; }\r\n.ph-sim #ps-ticks span { font-size: 11px; color: var(--text2); width: 28px; text-align: center; }\r\n.ph-sim #ps-needle {\r\n  position: absolute; top: -4px; width: 4px; height: 36px;\r\n  background: var(--text); border-radius: 2px; transform: translateX(-50%);\r\n  transition: left 0.6s cubic-bezier(.34,1.56,.64,1); pointer-events: none; z-index: 2;\r\n}\r\n.ph-sim #ps-needle::after {\r\n  content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);\r\n  border-left: 5px solid transparent; border-right: 5px solid transparent;\r\n  border-top: 7px solid var(--text);\r\n}\r\n.ph-sim #ps-display { text-align: center; margin-bottom: 1.5rem; }\r\n.ph-sim #ps-num { font-size: 52px; font-weight: 500; line-height: 1; transition: color 0.5s; }\r\n.ph-sim #ps-label { font-size: 14px; color: var(--text2); margin-top: 4px; }\r\n\r\n.ph-sim #ps-beaker-wrap { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }\r\n.ph-sim #ps-beaker-svg { flex-shrink: 0; }\r\n.ph-sim #ps-ion-info { flex: 1; }\r\n.ph-sim #ps-ion-info h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }\r\n.ph-sim .ion-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\r\n.ph-sim .ion-bar-bg { flex: 1; height: 12px; background: var(--bg2); border-radius: 6px; overflow: hidden; }\r\n.ph-sim .ion-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }\r\n.ph-sim .ion-label { font-size: 13px; font-weight: 500; min-width: 36px; }\r\n.ph-sim .ion-count { font-size: 12px; color: var(--text2); min-width: 70px; text-align: right; }\r\n.ph-sim #ps-fun-fact {\r\n  border-left: 2px solid var(--border2); padding-left: 12px;\r\n  font-size: 13px; color: var(--text2); line-height: 1.6; min-height: 40px;\r\n}\r\n.ph-sim footer {\r\n  margin-top: 2rem; padding-top: 1rem;\r\n  border-top: 0.5px solid var(--border); font-size: 12px; color: var(--text2);\r\n}\r\n<\/style>\r\n\r\n<div class=\"ph-sim\">\r\n  <header>\r\n    <h2>Syrer og Baser \u2013 pH Simulation<\/h2>\r\n    <p>9. klasse kemi \u00b7 V\u00e6lg et stof eller brug skyderen for at udforske pH-skalaen<\/p>\r\n  <\/header>\r\n\r\n  <p class=\"section-label\">Klik p\u00e5 et stof<\/p>\r\n  <div id=\"ps-grid\"><\/div>\r\n\r\n  <div id=\"ps-custom-row\">\r\n    <label>Tilpas pH<\/label>\r\n    <input type=\"range\" id=\"ps-slider\" min=\"0\" max=\"14\" step=\"0.1\" value=\"7\">\r\n    <span id=\"ps-custom-val\">7.0<\/span>\r\n  <\/div>\r\n\r\n  <div id=\"ps-scale-wrap\">\r\n    <div id=\"ps-bar\"><div id=\"ps-needle\"><\/div><\/div>\r\n    <div id=\"ps-ticks\"><\/div>\r\n  <\/div>\r\n\r\n  <div id=\"ps-display\">\r\n    <div id=\"ps-num\">7.0<\/div>\r\n    <div id=\"ps-label\">Neutralt vand<\/div>\r\n  <\/div>\r\n\r\n  <div id=\"ps-beaker-wrap\">\r\n    <svg id=\"ps-beaker-svg\" width=\"110\" height=\"160\" viewBox=\"0 0 110 160\" role=\"img\" aria-label=\"B\u00e6gerglas med ioner\">\r\n      <defs>\r\n        <clipPath id=\"ps-liq-clip\">\r\n          <rect x=\"18\" y=\"30\" width=\"74\" height=\"112\"\/>\r\n        <\/clipPath>\r\n      <\/defs>\r\n      <rect id=\"ps-liq\" x=\"18\" y=\"50\" width=\"74\" height=\"92\" clip-path=\"url(#ps-liq-clip)\" fill=\"#9FE1CB\" opacity=\"0.5\"\/>\r\n      <path d=\"M20 10 L20 140 Q20 150 30 150 L80 150 Q90 150 90 140 L90 10\"\r\n            fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.4\"\/>\r\n      <line x1=\"14\" y1=\"10\" x2=\"96\" y2=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.4\"\/>\r\n      <g id=\"ps-ions\"><\/g>\r\n    <\/svg>\r\n\r\n    <div id=\"ps-ion-info\">\r\n      <h3>Ioner i opl\u00f8sningen<\/h3>\r\n      <div class=\"ion-row\">\r\n        <span class=\"ion-label\" style=\"color:#E24B4A\">H\u207a<\/span>\r\n        <div class=\"ion-bar-bg\"><div class=\"ion-bar-fill\" id=\"ps-h-bar\" style=\"background:#E24B4A;width:50%\"><\/div><\/div>\r\n        <span class=\"ion-count\" id=\"ps-h-count\"><\/span>\r\n      <\/div>\r\n      <div class=\"ion-row\">\r\n        <span class=\"ion-label\" style=\"color:#378ADD\">OH\u207b<\/span>\r\n        <div class=\"ion-bar-bg\"><div class=\"ion-bar-fill\" id=\"ps-oh-bar\" style=\"background:#378ADD;width:50%\"><\/div><\/div>\r\n        <span class=\"ion-count\" id=\"ps-oh-count\"><\/span>\r\n      <\/div>\r\n      <div id=\"ps-fun-fact\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <footer>Simulation til undervisningsbrug \u00b7 Syrer og baser \u00b7 9. klasse kemi<\/footer>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  var substances = [\r\n    { name:\"Saltsyre\",    emoji:\"\ud83e\uddea\", ph:1,   type:\"acid\",    fact:\"Saltsyre (HCl) er en st\u00e6rk syre \u2014 den bruges bl.a. til at rense metal og er til stede i mavesyre.\" },\r\n    { name:\"Citronsaft\",  emoji:\"\ud83c\udf4b\", ph:2.5, type:\"acid\",    fact:\"Citronsaft er sur p.g.a. citronsyre. Vores tunge kan smage pH-forskel p\u00e5 under 0,5!\" },\r\n    { name:\"Kaffe\",       emoji:\"\u2615\", ph:5,   type:\"acid\",    fact:\"Kaffe er svagt sur. Det er derfor din tandemalje lider lidt under for meget kaffe.\" },\r\n    { name:\"Rent vand\",   emoji:\"\ud83d\udca7\", ph:7,   type:\"neutral\", fact:\"Neutralt vand har pr\u00e6cis samme antal H\u207a og OH\u207b ioner \u2014 en balance p\u00e5 10\u207b\u2077 mol\/L af begge.\" },\r\n    { name:\"Bagepulver\",  emoji:\"\ud83e\uddc1\", ph:8.5, type:\"base\",    fact:\"Bagepulver (NaHCO\u2083) er en svag base. Det neutraliserer syrer i dejen og giver CO\u2082-bobler.\" },\r\n    { name:\"S\u00e6be\",        emoji:\"\ud83e\udee7\", ph:10,  type:\"base\",    fact:\"S\u00e6be er basisk \u2014 det hj\u00e6lper med at fjerne fedt og snavs fordi det reagerer med sure fedtmolekyler.\" },\r\n    { name:\"Blegemiddel\", emoji:\"\ud83e\uded9\", ph:13,  type:\"base\",    fact:\"Blegemiddel er en st\u00e6rk base. Det er \u00e6tsende og kan nedbryde cellemembraner hos bakterier.\" }\r\n  ];\r\n\r\n  var labels    = { acid:\"Syre \u2014 mange H\u207a ioner\", neutral:\"Neutralt\", base:\"Base \u2014 mange OH\u207b ioner\" };\r\n  var numColors = { acid:\"#E24B4A\", neutral:\"#1D9E75\", base:\"#378ADD\" };\r\n  var liqColors = { acid:\"#F09595\", neutral:\"#9FE1CB\", base:\"#85B7EB\" };\r\n\r\n  function formatConc(ph) {\r\n    var exp = Math.round(-ph);\r\n    var coeff = Math.pow(10, -ph) \/ Math.pow(10, exp);\r\n    if (Math.abs(coeff - 1) < 0.05) return '10<sup>' + exp + '<\/sup> mol\/L';\r\n    return coeff.toFixed(1) + '\u00d710<sup>' + exp + '<\/sup> mol\/L';\r\n  }\r\n\r\n  function update(ph) {\r\n    var type = ph < 6.5 ? \"acid\" : ph > 7.5 ? \"base\" : \"neutral\";\r\n    document.getElementById('ps-needle').style.left = (ph \/ 14 * 100) + '%';\r\n    var num = document.getElementById('ps-num');\r\n    num.textContent = ph.toFixed(1);\r\n    num.style.color = numColors[type];\r\n    var hPct  = Math.max(2, Math.min(98, (14 - ph) \/ 14 * 100));\r\n    var ohPct = Math.max(2, Math.min(98, ph \/ 14 * 100));\r\n    document.getElementById('ps-h-bar').style.width  = hPct + '%';\r\n    document.getElementById('ps-oh-bar').style.width = ohPct + '%';\r\n    document.getElementById('ps-h-count').innerHTML  = formatConc(ph);\r\n    document.getElementById('ps-oh-count').innerHTML = formatConc(14 - ph);\r\n    document.getElementById('ps-liq').setAttribute('fill', liqColors[type]);\r\n    renderIons(ph);\r\n    document.getElementById('ps-slider').value = ph;\r\n    document.getElementById('ps-custom-val').textContent = ph.toFixed(1);\r\n  }\r\n\r\n  function renderIons(ph) {\r\n    var g = document.getElementById('ps-ions');\r\n    g.innerHTML = '';\r\n    var seed = Math.round(ph * 10);\r\n    var total = 16;\r\n    var hCount = Math.round((14 - ph) \/ 14 * total);\r\n    function rng(n, s) {\r\n      var x = Math.sin(n * 127.1 + s * 311.7) * 43758.5453;\r\n      return x - Math.floor(x);\r\n    }\r\n    var placed = [], attempts = 0;\r\n    while (placed.length < total && attempts < 500) {\r\n      var isH = placed.length < hCount;\r\n      var r = 7;\r\n      var x = 24 + rng(attempts, seed + 1) * 62;\r\n      var y = 56 + rng(attempts, seed + 2) * 80;\r\n      attempts++;\r\n      if (placed.some(function(p) { return Math.hypot(p.x - x, p.y - y) < r * 2 + 2; })) continue;\r\n      placed.push({ x: x, y: y });\r\n      var ns = 'http:\/\/www.w3.org\/2000\/svg';\r\n      var c = document.createElementNS(ns, 'circle');\r\n      c.setAttribute('cx', x.toFixed(1));\r\n      c.setAttribute('cy', y.toFixed(1));\r\n      c.setAttribute('r', r);\r\n      c.setAttribute('fill', isH ? '#E24B4A' : '#378ADD');\r\n      c.setAttribute('opacity', '0.75');\r\n      var t = document.createElementNS(ns, 'text');\r\n      t.setAttribute('x', x.toFixed(1));\r\n      t.setAttribute('y', (y + 1).toFixed(1));\r\n      t.setAttribute('text-anchor', 'middle');\r\n      t.setAttribute('dominant-baseline', 'central');\r\n      t.setAttribute('font-size', '8');\r\n      t.setAttribute('font-weight', '500');\r\n      t.setAttribute('fill', 'white');\r\n      t.setAttribute('font-family', 'system-ui, sans-serif');\r\n      t.textContent = isH ? 'H\\u207A' : 'OH\\u207B';\r\n      g.appendChild(c);\r\n      g.appendChild(t);\r\n    }\r\n  }\r\n\r\n  \/\/ Byg ticks\r\n  var ticks = document.getElementById('ps-ticks');\r\n  for (var i = 0; i <= 14; i++) {\r\n    var s = document.createElement('span');\r\n    s.textContent = i;\r\n    ticks.appendChild(s);\r\n  }\r\n\r\n  \/\/ Byg stofknapper\r\n  var grid = document.getElementById('ps-grid');\r\n  substances.forEach(function(sub) {\r\n    var btn = document.createElement('button');\r\n    btn.className = 'sub-btn ' + sub.type;\r\n    btn.innerHTML = '<span class=\"sub-emoji\">' + sub.emoji + '<\/span>'\r\n                  + '<span class=\"sub-name\">'  + sub.name  + '<\/span>'\r\n                  + '<span class=\"sub-ph\">pH ' + sub.ph    + '<\/span>';\r\n    btn.onclick = function() {\r\n      document.querySelectorAll('#ps-grid .sub-btn').forEach(function(b) { b.classList.remove('active'); });\r\n      btn.classList.add('active');\r\n      document.getElementById('ps-label').textContent  = labels[sub.type];\r\n      document.getElementById('ps-fun-fact').innerHTML = sub.fact;\r\n      update(sub.ph);\r\n    };\r\n    grid.appendChild(btn);\r\n  });\r\n\r\n  \/\/ Slider\r\n  document.getElementById('ps-slider').addEventListener('input', function() {\r\n    var val = +this.value;\r\n    document.querySelectorAll('#ps-grid .sub-btn').forEach(function(b) { b.classList.remove('active'); });\r\n    var type = val < 6.5 ? \"acid\" : val > 7.5 ? \"base\" : \"neutral\";\r\n    document.getElementById('ps-label').textContent  = labels[type];\r\n    document.getElementById('ps-fun-fact').innerHTML = '';\r\n    update(val);\r\n  });\r\n\r\n  \/\/ Start p\u00e5 rent vand (index 3)\r\n  grid.querySelectorAll('.sub-btn')[3].click();\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skipperud.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":9,"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/skipperud.dk\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/skipperud.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}