> ## Documentation Index
> Fetch the complete documentation index at: https://www.studyfetch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Flashcards

> Interactive flashcards with spaced repetition from your study materials

## Overview

The Flashcards component automatically generates interactive flashcards from your study materials. It supports multiple card types, spaced repetition learning, and difficulty levels to optimize your study sessions.

## Creating a Flashcards Component

<CodeGroup>
  ```javascript JavaScript theme={null}
  import StudyfetchSDK from '@studyfetch/sdk';

  const client = new StudyfetchSDK({
    apiKey: 'your-api-key',
    baseURL: 'https://studyfetchapi.com',
  });

  const flashcardsComponent = await client.v1.components.create({
    name: 'Biology Flashcards',
    type: 'flashcards',
    config: {
      materials: ['mat-123', 'mat-456'],
      folders: ['folder-789'],
      difficulty: 'MIXED',
      totalFlashcards: 30,
      viewMode: 'NORMAL',
      cardTypes: ['BASIC', 'MULTIPLE_CHOICE'],
      model: 'gpt-4o-mini-2024-07-18'
    }
  });

  console.log('Flashcards component created:', flashcardsComponent._id);
  ```

  ```python Python theme={null}
  from studyfetch_sdk import StudyfetchSDK

  client = StudyfetchSDK(
      api_key="your-api-key",
      base_url="https://studyfetchapi.com",
  )

  flashcards_component = client.v1.components.create(
      name="Biology Flashcards",
      type="flashcards",
      config={
          "materials": ["mat-123", "mat-456"],
          "folders": ["folder-789"],
          "difficulty": "MIXED",
          "totalFlashcards": 30,
          "viewMode": "NORMAL",
          "cardTypes": ["BASIC", "MULTIPLE_CHOICE"],
          "model": "gpt-4o-mini-2024-07-18"
      }
  )

  print(f"Flashcards component created: {flashcards_component._id}")
  ```

  ```java Java theme={null}
  import com.studyfetch.javasdk.client.StudyfetchSdkClient;
  import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
  import com.studyfetch.javasdk.models.v1.components.ComponentResponse;
  import com.studyfetch.javasdk.models.v1.components.ComponentCreateParams;
  import java.util.List;

  public class CreateFlashcardsComponent {
      public static void main(String[] args) {
          StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
              .fromEnv()
              .baseUrl("https://studyfetchapi.com")
              .build();

          ComponentCreateParams params = ComponentCreateParams.builder()
              .name("Biology Flashcards")
              .type(ComponentCreateParams.Type.FLASHCARDS)
              .config(ComponentCreateParams.Config.FlashcardsConfigDto.builder()
                  .materials(List.of("mat-123", "mat-456"))
                  .folders(List.of("folder-789"))
                  .difficulty(ComponentCreateParams.Config.FlashcardsConfigDto.Difficulty.MIXED)
                  .totalFlashcards(30.0)
                  .viewMode(ComponentCreateParams.Config.FlashcardsConfigDto.ViewMode.NORMAL)
                  .cardTypes(List.of("BASIC", "MULTIPLE_CHOICE"))
                  .model("gpt-4o-mini-2024-07-18")
                  .build())
              .build();

          ComponentResponse component = client.v1().components().create(params);
          System.out.println("Flashcards component created: " + component._id());
      }
  }
  ```

  ```csharp C# theme={null}
  using StudyfetchSDK;
  using StudyfetchSDK.Models.V1.Components;
  using System;
  using System.Collections.Generic;
  using System.Threading.Tasks;

  public class CreateFlashcardsComponent
  {
      public static async Task CreateFlashcards()
      {
          var client = new StudyfetchSDKClient()
          {
              APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
              BaseUrl = new Uri("https://studyfetchapi.com")
          };

          var flashcardsComponent = await client.V1.Components.Create(new()
          {
              Name = "Biology Flashcards",
              Type = StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.Type.Flashcards,
              Config = new StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.ConfigProperties.FlashcardsConfigDto()
              {
                  Materials = new List<string> { "mat-123", "mat-456" }
              }
          });

          Console.WriteLine($"Flashcards component created: {flashcardsComponent._ID}");
      }
  }
  ```
</CodeGroup>

## Configuration Parameters

<ParamField body="name" type="string" required>
  Name of the flashcards component
</ParamField>

<ParamField body="type" type="string" required>
  Must be `"flashcards"`
</ParamField>

<ParamField body="config" type="object" required>
  Flashcards configuration object

  <Expandable title="Configuration Properties">
    <ParamField body="materials" type="array" required>
      Array of material IDs to generate flashcards from
    </ParamField>

    <ParamField body="folders" type="array">
      Array of folder IDs containing materials
    </ParamField>

    <ParamField body="difficulty" type="enum">
      Difficulty level of flashcards:

      * `EASY` - Basic concepts and definitions
      * `MEDIUM` - Application and understanding
      * `HARD` - Complex analysis and synthesis
      * `MIXED` - Balanced mix of all levels
    </ParamField>

    <ParamField body="totalFlashcards" type="number" default="20">
      Total number of flashcards to generate
    </ParamField>

    <ParamField body="viewMode" type="enum" default="NORMAL">
      Flashcard viewing mode:

      * `NORMAL` - Standard flashcard mode
      * `SPACED_REPETITION` - Algorithm-based review scheduling
    </ParamField>

    <ParamField body="cardTypes" type="array">
      Types of flashcards to generate (e.g., "BASIC", "MULTIPLE\_CHOICE", etc.)
    </ParamField>

    <ParamField body="model" type="string">
      AI model to use for flashcard generation
    </ParamField>

    <ParamField body="learningSteps" type="string">
      Learning steps configuration for spaced repetition
    </ParamField>

    <ParamField body="maxReviewInterval" type="number">
      Maximum review interval in days for spaced repetition
    </ParamField>
  </Expandable>
