What should change for the reader from the opening to the landing?
Students will be able to
Write an original chapter scene with narration and dialogue.
Use a single deliberate metaphor to shift a character’s point of view.
Add images and set music to autoplay on a page.
Code click and drag interactions to navigate and reveal story details.
Key vocabulary
metaphorfolded mapmentor
The student journey
This is a build — not a worksheet packet
Every lesson runs like the story students are about to make: read it, write it, build it, polish it, publish it. The printables scaffold each stage — the published Elementari project is the destination.
1
📖
Read
Students read a short, high-interest passage — a real-world hook, not a dry textbook definition — to spark ideas for what they'll make.
📖The Storybook Map
This is an original mentor text created for this lesson.…
In the studio, students bring the project to life — adding art and following the exact writing and coding steps shown below. The Studio Compass walks them through it, one step at a time.
🧭Studio CompassStep 1 / 10
Design the chapter cover
Write the cover title and subtitle, pick a background, and set music to start when the page opens.
Key words — tap to learnOn Drag
Each step checks off & advances on its own
All 10 studio steps · dynamic to the project
1Design the chapter cover~20 min
2Add the opening scene image~5 min
3Introduce the new apprentice~5 min
4Write the apprentice's request~25 min
5Set up the study scene~15 min
6Code Continue navigation~5 min
7Code the drag reveal~25 min
8Write the mentor's caution~10 min
9Code mentor click actions~25 min
10Finish with the takeaway scene~10 min
4
🔁
Polish
ongoing
Teacher and peer feedback pin right onto the project — students revise until it's ready to share.
Feedback on the project2 pins
🍎
Add one more sentence here so readers get the full picture.
👍 2Teacher
A
The interaction is clear — it helps the reader follow the project!
A couple of things to gather, a few quick steps to prep — then you're ready to hand it to students.
What you need
A device per student or pair
Internet connection
Headphones or speakers
Prep · about 10 min
1Print the student kits
2Assign this lesson to your students
3Skim the build steps
Teacher background
What you need to know
Writers use deliberate craft moves—a purposeful metaphor, imagery, pacing, and design choices—to shift a reader's understanding, tone, or attention between the opening and the landing. Multimedia and page interactions can magnify that shift when they are placed where they strengthen the story's meaning.
Key terms
metaphor
A way to say one thing by comparing it to another to make an idea clearer or stronger.
folded map
A map that is creased and folded so its whole picture is hidden until it is opened.
mentor
A teacher who guides someone with more experience and often tests them to help them learn.
Watch for these misconceptions
✕
Multimedia bolted on rather than integrated →Ask the student to point to the moment where the music or image changes a reader’s feeling or understanding; if they cannot, help them move the media to that specific line or frame.
✕
Writing that names a change but gives no specific moment or action that shows the change →Ask the student: 'Which line or small action shows the reader this changed thinking?' and have them underline that sentence and add one detail that makes the moment visible.
✕
Interactive elements fail to navigate or reveal reliably (click or drag produces no effect) →Play the interaction with the student: click and drag while the student watches; if it fails, check the target hitbox and animation trigger and test small fixes immediately.
Standards alignment
Aligned to the standards you teach
Every task maps to a specific standard, so planning and reporting are covered.
Tracking 7 frameworks: Common Core ELA, Common Core Math, NGSS +4
Common Core State Standards — English Language Arts
6 standards
WHST.6-8.4
Produce clear and coherent writing in which the development, organization, and style are appropriate to task, purpose, and audience.
WHST.6-8.6
Use technology, including the Internet, to produce and publish writing and present the relationships between information and ideas clearly and efficiently.
SL.8.5
Integrate multimedia and visual displays into presentations to clarify information, strengthen claims and evidence, and add interest.
Also addressedW.8.3 · L.8.5 · RI.8.4
Full task-by-task mapping — including Depth of Knowledge — is in the answer key.
Differentiation & accessibility
Built to reach every learner
One lesson, three built-in paths — with accessibility baked into the materials, not bolted on afterward.
Extra support
Emerging readers & writers
Read-aloud and multilingual support in the Elementari build
Studio Compass highlights one task at a time — including the coding
Sentence frames and a word bank so it is never a blank page
On grade
The core lesson
The passage and storyboard exactly as written
Model answers and “look-fors” in the answer key
Self-check chips at every milestone
Ready for more
Extension & challenge
Challenge vocabulary and a real-world extension question
Deepen one existing page or interaction — without changing the required mechanics
A longer, evidence-based reflection prompt
Accessibility, built inPredictable step-by-step structureOne task at a time · Studio CompassHighlighted response areasLow-stimulation printMovement-friendly pacingDesigned so every student can design, write, and code — with ADHD, autism, and dyslexia in mind.
Questions
Teacher FAQ
Do I — or my students — need to know how to code?
No. Coding concepts are introduced in plain language exactly when students need them, and Studio Compass confirms each milestone so students keep moving without you troubleshooting. The teacher guide walks you through the whole build, answers included.
How long does this lesson take?
About 1 week, paced into 45-minute class periods. You can spread it out or compress it — students pick up where they left off, so it doesn't have to finish in one sitting.
What devices does this lesson work on?
Students can read, write, code, and publish on Chromebooks, iPads, tablets, laptops, or desktops. All they need is a modern browser — nothing to download or install.
What is Studio Compass?
Studio Compass is the step-by-step guide inside the Studio. It shows students what to do next, identifies the exact coding blocks they need, and confirms completed milestones so they can keep moving independently.
How does this lesson support different learners?
This lesson includes read-to-me with synchronized highlighting, a built-in glossary, and picture-based storyboarding, with writing and coding scaffolds you can dial up or down. Students can work with guided support or more independently — and still finish the same project.
Ready when you are
Bring this lesson to your class
Import your class, assign in one click, and watch them build — the whole kit comes with it.
