{"id":3929,"date":"2025-11-26T14:39:46","date_gmt":"2025-11-26T13:39:46","guid":{"rendered":"https:\/\/mxth.dk\/?p=3929"},"modified":"2025-11-26T14:43:56","modified_gmt":"2025-11-26T13:43:56","slug":"faeldningsreaktioner","status":"publish","type":"post","link":"https:\/\/mxth.dk\/?p=3929","title":{"rendered":"F\u00e6ldningsreaktioner"},"content":{"rendered":"\n<p class=\" eplus-wrapper\">Vi skal se lidt p\u00e5 f\u00e6ldningsreaktioner. I simulationen herunder kan man tils\u00e6tte forskellige salte til vandet. Salte bliver opl\u00f8st til ioner som vil flyde rundt. Hvis to ioner m\u00f8der hinanden som vil udf\u00e6lde vil de g\u00e5 sammen og ligge sig p\u00e5 bunden. <\/p>\n\n\n\n<!DOCTYPE html>\n\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- <title>Precipitation Reaction Simulator<\/title> -->\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 20px;\n            background-color: #f0f0f0;\n        }\n        h1 {\n            color: #333;\n            margin-bottom: 20px;\n        }\n        #container {\n            position: relative;\n            margin: 0 auto;\n            width: 600px;\n            height: 400px;\n            background-color: #87CEEB;\n            border: 3px solid #333;\n            border-radius: 10px;\n            overflow: hidden;\n            margin-bottom: 20px;\n        }\n        .ion {\n            position: absolute;\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 11px;\n            font-weight: bold;\n            color: white;\n            border: 2px solid #333;\n            cursor: pointer;\n        }\n        .positive {\n            background-color: #ff4444;\n        }\n        .negative {\n            background-color: #4444ff;\n        }\n        .precipitate {\n            background-color: #cccccc;\n            color: #333;\n        }\n        .controls {\n            display: flex;\n            gap: 15px;\n            flex-wrap: wrap;\n            justify-content: center;\n        }\n        button {\n            padding: 12px 24px;\n            font-size: 16px;\n            font-weight: bold;\n            border: 2px solid #333;\n            border-radius: 5px;\n            cursor: pointer;\n            background-color: #fff;\n            transition: background-color 0.3s;\n        }\n        button:hover {\n            background-color: #e0e0e0;\n        }\n        button:active {\n            background-color: #d0d0d0;\n        }\n        #clearBtn {\n            background-color: #ffcccc;\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- <h1>Precipitation Reaction Simulator<\/h1> -->\n    <div id=\"container\" ><\/div>\n    <div class=\"controls\">\n        <button onclick=\"addSalt('NaCl')\">Add NaCl<\/button>\n        <button onclick=\"addSalt('CuSO4')\">Add CuSO\u2084<\/button>\n        <button onclick=\"addSalt('AgNO3')\">Add AgNO\u2083<\/button>\n        <button onclick=\"addSalt('KCl')\">Add KCl<\/button>\n        <button onclick=\"addSalt('Na2SO4')\">Add Na\u2082SO\u2084<\/button>\n        <button onclick=\"addSalt('Na2S')\">Add Na\u2082S<\/button>\n        <button onclick=\"addSalt('BaCl2')\">Add BaCl\u2082<\/button>\n        <button onclick=\"addSalt('CaCl2')\">Add CaCl\u2082<\/button>\n        <button onclick=\"addSalt('Ca(NO3)2')\">Add Ca(NO\u2083)\u2082<\/button>\n        <button onclick=\"addSalt('KBr')\">Add KBr<\/button>\n        <button onclick=\"addSalt('KI')\">Add KI<\/button>\n        <button onclick=\"addSalt('Na2CO3')\">Add Na\u2082CO\u2083<\/button>\n        <button onclick=\"addSalt('K2SO4')\">Add K\u2082SO\u2084<\/button>\n        <button onclick=\"addSalt('KNO3')\">Add KNO\u2083<\/button>\n        <button onclick=\"addSalt('Pb(NO3)2')\">Add Pb(NO\u2083)\u2082<\/button>\n        <button id=\"clearBtn\" onclick=\"clearAll()\">Clear All<\/button>\n    <\/div>\n\n&#8220;`\n<script>\n    const container = document.getElementById('container');\n    const ions = [];\n    \n    \/\/ Solubility rules for precipitation\n    const precipitates = {\n        'Ag\u207a_Cl\u207b': 'AgCl',\n        'Ag\u207a_Br\u207b': 'AgBr',\n        'Ag\u207a_I\u207b': 'AgI',\n        'Ag\u207a_SO\u2084\u00b2\u207b': 'Ag\u2082SO\u2084',\n        'Ag\u207a_CO\u2083\u00b2\u207b': 'Ag\u2082CO\u2083',\n        'Ag\u207a_S\u00b2\u207b': 'Ag\u2082S',\n        'Cu\u00b2\u207a_OH\u207b': 'Cu(OH)\u2082',\n        'Cu\u00b2\u207a_S\u00b2\u207b': 'CuS',\n        'Cu\u00b2\u207a_CO\u2083\u00b2\u207b': 'CuCO\u2083',\n        'Ba\u00b2\u207a_SO\u2084\u00b2\u207b': 'BaSO\u2084',\n        'Ba\u00b2\u207a_CO\u2083\u00b2\u207b': 'BaCO\u2083',\n        'Ca\u00b2\u207a_SO\u2084\u00b2\u207b': 'CaSO\u2084',\n        'Ca\u00b2\u207a_CO\u2083\u00b2\u207b': 'CaCO\u2083',\n        'Pb\u00b2\u207a_Cl\u207b': 'PbCl\u2082',\n        'Pb\u00b2\u207a_Br\u207b': 'PbBr\u2082',\n        'Pb\u00b2\u207a_I\u207b': 'PbI\u2082',\n        'Pb\u00b2\u207a_SO\u2084\u00b2\u207b': 'PbSO\u2084',\n        'Pb\u00b2\u207a_S\u00b2\u207b': 'PbS',\n        'Pb\u00b2\u207a_CO\u2083\u00b2\u207b': 'PbCO\u2083'\n    };\n\n    class Ion {\n        constructor(name, charge, x, y) {\n            this.name = name;\n            this.charge = charge;\n            this.x = x;\n            this.y = y;\n            this.vx = (Math.random() - 0.5) * 2;\n            this.vy = (Math.random() - 0.5) * 2;\n            this.isPrecipitate = false;\n            this.element = this.createElement();\n        }\n\n        createElement() {\n            const div = document.createElement('div');\n            div.className = 'ion ' + (this.charge > 0 ? 'positive' : this.charge < 0 ? 'negative' : 'precipitate');\n            div.textContent = this.name;\n            div.style.left = this.x + 'px';\n            div.style.top = this.y + 'px';\n            container.appendChild(div);\n            return div;\n        }\n\n        update() {\n            if (this.isPrecipitate) {\n                \/\/ Precipitates sink slowly\n                this.vy = 1;\n                this.vx *= 0.95;\n            }\n\n            this.x += this.vx;\n            this.y += this.vy;\n\n            \/\/ Bounce off walls\n            if (this.x <= 0 || this.x >= 560) {\n                this.vx *= -1;\n                this.x = Math.max(0, Math.min(560, this.x));\n            }\n            if (this.y <= 0 || this.y >= 360) {\n                this.vy *= -1;\n                this.y = Math.max(0, Math.min(360, this.y));\n            }\n\n            \/\/ Stop at bottom if precipitate\n            if (this.isPrecipitate && this.y >= 355) {\n                this.y = 355;\n                this.vx = 0;\n                this.vy = 0;\n            }\n\n            this.element.style.left = this.x + 'px';\n            this.element.style.top = this.y + 'px';\n        }\n\n        remove() {\n            container.removeChild(this.element);\n        }\n\n        convertToPrecipitate(name) {\n            this.name = name;\n            this.charge = 0;\n            this.isPrecipitate = true;\n            this.element.className = 'ion precipitate';\n            this.element.textContent = name;\n        }\n    }\n\n    function addSalt(salt) {\n        const x = Math.random() * 520 + 20;\n        const y = Math.random() * 100 + 20;\n\n        let ions1, ions2;\n\n        switch(salt) {\n            case 'NaCl':\n                ions1 = [new Ion('Na\u207a', 1, x, y)];\n                ions2 = [new Ion('Cl\u207b', -1, x + 50, y)];\n                break;\n            case 'CuSO4':\n                ions1 = [new Ion('Cu\u00b2\u207a', 2, x, y)];\n                ions2 = [new Ion('SO\u2084\u00b2\u207b', -2, x + 50, y)];\n                break;\n            case 'AgNO3':\n                ions1 = [new Ion('Ag\u207a', 1, x, y)];\n                ions2 = [new Ion('NO\u2083\u207b', -1, x + 50, y)];\n                break;\n            case 'KCl':\n                ions1 = [new Ion('K\u207a', 1, x, y)];\n                ions2 = [new Ion('Cl\u207b', -1, x + 50, y)];\n                break;\n            case 'Na2SO4':\n                ions1 = [new Ion('Na\u207a', 1, x, y), new Ion('Na\u207a', 1, x + 25, y)];\n                ions2 = [new Ion('SO\u2084\u00b2\u207b', -2, x + 50, y)];\n                break;\n            case 'Na2S':\n                ions1 = [new Ion('Na\u207a', 1, x, y), new Ion('Na\u207a', 1, x + 25, y)];\n                ions2 = [new Ion('S\u00b2\u207b', -2, x + 50, y)];\n                break;\n            case 'BaCl2':\n                ions1 = [new Ion('Ba\u00b2\u207a', 2, x, y)];\n                ions2 = [new Ion('Cl\u207b', -1, x + 50, y), new Ion('Cl\u207b', -1, x + 75, y)];\n                break;\n            case 'CaCl2':\n                ions1 = [new Ion('Ca\u00b2\u207a', 2, x, y)];\n                ions2 = [new Ion('Cl\u207b', -1, x + 50, y), new Ion('Cl\u207b', -1, x + 75, y)];\n                break;\n            case 'Ca(NO3)2':\n                ions1 = [new Ion('Ca\u00b2\u207a', 2, x, y)];\n                ions2 = [new Ion('NO\u2083\u207b', -1, x + 50, y), new Ion('NO\u2083\u207b', -1, x + 75, y)];\n                break;\n            case 'KBr':\n                ions1 = [new Ion('K\u207a', 1, x, y)];\n                ions2 = [new Ion('Br\u207b', -1, x + 50, y)];\n                break;\n            case 'KI':\n                ions1 = [new Ion('K\u207a', 1, x, y)];\n                ions2 = [new Ion('I\u207b', -1, x + 50, y)];\n                break;\n            case 'Na2CO3':\n                ions1 = [new Ion('Na\u207a', 1, x, y), new Ion('Na\u207a', 1, x + 25, y)];\n                ions2 = [new Ion('CO\u2083\u00b2\u207b', -2, x + 50, y)];\n                break;\n            case 'K2SO4':\n                ions1 = [new Ion('K\u207a', 1, x, y), new Ion('K\u207a', 1, x + 25, y)];\n                ions2 = [new Ion('SO\u2084\u00b2\u207b', -2, x + 50, y)];\n                break;\n            case 'KNO3':\n                ions1 = [new Ion('K\u207a', 1, x, y)];\n                ions2 = [new Ion('NO\u2083\u207b', -1, x + 50, y)];\n                break;\n            case 'Pb(NO3)2':\n                ions1 = [new Ion('Pb\u00b2\u207a', 2, x, y)];\n                ions2 = [new Ion('NO\u2083\u207b', -1, x + 50, y), new Ion('NO\u2083\u207b', -1, x + 75, y)];\n                break;\n        }\n\n        ions.push(...ions1, ...ions2);\n    }\n\n    function checkPrecipitation() {\n        for (let i = 0; i < ions.length; i++) {\n            if (ions[i].isPrecipitate) continue;\n\n            for (let j = i + 1; j < ions.length; j++) {\n                if (ions[j].isPrecipitate) continue;\n\n                const dx = ions[i].x - ions[j].x;\n                const dy = ions[i].y - ions[j].y;\n                const distance = Math.sqrt(dx * dx + dy * dy);\n\n                if (distance < 50) {\n                    \/\/ Check if these ions form a precipitate\n                    const key1 = ions[i].name + '_' + ions[j].name;\n                    const key2 = ions[j].name + '_' + ions[i].name;\n                    \n                    const precipitateName = precipitates[key1] || precipitates[key2];\n                    \n                    if (precipitateName) {\n                        \/\/ Form precipitate\n                        ions[i].convertToPrecipitate(precipitateName);\n                        ions[j].remove();\n                        ions.splice(j, 1);\n                        break;\n                    }\n                }\n            }\n        }\n    }\n\n    function animate() {\n        ions.forEach(ion => ion.update());\n        checkPrecipitation();\n        requestAnimationFrame(animate);\n    }\n\n    function clearAll() {\n        ions.forEach(ion => ion.remove());\n        ions.length = 0;\n    }\n\n    animate();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Vi skal se lidt p\u00e5 f\u00e6ldningsreaktioner. I simulationen herunder kan man tils\u00e6tte forskellige salte til vandet. Salte bliver opl\u00f8st til ioner som vil flyde rundt. Hvis to ioner m\u00f8der hinanden som vil udf\u00e6lde vil de g\u00e5 sammen og ligge sig p\u00e5 bunden. Add NaCl Add CuSO\u2084 Add AgNO\u2083 Add KCl Add Na\u2082SO\u2084 Add Na\u2082S Add [&hellip;]<\/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_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3929","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"Henriksen","author_link":"https:\/\/mxth.dk\/?author=1"},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3929","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=3929"}],"version-history":[{"count":6,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3929\/revisions"}],"predecessor-version":[{"id":3935,"href":"https:\/\/mxth.dk\/index.php?rest_route=\/wp\/v2\/posts\/3929\/revisions\/3935"}],"wp:attachment":[{"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mxth.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}