</ParamField>

## Response

```json theme={null}
{
  "_id": "comp_456def",
  "name": "Biology Flashcards",
  "type": "flashcards",
  "status": "processing",
  "config": {
    "materials": ["mat-123", "mat-456"],
    "folders": ["folder-789"],
    "difficulty": "MIXED",
    "totalFlashcards": 30,
    "viewMode": "NORMAL",
    "cardTypes": ["BASIC", "MULTIPLE_CHOICE"],
    "model": "gpt-4o-mini-2024-07-18"
  },
  "createdAt": "2024-01-15T10:00:00Z",
  "updatedAt": "2024-01-15T10:00:00Z",
  "organizationId": "org_456def",
  "progress": {
    "generated": 0,
    "total": 30
  }
}
```

## Embedding This Component

Once you've created a Flashcards component, you can embed it on your website using the embedding API.

### Generate Embed URL

<CodeGroup>
  ```javascript JavaScript theme={null}
  const embedResponse = await client.v1.components.generateEmbed(flashcardsComponent._id, {
    // User tracking
    userId: 'user-456',
    studentName: 'Jane Smith',  // Student name for display
    groupIds: ['class-101', 'class-102'],
    sessionId: 'session-789',
    
    // Flashcards-specific features
    features: {
      enableHistory: true,
      enableVoice: true
    },
    
    // Dimensions
    width: '100%',
    height: '600px',
    
    // Token expiry
    expiryHours: 24
  });
  ```

  ```python Python theme={null}
  embed_response = client.v1.components.generateEmbed(
      component_id=flashcards_component._id,
      userId="user-456",
      student_name="Jane Smith",  # Student name for display
      groupIds=["class-101", "class-102"],
      sessionId="session-789",
      features={
          "enableHistory": True,
          "enableVoice": True
      },
      width="100%",
      height="600px",
      expiryHours=24
  )
  ```

  ```java Java theme={null}
  import com.studyfetch.javasdk.client.StudyfetchSdkClient;
  import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
  import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedParams;
  import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedResponse;
  import java.util.List;

  StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
      .fromEnv()
      .baseUrl("https://studyfetchapi.com")
      .build();

  ComponentGenerateEmbedParams params = ComponentGenerateEmbedParams.builder()
      .id(flashcardsComponent._id())
      // User tracking
      .userId("user-456")
      .studentName("Jane Smith")  // Student name for display
      .groupIds(List.of("class-101", "class-102"))
      .sessionId("session-789")
      
      // Flashcards-specific features
      .features(ComponentGenerateEmbedParams.Features.builder()
          .enableHistory(true)
          .enableVoice(true)
          .build())
      
      // Dimensions
      .width("100%")
      .height("600px")
      
      // Token expiry
      .expiryHours(24)
      .build();

  ComponentGenerateEmbedResponse embedResponse = client.v1().components()
      .generateEmbed(params);
  ```

  ```csharp C# theme={null}
  using StudyfetchSDK;
  using StudyfetchSDK.Models.V1.Components;
  using System;
  using System.Collections.Generic;
  using System.Threading.Tasks;

  public class GenerateFlashcardsEmbed
  {
      public static async Task GenerateEmbed()
      {
          var client = new StudyfetchSDKClient()
          {
              APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
              BaseUrl = new Uri("https://studyfetchapi.com")
          };

          var embedResponse = await client.V1.Components.GenerateEmbed(new()
          {
              ID = "component_123abc", // Replace with your component ID
              UserID = "user-456",
              StudentName = "Jane Smith",  // Student name for display
              GroupIDs = new List<string> { "class-101", "class-102" },
              Width = "100%",
              Height = "600px"
          });

          Console.WriteLine($"Embed URL: {embedResponse.EmbedURL}");
          Console.WriteLine($"Token: {embedResponse.Token}");
      }
  }
  ```
</CodeGroup>

### Flashcards-Specific Embedding Features

<ParamField body="features.enableHistory" type="boolean" default="true">
  Track and display user's flashcard review history and performance
</ParamField>

<ParamField body="features.enableVoice" type="boolean" default="false">
  Enable voice pronunciation for flashcard content (useful for language learning)
</ParamField>

### Embed in Your HTML

```html theme={null}
<iframe 
  src="https://embed.studyfetch.com/component/comp_456def?token=..."
  width="100%"
  height="600px"
  frameborder="0"
  allow="microphone"
  style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>
```