#gte-root { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif; max-width: 900px; margin: 0 auto; color: #1a1a1a; }
#gte-root * { box-sizing: border-box; }
#gte-root h1,#gte-root h2,#gte-root h3,#gte-root h4,#gte-root p,#gte-root ul { margin: 0; padding: 0; }
/* ── Hero ── */
.gte-hero { background: #26215C; color: #fff; padding: 36px 32px 28px; border-radius: 12px; margin-bottom: 24px; }
.gte-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #AFA9EC; margin-bottom: 10px; }
.gte-hero h1 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.2; }
.gte-hero p { font-size: 14px; color: #CEC BF6; line-height: 1.6; max-width: 600px; color: #CECBF6; }
.gte-hero-stats { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.gte-stat { }
.gte-stat-num { font-size: 22px; font-weight: 700; color: #fff; }
.gte-stat-label { font-size: 11px; color: #AFA9EC; margin-top: 1px; }
/* ── Level Nav ── */
.gte-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.gte-nav-btn {
padding: 7px 15px; border: 1.5px solid #d0cce8; background: #fff;
border-radius: 8px; font-size: 13px; cursor: pointer; color: #5F5E5A;
transition: all 0.15s; font-family: inherit; font-weight: 500;
}
.gte-nav-btn:hover { border-color: #7F77DD; color: #3C3489; background: #EEEDFE; }
.gte-nav-btn.active { background: #3C3489; border-color: #3C3489; color: #EEEDFE; }
/* ── Level Header ── */
.gte-level-header {
display: flex; align-items: flex-start; gap: 16px; padding: 20px;
background: #f8f7ff; border: 1px solid #e8e6f8; border-radius: 12px; margin-bottom: 16px;
}
.gte-level-badge {
flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
background: #EEEDFE; display: flex; align-items: center; justify-content: center;
font-size: 24px;
}
.gte-level-info h2 { font-size: 18px; font-weight: 700; color: #26215C; margin-bottom: 2px; }
.gte-level-subtitle { font-size: 12px; color: #888780; margin-bottom: 6px; }
.gte-level-desc { font-size: 13px; color: #444441; line-height: 1.6; }
.gte-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.gte-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.gte-tag-purple { background: #EEEDFE; color: #3C3489; }
.gte-tag-teal { background: #E1F5EE; color: #0F6E56; }
.gte-tag-amber { background: #FAEEDA; color: #854F0B; }
/* ── Depth Bar ── */
.gte-depth-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.gte-depth-label { font-size: 12px; color: #888780; min-width: 130px; }
.gte-depth-track { flex: 1; height: 7px; background: #f0eeea; border-radius: 4px; overflow: hidden; }
.gte-depth-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.gte-depth-pct { font-size: 12px; color: #888780; min-width: 36px; text-align: right; }
/* ── Section Label ── */
.gte-section-label {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: #888780; margin: 24px 0 10px;
}
/* ── Legend ── */
.gte-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.gte-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5F5E5A; }
.gte-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* ── Matrix ── */
.gte-matrix { display: grid; grid-template-columns: 24px repeat(3, 1fr); gap: 4px; margin-bottom: 24px; }
.gte-matrix-header {
font-size: 11px; font-weight: 700; text-align: center; padding: 8px 6px;
background: #f8f7ff; border-radius: 6px; color: #5F5E5A; border: 1px solid #e8e6f8;
}
.gte-row-num { font-size: 11px; color: #B4B2A9; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.gte-cell {
padding: 9px 11px; font-size: 12px; border-radius: 7px; border: 1px solid #e8e6f8;
background: #fff; color: #1a1a1a; cursor: pointer; transition: all 0.15s; line-height: 1.5;
}
.gte-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.gte-cell.s1 { border-left: 3px solid #7F77DD; }
.gte-cell.s1:hover { background: #EEEDFE; border-color: #7F77DD; }
.gte-cell.s2 { border-left: 3px solid #1D9E75; }
.gte-cell.s2:hover { background: #E1F5EE; border-color: #1D9E75; }
.gte-cell.s3 { border-left: 3px solid #EF9F27; }
.gte-cell.s3:hover { background: #FAEEDA; border-color: #EF9F27; }
.gte-cell-tip { font-size: 10px; color: #B4B2A9; margin-top: 4px; }
/* ── Word Banks ── */
.gte-word-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.gte-word-bank {
background: #fff; border: 1px solid #e8e6f8; border-radius: 10px; padding: 14px;
}
.gte-word-bank h4 { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: #26215C; }
.gte-word-list { display: flex; flex-wrap: wrap; gap: 5px; }
.gte-word {
font-size: 12px; padding: 4px 9px; border-radius: 5px; background: #f8f7ff;
color: #3C3489; cursor: pointer; border: 1px solid #e8e6f8; transition: all 0.12s; font-weight: 500;
}
.gte-word:hover { background: #EEEDFE; border-color: #AFA9EC; }
.gte-word.opaque { border-style: dashed; color: #854F0B; background: #FAEEDA; border-color: #FAC775; }
.gte-word.opaque:hover { background: #FAC775; }
/* ── Reading Passage ── */
.gte-passage { background: #fff; border: 1px solid #e8e6f8; border-radius: 10px; padding: 18px; margin-bottom: 24px; }
.gte-passage h4 { font-size: 13px; font-weight: 700; color: #26215C; margin-bottom: 14px; }
.gte-passage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gte-passage-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; color: #888780; border-bottom: 1px solid #e8e6f8; text-transform: uppercase; letter-spacing: 0.05em; }
.gte-passage-table td { padding: 9px 10px; border-bottom: 1px solid #f0eeea; vertical-align: top; line-height: 1.6; }
.gte-passage-table tr:last-child td { border-bottom: none; }
.gte-passage-table td:first-child { color: #B4B2A9; font-size: 11px; font-weight: 700; width: 28px; }
.gte-passage-table td.s1c { color: #3C3489; }
.gte-passage-table td.s2c { color: #0F6E56; }
.gte-passage-table td.s3c { color: #634808; }
/* ── Writing Zone ── */
.gte-writing { background: #fff; border: 1px solid #e8e6f8; border-radius: 10px; padding: 18px; }
.gte-writing h4 { font-size: 13px; font-weight: 700; color: #26215C; margin-bottom: 14px; }
.gte-slot-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.gte-slot-label {
flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 6px 8px;
border-radius: 6px; min-width: 32px; text-align: center; margin-top: 3px;
}
.gte-slot-label.s1 { background: #EEEDFE; color: #3C3489; }
.gte-slot-label.s2 { background: #E1F5EE; color: #0F6E56; }
.gte-slot-label.s3 { background: #FAEEDA; color: #854F0B; }
.gte-slot-wrap { flex: 1; }
.gte-slot-input {
width: 100%; border: 1.5px solid #d0cce8; border-radius: 7px; padding: 8px 12px;
font-size: 13px; font-family: inherit; color: #1a1a1a; resize: vertical; min-height: 42px;
background: #fafafa; transition: border-color 0.15s;
}
.gte-slot-input:focus { outline: none; border-color: #7F77DD; background: #fff; }
.gte-slot-hint { font-size: 11px; color: #888780; margin-top: 4px; line-height: 1.4; }
.gte-slot-side { font-size: 11px; color: #888780; padding: 8px 0 0 4px; flex-shrink: 0; max-width: 130px; line-height: 1.4; }
.gte-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gte-btn-primary {
padding: 9px 18px; background: #3C3489; color: #fff; border: none;
border-radius: 7px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600;
transition: background 0.15s;
}
.gte-btn-primary:hover { background: #534AB7; }
.gte-btn-primary:disabled { background: #AFA9EC; cursor: wait; }
.gte-btn-secondary {
padding: 9px 14px; background: #f8f7ff; color: #5F5E5A;
border: 1.5px solid #d0cce8; border-radius: 7px; font-size: 13px; cursor: pointer;
font-family: inherit; font-weight: 500;
}
.gte-btn-secondary:hover { background: #EEEDFE; color: #3C3489; }
.gte-btn-print {
padding: 9px 14px; background: #fff; color: #5F5E5A;
border: 1.5px solid #d0cce8; border-radius: 7px; font-size: 13px; cursor: pointer;
font-family: inherit; margin-left: auto;
}
.gte-btn-print:hover { background: #f0eeea; }
/* ── Output ── */
.gte-output {
margin-top: 14px; padding: 16px; background: #f8f7ff;
border-radius: 8px; border: 1px solid #e8e6f8; min-height: 60px;
}
.gte-output-placeholder { font-size: 13px; color: #B4B2A9; }
.gte-output-para { font-size: 14px; line-height: 1.9; }
.gte-output-para .s1t { color: #3C3489; font-weight: 500; }
.gte-output-para .s2t { color: #0F6E56; font-weight: 500; }
.gte-output-para .s3t { color: #854F0B; font-weight: 500; }
.gte-ai-response {
margin-top: 12px; padding: 14px 16px; background: #fff;
border: 1px solid #e8e6f8; border-radius: 8px; border-left: 3px solid #7F77DD;
}
.gte-ai-label { font-size: 11px; font-weight: 700; color: #7F77DD; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.gte-ai-text { font-size: 13px; line-height: 1.7; color: #26215C; white-space: pre-wrap; }
.gte-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #7F77DD; }
.gte-dot { width: 6px; height: 6px; border-radius: 50%; background: #7F77DD; animation: gte-pulse 1.2s ease-in-out infinite; }
.gte-dot:nth-child(2) { animation-delay: 0.2s; }
.gte-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes gte-pulse { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
/* ── Footer ── */
.gte-footer { margin-top: 28px; padding: 16px 0; border-top: 1px solid #e8e6f8; display: flex; align-items: center; justify-content: space-between; flex-wrap: gap; }
.gte-footer-text { font-size: 11px; color: #B4B2A9; }
.gte-footer-badge { font-size: 11px; color: #7F77DD; font-weight: 600; }
/* ── Responsive ── */
@media (max-width: 600px) {
.gte-hero { padding: 24px 18px; }
.gte-hero h1 { font-size: 22px; }
.gte-matrix { grid-template-columns: 20px 1fr; }
.gte-matrix-header:nth-child(3), .gte-matrix-header:nth-child(4) { display: none; }
.gte-cell.s2, .gte-cell.s3 { display: none; }
.gte-slot-side { display: none; }
.gte-hero-stats { gap: 16px; }
}
@media print {
.gte-nav, .gte-actions, .gte-word-banks, .gte-hero { display: none; }
.gte-matrix { page-break-inside: avoid; }
}
(function() {
// ── CONFIG — REPLACE THIS WITH YOUR ANTHROPIC API KEY ──
var API_KEY = ‘YOUR_API_KEY_HERE’;
// ── DATA ──
var LEVELS = [
{
id:0, grade:”Reading Age”, emoji:”🌱”, abbr:”RA”,
subtitle:”Pre-K – Kindergarten · Ages 4–6″,
desc:”First exposure to the Syntax Engine. All words are CVC — every letter makes one sound, no exceptions. The 3×7 matrix is introduced using only three slots.”,
tags:[[“CVC only”,”purple”],[“Zero opaque words”,”teal”],[“Oral-first”,”amber”]],
depth:5,
wordBanks:[
{title:”Nouns (things)”,words:[“cat”,”dog”,”sun”,”pig”,”bed”,”hen”,”log”,”pot”,”cup”,”cap”,”net”,”wig”,”van”,”bug”,”lip”,”rug”,”jug”,”mop”,”bun”,”fin”],opaque:[]},
{title:”Verbs (actions)”,words:[“ran”,”sat”,”bit”,”hop”,”dug”,”hid”,”lit”,”pat”,”sip”,”tap”,”wag”,”nap”,”beg”,”nod”,”rub”,”sob”,”jab”,”peg”,”tug”,”zip”],opaque:[]},
{title:”Anchors (⚠️ opaque)”,words:[“the”,”and”,”a”,”is”],opaque:[“the”,”and”,”a”,”is”]}
],
matrix:[
[“The cat sat.”,”The dog ran fast.”,”Because the sun was hot, the mud was wet.”],
[“The pig bit.”,”The bug hid well.”,”When the hen lit up, the fog was thin.”],
[“A cup fell.”,”The cap fit tight.”,”Since the net was big, the fish got out.”],
[“The wig slid.”,”A van sat still.”,”After the jug tipped, the log was wet.”],
[“The lip cut.”,”A rug sat flat.”,”If the pot was red, the cup was not.”],
[“The mop slid.”,”A bun sat hot.”,”While the van ran, the dog sat up.”],
[“The dog napped.”,”The hen sat still.”,”Because the cat ran back, the sun set red.”]
],
hints:[“S1: Who + did what? (3 words max)”,”S2: S1, and + a second idea”,”S3: Because / When / Since — then the result”]
},
{
id:1, grade:”1st Grade”, emoji:”🔧”, abbr:”G1″,
subtitle:”Grade 1 · Ages 6–7″,
desc:”Blend gears (frog, stop, spin) and Silent-E words enter. 10 anchor words from the Dolch list used as fixed structure pieces — marked opaque so readers learn they are special.”,
tags:[[“Blends + Silent-E”,”purple”],[“10 fixed anchors”,”teal”],[“3×7 full matrix”,”amber”]],
depth:20,
wordBanks:[
{title:”Nouns”,words:[“frog”,”drum”,”flag”,”plum”,”gate”,”lake”,”note”,”cave”,”robe”,”bike”,”step”,”grip”,”crab”,”clam”,”flap”,”blob”,”slab”,”grim”,”snap”,”clan”],opaque:[]},
{title:”Verbs”,words:[“jump”,”lift”,”swim”,”melt”,”hunt”,”drift”,”climb”,”twist”,”grab”,”slip”,”clap”,”drop”,”flip”,”snap”,”stomp”,”stamp”,”spent”,”blend”,”crust”,”skunk”],opaque:[]},
{title:”Adjectives”,words:[“big”,”red”,”hot”,”wet”,”old”,”flat”,”slim”,”soft”,”long”,”dark”,”cold”,”fast”,”thin”,”firm”,”bold”,”glad”,”tame”,”wild”,”dull”,”grim”],opaque:[]},
{title:”Anchors (⚠️ opaque)”,words:[“the”,”and”,”was”,”his”,”but”,”not”,”with”,”had”,”for”,”are”],opaque:[“the”,”and”,”was”,”his”,”but”,”not”,”with”,”had”,”for”,”are”]}
],
matrix:[
[“The frog jumped.”,”The drum was loud, and the flag waved.”,”Because the gate was shut, the frog leaped back.”],
[“The crab crept.”,”The lake was cold, and the note was lost.”,”While the cave was dark, the boy crept inside.”],
[“The dog swam.”,”The grip was firm, and the robe was damp.”,”When the rock fell, the dog swam fast and hard.”],
[“A plum fell.”,”The step was slick, and the mud was thick.”,”Since the spin was fast, the top did not stop.”],
[“The bike spun.”,”The stamp was red, and the slot was slim.”,”After the drum beat, the flag was lifted up.”],
[“The blob dripped.”,”The clam was shut, and the rock was flat.”,”If the snap was loud, the crab would hide deep.”],
[“The boy climbed.”,”The frog was glad, and the plum was ripe.”,”Because the bike was fast, Cyrus rode to the gate.”]
],
hints:[“S1: Subject + verb + optional object”,”S2: S1, and + second clause — same length!”,”S3: Because / While / When / Since / After / If — then the result”]
},
{
id:2, grade:”2nd Grade”, emoji:”⚙️”, abbr:”G2″,
subtitle:”Grade 2 · Ages 7–8″,
desc:”Two-syllable transparent words enter the matrix (sunset, laptop, velvet). Subordinating conjunctions are drilled as ‘logic gears.’ Readers see S3 as a gear shift, not a barrier.”,
tags:[[“2-syllable words”,”purple”],[“Logic-gear conjunctions”,”teal”],[“S1→S3 fluency”,”amber”]],
depth:35,
wordBanks:[
{title:”Nouns”,words:[“sunset”,”laptop”,”dustpan”,”cactus”,”velvet”,”fabric”,”mascot”,”tablet”,”dentist”,”goblin”,”picnic”,”napkin”,”plastic”,”helmet”,”insect”,”blanket”,”basket”,”muffin”,”combat”,”problem”],opaque:[]},
{title:”Verbs”,words:[“melted”,”hunted”,”drifted”,”climbed”,”twisted”,”stamped”,”lifted”,”blinked”,”hummed”,”snapped”,”cracked”,”floated”,”blasted”,”planted”,”tracked”,”pinched”,”gripped”,”printed”,”slipped”,”stacked”],opaque:[]},
{title:”Adjectives”,words:[“velvet”,”slippery”,”golden”,”brittle”,”tangled”,”distant”,”jagged”,”scattered”,”mossy”,”dusty”,”hollow”,”narrow”,”sunlit”,”frozen”,”battered”,”tattered”,”frantic”,”lanky”,”murky”,”lofty”],opaque:[]},
{title:”Anchors (⚠️ opaque)”,words:[“was”,”were”,”have”,”said”,”there”,”their”,”many”,”could”,”would”,”should”],opaque:[“was”,”were”,”have”,”said”,”there”,”their”,”many”,”could”,”would”,”should”]}
],
matrix:[
[“The cactus bent.”,”The velvet was soft, and the tablet was flat.”,”Because the dustpan was cracked, the goblin dropped it.”],
[“The insect hummed.”,”The helmet was old, and the basket was full.”,”When the sunset faded, the insects hummed in the dark.”],
[“The blanket slipped.”,”The muffin was golden, and the picnic was set.”,”While the goblin crept, the fabric twisted in the cold wind.”],
[“The laptop blinked.”,”The problem was solved, and the dentist smiled wide.”,”Since the plastic cracked, the mascot fell from the top shelf.”],
[“A blossom drifted.”,”The sunset was golden, and the dusk was very still.”,”After the insects scattered, the picnic basket was left behind.”],
[“The helmet cracked.”,”The blanket was tattered, and the goblin was very lost.”,”If the tablet blinked twice, the system had found the signal.”],
[“The boy tracked it.”,”The dustpan was full, and the napkin was still damp.”,”Because the problem was solved, Cyrus felt the engine click and lock.”]
],
hints:[“S1: Use a 2-syllable noun as your subject”,”S2: ‘, and’ connects two equal-weight ideas”,”S3: Logic gear first (Because/When/While/Since/After/If), then the effect”]
},
{
id:3, grade:”3rd Grade”, emoji:”🗝️”, abbr:”G3″,
subtitle:”Grade 3 · Ages 8–9″,
desc:”Opaque words enter deliberately and are labelled — readers learn that some words are ‘irregular gears.’ The matrix now carries a micro-story arc across all 7 rows.”,
tags:[[“Opaque words labelled”,”purple”],[“Micro-story arc”,”teal”],[“300+ word vocab”,”amber”]],
depth:50,
wordBanks:[
{title:”Nouns”,words:[“signal”,”mission”,”circuit”,”engine”,”lantern”,”compass”,”vessel”,”pattern”,”harbor”,”canyon”,”timber”,”falcon”,”mirror”,”shadow”,”current”,”riddle”,”crystal”,”labyrinth”,”chimney”,”fortress”],opaque:[]},
{title:”Verbs”,words:[“carried”,”followed”,”shattered”,”gathered”,”unfolded”,”discovered”,”threaded”,”connected”,”ignited”,”revealed”,”scattered”,”balanced”,”vanished”,”constructed”,”navigated”,”collapsed”,”emerged”,”whispered”,”suspended”,”multiplied”],opaque:[]},
{title:”⚠️ Opaque (special gears)”,words:[“water”,”people”,”said”,”through”,”would”,”could”,”where”,”their”,”many”,”should”,”once”,”again”,”always”,”never”,”every”,”often”,”which”,”whose”,”other”,”because”],opaque:[“water”,”people”,”said”,”through”,”would”,”could”,”where”,”their”,”many”,”should”,”once”,”again”,”always”,”never”,”every”,”often”,”which”,”whose”,”other”,”because”]}
],
matrix:[
[“The signal blinked.”,”The lantern was lit, and the compass pointed west.”,”Because the signal blinked, Cyrus followed the hidden path.”],
[“A vessel drifted.”,”The harbor was calm, and the current was very strong.”,”When the vessel drifted, the crew gathered the heavy sails.”],
[“The mirror shattered.”,”The riddle was carved, and the crystal was bitterly cold.”,”While the mirror shattered, the shadow on the wall began moving.”],
[“A falcon circled.”,”The canyon was deep, and the timber was centuries old.”,”Since the falcon circled, they knew the fortress must be near.”],
[“The chimney smoked.”,”The pattern was woven, and the circuit was now complete.”,”After the chimney smoked, the engine began its slow hum.”],
[“The labyrinth turned.”,”The compass spun wildly, and the lantern almost went out.”,”If they followed the thread, the labyrinth would not hold them.”],
[“The engine sang.”,”The signal was clear, and the mission was finally done.”,”Because the circuit connected, Cyrus found the way through the dark.”]
],
hints:[“S1: Strong 2+ syllable noun as subject”,”S2: Two balanced ideas — equal weight on each side of ‘, and'”,”S3: Opaque connector + consequence. Note: ‘because’ is a special gear!”]
},
{
id:4, grade:”4th Grade”, emoji:”🌊”, abbr:”G4″,
subtitle:”Grade 4 · Ages 9–10″,
desc:”The deep water begins. Opaque words are used freely but the 3×7 matrix holds firm. Abstract nouns enter. Readers see that the Syntax Rail keeps them safe even as vocabulary gets turbulent.”,
tags:[[“Free opaque vocab”,”purple”],[“Abstract nouns”,”teal”],[“Structural fluency”,”amber”]],
depth:65,
wordBanks:[
{title:”Abstract nouns”,words:[“courage”,”knowledge”,”patience”,”freedom”,”justice”,”memory”,”doubt”,”wisdom”,”grief”,”ambition”,”loyalty”,”silence”,”rhythm”,”tension”,”harmony”,”solitude”,”conflict”,”momentum”,”intuition”,”legacy”],opaque:[]},
{title:”Verbs (literary)”,words:[“pursued”,”questioned”,”surrendered”,”endured”,”transformed”,”awakened”,”confronted”,”protected”,”challenged”,”constructed”,”reflected”,”abandoned”,”restored”,”calculated”,”distinguished”,”overwhelmed”,”sustained”,”anticipated”,”balanced”,”complicated”],opaque:[]},
{title:”Deep connectors (⚠️)”,words:[“therefore”,”however”,”although”,”despite”,”unless”,”whether”,”whenever”,”wherever”,”whoever”,”meanwhile”,”otherwise”,”consequently”,”furthermore”,”nevertheless”,”accordingly”,”subsequently”,”simultaneously”,”additionally”,”alternatively”,”nonetheless”],opaque:[“therefore”,”however”,”although”,”despite”,”unless”,”whether”,”whenever”,”wherever”,”whoever”,”meanwhile”,”otherwise”,”consequently”,”furthermore”,”nevertheless”,”accordingly”,”subsequently”,”simultaneously”,”additionally”,”alternatively”,”nonetheless”]}
],
matrix:[
[“Courage faltered.”,”Silence filled the room, and tension gripped the crowd.”,”Although courage faltered, the boy did not step back at all.”],
[“Memory faded.”,”Knowledge was lost, and doubt moved in to replace it.”,”When memory faded, the rhythm of the old engine returned.”],
[“Wisdom endured.”,”Patience built the bridge, and justice was first to cross.”,”While wisdom endured, conflict kept rising up all around them.”],
[“Loyalty held.”,”Ambition drove him forward, and momentum carried the rest along.”,”Since loyalty held, the harmony of the whole system was restored.”],
[“Solitude deepened.”,”Grief was carried forward, and legacy was built carefully from it.”,”After solitude deepened, intuition finally began to speak with clarity.”],
[“Tension broke.”,”Freedom appeared at last, and the rhythm of the world changed.”,”Despite the tension, Cyrus held the circuit firmly in both hands.”],
[“The engine locked.”,”The syntax was clear, and the deep water finally grew calm.”,”Because the matrix held, Cyrus walked through the darkness completely free.”]
],
hints:[“S1: Use an abstract noun as the subject — no article needed!”,”S2: Two abstract ideas joined by ‘, and’ — both must be equal weight”,”S3: Use a deep connector — these are complex gears that change meaning”]
},
{
id:5, grade:”5th Grade”, emoji:”🌐”, abbr:”G5″,
subtitle:”Grade 5 · Ages 10–11″,
desc:”Multi-clause sentences. Readers use the matrix as a diagnostic tool — identifying where a complex sentence ‘lives’ in the S1/S2/S3 system. Writing now includes embedded relative clauses.”,
tags:[[“Relative clauses”,”purple”],[“Diagnostic reading”,”teal”],[“Full orthographic depth”,”amber”]],
depth:80,
wordBanks:[
{title:”Sophisticated nouns”,words:[“phenomenon”,”symmetry”,”trajectory”,”momentum”,”threshold”,”paradigm”,”sovereignty”,”culmination”,”infrastructure”,”consequence”,”revelation”,”catastrophe”,”equilibrium”,”expedition”,”persistence”,”chronicle”,”synthesis”,”blueprint”,”hypothesis”,”algorithm”],opaque:[]},
{title:”Relative clause starters (⚠️)”,words:[“who”,”which”,”that”,”whose”,”where”,”when”,”whom”],opaque:[“who”,”which”,”that”,”whose”,”where”,”when”,”whom”]},
{title:”Clause constructions”,words:[“The [noun] that [verb]…”,”A [noun], which [verb]…”,”[Noun], whose [noun] [verb]…”,”The place where [clause]…”,”The moment when [clause]…”],opaque:[]}
],
matrix:[
[“The algorithm ran.”,”The blueprint was drafted, and the hypothesis was tested carefully.”,”Although the phenomenon was rare, the data revealed a pattern no one expected.”],
[“The threshold shifted.”,”The equilibrium broke suddenly, and the whole trajectory changed its course.”,”When the threshold shifted, every system that depended on it collapsed together.”],
[“The chronicle ended.”,”The expedition returned at last, and the synthesis was finally complete.”,”Since the chronicle ended, the paradigm that had guided them for years was gone.”],
[“The revelation spread.”,”The infrastructure held firm, and the consequence was carefully managed.”,”While the revelation spread, the sovereignty that had protected it was questioned.”],
[“Momentum gathered.”,”The culmination arrived without warning, and persistence finally began to pay off.”,”After momentum gathered, the catastrophe that everyone had feared was narrowly avoided.”],
[“The symmetry broke.”,”The blueprint that Cyrus had built was tested under pressure, and it held.”,”Despite the catastrophe, the algorithm, which no one had trusted, was the one that survived.”],
[“The engine was whole.”,”The hypothesis was proved at last, and the syntax was complete and clear.”,”Because the paradigm had shifted, Cyrus, whose mind was the engine, was finally free.”]
],
hints:[“S1: Sophisticated noun — let it carry the sentence alone”,”S2: Notice how clauses in S2 can now contain embedded ideas”,”S3: Relative clause check — find the who/which/that inside your S3″]
},
{
id:6, grade:”6th Grade”, emoji:”🏆”, abbr:”G6″,
subtitle:”Grade 6 · Ages 11–12″,
desc:”Full academic writing. The student uses the 3×7 as a diagnostic audit tool — mapping any paragraph they encounter back to the matrix. The engine is now internalized.”,
tags:[[“Academic register”,”purple”],[“Matrix as diagnostic”,”teal”],[“Syntax internalized”,”amber”]],
depth:95,
wordBanks:[
{title:”Academic vocabulary”,words:[“civilization”,”democracy”,”perspective”,”economic”,”consequence”,”evidence”,”analysis”,”argument”,”hypothesis”,”variable”,”correlation”,”causation”,”inference”,”interpretation”,”transformation”,”adaptation”,”innovation”,”legislation”,”sovereignty”,”infrastructure”],opaque:[]},
{title:”Rhetorical structures”,words:[“Furthermore, [claim]”,”However, [counterargument]”,”In contrast, [alternative]”,”As a result, [consequence]”,”Nevertheless, [concession]”,”In particular, [emphasis]”,”For instance, [example]”,”Consequently, [effect]”,”Despite [obstacle], [result]”,”To illustrate, [example]”],opaque:[]},
{title:”Diagnostic prompts”,words:[“Find the S1 core”,”Label the S2 connector”,”Name the S3 trigger”,”Identify embedded clause”,”Map sentence to matrix”,”Rewrite as S1 only”,”Expand S1 into S3″,”Strip to noun + verb”],opaque:[]}
],
matrix:[
[“Democracy requires evidence.”,”Civilization transforms slowly, and legislation often lags far behind.”,”Although democracy requires evidence, public opinion can override careful analysis.”],
[“Perspectives shift.”,”Economic consequence shapes all policy, and innovation drives every adaptation.”,”When perspectives shift, the primary sources that scholars trust become deeply contested.”],
[“Causation is debated.”,”Correlation suggests a pattern, and hypothesis shapes what we choose to look for.”,”Since causation is debated, every inference drawn from any variable must be challenged.”],
[“Arguments evolve.”,”Evidence accumulates gradually over time, and interpretation changes with each generation.”,”While arguments evolve, the secondary sources that frame them carry hidden and persistent bias.”],
[“Innovation disrupts.”,”Transformation accelerates change rapidly, and adaptation determines who ultimately survives it.”,”After innovation disrupts, the civilization that adapted earliest holds the most enduring power.”],
[“Legislation responds.”,”The consequence was measured precisely, and the analysis pointed to a single root cause.”,”Despite the legislation, the economic variable that no one had tracked had already shifted first.”],
[“The matrix holds.”,”The engine is fully internalized, and the syntax now guides every sentence Cyrus writes.”,”Because Cyrus learned the system, every text he encounters can be mapped, decoded, and mastered.”]
],
hints:[“S1: Strip any complex sentence to its S1 core. Subject + verb = the engine.”,”S2: Label the connector. Is it ‘, and’? ‘; however,’? That tells you the relationship.”,”S3: Name the trigger word — causal (because/since), temporal (when/after), or concessive (although/despite)?”]
}
];
var currentLevel = 0;
// ── RENDER NAVIGATION ──
function renderNav() {
var nav = document.getElementById(‘gte-nav’);
nav.innerHTML = LEVELS.map(function(L) {
return ‘‘;
}).join(”);
}
// ── RENDER DEPTH BAR ──
function renderDepth(depth) {
var color = depth < 30 ? '#1D9E75' : depth < 60 ? '#EF9F27' : '#D85A30';
return 'Reading & Writing System · Pre-K through 6th Grade
Gopher Telos Engine
A mechanical scaffolding system for dyslexic and developing readers. Built on the 3×7 Syntactic Matrix — three tiers of sentence complexity across seven story beats. Start in the shallow water. Navigate to the deep.
7
Grade levels
3×7
Syntax matrix
300+
Curated words
AI
Live feedback
‘ +
‘Orthographic depth‘ +
‘
‘;
}
// ── RENDER LEVEL HEADER ──
function renderHeader(L) {
var tagColors = {purple:’gte-tag-purple’,teal:’gte-tag-teal’,amber:’gte-tag-amber’};
var tags = L.tags.map(function(t){ return ‘‘ + t[0] + ‘‘; }).join(”);
return ‘‘ +
‘‘ + depth + ‘%‘ +
‘
‘ +
‘
‘;
}
// ── RENDER MATRIX ──
function renderMatrix(matrix) {
var rows = matrix.map(function(row, i) {
return ‘‘ + L.emoji + ‘
‘ +
‘‘ +
‘
‘ + L.grade + ‘
‘ + ‘‘ + L.subtitle + ‘
‘ +
‘‘ + L.desc + ‘
‘ +
‘‘ +
‘‘ + (i+1) + ‘
‘ +
‘‘ + row[0] + ‘
‘ +
‘click → S1
‘ + row[1] + ‘
‘ +
‘click → S2
‘ + row[2] + ‘
‘;
}).join(”);
return ‘click → S3
3×7 Gopher Telos Matrix — click any cell to copy to writing zone
‘ +
‘‘ +
‘
‘ +
‘S1 Simple
‘ +
‘S2 Compound
‘ +
‘S3 Complex
‘ +
‘‘ +
‘
‘;
}
// ── RENDER WORD BANKS ──
function renderWordBanks(banks) {
var html = ‘S1 — Simple
‘ +
‘S2 — Compound
‘ +
‘S3 — Complex
‘ +
rows +
‘Word bank — click any word to insert into writing zone
‘;
banks.forEach(function(b) {
html += ‘‘;
});
return html + ‘
‘;
}
// ── RENDER WRITING ZONE ──
function renderWriting(hints) {
return ‘‘ + b.title + ‘
‘;
b.words.forEach(function(w) {
var isOpaque = b.opaque.indexOf(w) > -1;
html += ‘‘ + w + ‘‘;
});
html += ‘
Writing zone — build your own 3-sentence set
‘ +
‘‘ +
‘‘ +
‘
‘;
}
// ── SHOW LEVEL ──
window.gteShowLevel = function(id) {
currentLevel = id;
renderNav();
var L = LEVELS[id];
var html = renderHeader(L) + renderDepth(L.depth) + renderMatrix(L.matrix) + renderWordBanks(L.wordBanks) + renderWriting(L.hints);
document.getElementById(‘gte-content’).innerHTML = html;
setTimeout(function(){
var fill = document.getElementById(‘gte-depth-fill’);
if (fill) fill.style.width = L.depth + ‘%’;
}, 50);
};
// ── COPY TO SLOT ──
window.gteCopySlot = function(slot, text) {
var ids = [‘gte-s1′,’gte-s2′,’gte-s3’];
var el = document.getElementById(ids[slot]);
if (el) { el.value = text; el.focus(); }
};
// ── INSERT WORD ──
window.gteInsertWord = function(word) {
var focused = document.activeElement;
var slots = [‘gte-s1′,’gte-s2′,’gte-s3’];
var target = null;
if (focused && slots.indexOf(focused.id) > -1) {
target = focused;
} else {
target = document.getElementById(‘gte-s1’);
}
if (!target) return;
var v = target.value;
var sep = (v && v.slice(-1) !== ‘ ‘) ? ‘ ‘ : ”;
target.value = v + sep + word;
target.focus();
};
// ── CLEAR ALL ──
window.gteClearAll = function() {
[‘gte-s1′,’gte-s2′,’gte-s3’].forEach(function(id){
var el = document.getElementById(id);
if (el) el.value = ”;
});
var out = document.getElementById(‘gte-output’);
if (out) out.innerHTML = ‘Write one sentence in each slot, then click “Get AI feedback”
‘ + ‘S1
‘ +
‘‘ + hints[0] + ‘
S2
‘ +
‘‘ + hints[1] + ‘
S3
‘ +
‘‘ + hints[2] + ‘
‘ +
‘‘ +
‘‘ +
‘‘ +
‘
‘ +
‘Your paragraph and AI feedback will appear here…
Your paragraph and AI feedback will appear here…
‘;
};
// ── AI FEEDBACK ──
window.gteGetFeedback = function() {
var s1 = (document.getElementById(‘gte-s1’)||{}).value||”;
var s2 = (document.getElementById(‘gte-s2’)||{}).value||”;
var s3 = (document.getElementById(‘gte-s3’)||{}).value||”;
s1 = s1.trim(); s2 = s2.trim(); s3 = s3.trim();
if (!s1 && !s2 && !s3) {
alert(‘Please write at least one sentence first.’);
return;
}
var out = document.getElementById(‘gte-output’);
var btn = document.getElementById(‘gte-ai-btn’);
// Show paragraph preview
var paraHtml = ‘‘; if (s1) paraHtml += ‘‘ + s1 + ‘ ‘; if (s2) paraHtml += ‘‘ + s2 + ‘ ‘; if (s3) paraHtml += ‘‘ + s3 + ‘‘; paraHtml += ‘
‘; out.innerHTML = paraHtml + ‘‘ +
‘
‘;
btn.disabled = true;
btn.textContent = ‘Analyzing…’;
var L = LEVELS[currentLevel];
var prompt = ‘You are a warm, encouraging literacy coach using the Gopher Telos Engine — a 3×7 Syntactic Matrix system based on Orthographic Depth research. The student is working at ‘ + L.grade + ‘ level (‘ + L.subtitle + ‘).\n\nThe student wrote these sentences:\nS1 (Simple): “‘ + (s1||'[blank]’) + ‘”\nS2 (Compound): “‘ + (s2||'[blank]’) + ‘”\nS3 (Complex): “‘ + (s3||'[blank]’) + ‘”\n\nPlease give brief, encouraging feedback in exactly this format:\n✓ S1 check: [one sentence — does it have a clear subject + verb?]\n✓ S2 check: [one sentence — does it use \’, and\’ to join two equal ideas?]\n✓ S3 check: [one sentence — does it open with a logic-gear conjunction like Because/When/While/Since/After/If/Although?]\n💡 One tip: [one specific, actionable suggestion to strengthen any of the three sentences]\n⭐ Encouragement: [one sentence of genuine praise for what they did well]\n\nKeep the total response under 120 words. Be warm and specific.’;
fetch(‘https://api.anthropic.com/v1/messages’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘x-api-key’: API_KEY,
‘anthropic-version’: ‘2023-06-01’,
‘anthropic-dangerous-direct-browser-access’: ‘true’
},
body: JSON.stringify({
model: ‘claude-sonnet-4-6’,
max_tokens: 300,
messages: [{ role: ‘user’, content: prompt }]
})
})
.then(function(r){ return r.json(); })
.then(function(data){
btn.disabled = false;
btn.textContent = ‘Get AI feedback ✦’;
var text = ”;
if (data && data.content && data.content[0]) {
text = data.content[0].text || ”;
} else if (data && data.error) {
text = ‘Error: ‘ + data.error.message;
}
var aiBox = out.querySelector(‘.gte-ai-response’);
if (aiBox) {
aiBox.innerHTML = ‘Gopher Telos AI Feedback
‘ +
‘Analyzing your sentences…
‘ +
‘Gopher Telos AI Feedback
‘ + text.replace(//g,’>’) + ‘
‘;
}
})
.catch(function(err){
btn.disabled = false;
btn.textContent = ‘Get AI feedback ✦’;
var aiBox = out.querySelector(‘.gte-ai-response’);
if (aiBox) {
aiBox.innerHTML = ‘Gopher Telos AI Feedback
Could not connect to AI. Please check your API key in the code, or try again.
‘;
}
});
};
// ── ESCAPE HELPER ──
function esc(str) {
return str.replace(/\\/g,’\\\\’).replace(/’/g,”\\'”);
}
// ── INIT ──
window.gteShowLevel(0);
})();