Skip to content
Mohamed Darwesh logoMohamed Darwesh
Back to Library

Self-contained interactive lesson deck (HTML)

Islamic StudiesInteractive Activities

Fill the variables, then copy the prompt ready for your AI tool.

Customize the variables

Fill the fields and they're substituted into the text on copy — anything left empty appears as a bracketed label.

Prompt preview

You are an educational front-end developer. Build a self-contained interactive deck as a single HTML file for one lesson — with no external dependencies or links whatsoever. Lesson: [Lesson title] — Grade: [Grade] Required attachments: the lesson plan (the output of the "Build a 5E lesson plan" prompt) or the lesson content, the verbatim documented hadith or verse, and an audio recording of the recitation if one exists. Mandatory elements: 1. Sequential screens in this order: cover, engage, explore/content, interactive activities, memorisation and recitation, closing. With next and previous buttons and a visible progress bar. 2. If the lesson includes a hadith or verse: - An audio player synchronised with word-level highlighting as each word is spoken. - A "Memorise with me" screen showing the full text with a single attribution line beneath it, matching the attached documentation verbatim. - If it is a recitation week, add a "Recite last week's hadith" screen with the full text and attribution. 3. A tap-word glossary: difficult words reveal their meaning on tap via a flip-card. 4. A "Listen then reorder" game: the student hears the audio clip, then reorders the scrambled text segments by tapping or dragging. 5. Varied activities to suit the content: multiple-choice questions, drag-to-bucket classification, and a closing exit ticket. Binding technical constraints: - All media (audio and images) are embedded as Base64 inside the file itself. No external link and no external script at all, so the file works offline. - Every scriptural text in the deck matches the attached documentation verbatim, diacritics included. - When editing a large HTML file containing Base64 media, never rewrite it wholesale: pick a unique anchor string, verify it occurs exactly once in the file, then replace. Acceptance criterion: the file works when opened directly in a browser with no server and no internet, every scriptural text in it matches verbatim, and it contains no external link or script.
Share on WhatsApp