Browse Courses

Anki Card Generation & Styling Showcase

May 2, 2026 18 min read Counselling Skills Anki Cards Testing Docs Level2-Counselling Anki-Testing Html-Styling Css-Components Flashcards

Comprehensive testing page for Anki card generation, HTML styling, and CSS components. Demonstrates the automatic styling system and various card types with visual examples.

On this page

Anki Card Generation & Styling Showcase

This page demonstrates the Anki card generation system with automatic CSS styling. All cards shown here represent how they will appear in Anki Desktop after APKG generation.

Overview of Styling System

How It Works

  1. JSON Metadata specifies course name:

    1{"metadata": {"course": "Psychology", ...}}

  2. Generator loads CSS automatically:

    • Reads scripts/anki/styles/psychology.css
    • Injects into all card models

  3. HTML in Cards uses CSS classes:

    • Use any CSS class from the stylesheet
    • Styling works immediately in Anki Desktop

Available CSS Components

The following components are available in Psychology course cards:

  • .skill-card - Skills list with colored border
  • .comparison-box - Side-by-side comparisons
  • .definition-card - Highlighted definitions
  • .emphasis-text - Important emphasized text
  • .application-guide - Practical implementation guidance (NEW)
  • .success-box, .warning-box, .info-box - Status indicators

🆕 Latest Addition: .application-guide - Purple gradient theme for “How X is applied in practice” questions. Includes structured sections: guide-header, guide-principle, and application-points.

Live Component Preview

If you see colored borders and backgrounds below, CSS is working correctly:

✅ Skill Card Component

Blue left border with light blue background

  • Organized skills list
  • Clear visual hierarchy
  • Professional appearance

✅ Left Side

Green theme

Used for contrasts

✅ Right Side

Blue theme

Side-by-side display

✅ Success Box: Green background indicates successful styling load!
Definition Card: Yellow background with yellow-gold border for term definitions
✅ Application Guide (NEW)
Key Principle: Purple gradient theme for practical implementation questions
  • Stage 1: Structured guidance sections
  • Stage 2: Visual distinction from other components
  • Stage 3: Ideal for "How X is applied" questions

Use for practical application and implementation guidance

Test 1: All cards from sample file

Plain text cards without HTML formatting:

CSS Styling Examples - Reference

Psychology • Module 01

Q: What are the nine core counselling skills?
A:

Nine Core Counselling Skills

  • Empathy - Understanding from client's perspective
  • Active Listening - Full attention and comprehension
  • Questioning - Open-ended exploration
  • Paraphrasing - Restating for clarity
  • Reflecting - Mirroring feelings
  • Summarising - Key points overview
  • Challenging - Addressing inconsistencies
  • Unconditional Positive Regard - Non-judgmental acceptance
  • Genuineness - Authentic presence
Hard
core-skillsframeworkexample-skill-card
Q: What is the difference between empathy and sympathy?
A:

Empathy

Definition: Understanding from the client's perspective

Focus: Client's experience and feelings

Response: "It sounds like you're feeling..."

Maintains: Professional boundaries

Sympathy

Definition: Feeling sorry for the client

Focus: Counsellor's personal reaction

Response: "I know exactly how you feel"

Risk: Blurred boundaries

Hard
empathysympathydistinctionexample-comparison-box
Q: Define: What is Active Listening?
A:

Active Listening is a communication technique where the counsellor:

  • Fully concentrates on the speaker's message
  • Demonstrates engagement through verbal and non-verbal cues
  • Responds appropriately to show understanding
  • Remembers key information for later reference

Key principle: Listening to understand, not to respond.

Hard
active-listeningdefinitionexample-definition-card
Q: What are effective empathetic responses in counselling?
A:

Effective empathetic responses include:

  • Reflecting feelings: "What seems to be happening is..."
  • Validating understanding: "It sounds like this situation makes you feel..."
  • Seeking clarification: "Could you give me an example of when...?"
  • Confirming accuracy: "Have I understood correctly that...?"
