Troubleshooter | eLearningDesign.org

Step 1. Set the shape below, click Copy AI prompt, paste it into ChatGPT or Claude, and replace the topic placeholder with your own scenario.

Possible causes Investigations

Step 2. Paste the JSON it gives you into the box below and click Load into builder.

Title Instruction Problem statement

The symptom the learner sees. Describe what changed, not what caused it.

Three to six causes. Keep every one plausible. Set the true cause at the bottom.

True cause

Four to six works best. Each one costs the learner resources, so make every choice worth considering.

Ask which evidence best supports the diagnosis Ask which evidence ruled a cause out Ask what should happen next

Mode

Reveal causes after this many investigations

All three modes use the same workstation and the same evidence. Only the timing of the cause list changes.

Resource

Amount available

Enable a countdown for the investigation phase

Judge the diagnosis Judge the quality of the evidence gathered Judge investigation efficiency Retry Celebrate a correct diagnosis

Font Title size Subtitle size Content size Text alignment

Corner radius Animations

Reduced motion settings on the learner's device are always respected.

Primary Correct and accent Page background Card background

These recolor the illustration itself. Shading is calculated from each color, so the scene stays dimensional.

Wall Desk Monitor Phone Folder Clipboard Papers Accessories Scene accent

♿ WCAG AA Included: Keyboard navigation, screen reader support, visible focus indicators, and reduced motion support are built into every export automatically.

This is a Pro Generator

You can build and preview your interaction, but exporting requires a Pro subscription.

Upgrade to Pro

Generated code

Quick build (with AI)−

The case+

Possible causes+

Investigations+

Diagnosis questions+

Difficulty mode−

Investigation constraint+

Timer+

Feedback+

Type−

Shape and motion+

Colors+

Workstation colors+

This is a Pro Generator