{"id":805,"date":"2026-08-24T21:46:44","date_gmt":"2026-08-24T19:46:44","guid":{"rendered":"https:\/\/dehart.nl\/?page_id=805"},"modified":"2026-08-24T21:48:37","modified_gmt":"2026-08-24T19:48:37","slug":"hostingpakket-kiezer","status":"publish","type":"page","link":"https:\/\/dehart.nl\/index.php\/hostingpakket-kiezer\/","title":{"rendered":"Hostingpakket-kiezer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"805\" class=\"elementor elementor-805\">\n\t\t\t\t<div class=\"elementor-element elementor-element-690eaf3 e-flex e-con-boxed e-con e-parent\" data-id=\"690eaf3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a531f1 elementor-widget elementor-widget-html\" data-id=\"4a531f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ==========================================\r\n   DE HART IT - HOSTINGPAKKET KIEZER\r\n========================================== *\/\r\n\r\n.dhit-hosting-kiezer,\r\n.dhit-hosting-kiezer *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.dhit-hosting-kiezer{\r\n    --blue:#0b67bd;\r\n    --blue-dark:#062b59;\r\n    --blue-light:#eaf4ff;\r\n    --text:#25364a;\r\n    --muted:#66788c;\r\n    --border:#dce5ee;\r\n    --white:#fff;\r\n    --bg:#f5f8fb;\r\n    --success:#16834b;\r\n\r\n    font-family:inherit;\r\n    color:var(--text);\r\n}\r\n\r\n\/* HERO *\/\r\n.dhit-hk-hero{\r\n    position:relative;\r\n    overflow:hidden;\r\n    padding:85px 24px;\r\n    text-align:center;\r\n    color:#fff;\r\n    background:\r\n        radial-gradient(circle at 80% 20%,rgba(36,144,255,.25),transparent 35%),\r\n        linear-gradient(135deg,#041e3d,#073e77 55%,#0b67bd);\r\n}\r\n\r\n.dhit-hk-hero:after{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:330px;\r\n    height:330px;\r\n    border:1px solid rgba(255,255,255,.08);\r\n    border-radius:50%;\r\n    right:-120px;\r\n    bottom:-190px;\r\n}\r\n\r\n.dhit-hk-badge{\r\n    display:inline-block;\r\n    padding:7px 15px;\r\n    margin-bottom:18px;\r\n    border:1px solid rgba(255,255,255,.22);\r\n    border-radius:30px;\r\n    background:rgba(255,255,255,.1);\r\n    font-size:14px;\r\n    font-weight:700;\r\n}\r\n\r\n.dhit-hk-hero h1{\r\n    margin:0 0 17px;\r\n    color:#fff !important;\r\n    font-size:clamp(36px,5vw,58px);\r\n    line-height:1.08;\r\n}\r\n\r\n.dhit-hk-hero p{\r\n    max-width:720px;\r\n    margin:0 auto;\r\n    color:#dceaff !important;\r\n    font-size:19px;\r\n    line-height:1.7;\r\n}\r\n\r\n\/* MAIN *\/\r\n.dhit-hk-main{\r\n    padding:65px 20px 80px;\r\n    background:var(--bg);\r\n}\r\n\r\n.dhit-hk-container{\r\n    max-width:1050px;\r\n    margin:auto;\r\n}\r\n\r\n\/* PROGRESS *\/\r\n.dhit-hk-progress{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n    max-width:650px;\r\n    margin:0 auto 35px;\r\n    position:relative;\r\n}\r\n\r\n.dhit-hk-progress:before{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:18px;\r\n    left:8%;\r\n    right:8%;\r\n    height:2px;\r\n    background:#d8e2eb;\r\n}\r\n\r\n.dhit-step-dot{\r\n    position:relative;\r\n    z-index:2;\r\n    text-align:center;\r\n    color:#8391a0;\r\n    font-size:12px;\r\n    font-weight:700;\r\n}\r\n\r\n.dhit-step-dot span{\r\n    display:flex;\r\n    width:37px;\r\n    height:37px;\r\n    margin:0 auto 7px;\r\n    align-items:center;\r\n    justify-content:center;\r\n    border-radius:50%;\r\n    border:2px solid #d8e2eb;\r\n    background:#fff;\r\n}\r\n\r\n.dhit-step-dot.active{\r\n    color:var(--blue);\r\n}\r\n\r\n.dhit-step-dot.active span{\r\n    border-color:var(--blue);\r\n    background:var(--blue);\r\n    color:#fff;\r\n}\r\n\r\n\/* QUESTION CARD *\/\r\n.dhit-question-card{\r\n    padding:42px;\r\n    border:1px solid var(--border);\r\n    border-radius:20px;\r\n    background:#fff;\r\n    box-shadow:0 15px 45px rgba(23,54,87,.08);\r\n}\r\n\r\n.dhit-question{\r\n    display:none;\r\n}\r\n\r\n.dhit-question.active{\r\n    display:block;\r\n    animation:dhitFade .3s ease;\r\n}\r\n\r\n@keyframes dhitFade{\r\n    from{opacity:0;transform:translateY(8px)}\r\n    to{opacity:1;transform:translateY(0)}\r\n}\r\n\r\n.dhit-question-label{\r\n    margin-bottom:7px;\r\n    color:var(--blue);\r\n    font-size:14px;\r\n    font-weight:800;\r\n    text-transform:uppercase;\r\n    letter-spacing:.7px;\r\n}\r\n\r\n.dhit-question h2{\r\n    margin:0 0 10px;\r\n    color:var(--blue-dark);\r\n    font-size:30px;\r\n}\r\n\r\n.dhit-question-intro{\r\n    margin:0 0 27px;\r\n    color:var(--muted);\r\n    line-height:1.65;\r\n}\r\n\r\n\/* ANSWERS *\/\r\n.dhit-options{\r\n    display:grid;\r\n    grid-template-columns:repeat(2,1fr);\r\n    gap:15px;\r\n}\r\n\r\n.dhit-option{\r\n    display:flex;\r\n    gap:15px;\r\n    min-height:100px;\r\n    align-items:center;\r\n    padding:19px;\r\n    border:2px solid var(--border);\r\n    border-radius:13px;\r\n    cursor:pointer;\r\n    transition:.2s ease;\r\n    background:#fff;\r\n}\r\n\r\n.dhit-option:hover{\r\n    border-color:#8bc3f5;\r\n    transform:translateY(-2px);\r\n    box-shadow:0 8px 20px rgba(20,83,140,.08);\r\n}\r\n\r\n.dhit-option.selected{\r\n    border-color:var(--blue);\r\n    background:var(--blue-light);\r\n}\r\n\r\n.dhit-option-icon{\r\n    display:flex;\r\n    flex:0 0 48px;\r\n    width:48px;\r\n    height:48px;\r\n    align-items:center;\r\n    justify-content:center;\r\n    border-radius:11px;\r\n    background:#eef5fb;\r\n    font-size:23px;\r\n}\r\n\r\n.dhit-option.selected .dhit-option-icon{\r\n    background:var(--blue);\r\n    color:#fff;\r\n}\r\n\r\n.dhit-option strong{\r\n    display:block;\r\n    margin-bottom:4px;\r\n    color:var(--blue-dark);\r\n    font-size:16px;\r\n}\r\n\r\n.dhit-option small{\r\n    display:block;\r\n    color:var(--muted);\r\n    font-size:13px;\r\n    line-height:1.45;\r\n}\r\n\r\n\/* NAV *\/\r\n.dhit-hk-nav{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n    margin-top:28px;\r\n}\r\n\r\n.dhit-hk-btn{\r\n    appearance:none;\r\n    border:0;\r\n    border-radius:9px;\r\n    padding:13px 22px;\r\n    font-family:inherit;\r\n    font-weight:800;\r\n    cursor:pointer;\r\n    transition:.2s;\r\n}\r\n\r\n.dhit-hk-back{\r\n    background:#edf2f6;\r\n    color:#455a70;\r\n}\r\n\r\n.dhit-hk-next{\r\n    margin-left:auto;\r\n    background:var(--blue);\r\n    color:#fff;\r\n}\r\n\r\n.dhit-hk-next:hover{\r\n    background:#07579f;\r\n    transform:translateY(-1px);\r\n}\r\n\r\n.dhit-hk-next:disabled{\r\n    opacity:.4;\r\n    cursor:not-allowed;\r\n    transform:none;\r\n}\r\n\r\n\/* RESULT *\/\r\n.dhit-result{\r\n    display:none;\r\n}\r\n\r\n.dhit-result.active{\r\n    display:block;\r\n}\r\n\r\n.dhit-result-header{\r\n    text-align:center;\r\n    margin-bottom:30px;\r\n}\r\n\r\n.dhit-result-check{\r\n    display:flex;\r\n    width:60px;\r\n    height:60px;\r\n    align-items:center;\r\n    justify-content:center;\r\n    margin:0 auto 15px;\r\n    border-radius:50%;\r\n    background:#e6f7ed;\r\n    color:var(--success);\r\n    font-size:27px;\r\n    font-weight:900;\r\n}\r\n\r\n.dhit-result-header h2{\r\n    margin:0 0 8px;\r\n    color:var(--blue-dark);\r\n    font-size:32px;\r\n}\r\n\r\n.dhit-result-header p{\r\n    margin:0;\r\n    color:var(--muted);\r\n}\r\n\r\n.dhit-recommendation{\r\n    position:relative;\r\n    overflow:hidden;\r\n    max-width:720px;\r\n    margin:auto;\r\n    border:2px solid var(--blue);\r\n    border-radius:17px;\r\n    background:#fff;\r\n}\r\n\r\n.dhit-recommendation-top{\r\n    padding:26px 30px;\r\n    background:linear-gradient(135deg,var(--blue-dark),var(--blue));\r\n    color:#fff;\r\n}\r\n\r\n.dhit-recommendation-top small{\r\n    color:#d8ebff;\r\n    font-weight:700;\r\n}\r\n\r\n.dhit-recommendation-top h3{\r\n    margin:5px 0 0;\r\n    color:#fff !important;\r\n    font-size:28px;\r\n}\r\n\r\n.dhit-recommendation-body{\r\n    padding:28px 30px;\r\n}\r\n\r\n.dhit-reason{\r\n    margin:0 0 20px;\r\n    color:#55687d;\r\n    line-height:1.7;\r\n}\r\n\r\n.dhit-benefits{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:10px;\r\n    margin:20px 0 25px;\r\n}\r\n\r\n.dhit-benefit{\r\n    color:#40546a;\r\n    font-size:14px;\r\n}\r\n\r\n.dhit-benefit:before{\r\n    content:\"\u2713\";\r\n    margin-right:8px;\r\n    color:var(--success);\r\n    font-weight:900;\r\n}\r\n\r\n.dhit-result-actions{\r\n    display:flex;\r\n    gap:10px;\r\n    flex-wrap:wrap;\r\n}\r\n\r\n.dhit-order{\r\n    display:inline-block;\r\n    padding:14px 24px;\r\n    border-radius:9px;\r\n    background:var(--blue);\r\n    color:#fff !important;\r\n    text-decoration:none !important;\r\n    font-weight:800;\r\n}\r\n\r\n.dhit-restart{\r\n    padding:14px 20px;\r\n    border:1px solid var(--border);\r\n    border-radius:9px;\r\n    background:#fff;\r\n    color:#4a5e73;\r\n    cursor:pointer;\r\n    font-weight:700;\r\n}\r\n\r\n\/* BOTTOM *\/\r\n.dhit-hk-help{\r\n    max-width:1050px;\r\n    margin:25px auto 0;\r\n    padding:20px;\r\n    text-align:center;\r\n    border-radius:12px;\r\n    background:#edf3f8;\r\n    color:#607287;\r\n}\r\n\r\n.dhit-hk-help a{\r\n    color:var(--blue);\r\n    font-weight:800;\r\n    text-decoration:none;\r\n}\r\n\r\n@media(max-width:700px){\r\n    .dhit-hk-hero{\r\n        padding:60px 20px;\r\n    }\r\n\r\n    .dhit-hk-main{\r\n        padding:40px 14px 60px;\r\n    }\r\n\r\n    .dhit-question-card{\r\n        padding:25px 18px;\r\n    }\r\n\r\n    .dhit-options{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .dhit-question h2{\r\n        font-size:25px;\r\n    }\r\n\r\n    .dhit-step-dot{\r\n        font-size:0;\r\n    }\r\n\r\n    .dhit-benefits{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .dhit-recommendation-body,\r\n    .dhit-recommendation-top{\r\n        padding:22px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"dhit-hosting-kiezer\">\r\n\r\n    <section class=\"dhit-hk-hero\">\r\n        <span class=\"dhit-hk-badge\">De Hart IT \u2022 Hosting keuzehulp<\/span>\r\n\r\n        <h1>Welke hosting past bij u?<\/h1>\r\n\r\n        <p>\r\n            Geen ingewikkelde technische termen. Beantwoord een paar korte vragen\r\n            en ontdek welk hostingpakket het beste aansluit bij uw website.\r\n        <\/p>\r\n    <\/section>\r\n\r\n\r\n    <section class=\"dhit-hk-main\">\r\n        <div class=\"dhit-hk-container\">\r\n\r\n            <div class=\"dhit-hk-progress\">\r\n                <div class=\"dhit-step-dot active\" data-dot=\"1\">\r\n                    <span>1<\/span>Website\r\n                <\/div>\r\n\r\n                <div class=\"dhit-step-dot\" data-dot=\"2\">\r\n                    <span>2<\/span>Gebruik\r\n                <\/div>\r\n\r\n                <div class=\"dhit-step-dot\" data-dot=\"3\">\r\n                    <span>3<\/span>E-mail\r\n                <\/div>\r\n\r\n                <div class=\"dhit-step-dot\" data-dot=\"4\">\r\n                    <span>4<\/span>Advies\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"dhit-question-card\">\r\n\r\n                <!-- VRAAG 1 -->\r\n                <div class=\"dhit-question active\" data-step=\"1\">\r\n\r\n                    <div class=\"dhit-question-label\">Vraag 1 van 3<\/div>\r\n\r\n                    <h2>Wat wilt u hosten?<\/h2>\r\n\r\n                    <p class=\"dhit-question-intro\">\r\n                        Kies wat het beste bij uw website past.\r\n                    <\/p>\r\n\r\n                    <div class=\"dhit-options\">\r\n\r\n                        <div class=\"dhit-option\" data-value=\"small\">\r\n                            <div class=\"dhit-option-icon\">\ud83c\udf10<\/div>\r\n                            <div>\r\n                                <strong>Kleine website<\/strong>\r\n                                <small>Een eenvoudige website of online visitekaartje.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"wordpress\">\r\n                            <div class=\"dhit-option-icon\">W<\/div>\r\n                            <div>\r\n                                <strong>WordPress website<\/strong>\r\n                                <small>Voor een professionele WordPress-website.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"business\">\r\n                            <div class=\"dhit-option-icon\">\ud83c\udfe2<\/div>\r\n                            <div>\r\n                                <strong>Zakelijke website<\/strong>\r\n                                <small>Voor mijn bedrijf of organisatie.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"large\">\r\n                            <div class=\"dhit-option-icon\">\ud83d\ude80<\/div>\r\n                            <div>\r\n                                <strong>Grotere website<\/strong>\r\n                                <small>Meer bezoekers, opslag of zwaardere toepassingen.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"dhit-hk-nav\">\r\n                        <button class=\"dhit-hk-btn dhit-hk-next\" disabled>\r\n                            Volgende \u2192\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <!-- VRAAG 2 -->\r\n                <div class=\"dhit-question\" data-step=\"2\">\r\n\r\n                    <div class=\"dhit-question-label\">Vraag 2 van 3<\/div>\r\n\r\n                    <h2>Hoe intensief wordt de website gebruikt?<\/h2>\r\n\r\n                    <p class=\"dhit-question-intro\">\r\n                        Een schatting is voldoende.\r\n                    <\/p>\r\n\r\n                    <div class=\"dhit-options\">\r\n\r\n                        <div class=\"dhit-option\" data-value=\"light\">\r\n                            <div class=\"dhit-option-icon\">\u25cf<\/div>\r\n                            <div>\r\n                                <strong>Normaal gebruik<\/strong>\r\n                                <small>Een gewone website met een beperkt aantal bezoekers.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"medium\">\r\n                            <div class=\"dhit-option-icon\">\u25cf\u25cf<\/div>\r\n                            <div>\r\n                                <strong>Regelmatig bezocht<\/strong>\r\n                                <small>Een actieve zakelijke website of blog.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"heavy\">\r\n                            <div class=\"dhit-option-icon\">\u26a1<\/div>\r\n                            <div>\r\n                                <strong>Veel gebruik<\/strong>\r\n                                <small>Veel bezoekers of een website die extra capaciteit nodig heeft.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"unknown\">\r\n                            <div class=\"dhit-option-icon\">?<\/div>\r\n                            <div>\r\n                                <strong>Weet ik niet<\/strong>\r\n                                <small>Geen probleem, wij kiezen een veilige uitgangspositie.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"dhit-hk-nav\">\r\n                        <button class=\"dhit-hk-btn dhit-hk-back\">\u2190 Terug<\/button>\r\n                        <button class=\"dhit-hk-btn dhit-hk-next\" disabled>Volgende \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <!-- VRAAG 3 -->\r\n                <div class=\"dhit-question\" data-step=\"3\">\r\n\r\n                    <div class=\"dhit-question-label\">Vraag 3 van 3<\/div>\r\n\r\n                    <h2>Heeft u zakelijke e-mail nodig?<\/h2>\r\n\r\n                    <p class=\"dhit-question-intro\">\r\n                        Bijvoorbeeld info@uwbedrijf.nl of administratie@uwbedrijf.nl.\r\n                    <\/p>\r\n\r\n                    <div class=\"dhit-options\">\r\n\r\n                        <div class=\"dhit-option\" data-value=\"no\">\r\n                            <div class=\"dhit-option-icon\">\u2709<\/div>\r\n                            <div>\r\n                                <strong>Nee<\/strong>\r\n                                <small>Ik heb geen mailboxen nodig.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"few\">\r\n                            <div class=\"dhit-option-icon\">\u2709<\/div>\r\n                            <div>\r\n                                <strong>1 tot 5 mailboxen<\/strong>\r\n                                <small>Geschikt voor kleine bedrijven en zelfstandigen.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"many\">\r\n                            <div class=\"dhit-option-icon\">\ud83d\udce8<\/div>\r\n                            <div>\r\n                                <strong>Meer dan 5 mailboxen<\/strong>\r\n                                <small>Voor teams en bedrijven met meerdere gebruikers.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-option\" data-value=\"unknown\">\r\n                            <div class=\"dhit-option-icon\">?<\/div>\r\n                            <div>\r\n                                <strong>Weet ik nog niet<\/strong>\r\n                                <small>Dat kan later altijd worden uitgebreid.<\/small>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"dhit-hk-nav\">\r\n                        <button class=\"dhit-hk-btn dhit-hk-back\">\u2190 Terug<\/button>\r\n                        <button class=\"dhit-hk-btn dhit-hk-next\" disabled>\r\n                            Bekijk mijn advies \u2192\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- RESULTAAT -->\r\n                <div class=\"dhit-result\">\r\n\r\n                    <div class=\"dhit-result-header\">\r\n                        <div class=\"dhit-result-check\">\u2713<\/div>\r\n                        <h2>Uw hostingadvies<\/h2>\r\n                        <p>Op basis van uw antwoorden adviseren wij:<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"dhit-recommendation\">\r\n\r\n                        <div class=\"dhit-recommendation-top\">\r\n                            <small>Aanbevolen door De Hart IT<\/small>\r\n                            <h3 id=\"dhitPackage\">Webhosting<\/h3>\r\n                        <\/div>\r\n\r\n                        <div class=\"dhit-recommendation-body\">\r\n\r\n                            <p class=\"dhit-reason\" id=\"dhitReason\"><\/p>\r\n\r\n                            <div class=\"dhit-benefits\">\r\n                                <div class=\"dhit-benefit\">Gratis SSL-certificaat<\/div>\r\n                                <div class=\"dhit-benefit\">Beheer via klantenportaal<\/div>\r\n                                <div class=\"dhit-benefit\">1-click WordPress installatie<\/div>\r\n                                <div class=\"dhit-benefit\">Persoonlijke ondersteuning<\/div>\r\n                            <\/div>\r\n\r\n                            <div class=\"dhit-result-actions\">\r\n\r\n                                <a\r\n                                    id=\"dhitOrder\"\r\n                                    class=\"dhit-order\"\r\n                                    href=\"https:\/\/dehart.nl\/index.php\/klanten\/\"\r\n                                >\r\n                                    Bekijk mogelijkheden \u2192\r\n                                <\/a>\r\n\r\n                                <button class=\"dhit-restart\">\r\n                                    Opnieuw beginnen\r\n                                <\/button>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"dhit-hk-help\">\r\n                Twijfelt u nog?\r\n                <a href=\"\/contact\/\">Neem contact op met De Hart IT<\/a>.\r\n                Wij helpen u graag bij het kiezen van het juiste pakket.\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n    const wrapper = document.querySelector('.dhit-hosting-kiezer');\r\n    if(!wrapper) return;\r\n\r\n    let step = 1;\r\n\r\n    const answers = {\r\n        website: '',\r\n        usage: '',\r\n        email: ''\r\n    };\r\n\r\n    const questions = wrapper.querySelectorAll('.dhit-question');\r\n    const dots = wrapper.querySelectorAll('.dhit-step-dot');\r\n    const result = wrapper.querySelector('.dhit-result');\r\n\r\n    function showStep(number){\r\n\r\n        step = number;\r\n\r\n        questions.forEach(q => {\r\n            q.classList.toggle(\r\n                'active',\r\n                Number(q.dataset.step) === number\r\n            );\r\n        });\r\n\r\n        result.classList.remove('active');\r\n\r\n        dots.forEach(dot => {\r\n            dot.classList.toggle(\r\n                'active',\r\n                Number(dot.dataset.dot) <= number\r\n            );\r\n        });\r\n    }\r\n\r\n    questions.forEach(question => {\r\n\r\n        const options = question.querySelectorAll('.dhit-option');\r\n        const next = question.querySelector('.dhit-hk-next');\r\n\r\n        options.forEach(option => {\r\n\r\n            option.addEventListener('click', function(){\r\n\r\n                options.forEach(o => o.classList.remove('selected'));\r\n                this.classList.add('selected');\r\n\r\n                const current = Number(question.dataset.step);\r\n\r\n                if(current === 1){\r\n                    answers.website = this.dataset.value;\r\n                }\r\n\r\n                if(current === 2){\r\n                    answers.usage = this.dataset.value;\r\n                }\r\n\r\n                if(current === 3){\r\n                    answers.email = this.dataset.value;\r\n                }\r\n\r\n                next.disabled = false;\r\n            });\r\n\r\n        });\r\n\r\n        if(next){\r\n\r\n            next.addEventListener('click', function(){\r\n\r\n                if(step < 3){\r\n                    showStep(step + 1);\r\n                }else{\r\n                    calculateResult();\r\n                }\r\n\r\n            });\r\n\r\n        }\r\n\r\n        const back = question.querySelector('.dhit-hk-back');\r\n\r\n        if(back){\r\n            back.addEventListener('click', function(){\r\n                showStep(step - 1);\r\n            });\r\n        }\r\n\r\n    });\r\n\r\n\r\n    function calculateResult(){\r\n\r\n        let score = 0;\r\n\r\n        if(answers.website === 'wordpress') score += 2;\r\n        if(answers.website === 'business') score += 2;\r\n        if(answers.website === 'large') score += 4;\r\n\r\n        if(answers.usage === 'medium') score += 2;\r\n        if(answers.usage === 'heavy') score += 4;\r\n        if(answers.usage === 'unknown') score += 1;\r\n\r\n        if(answers.email === 'few') score += 1;\r\n        if(answers.email === 'many') score += 3;\r\n        if(answers.email === 'unknown') score += 1;\r\n\r\n        let packageName = '';\r\n        let reason = '';\r\n\r\n        if(score <= 2){\r\n\r\n            packageName = 'Webhosting Start';\r\n\r\n            reason =\r\n                'Voor uw situatie lijkt een compact hostingpakket voldoende. ' +\r\n                'U krijgt de belangrijkste hostingfuncties zonder onnodige extra capaciteit.';\r\n\r\n        }else if(score <= 6){\r\n\r\n            packageName = 'Webhosting Plus';\r\n\r\n            reason =\r\n                'Uw website vraagt om iets meer capaciteit en flexibiliteit. ' +\r\n                'Daarom adviseren wij een pakket dat geschikt is voor WordPress, ' +\r\n                'zakelijke websites en dagelijks gebruik.';\r\n\r\n        }else{\r\n\r\n            packageName = 'Webhosting Pro';\r\n\r\n            reason =\r\n                'Voor uw wensen adviseren wij een krachtiger hostingpakket. ' +\r\n                'Dit geeft meer ruimte voor groei, bezoekers, e-mail en zwaardere websites.';\r\n\r\n        }\r\n\r\n        document.getElementById('dhitPackage').textContent = packageName;\r\n        document.getElementById('dhitReason').textContent = reason;\r\n\r\n        questions.forEach(q => q.classList.remove('active'));\r\n\r\n        dots.forEach(dot => dot.classList.add('active'));\r\n\r\n        result.classList.add('active');\r\n    }\r\n\r\n\r\n    wrapper.querySelector('.dhit-restart')\r\n        .addEventListener('click', function(){\r\n\r\n            answers.website = '';\r\n            answers.usage = '';\r\n            answers.email = '';\r\n\r\n            wrapper.querySelectorAll('.dhit-option')\r\n                .forEach(o => o.classList.remove('selected'));\r\n\r\n            wrapper.querySelectorAll('.dhit-hk-next')\r\n                .forEach(b => b.disabled = true);\r\n\r\n            showStep(1);\r\n\r\n            wrapper.scrollIntoView({\r\n                behavior:'smooth',\r\n                block:'start'\r\n            });\r\n\r\n        });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>De Hart IT \u2022 Hosting keuzehulp Welke hosting past bij u? Geen ingewikkelde technische termen. Beantwoord een paar korte vragen en ontdek welk hostingpakket het beste aansluit bij uw website. 1Website 2Gebruik 3E-mail 4Advies Vraag 1 van 3 Wat wilt u hosten? Kies wat het beste bij uw website past. \ud83c\udf10 Kleine website Een eenvoudige [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_regular_price":[],"currency_symbol":[],"footnotes":""},"class_list":["post-805","page","type-page","status-publish","hentry"],"post_slider_layout_featured_media_urls":{"thumbnail":"","post_slider_layout_landscape_large":"","post_slider_layout_portrait_large":"","post_slider_layout_square_large":"","post_slider_layout_landscape":"","post_slider_layout_portrait":"","post_slider_layout_square":"","full":""},"_links":{"self":[{"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/pages\/805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/comments?post=805"}],"version-history":[{"count":5,"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/pages\/805\/revisions"}],"predecessor-version":[{"id":810,"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/pages\/805\/revisions\/810"}],"wp:attachment":[{"href":"https:\/\/dehart.nl\/index.php\/wp-json\/wp\/v2\/media?parent=805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}