Stepwise: trainer for loops and conditions in C

Stepwise: A Visual Trainer for Mastering Loops and Conditions in C

Developer shu512 created Stepwise — a web-based tool for learning programming from scratch through a visual environment. The tool allows users to manually move a robot across a map, assemble programs from command blocks, apply loops and conditions, edit maps, and save tasks. This solution emerged to prepare a younger sibling for a C exam with no prior experience.

The first task: three steps to the right. The student verbally gave directions, pauses shortened, confidence grew. Next, navigating around a wall: the sequence "right, down, down, down, right." Switching to UP, DOWN, LEFT, RIGHT blocks automated the route.

From Repetition to Loops

On the "Snake" map, the student first drew 8 LEFT commands, then recognized the repetition and replaced it with a loop:

LOOP START
LEFT
LOOP END (8)

Similarly for DOWN (2). They insisted on using loops even where linear code was simpler. This demonstrates conscious application of abstractions.

List of key stages:

• Manual robot control to understand routes.
• Assembling command blocks without syntax.
• Introducing loops when clearly needed.
• Discovering patterns for nested loops.

Nested Loops Through Trial and Error

The "Snake BIG" map (enlarged size) required nesting. The student suggested a RIGHT loop inside an outer one, then LEFT with DOWN. After a pause, the question: "A loop inside a loop?"

Solution through trial and error:

• Outer loop for vertical movement.
• Inner loop for horizontal movement.
• Adjusting boundaries.

It took half a lesson but solidified the concept. The robot reached the finish.

Transition to C Syntax

After blocks, C code generation was enabled. The student matched DOWN(); with a block, understood if (wall_right()). The loop was explained as for (int i = 0; i < 8; i++), where i is an arbitrary variable (they replaced it with a).

Standard constructs (#include <stdio.h>, main, return 0) were postponed. The code became familiar: each construct was backed by visual experience.

Example generated code:

for (int a = 0; a < 8; a++) {
    LEFT();
}
DOWN();
DOWN();

Independent Programming

Next — writing C code manually to complete maps. The student read compiler errors, clarified: "Is this right? Can I do this?" Programs lengthened, questions became rarer. Maps grew more complex.

The student became a tester: identified UI inconveniences, suggested improvements via screenshots.

What Matters

• Visualization precedes syntax: loops and conditions are mastered through necessity, not theory.
• Trial and error accelerates understanding of nesting.
• Code blocks generate working C, easing the transition.
• A student with zero experience uses for and if independently by the third session.
• The tool is effective paired with a mentor for collaborative problem-solving.

Final Takeaways

The transformation from passivity to initiative happened over a few lessons. The student solved tasks independently, was excited by new maps. The transition to variables, functions, and pointers went smoothly.

Approach: grasp the meaning of constructs through visualization before formal syntax. Stepwise is not a toy but an environment for dialogue and experimentation. For middle/senior developers, it's useful as a prototype for visual trainers or a tool for onboarding juniors.

— Editorial Team