Hard
empathyresponsescommunicationexample-emphasis-text
Q: What steps are involved in establishing a helping relationship?
A:

Step 1: Create Safety

Establish a non-judgmental, confidential environment

Step 2: Build Trust

Demonstrate consistency, empathy, and genuine care

Step 3: Active Engagement

Use core skills to show understanding and support

Step 4: Maintain Boundaries

Keep professional limits while showing compassion

Hard
helping-relationshipprocessstagesexample-process-step
Q: What are the key principles of professional boundaries in counselling?
A:
✅ Maintain: Clear professional relationship distinct from friendship
ℹ️ Remember: Confidentiality except in cases of harm
⚠️ Avoid: Dual relationships that create conflicts of interest
✅ Practice: Self-awareness about personal reactions and biases
Hard
boundariesprofessional-practiceethicsexample-status-boxes
Q: What is {{c1::unconditional positive regard}} in counselling?
A: Unconditional positive regard is accepting and valuing the client without judgment, regardless of what they say or do. It involves showing respect, warmth, and acceptance for the client as a person, …
Hard
unconditional-positive-regardcore-conceptsexample-cloze
Q: What are common barriers to effective active listening? {hint1::Think about internal and external factors} {hint2::Consider mental, physical, and behavioral aspects} {hint3::Examples: noise, stress, prejudice, interrupting}
A:

Common barriers include:

  • Internal barriers: Fatigue, stress, preoccupation, personal biases, emotional reactions
  • External barriers: Noise, interruptions, uncomfortable environment, poor acoustics
  • Behavioral barriers: Planning responses while listening, interrupting, making assumptions, judging the speaker
Hard
active-listeningbarrierschallengesexample-hints
Q: How is Egan's three-stage model applied in practice?
A:
Flexible Application in Practice
Key Principle: While the model appears linear, in practice counsellors move flexibly between stages as the client's needs evolve.
  • Stage 1: Essential at the beginning but may be revisited as new issues emerge
  • Stage 2: Helps clients move from problem focus to solution focus
  • Stage 3: Ensures that insights translate into real-world action

The model provides a flexible framework rather than a rigid sequence, with counsellors adapting to the client's changing needs throughout the process.

Hard
eganapplicationflexibilityexample-application-guide

Test 1: All cards from 02-rogers-and-egan.json

Plain text cards without HTML formatting:

Carl Rogers Theory and Gerard Egan Model

Psychology • Module 01

Q: What are Rogers' three core conditions for therapeutic growth?
A:

Rogers' Three Core Conditions

  • Unconditional Positive Regard - Accepting and valuing the client without judgment or conditions
  • Genuineness (Congruence) - Being real, open, and authentic with the client
  • Empathetic Understanding - Deeply understanding the client's experience from their point of view

These conditions create a safe environment for therapeutic growth and self-actualization.

Hard
rogerscore-conditionstherapeutic-relationship
Q: What are the three stages of Egan's Skilled Helper Model?
A:

Stage 1: Getting the Story (Current Scenario)

Exploration and understanding where the client is now - encouraging story-telling, breaking through blind spots, identifying the right problem

Stage 2: Development of Possibilities (Preferred Scenario)

Envisioning where the client wants to be - using imagination, choosing realistic goals, finding incentives

Stage 3: Strategies for Change (Action Implementation)

Determining how to achieve goals - finding possible actions, best-fit strategies, drafting action plans

Hard
eganskilled-helper-modelstagesprocess
Q: Define: What is Unconditional Positive Regard?
A:

Unconditional Positive Regard means accepting and valuing the client without judgment or conditions.

Key aspects:

  • Complete support and acceptance regardless of what the client says, feels, or does
  • Valuing the person as a human being, not based on their actions
  • Positive regard is not withdrawn if mistakes are made
  • Creates a safe space for open and honest self-expression
  • Parents, significant others, and counsellors accept and love the person for what they are
