Using Interactive Components
Interactive components help Instructional Designers present layered information without overwhelming the learner. Use them when the interaction supports a clear instructional purpose, such as comparing ideas, exploring a process, or revealing details in a sequence.
Accordion
Use accordions to let learners expand one topic at a time while keeping the page easy to scan.
Live Demonstration
Single accordion: Workplace procedure reminder
Escalate promptly when a patient reports chest pain, shortness of breath, sudden weakness, severe allergic symptoms, or any symptom that falls outside routine intake procedures. Follow the clinic's chain of command and document the handoff clearly.
Accordion group: Student success support options
Academic coaching helps students build a study plan, prioritize assignments, and prepare for skills practice. It is especially useful when a student is keeping up with attendance but needs help organizing weekly work.
Technology support is appropriate when a student cannot access course materials, upload a file, join a virtual session, or troubleshoot common browser and password issues.
Communication guidance helps students practice concise email messages, respectful tone, clear subject lines, and appropriate follow-up when they need help from an instructor or support team.
Time management planning helps students map deadlines, identify high-focus study blocks, and break larger assignments into smaller steps before the end of the week.
Horizontal Tabs
Use horizontal tabs for a small set of parallel topics where learners benefit from switching between related views.
Live Demonstration
Prepare your workspace
Before joining an online class session, students should confirm their device is charged, close unrelated tabs, open the course page, and keep notes within reach.
Protect account access
Use a strong password, sign out on shared devices, and avoid sending screenshots that show student ID numbers, grades, or private messages.
Participate professionally
Use chat for course-related comments, keep microphones muted when not speaking, and ask questions that include enough context for the instructor to respond efficiently.
Follow up with clarity
After a session, review announcements, save any resources shared by the instructor, and send one concise message if a question remains unresolved.
Vertical Tabs
Use vertical tabs when tab labels need more room or when learners compare stages in a structured process.
Live Demonstration
Greet the patient
Use a calm tone, confirm the reason for the visit, and explain what will happen next. A clear greeting helps reduce uncertainty before intake begins.
Verify key information
Confirm two identifiers according to workplace policy, then review contact details and insurance updates without discussing private information where others can hear.
Record observations
Document information using approved abbreviations and objective language. Notes should be clear enough for the care team to understand the next action.
Route the patient
Direct the patient to the appropriate next step and communicate any urgent concern to the appropriate team member before returning to routine tasks.
Click & Reveal
Use click and reveal to let learners open short explanations after they have reviewed a prompt or example.
Live Demonstration
Professional email subject lines
A useful subject line tells the reader what action or topic the message contains.
Example: "Question about Week 3 lab upload" is more helpful than "Help" because it gives the instructor context before opening the message.
Digital file names
Clear file names make it easier for students and instructors to locate the right assignment version.
Example: "Smith_Alex_MedicalTerminology_Module2.docx" is easier to identify than "homework final final.docx".
Workplace handoff notes
A strong handoff note helps the next person understand what has happened and what needs attention.
Example: "Patient arrived at 9:05, forms completed, insurance card scanned, waiting for room assignment" gives a concise status update.
Flip Cards
Use flip cards for compact term-and-explanation pairings when learners benefit from active exploration.
Live Demonstration
Select a card, or focus it with the keyboard and press Enter or Space, to turn it over.
Closed-loop communication
Confirm that a message was received and understood.
Why it matters
Repeating back key details reduces misunderstandings during clinical handoffs, scheduling calls, and team updates.
Teach-back
Ask someone to explain instructions in their own words.
Why it matters
Teach-back helps confirm understanding without placing blame on the patient, student, or coworker.
Digital footprint
The trace of information created through online activity.
Why it matters
Professional programs often discuss digital footprints because online communication can affect trust and workplace readiness.
Scope of role
The tasks a person is trained and authorized to perform.
Why it matters
Understanding scope helps employees ask for help appropriately and avoid completing tasks that require a licensed professional.
Hotspot Interaction
Use hotspots to connect specific parts of a visual, diagram, or workflow to concise explanatory content.
Live Demonstration
Select each numbered point to review a part of the patient intake workflow.
1. Reception greeting
Begin with a respectful greeting and explain the next step. A predictable opening helps the patient understand what information will be requested.
2. Identity verification
Use the workplace-approved identifiers before discussing private information or updating the patient record.
3. Intake documentation
Record the reason for visit, update forms, and note any information that should be communicated before the patient is roomed.
4. Care team handoff
Share urgent concerns through the approved handoff process so the care team can prioritize the next action.
Step Process
Use a step process to guide learners through a sequence of actions or stages that they can move through one at a time.
Live Demonstration
Procedure: Submit an assignment
Step 1 of 4: Review
Review the requirements
Read the assignment directions, due date, grading criteria, and required file type before beginning your work.
Prepare your materials
Gather the course resources, notes, template, and supporting files you need before drafting the assignment.
Practice the procedure
Complete the work, compare it with the rubric, and review examples or feedback before preparing the final version.
Complete and confirm
Upload the correct file, submit it, and confirm that the assignment appears in the course submission history.
Timeline
Use a timeline to present events, milestones, or stages in chronological order that learners can explore.
Live Demonstration
Course timeline
Selected milestone: Week 1 — Orientation
Week 1 — Orientation
Locate course resources, review expectations, and confirm how to communicate with your instructor and support teams.
Week 2 — Practice
Apply foundational skills through short activities and use feedback to improve before graded work begins.
Week 3 — Assessment
Complete assignments and assessments that demonstrate your understanding of the course objectives.
Week 4 — Reflection
Review your progress, note the strategies that helped most, and plan how you will use the learning in future coursework.
Carousel or Content Slider
Use a carousel when a small number of related panels should be viewed one at a time without autoplay.
Live Demonstration
Three habits for managing course files
1. Create a course folder
Store documents for one course in a dedicated folder so assignment drafts, downloads, and instructor resources do not get mixed with unrelated files.
2. Name files clearly
Include your name, course, assignment, and version when naming files. Clear names make it easier to upload the intended document.
3. Check before submitting
Open the file once before uploading and confirm the submission appears in the course after the upload is complete.
Modal
Use modals sparingly when learners need focused supporting information without leaving the current page context.
Live Demonstration
Open the example modal to review a short orientation reminder.
Comparison Reveal
Use comparison reveals to help learners distinguish two related concepts without asking them to choose an answer.
Live Demonstration
Task-focused communication
Primary goal
Move work forward by clarifying the action, deadline, owner, or decision needed.
Example
"Please upload the signed form by 3 p.m. so the file can be reviewed before tomorrow's appointment."
Relationship-focused communication
Primary goal
Build trust by acknowledging the person's context, concern, or effort before moving to the next step.
Example
"I understand this process can feel confusing. Let's review the next step together and make sure you know where to upload the form."
Expandable Glossary
Use an expandable glossary when learners need quick access to definitions without leaving the page.
Live Demonstration
The boundaries of tasks a person is trained, authorized, and expected to perform within a role.
The approved route for moving a concern to the person or team responsible for the next decision.
A communication technique that asks someone to restate instructions in their own words to confirm understanding.
The collection of information created by online activity, including posts, messages, account profiles, and shared files.