← Chris’s NeoCities home

Enhanced Reading Page Builder

Turns your marked-up text into an interactive reading page.

You write the reading and mark it up; this tool builds it into a single HTML page for your students — one with toggles for highlighting speakers, revealing vocabulary glosses and explanations in two languages, and reading section by section. It does not write, translate, or simplify anything for you. See a short example reading to try the toggles before building your own.

❓ Help: how to mark speakers, explanations, and chunks

Marking speakers

Start a line (or a passage) with a speaker tag in brackets. Everything up to the next tag belongs to that speaker:

[internal] My parents screwed me. They put their beliefs above my future.

[nnedi] "Are you done whining already?"

[external] I glared at the screen and said nothing.

Two special tags style the narrator: [internal] (thinking) and [external] (speaking/describing). Any other tag — e.g. [nnedi], [fancy hair] — becomes a named speaker and gets its own highlight color. Blank lines start new paragraphs.

Explanations (teacher notes)

Add a note that readers reveal with the Explanations toggles. Use [explain-1] for a note in Support Language 1 and [explain-2] for one in Support Language 2. ([explain-en] and [explain-es] also work and mean the same thing.) The note runs until the next tag:

[explain-1] The narrator is anxious but is pretending to be calm.

Bold and italics

Wrap text in asterisks for emphasis: **bold text** and *italic text*. This works in the reading and in explanation notes. Other markdown (links, lists, # headings) is not supported and appears as typed.

Chunking (collapsible sections)

Break a long reading into sections students can expand one at a time. Start a section with [chunk] (auto-numbered) or [chunk: Day 1] (your own title). Everything up to the next [chunk] goes inside it. If you use no [chunk] tags, the reading stays as one flowing piece. Chunked readings get Open All / Close All buttons, and printing always includes every chunk’s text, open or not. They also get a Print each chunk on a new page checkbox, for handouts where every section should start on its own page.

Pictures

Add a graphic in the Graphics section below, give it a short label, and put the label in your text where the picture belongs:

[image: market]

Pictures behave like every other support — they stay hidden until a reader switches Show Graphics on, so the same page works with or without them. Put the tag on its own line, between paragraphs. Text after it keeps belonging to whoever was speaking before it, so you do not need to repeat the speaker tag.

For a small picture inside a sentence — a symbol, or a picture of a word set beside the word itself — use the inline tag instead, right at the spot it belongs:

She filled the basket [image-inline: basket] and went home.

An inline picture is scaled to the height of the text around it and sits in the line like a word, so it can go mid-sentence without splitting the paragraph in two. It shows no caption — a line of text has no room for one — so anything the reader needs to be told belongs in the sentence itself. Everything else is the same: same graphic entry, same alt text, and it still waits for Show Graphics like every other support. The same picture can be used both ways in one reading.

A picture chosen from your computer is shrunk (to about 1200 pixels on its long side) and built into the page, which keeps the reading a single file that works with no internet — the same reason the styles and scripts are built in. Each photo adds roughly 100–250 KB. A picture linked by web address adds nothing to the file, but the reading then needs a connection and breaks if the address stops working.

Alt text is required. It is the sentence a screen reader says in place of the picture, and what shows if the picture fails to load. Describe what matters about the image here — “A crowded outdoor market at noon” rather than “a photo”. The caption is optional and is shown to everyone, so it should add something the picture does not already say.

Mind who owns a picture, the same as with your text: a photo found through a search is usually someone else’s. Wikimedia Commons, Openverse, and public-domain collections are safer sources, and they say what credit to give.

Copyright and licensing

Each reading page you build carries whatever rights line you pick in the Rights for this reading menu, and nothing else — no Creative Commons badge is added unless you ask for a CC license. That is deliberate: the text you paste in is not this tool’s to license. It may be yours, it may be a living author’s, or it may be old enough to be in the public domain, and only you know which.

The default, all rights reserved, is the safe choice and the right one for a copyrighted text you are using in class. Pick free to copy for classroom use for something you wrote and want other teachers to use, a Creative Commons license if you want to publish it on terms anyone can rely on, or already in the public domain for an old text (roughly, published before 1930 in the US). No rights line at all leaves the rights line out so you can write your own.

Every reading also carries one small credit line naming this tool and where to find it, so a colleague who receives the file can come and make their own. That line says nothing about who owns your text, so it stays even when you choose no rights line.

Copying someone else’s text into a reading does not change who owns it, and this menu cannot grant rights you do not have — adding glosses and speaker tags makes an adaptation, not a new work. Classroom copying of a copyrighted text is usually fine under fair use; publishing it on the open web usually is not. When in doubt, share the reading with your students rather than posting it publicly.

This tool itself, and the code it builds into each reading, are separately licensed (Creative Commons BY-SA and CC0 — see the bottom of this page). That covers the tool, not the words you run through it.

Sharing with students as a PDF

Google Drive and Google Classroom do not display raw HTML files, so for handouts use the reading’s Print / Save as PDF button: open the saved reading, switch on exactly the supports you want students to see, click the button, and choose “Save as PDF” as the printer. Only the supports that are switched on appear, printed in colors chosen for white paper, and the PDF lists them under the title — so you can save several differentiated versions of the same reading (say, one plain and one with glosses) and tell them apart later. The PDF is a snapshot: chunks print open, and students cannot change the supports. Keep sharing the HTML page itself when you want students to use the toggles.

Word / Google Docs handouts

The Word Handout (.docx) section at the bottom of this page downloads the reading as an editable Word file. Unlike the PDF snapshot, it can be reworked — add comprehension questions, cut sections, reflow it into a worksheet — and Google Drive converts it into an editable Google Doc. Tick the supports to include; chunks become headings, each starting on a new page unless you untick that (the first chunk shares the title page); untick In color for black-and-white photocopies. Pictures you chose from your computer are embedded; pictures linked by web address, and SVG drawings, are left out with a note.

The words in your reading belong to whoever wrote them — you, a published author, or nobody at all if the text is old enough. This tool never puts its own license on your reading; it just prints the line you choose here at the bottom of the page and in the PDF. If you are not sure, leave it on all rights reserved. (See the Help section for more.)

These name the two languages used for vocabulary glosses and explanations. Language 1 is usually English; change Language 2 to your students’ home language. The reading’s toggle buttons use these names (e.g. “Show Vocabulary (Somali)”).

Vocabulary Words

Each word you list is annotated the first time it appears in the text (whole-word, case-insensitive). Readers reveal the glosses with the Vocabulary toggles — one toggle per support language. The second gloss is optional.

Graphics

Pictures are a support like the others: they stay hidden until a reader switches Show Graphics on. Give each one a short label, then put [image: label] in your text where it belongs, or [image-inline: label] to set it inside a line of text at the height of the words around it.

A picture you choose from this computer is shrunk and built into the page, so the reading stays a single file that works with no internet. A picture you link by web address keeps the file small but needs a connection, and disappears if the address stops working.



Word Handout (.docx)

Download the reading as an editable Word file — for adding questions, cutting it into a worksheet, or sharing through Google Drive, which turns a .docx into an editable Google Doc. Only the supports ticked here are included, so you can make differently-prepared handouts from the same reading; the handout lists its supports under the title, like a printout does.

Chunks cannot fold on paper, so each becomes a heading (on its own page, unless unticked). A vocabulary gloss appears in [brackets] after its word, as in print. Pictures chosen from this computer are embedded; a picture linked by web address, or an SVG drawing, is left out — the note under the button says which.