From Static Worksheets
to
Interactive Apps
A Practical Workflow for Digitizing Teaching Material
By Fajarudin Akbar
Practical Uses
Active Input
Active Input
Can help shift focus from passive reading toward active tasks like drag-and-drop matching, clickable multiple-choice options, and text input fields.
Self-Guided Practice
Self-Guided Practice
Often allows learners to attempt tasks multiple times, review specific sections, and check their own answers independently before submission.
Automated Validation
Automated Validation
Can provide system-generated correct/incorrect indicators, visual cues, and automated hints to help guide learners as they progress through the task.
4 Steps to Transformation
Select your source material and consider what might work well as an interactive element before uploading it.
- Identify the specific text, transcript, or worksheet section.
- Decide which parts of the document might be useful as interactive components.
- Upload the file into your chosen AI workspace.
Be Aware: Before uploading or adapting existing materials, check that you have permission to use them in this way. Copyright or licence terms may limit copying, adaptation, or redistribution.
Avoid uploading confidential or personally identifiable information, and review the terms of the AI tool you are using.
Review the resulting lesson carefully before using or sharing it. Check the content, answers, examples, images, and activities for accuracy, appropriateness, accessibility, and unintended bias.
Write a prompt suggesting how the application might function and who it is for.
- Suggest the activity type (e.g., matching, clickable quiz).
- Define the target learner demographic.
- Ask the AI to include specific interactions or feedback styles.
Test the generated draft yourself and issue follow-up prompts to adjust features or fix issues.
- Click through the app to verify if the logic and buttons work as intended.
- Check if distractor options are plausible but clearly wrong.
- You can ask the AI to iterate (e.g., "Try adding a score counter").
Export the final code into a usable format and distribute it, provided you have permission to do so.
- Copy the generated HTML code if it meets your needs.
- Host the single file using simple platforms or embed it into your LMS.
- Share the final URL with your learners.
Your Prompt Formula
Start with material you already have. Add a simple instruction telling the AI what you want to create.
1. Provide Material
The Material
Use an existing worksheet, lesson plan, reading, listening script, or other ready-made teaching material you have permission to adapt.
2. Add Instructions
The Instruction
Ask the AI to draft a digital lesson from the material and describe any specific features you want to try.
3. Digital Lesson
The Output
The AI can process the instructions to draft an interactive format, aiming to keep your original learning purpose.
Keep the First Prompt Simple
You do not need to describe everything at once. Start with a basic conversion, then test the result and ask the AI to make adjustments.
Try This Example Prompt
This is just a starting point. Copy it, paste your material at the end, and adjust the instructions to fit your specific lesson.
Act as an expert instructional designer and web developer. Create a self-contained, single-file HTML interactive digital lesson using the provided material. Preserve the original learning objectives, core content, and sequence. Automatically convert static activities into appropriate interactive exercises (such as clickable options, drag-and-drop matching, or text inputs). Build in immediate, constructive feedback for both correct and incorrect answers, and include a way for learners to see the correct answers. Ensure the final code is fully functional, visually appealing, responsive for all devices, and ready for immediate use.Try it, test it, then iterate.
The first version does not have to be perfect. You can ask the AI to modify, adapt, simplify, expand, or improve the digital lesson based on what you notice during your testing.
Chatbots & Workspaces to Use
Use environments that support live code previews or side-by-side canvas editing to test your digital lesson instantly.
ChatGPT Canvas
Opens a dedicated split-screen window beside your conversation. Allows you to directly highlight, edit, and prompt targeted revisions to specific sections of your code.
Open ChatGPTGemini Canvas
Provides a side-by-side workspace within Gemini for drafting and refining digital artifacts, supporting conversational iteration and direct inline code changes.
Open GeminiClaude Artifacts
Renders interactive single-file HTML, CSS, and JavaScript directly in a dedicated viewer panel so you can test interactive questions and layouts immediately.
Open ClaudeGoogle AI Studio
Offers rapid web application prototyping with granular control over model parameters, prompt system instructions, and one-click execution of generated web apps.
Open AI StudioLovable Dev
A prompt-driven application builder focused on turning natural language instructions into fully functional, customizable, and exportable web applications.
Open LovableExample Applications
B1 Infographic
Education & Careers
An interactive infographic with clickable discussion cards, a random scenario generator, and a collaborative hiring matrix.
View AppA2-B2 Reading
Modern Work Culture
A branching-pathway reading simulation where learners make workplace decisions to explore the impacts of remote work culture.
View AppB1 Listening
The Multi-Speaker Seminar
An interactive listening module featuring dynamic text-to-speech audio, speaker highlighting, and comprehension tasks about medical triage.
View AppEthical & Copyright Considerations
Practical safeguards to consider before uploading source materials or distributing an interactive lesson.
Permission & Licensing
Using AI does not confer copyright clearance. Check that you hold the rights to the original material or that its license terms (e.g., Creative Commons, Open Educational Resources) permit digital adaptation and redistribution.
Student Privacy & PII
Never upload documents containing personally identifiable information (PII), student names, grades, or proprietary institutional records. Review the privacy policies and training opt-outs of your chosen AI tool.
Accuracy & Validation
AI-generated answer keys, feedback explanations, and distractor options may contain plausible-sounding errors. Always test the generated activity and verify all factual claims before learners see them.
Bias & Accessibility
Examine examples and dialogues for cultural assumptions or unexamined stereotypes. Confirm that color combinations maintain readable contrast and that interactive elements remain usable with assistive technologies.
Core Principle: AI is a drafting assistant, not an educational authority. The educator retains responsibility for the pedagogical validity, licensing rights, and ethical appropriateness of all shared materials.
Prelaunch Checklist
Verify these core elements before sharing with your learners.