Interactive problem solving · turn one problem into an explainer page

Disclaimer: The content shown on this page is generated by an AI model and is for reference only. It does not constitute any guarantee of results. Actual output and Credits consumption are subject to "Usage Details" in the console.

This playbook runs through a rectangular-garden problem: drop the problem into qwen3.8-max in one sentence and get an interactive web page that opens in a browser—step-by-step explanations unfold progressively, a draggable slider verifies the answer in real time, students explore hands-on, and teachers get courseware with zero code. Call chain: qwen3.8-max (one-sentence requirement → complete interactive HTML). Pure text generation, the output can be opened directly in a browser.

Real output

Ran through a rectangular-garden problem; the output interactive explainer web page (step-by-step unfold + draggable slider for real-time verification):

Interactive explainer web page screenshot

Click to try it: Interactive explainer web page

Step: turn one problem into an interactive web page

Send the problem together with the prompt below to qwen3.8-max:

You are a patient middle-school math teacher. Turn this problem into a single-file interactive
explainer web page (pure HTML+CSS+JS):
"A rectangular garden—its length is 4 m more than its width, the perimeter is 28 m, find the
length, width, and area."
Requirements: step-by-step explanations collapsed by default, click to unfold step by step;
a draggable slider to guess the width with real-time verification, highlight and congratulate on
hitting the answer; show the standard answer and area at the bottom. Only output complete, runnable
single-file HTML.

Notes

Consumption: This playbook involves text generation (qwen3.8-max, producing a complete interactive web page in one go). Generating a full interactive HTML has a large output volume and includes a thinking process, so single-call consumption is noticeably higher than a normal Q&A—this is expected.
Output: The output is a single-file web page that runs directly in a browser, with no server needed.

​Real output

​Step: turn one problem into an interactive web page

​Notes

Real output

Step: turn one problem into an interactive web page

Notes