A prediction-first learning platform for introductory C++ — built by Ebuka Philip Oguchi.
Beginners do not fail C++ on the hard topics. They fail early, when a program's behaviour is invisible to them and a compiler error reads as a verdict instead of a message. TraceFirst is built on one discipline, drawn from the PRIMM model in computing-education research (Predict, Run, Investigate, Modify, Make):
- Predict. The student sees a short program and must commit to what it will print. The prediction is locked before anything runs.
- Run and trace. The student steps through the program line by line, watching labelled memory boxes hold and change values, and the output console fill.
- Confront the gap. A wrong prediction is diagnosed at the exact step where the student's mental model and the machine parted, with the misconception behind the chosen answer named.
- Modify. One value changes, and the student predicts again.
Every exercise exists in four story skins (Health & Biology, Psychology & Social Science, Business & Economics, Arts & Media) over identical code, so a non-CS major meets the concept inside her own field while the class shares one concept sequence.
index.html is a self-contained prototype with eight modes, and each mode tab carries a dropdown of its sections for direct jumps. A "Start Here" route at the top of the page sequences the modes for a first-time visitor, with a short "Meet the Code" primer that explains the anatomy of a first program before the tracer. Open it in any browser; there is nothing to install and nothing is sent anywhere: there are no accounts, and a visitor's progress is saved only in their own browser, on their own device. A slim resume strip welcomes a returning visitor back, naming the exercise they last worked on and jumping to the next unfinished one, and a Clear my data control in the Display menu wipes the local record entirely on request. A Display menu at the top of the page groups the display controls in one place: a background switch offering white (the default), black, or green, and two reading-comfort toggles, Reduce motion, which stills the animated playback and trace effects, and Larger text, which scales code and body text across the platform; every choice is remembered for each visitor. A Download offline copy button in the header saves the whole platform as a single HTML file that opens in any browser with no internet connection; progress in the downloaded copy is stored separately in that browser.
- Bolt's World: a pre-syntax robot environment, and the recommended starting point. Students program an original workshop robot in real C++ shape (commands, loops, conditionals, their own functions) across twenty-nine graded worlds, learning the logic of programming before formal syntax. Eight optional challenge worlds with action budgets (par) sit below the graded worlds for students who finish and want more.
- Prediction Tracer: sixty-three exercises spanning the introductory course (assignment, integer division, decisions including switch fall-through, loops, functions and reference parameters, arrays and two-dimensional arrays, strings, vectors, searching and sorting, structured data, classes and objects, simulated file input, maps and sets, a four-exercise pointers sequence covering addresses, dereference, pointer arithmetic, and dynamic memory, shown through a Heap view that links each pointer to its heap box by a labelled chip, greys a box when delete frees it, marks the pointer dangling, and marks an orphaned box leaked, a recursion sequence with a visible call stack, extended by a pack that adds a two-branch Fibonacci trace with its branching call tree, a string processed one character per recursive call, and a sum-of-digits trace where the value is assembled only on the return path, and a scope and lifetime sequence covering global versus local names, static local variables, block scope, and value versus reference parameters in a single program, plus bitwise operations and stack and queue behaviour simulated with arrays, and a sorting and cost group (Exercises 54-59) whose programs carry a comparison counter the student predicts, ending with the same input run through bubble sort and merge sort so the quadratic and n log n costs are numbers the student committed to), each running the full predict, trace, verdict, and modify loop, solo or in pairs, with a per-concept prediction record for the session. Traces can also play themselves: an animated playback mode steps through each program at a chosen speed while a moving marker makes the control flow visible, arcing over the lines a branch skips and curving back up at a loop's back-edge, with a narration caption naming the decision behind each jump and pacing that lingers on jumps. The same playback, captions included, runs in the facilitator-facing Lecture mode, which projects an exercise to a whole class, tallies the class's predictions, and pauses the trace where the majority's model parted from the machine. Students can export a prediction journal of their session, and an instructor digest aggregates exported journals into a per-exercise view of where predictions went wrong, and turns the most-missed exercises into discussion cards for the next class. A student can also attach a one-sentence rationale to a locked prediction; the rationale returns with the verdict, travels with the journal, and is grouped in the digest under the misconception it reveals. After the verdict, a student can flag the single line they found hardest on that exercise; the flags travel with the journal too, and the digest ranks the most-flagged lines, including flags left on exercises most students predicted correctly. On any exercise with function calls, the trace shows a call-stack panel beside the memory area: frames push on entry with the parameters bound, each function's locals living inside its own frame, and pop on return, while variables outside any function keep their own display. Each prediction can also carry a confidence mark (sure or not sure), and the digest separates confidently wrong predictions from unsure ones. When a diagnosis names a misconception, a short "Check the repair" follow-up program, one where the wrong model and the machine predict different outputs, tests whether the repair held, and the verdict suggests the next exercise targeting the same idea. During a trace, a student can edit a variable's value mid-run and watch the real continuation; the run is badged as exploratory and the recorded verdict is untouched. An instructor exercise studio in the same instructor section lets an instructor author new prediction exercises (the true output is fixed by running the program, never typed in), share them by code, and have students play them with the same prediction lock. A Topic crosswalk index tags all sixty-three exercises by topic, matched by topic title rather than section number, since numbering varies by textbook and course setup. Each concept group opens with a short briefing and concept checks, a spaced review set resurfaces exercises that are due, and a problem of the day is seeded by the calendar date. A Reference button in the header opens the printable reference card as a panel from any mode, without disturbing the work underneath it. A Print worksheet action on each exercise produces a one-page paper worksheet (the code, prediction boxes to tick, a blank step-trace table, and blank final-memory boxes) with an instructor answer key carrying the verified trace on page two. A Copy prediction link action on each exercise copies a link that opens that exercise ready to predict, so students can challenge each other to commit to a prediction before anything runs. The tracer is fully keyboard-operable, with screen-reader announcements for each step.
- Assignments: inside the session and instructor tools, an instructor builds an assignment (a title, a due date, and any set of tracer exercises) and shares it as a TFA1: code or a link; a student opening it sees the set with live completion ticks from their own saved record and a past-due marker when the date has passed, and either side can export a CSV of the assignment set for a gradebook, built from this browser's record.
- Progress file: also inside the session and instructor tools, a student can export their whole progress record as a JSON file and import it in another browser or on another computer, choosing to replace their progress or merge the file into it, so progress can move between devices with no account and nothing sent anywhere.
- Debugging Gym: twenty-four rounds of short beginner programs, run as the full debugging process: spot each bug and classify it, say what each logic bug actually does, fix the code yourself with no run button, then prove the fix on a test you have not seen — plus a seven-round "Right answer, wrong program" section: programs that pass their sample test, where you find the input that breaks them, predict the wrong output, watch it run, and fix the one faulty line.
- Refactor Gym: six rounds of working but messy programs. The student predicts the exact output and locks it in, then chooses, from three cleaner rewrites, the one that behaves identically; a wrong choice is shown the concrete input on which its output parts from the original's, with the change named, and a closing summary separates what changed from what did not.
- Error Translator: a searchable catalogue of forty-two beginner compiler errors, each with the raw compiler message, a plain-English translation, the cause, and a before-and-after fix. Twenty-four entries end with a fix-it round: the student edits the entry's broken program in place and reruns it under the platform's own interpreter until it builds and runs clean, with a two-step hint ladder (first which line, then what to change) revealed only when asked.
- Challenges: eighteen tasks at each of the Beginner, Intermediate, and Expert levels, guided projects, and scored exams, drawn from real course assignments. Timed diagnostic sets return, for every missed question, the concept it tested and a link to the exercise that repairs it, and three open-ended culminating projects run on staged milestones (proposal, prediction checkpoint, test bench, reflection), with a showcase kept on the student's own device.
- Bridge: the middle rung between tracing and writing. Students put shuffled programs back in order (twelve Parsons problems, each with a distractor block to reject), then complete twelve programs with missing lines; every attempt is judged by running the assembled program, not by matching a set answer.
- Make: the authorship stage that completes the PRIMM sequence. Students write complete C++ programs in an in-page editor, run them with their own test input, and check them against thirty guided prompts, each with a verified test bench, the later prompts adding hidden tests the student never sees. A micro-problem ladders section adds thirty one-function problems in five tiered ladders, judged instantly against visible test tables. Prompts can be worked test by test in a test-driven mode, completed prompts reveal alternative solutions for comparison, a style checklist comments without blocking, and a "Trace this code" action steps the student's own program through the tracer view, with a copyable anchor that reopens the trace at a chosen step.
- Feedback: a quiet panel above the footer invites visitors to say what worked, what confused them, and what is missing, through a short anonymous Google Form that opens in a new tab.
TraceFirst is under active development toward a full platform:
- A real architecture behind the prototype: structured content, exercise engine, and student accounts with saved progress and instructor views of prediction accuracy by concept.
- A graphical interface and a downloadable app, alongside the web version.
- Growth along the pathway its author teaches: the introductory C++ sequence first, then the introduction to systems and computer organization, so a student can follow one continuous route from her first program to the operating system.
MIT — see LICENSE. Copyright (c) 2026 Ebuka Philip Oguchi.