{"id":531,"date":"2026-02-18T22:42:07","date_gmt":"2026-02-18T22:42:07","guid":{"rendered":"https:\/\/not-broken.co.uk\/toolkit\/?page_id=531"},"modified":"2026-02-21T21:04:31","modified_gmt":"2026-02-21T21:04:31","slug":"sample-dyslexia-toolkit","status":"publish","type":"page","link":"https:\/\/not-broken.co.uk\/toolkit\/projects\/sample-dyslexia-toolkit\/","title":{"rendered":"Sample Dyslexia Toolkit"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"531\" class=\"elementor elementor-531\">\n\t\t\t\t<div class=\"elementor-element elementor-element-475414ec e-flex e-con-boxed e-con e-parent\" data-id=\"475414ec\" 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-1a9a06c4 elementor-widget elementor-widget-text-editor\" data-id=\"1a9a06c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<p>This is a sample of the dyslexia toolkit. The full tool is available to schools in identifying and providing targeted support for the different aspects of Dyslexia in the classroom.<\/p>\n\n<p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5ee32c9 e-flex e-con-boxed e-con e-parent\" data-id=\"5ee32c9\" 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-b5e876a elementor-widget elementor-widget-html\" data-id=\"b5e876a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en-GB\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dyslexia Tool Demo (Simplified Hook)<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n    <style>\n        \/* DEMO HOOK STYLES *\/\n        .demo-restriction-blur { filter: blur(4px); opacity: 0.6; pointer-events: none; user-select: none; }\n        .demo-instruction-box { background: #eef2ff; border: 1px solid #e0e7ff; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; }\n        \n        @media print {\n            .no-print { display: none; }\n            body { font-size: 10pt; background: white; padding: 0; }\n            .print-container { width: 100%; box-shadow: none; margin: 0; padding: 0; border: none; max-width: 100%; }\n            .page-break { page-break-before: always; }\n            table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n            th, td { border: 1px solid #cbd5e1 !important; overflow: hidden; word-wrap: break-word; }\n        }\n        .step-container { display: none; }\n        .step-container.active { display: block; }\n\n        input[type=range] {\n            -webkit-appearance: none;\n            width: 100%;\n            height: 8px;\n            border-radius: 5px;\n            background: linear-gradient(to right, #10b981, #f59e0b, #ef4444);\n            outline: none;\n        }\n        input[type=range]::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 18px;\n            height: 18px;\n            border-radius: 50%;\n            background: #4f46e5;\n            cursor: pointer;\n            border: 2px solid white;\n        }\n        input[type=range]:disabled { background: #e2e8f0; cursor: not-allowed; }\n        input[type=range]:disabled::-webkit-slider-thumb { background: #cbd5e1; }\n    <\/style>\n<\/head>\n\n<body class=\"bg-slate-50 text-slate-900 font-sans leading-relaxed\">\n\n<div class=\"max-w-6xl mx-auto my-8 p-4 sm:p-8 bg-white shadow-lg rounded-xl print-container\">\n\n    <div class=\"demo-instruction-box no-print\">\n        <h2 class=\"font-bold text-indigo-900\">Simplified Website Demo<\/h2>\n        <p class=\"text-sm text-indigo-800\">\n            This is a restricted \"hook\" version of the tool. Two rows are visible on the report, and only two sliders are active. \n            <strong>The full, unrestricted version for schools is available as a professional tool on our project page.<\/strong>\n        <\/p>\n    <\/div>\n\n    <header class=\"border-b-2 border-indigo-100 pb-6 mb-8 flex justify-between items-center\">\n        <div>\n            <h1 class=\"text-2xl font-bold text-indigo-900\">Dyslexia Screening & Graduated Response Tool<\/h1>\n            <p class=\"text-slate-500 italic\">Delphi Consensus Definition (UK) \u2013 Secondary Phase<\/p>\n        <\/div>\n        <div class=\"no-print\">\n            <button onclick=\"window.print()\" class=\"bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition text-sm font-semibold\">\n                Print Report\n            <\/button>\n        <\/div>\n    <\/header>\n\n    <nav class=\"flex space-x-4 mb-8 no-print border-b border-slate-200\">\n        <button id=\"tab-form\" onclick=\"showStep(1)\" class=\"pb-2 px-4 text-indigo-600 border-b-2 border-indigo-600 font-bold transition\">1. Observation Form<\/button>\n        <button id=\"tab-report\" onclick=\"showStep(2)\" class=\"pb-2 px-4 text-slate-400 hover:text-indigo-600 font-bold transition\">2. Graduated Response Report<\/button>\n    <\/nav>\n\n    <div id=\"step-1\" class=\"step-container active\">\n        <section class=\"space-y-10\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 bg-indigo-50 p-4 rounded-lg mb-6\">\n                <div>\n                    <label class=\"block text-sm font-bold text-indigo-900\">Student Name<\/label>\n                    <input type=\"text\" id=\"studentName\" class=\"w-full p-2 border rounded mt-1\" placeholder=\"Enter name...\">\n                <\/div>\n                <div>\n                    <label class=\"block text-sm font-bold text-indigo-900\">Year Group<\/label>\n                    <input type=\"text\" id=\"yearGroup\" class=\"w-full p-2 border rounded mt-1\" placeholder=\"e.g. Year 10\">\n                <\/div>\n            <\/div>\n\n            <div class=\"space-y-6\">\n                <h3 class=\"text-lg font-bold text-indigo-800 border-l-4 border-amber-500 pl-3\">Active Indicators (Demo)<\/h3>\n                <div class=\"grid grid-cols-1 gap-8\">\n                    <div class=\"obs-row space-y-2\">\n                        <span class=\"text-sm font-semibold\">Phonological Awareness: <span class=\"font-normal text-slate-500\">Difficulty segmenting or blending sounds.<\/span><\/span>\n                        <input type=\"range\" min=\"1\" max=\"10\" value=\"4\" class=\"impact-slider\" data-key=\"Phonological Awareness\">\n                    <\/div>\n                    <div class=\"obs-row space-y-2\">\n                        <span class=\"text-sm font-semibold\">Working Memory: <span class=\"font-normal text-slate-500\">Difficulty holding instructions in mind.<\/span><\/span>\n                        <input type=\"range\" min=\"1\" max=\"10\" value=\"7\" class=\"impact-slider\" data-key=\"Working Memory\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"demo-restriction-blur space-y-10\">\n                <div class=\"space-y-6\">\n                    <h3 class=\"text-lg font-bold text-slate-400 border-l-4 border-slate-300 pl-3\">Cognitive Contributors (Locked)<\/h3>\n                    <input type=\"range\" disabled value=\"5\" class=\"w-full\">\n                <\/div>\n                <div class=\"space-y-6\">\n                    <h3 class=\"text-lg font-bold text-slate-400 border-l-4 border-slate-300 pl-3\">Written Expression (Locked)<\/h3>\n                    <input type=\"range\" disabled value=\"3\" class=\"w-full\">\n                <\/div>\n            <\/div>\n\n            <div class=\"mt-8 text-center no-print\">\n                <button onclick=\"generateReport()\" class=\"bg-indigo-600 text-white px-8 py-4 rounded-full font-bold shadow-lg hover:bg-indigo-700 transition\">\n                    Generate Demo Report\n                <\/button>\n            <\/div>\n        <\/section>\n    <\/div>\n\n    <div id=\"step-2\" class=\"step-container\">\n        <div id=\"reportContent\">\n            <div class=\"border-2 border-indigo-100 p-4 rounded-xl space-y-6\">\n                <div class=\"flex justify-between items-center bg-slate-50 p-4 rounded-lg border\">\n                    <h2 class=\"text-xl font-bold text-indigo-900\" id=\"resName\">Student Name<\/h2>\n                <\/div>\n\n                <div class=\"overflow-x-auto\">\n                    <table class=\"w-full text-xs text-left border-collapse border border-slate-200\">\n                        <thead class=\"bg-indigo-600 text-white uppercase tracking-wider\">\n                            <tr>\n                                <th class=\"p-3 border border-indigo-700 w-28\">Area<\/th>\n                                <th class=\"p-3 border border-indigo-700 w-1\/4\">Analysis (Why)<\/th>\n                                <th class=\"p-3 border border-indigo-700 w-1\/4\">Actions (What)<\/th>\n                                <th class=\"p-3 border border-indigo-700 w-1\/4\">Review Indicators<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody id=\"responseTableBody\">\n                            <\/tbody>\n                    <\/table>\n                <\/div>\n\n                <div class=\"demo-restriction-blur\">\n                    <table class=\"w-full text-xs text-left border-collapse border border-slate-200 mt-[-1px]\">\n                        <tr class=\"bg-slate-50\">\n                            <td class=\"p-3 border border-slate-200\">Processing...<\/td>\n                            <td class=\"p-3 border border-slate-200\">Demo content blurred...<\/td>\n                            <td class=\"p-3 border border-slate-200\">Demo content blurred...<\/td>\n                            <td class=\"p-3 border border-slate-200\">Demo content blurred...<\/td>\n                        <\/tr>\n                    <\/table>\n                <\/div>\n\n                <div id=\"clinicalAdvice\" class=\"mt-4 p-4 border-l-4 border-indigo-500 bg-indigo-50 text-xs text-indigo-900 italic font-medium\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"mt-8 text-center no-print\">\n            <button onclick=\"showStep(1)\" class=\"text-indigo-600 font-bold hover:underline\">&larr; Back to Demo<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ PRESERVING FULL COMMENT BANK FOR RELIABILITY\n    const dyslexiaComments = {\n        \"Phonological Awareness\": {\n            why: { low: [\"Mild difficulty manipulating sounds.\"], moderate: [\"Consistent difficulty segmenting sounds.\"], high: [\"Significant difficulty processing sound structure.\"] },\n            what: { low: [\"Explicit modelling of segmentation.\"], moderate: [\"Structured phonological instruction.\"], high: [\"Systematic phonological intervention.\"] },\n            review: { low: [\"Applies strategies independently.\"], moderate: [\"Increased decoding confidence.\"], high: [\"measurable progress in decoding.\"] }\n        },\n        \"Working Memory\": {\n            why: { low: [\"Occasionally forgets multi-step instructions.\"], moderate: [\"Frequently forgets instructions.\"], high: [\"Significant difficulty holding info in mind.\"] },\n            what: { low: [\"Short written reminders.\"], moderate: [\"Chunk tasks into small steps.\"], high: [\"Reduce cognitive load and simplify tasks.\"] },\n            review: { low: [\"Starts tasks more independently.\"], moderate: [\"Follows instructions with fewer breakdowns.\"], high: [\"Completes tasks with reduced adult support.\"] }\n        }\n        \/\/ ... (Full data would be pulled from the project version)\n    };\n\n    function showStep(step) {\n        document.querySelectorAll('.step-container').forEach(c => c.classList.remove('active'));\n        document.getElementById('step-' + step).classList.add('active');\n    }\n\n    function generateReport() {\n        document.getElementById('resName').textContent = document.getElementById('studentName').value || \"Student Name\";\n        const tableBody = document.getElementById('responseTableBody');\n        tableBody.innerHTML = '';\n\n        \/\/ Force only two rows for the demo hook\n        const activeKeys = [\"Phonological Awareness\", \"Working Memory\"];\n        \n        activeKeys.forEach(key => {\n            const val = document.querySelector(`input[data-key=\"${key}\"]`).value;\n            const band = val <= 3 ? 'low' : val <= 7 ? 'moderate' : 'high';\n            const tr = document.createElement('tr');\n            tr.innerHTML = `\n                <td class=\"p-3 border border-slate-200 font-bold text-indigo-900\">${key}<\/td>\n                <td class=\"p-3 border border-slate-200\">${dyslexiaComments[key].why[band][0]}<\/td>\n                <td class=\"p-3 border border-slate-200\">${dyslexiaComments[key].what[band][0]}<\/td>\n                <td class=\"p-3 border border-slate-200\">${dyslexiaComments[key].review[band][0]}<\/td>\n            `;\n            tableBody.appendChild(tr);\n        });\n\n        document.getElementById('clinicalAdvice').textContent = \"This is a simplified demonstration. The full report covers 12+ domains and includes a full Tier 1 checklist.\";\n        showStep(2);\n    }\n<\/script>\n<\/body>\n<\/html>\n\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>This is a sample of the dyslexia toolkit. The full tool is available to schools in identifying and providing targeted support for the different aspects of Dyslexia in the classroom. \u00a0 Dyslexia Tool Demo (Simplified Hook) Simplified Website Demo This is a restricted &#8220;hook&#8221; version of the tool. Two rows are visible on the report, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":344,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pmpro_default_level":"","footnotes":""},"class_list":["post-531","page","type-page","status-publish","hentry","pmpro-has-access"],"blocksy_meta":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/pages\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":10,"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/pages\/531\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/pages\/531\/revisions\/544"}],"up":[{"embeddable":true,"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/pages\/344"}],"wp:attachment":[{"href":"https:\/\/not-broken.co.uk\/toolkit\/wp-json\/wp\/v2\/media?parent=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}