Hard
rogersunconditional-positive-regardcore-conditionsdefinition
Q: What is congruence in Rogers' theory, and how does it relate to self-worth?
A:

Congruent (Aligned)

Inner feelings match outer expression

  • Self-image matches actual experience
  • Ideal self matches real self
  • No facade or pretense

Result: High self-worth, authenticity, psychological health

Incongruent (Misaligned)

Inner and outer selves conflict

  • Feeling sad but saying "I'm fine"
  • Values creativity but stifling work
  • Gap between authentic and presented self

Result: Anxiety, low self-worth, tension

Like mathematical congruence (shapes matching perfectly), psychological congruence means no gap between your inner self and outer expression.

Hard
rogerscongruencegenuinenessself-worth
Q: What does SOLER stand for in Egan's model?
A:

SOLER: Non-Verbal Listening Technique

  • S - Sit SQUARELY on to the client (preferably at a 5 o'clock position)
  • O - Maintain an OPEN posture (don't cross arms or legs)
  • L - LEAN slightly towards the client
  • E - Maintain EYE CONTACT without staring
  • R - RELAX to help the client relax

SOLER is a non-verbal listening process used as an integral part of active listening.

Hard
egansolernon-verbalactive-listening
Q: How do Rogers and Egan's approaches complement each other?
A:

Rogers and Egan create a comprehensive counselling approach:

  • Rogers' Core Conditions provide the foundational therapeutic attitude - unconditional positive regard, genuineness, and empathy create the safe, accepting environment
  • Egan's Three Stage Model provides the structural framework for guiding the helping process - practical methodology for moving from exploration to action
  • Integration: Together they combine humanistic relationship-building with practical problem-solving, creating both emotionally supportive and action-oriented counselling
Hard
rogerseganintegrationcomplementary
Q: What is empathetic understanding according to Rogers?
A:

Empathetic Understanding involves deeply understanding the client's experience and feelings from their point of view.

Key characteristics:

  • Emotionally connecting with the client's experiences, not just intellectually understanding
  • Reflecting understanding back to the client
  • Helping clients feel heard and validated
  • Different from sympathy - it's about understanding, not feeling sorry for someone
  • Understanding the client's internal frame of reference
Hard
rogersempathyunderstandingcore-conditions
Q: What are the key activities in Stage 1 of Egan's model?
A:

Stage 1: Getting the Story (Current Scenario)

✅ Encourage story-telling: Use prompts, active listening, open questions, and SOLER
ℹ️ Break through blind spots: Use reflection to help clients see patterns they may miss
✅ Identify the right problem: Support prioritization of issues to work on

Purpose: Create a safe environment where clients feel comfortable sharing their experiences and concerns.

Hard
eganstage-1explorationcurrent-scenario
Q: What did Rogers believe about individuals and self-actualization?
A: Rogers believed that individuals have an innate tendency toward self-actualization when provided with the right therapeutic environment. He emphasized the individual's subjective experience and …
Hard
rogersself-actualizationhumanisticphilosophy
Q: What is Egan's belief about what counsellors need to do beyond possessing core conditions?
A: Egan believed that counsellors needed not only to possess Rogers' core conditions but also to help clients make decisions, clarify and set goals, and support them in implementing their actions. This …
Hard
egancounsellor-roleaction-orientedphilosophy
Q: When should the core conditions be present in counselling?
A:

The core conditions should be present throughout the entire counselling relationship:

✅ During initial rapport building
✅ While exploring difficult emotions
✅ When challenging unhelpful thinking patterns
✅ During goal-setting and action planning
✅ When concluding the helping relationship

The core conditions are not stage-specific - they are continuous throughout therapy.

Hard
rogerscore-conditionsapplicationpractice
Q: How is Egan's three-stage model applied in practice?
A:
Flexible Application in Practice
Key Principle: While the model appears linear, in practice counsellors move flexibly between stages as the client's needs evolve.
  • Stage 1: Essential at the beginning but may be revisited as new issues emerge
  • Stage 2: Helps clients move from problem focus to solution focus
  • Stage 3: Ensures that insights translate into real-world action

The model provides a flexible framework rather than a rigid sequence, with counsellors adapting to the client's changing needs throughout the process.

Hard
eganapplicationflexibilitypractice
Q: {{c1::Carl Rogers}} developed person-centered counselling with three core conditions, while {{c2::Gerard Egan}} developed the Skilled Helper Model with three stages for practical helping.
A:
Rogers and Egan - Complementary Approaches
Rogers' Contribution

Emphasized the therapeutic relationship and three core conditions:

  • Unconditional Positive Regard
  • Genuineness (Congruence)
  • Empathy

Foundation for therapeutic change

Egan's Contribution

Added structured methodology with three stages:

  • Exploration (Tell story)
  • Understanding (Find meaning)
  • Action (Plan steps)

Practical framework for helping

Together they provide both the relational foundation and practical framework for effective counselling.

Hard
rogersegantheoristsoverview
Q: The term {{c1::congruence}} in psychology means alignment between inner experience and outer expression, similar to how {{c2::mathematical congruence}} means shapes match perfectly with no gaps.
A:
Understanding Congruence

Psychological congruence means alignment at three levels:

  • Self-image matches actual experience - Seeing yourself accurately
  • Ideal self matches real self - Goals align with reality
  • Inner feelings match outer expression - Authenticity in behavior
✓ Result of Congruence

High self-worth, authenticity, and inner peace

⚠ Result of Incongruence

Anxiety, tension, and low self-worth from misalignment

The closer our self-image and ideal self align, the more congruent (and healthier) we become.

Hard
rogerscongruenceconceptpsychology
Q: What are examples of congruent and incongruent behavior? {hint1::Think about alignment between inner feelings and outer expression} {hint2::Consider authenticity vs. pretense} {hint3::Examples: feeling sad but saying "I'm fine", valuing honesty while lying}
A:

Congruent (Aligned) Examples:

  • Feeling angry inside → Expressing anger appropriately
  • Valuing honesty → Acting honestly in all situations
  • Believing in compassion → Demonstrating compassionate behavior
  • Result: High self-worth, authenticity, psychological health

Incongruent (Misaligned) Examples:

  • Feeling sad inside → Forcing a smile and saying "I'm fine"
  • Valuing creativity → Working in a job that stifles creativity
  • Seeing oneself as kind → Acting harshly toward others
  • Result: Anxiety, tension, low self-worth, inauthenticity
Hard
rogerscongruenceexamplesapplication
Q: What skills do counsellors require when integrating Rogers and Egan's approaches? {hint1::Think about establishing, building, and facilitating} {hint2::Consider rapport, safety, trust, understanding, and action} {hint3::Include SOLER, core conditions, and the three stages}
A: Counsellors require skills in: (1) Establishing rapport through SOLER and active listening, (2) Creating a safe environment through unconditional positive regard, (3) Building trust through …
Hard
rogerseganintegrationskillspractice

Test 2: HTML Formatted Cards

Cards using HTML tags for better presentation:

Counselling Skills

Psychology • Module 01

Q: What are the nine core counselling skills?
A:

Nine Core Counselling Skills

  • Empathy - Understanding from client's perspective
  • Active Listening - Full attention and comprehension
  • Questioning - Open-ended exploration
  • Paraphrasing - Restating for clarity
  • Reflecting - Mirroring feelings
  • Summarising - Key points overview
  • Challenging - Addressing inconsistencies
  • Unconditional Positive Regard - Non-judgmental acceptance
  • Genuineness - Authentic presence
Hard
core-skillsframeworkcounselling-skills
Q: What is the difference between empathy and sympathy?
A:

Empathy

Definition: Understanding another person's experience by perceiving situations from their perspective

Focus: Client's actual feelings and experience

Response: "It sounds like you're feeling..."

Maintains: Professional boundaries

Sympathy

Definition: Caring about and feeling sorry for someone's troubles

Focus: Counsellor's personal emotional response

Response: "I know exactly how you feel"

Risk: Blurred professional boundaries

Hard
empathysympathydistinctionprofessional-boundaries
Q: Define: What is empathetic understanding?
A:

Empathetic Understanding is the ability to understand another person's experience by perceiving situations from their perspective.

It involves:

  • Demonstrating sensitivity and accuracy in understanding client feelings
  • Maintaining professional boundaries
  • Viewing situations through the client's eyes rather than imposing personal reactions
  • Focusing on the client's actual experience, not the counsellor's potential reactions
Hard
empathydefinitioncore-concepts
Q: What are effective empathetic responses in counselling?
A:

Effective empathetic responses include:

  • Reflecting feelings: "What seems to be happening is..."
  • Validating understanding: "It sounds like this situation makes you feel..."
  • Seeking clarification: "Could you give me an example of when these feelings occurred?"
  • Confirming accuracy: "Have I understood this correctly?"

These responses demonstrate active listening, build trust, and strengthen the helping relationship.

Hard
empathyrespondingcommunicationactive-listening
Q: Why is the distinction between empathy and sympathy crucial in counselling?
A:

Critical Distinction:

Empathy maintains professional boundaries while demonstrating understanding, whereas sympathy can blur boundaries by centering the counsellor's personal emotional response rather than the client's experience.

✅ Empathy strengthens: The helping relationship and builds trust through genuine understanding

⚠️ Sympathy risks: Undermining professional efficacy by making the interaction about the counsellor's feelings

Hard
empathysympathyprofessional-practiceboundaries
Q: Define: What is Active Listening?
A:

Active Listening is a communication technique where the counsellor:

  • Fully concentrates on the speaker's message
  • Demonstrates engagement through verbal and non-verbal cues
  • Responds appropriately to show understanding
  • Remembers key information for later reference

Key principle: Listening to understand, not to respond.

Hard
active-listeningdefinitionfundamental-skill
Q: How can counsellors demonstrate empathetic understanding through attending behaviors?
A:
Demonstrating Empathetic Understanding
Core Principle: Counsellors demonstrate empathetic understanding through attending behaviors, listening techniques, and response patterns.
  • Attending Behaviors: Body language, eye contact, focused presence that shows engagement
  • Listening Techniques: Active listening, full attention, and deep comprehension of meaning
  • Response Patterns: Reflecting feelings, validating understanding, seeking clarification
  • Continuous Adaptation: Recognizing when sympathy emerges and shifting toward empathetic practice

These integrated behaviors create a foundation for the therapeutic relationship.

Hard
empathyattending-behaviorstechniquesapplication
Q: What phrase demonstrates sympathy rather than empathy, and why should it be avoided?
A:

⚠️ Sympathy Example: "I know exactly how you feel"

Why this demonstrates sympathy:

  • The emphasis remains on the counsellor's personal understanding
  • Centers the counsellor's experience rather than the client's unique perspective
  • Blurs professional boundaries
  • May make the client feel their experience is not unique or fully understood

✅ Empathetic Alternative: "It sounds like you're experiencing [specific feeling] because [specific situation]"

Hard
sympathyempathyresponsesboundaries
Q: Using a bereavement counselling example, explain the difference between sympathy and empathy.
A:

Sympathy (Less Effective)

Approach: Feeling pity by imagining personal reactions to loss

Focus: Shares the client's feelings from personal perspective

Example: "I can't imagine how hard this must be - I'd be devastated"

Problem: Centers counsellor's potential feelings

Empathy (More Effective)

Approach: Viewing the situation through the client's eyes

Focus: Client's actual feelings and experience

Example: "It sounds like you're experiencing profound sadness and confusion about this loss"

Benefit: Validates client's unique experience

Hard
empathysympathyexamplebereavementapplication
Q: Where can core counselling skills be applied beyond formal counselling relationships?
A:
Applications Beyond Formal Counselling
Key Insight: Core counselling skills apply not only within formal counselling relationships but also across various helping activities.
  • Communication Enhancement: Improving interpersonal communication in professional and personal contexts
  • Problem-Solving Support: Helping others work through challenges systematically
  • Personal Growth Facilitation: Supporting development in diverse settings
  • Professional Contexts: Teaching, healthcare, management, social work

The intentional application differs from casual conversation, requiring conscious awareness of which skills to employ, when to apply them, and how to maintain appropriate boundaries.

Hard
core-skillsapplicationprofessional-practicebroader-contexts
Q: Core counselling skills form the foundation for establishing {{c1::effective helping relationships}}, with {{c2::nine core skills}} including empathy, active listening, and genuineness.
A:
Foundation of Counselling Practice

The nine core skills enable counsellors to:

  • Establish trust with clients through consistent, respectful interaction
  • Demonstrate understanding of client experiences and perspectives
  • Facilitate meaningful exploration of concerns and issues
  • Maintain professional boundaries and ethical practice standards

Together, these skills create a solid foundation for effective therapeutic work.

Hard
core-skillsframeworkhelping-relationship
Q: {{c1::Empathy}} represents the ability to understand another person's experience, while {{c2::sympathy}} involves feeling sorry for someone else's troubles.
A:
Empathy vs Sympathy - Key Distinction

Empathy maintains professional boundaries by focusing on understanding the client's perspective - stepping into their shoes while remaining separate.

Sympathy can blur boundaries by centering on the counsellor's personal emotional response - feeling sorry "for" rather than understanding "with" the client.

This distinction is crucial for effective therapeutic work and maintaining professionalism.

Hard
empathysympathydistinction
Showing 12 of 15 cards

Test 3: CSS Component Examples

Example 1: Skill Card Component

Cards can use the .skill-card class for listing skills or key points:

1<div class="skill-card">
2  <h4>Nine Core Counselling Skills</h4>
3  <ul>
4    <li>Empathy</li>
5    <li>Active Listening</li>
6    <li>Questioning</li>
7  </ul>
8</div>

Result: Blue left border, light blue background, organized list presentation.

Example 2: Comparison Box

Use .comparison-box for side-by-side comparisons:

 1<div class="comparison-box">
 2  <div class="comparison-item">
 3    <h4>Empathy</h4>
 4    <p>Understanding from their perspective</p>
 5  </div>
 6  <div class="comparison-item">
 7    <h4>Sympathy</h4>
 8    <p>Feeling sorry for someone</p>
 9  </div>
10</div>

Result: Two columns with contrasting backgrounds (blue vs. orange).

Example 3: Definition Card

Use .definition-card for highlighted definitions:

1<div class="definition-card">
2  <strong>Active Listening:</strong> A technique where the listener fully concentrates on understanding.
3</div>

Result: Gradient background with colored left border.

Test 4: Advanced Card Types

Cloze Deletion Cards

Interactive fill-in-the-blank for active recall:

{{c1::Active listening}} is a communication technique where the listener {{c2::fully concentrates}} on, understands, responds to, and {{c3::remembers}} what is being said.

Additional Context

Click [...] buttons to reveal answers. Cloze deletion uses spaced repetition for active recall.

Progressive Hints Cards

Multi-level hints for guided learning:

What are the main barriers to active listening? {hint1::Think about what prevents us from concentrating} {hint2::Consider both internal and external distractions} {hint3::Examples: phones, stress, preoccupation, interrupting}

Hint 1:

Hint 2:

Hint 3:

Answer:

Main barriers include: (1) Internal barriers: fatigue, stress, preoccupation, prejudice, (2) External barriers: noise, interruptions, poor environment, (3) Behavioral barriers: planning responses while listening, interrupting, dismissing the speaker.

Test 5: Media Support

Image Cards

Visual content in flashcards:

What is the therapeutic relationship in counselling?

Core elements of therapeutic relationship dynamics

Core elements of therapeutic relationship dynamics

Answer:

The therapeutic relationship is the connection between counsellor and client based on mutual trust, respect, and genuine care. It's the foundation of effective counselling and includes elements of empathy, authenticity, unconditional positive regard, and congruence. The quality of this relationship significantly impacts therapeutic outcomes.

Audio Cards

Embedded audio playback:

Listen to the expert interview about counselling dynamics. What key concept is emphasized?

Expert interview on counselling dynamics
Duration: 2:45

Expert interview on counselling dynamics

Answer:

The recording emphasizes the importance of understanding client worldview and meeting them where they are emotionally. Key points include: active presence in the room, genuine interest in the client's perspective, flexibility in approach based on client needs, and the ongoing process of building trust and rapport throughout the therapeutic relationship.

Test 6: Deck Statistics

View flashcard statistics for a lesson:

📊 Deck Statistics

15
Total Cards
📚
Study Ready
Psychology
Course
01
Module

Difficulty Distribution

Easy
0
Medium
0
Hard
15
Last updated: 2026-05-05

Test 7: Download Options

CSV Export (Legacy)

📥 Download Flashcards

📋 Download CSV (Download CSV Format)
How to Import into Anki:
  1. Download the CSV file using the button above
  2. Open Anki Desktop
  3. Click File → Import
  4. Select the downloaded CSV file
  5. Configure import settings:
    • Field separator: Tab
    • Allow HTML in fields: checked
    • Deck: Create new or select existing
  6. Click Import
  7. Sync to AnkiWeb if using AnkiDroid
Available on:
🖥️ Windows 🍎 macOS 🐧 Linux 🤖 AnkiDroid (via AnkiWeb) 📱 AnkiMobile (via AnkiWeb)
Note: Free on Windows, macOS, Linux, and Android. AnkiMobile for iOS requires a one-time purchase. All platforms sync with AnkiWeb (free).

Download Anki Package File (.apkg) - Ready to import directly into Anki Desktop!

Download Anki Package File (.apkg) - Ready to import directly into Anki Desktop!

Import Instructions

  1. Download the .apkg file using the link above
  2. Open Anki Desktop Application
  3. Go to File → Import
  4. Select the downloaded .apkg file
  5. Click Import
  6. New deck will appear: Psychology::Level-2-Counselling::Unit-01

Styling Verification Checklist

When you import the APKG file into Anki Desktop, verify:

✅ Visual Styling

  • Cards have colored left borders
  • Background colors appear correctly
  • Text formatting (bold, italic) works
  • Lists are properly indented
  • Comparison boxes show side-by-side

✅ Functionality

  • Cloze deletions reveal correctly
  • Hints appear when clicked
  • Images display properly
  • Audio plays correctly
  • Difficulty levels visible

✅ Organization

  • Deck hierarchy shows correctly
  • Lesson sub-decks appear
  • Card counts accurate
  • Tags applied correctly

Technical Notes

CSS Injection Process

  1. JSON metadata includes: "course": "Psychology"
  2. Generator reads: scripts/anki/styles/psychology.css
  3. CSS injected into card models automatically
  4. No manual configuration needed

HTML Support

  • Always Enabled: HTML works in all card fields
  • No Flag Needed: html_enabled field is for documentation only
  • Use Freely: Add HTML tags directly in JSON

Compilation

If you modify SCSS styles:

1# Compile all styles
2npm run anki:styles:compile
3
4# Regenerate APKG
5npm run anki:rebuild

Additional Resources

Last Updated: 2 May 2026
Status: Production Ready ✅
Styling: Automatic CSS Injection ✅

Using Skills