Skip to main content

Content Level Examples

This page demonstrates the Content Level Selection components in action with live, interactive examples.

Control Panel

Use these controls to see how content adapts to different settings:

Content Settings

Show basic and intermediate content.

Show in-depth content with explanations and context.

Simple Selector

For a more compact control, use the basic selector:

Detailed View:
Toggle between concise (action-oriented) and detailed (explanatory) content

Technical Level Examples

Basic Technical Level

basic

This content is visible to all users, regardless of their technical level setting.

When you select "basic" technical level, only content marked as "basic" will appear.

Intermediate Technical Level

intermediate

This content is visible only when the technical level is set to "intermediate" or higher.

It disappears if you select "basic" technical level.

Advanced Technical Level

Detail Level Examples

Concise Content

Detailed Content

This is detailed content that appears only when "detailed" detail level is selected.

This content includes in-depth explanations, context, and background information to help users understand not just what to do, but why they're doing it. It's useful for those who prefer learning through comprehensive understanding.

  • Includes explanations for each step
  • Provides context and reasoning
  • May include alternative approaches
  • Offers deeper insights about implementation details

Combined Dimensions

These examples show content filtered by both technical and detail level:

Basic, detailed content: Thorough explanations for beginners.

Fallback Content Example

This content requires the Advanced technical level. Please adjust your settings to view it.

Practical Example: API Documentation

Detailed View:
Toggle between concise (action-oriented) and detailed (explanatory) content

GET /api/users

Retrieves a list of users from the system.

// Basic request example
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

// Intermediate request with pagination and error handling
async function getUsers(page = 1, limit = 10) {
  try {
    const response = await fetch(`/api/users?page=${page}&limit=${limit}`);
    if (!response.ok) throw new Error('Failed to fetch users');
    return await response.json();
  } catch (error) {
    console.error('Error fetching users:', error);
    return { data: [], error: error.message };
  }
}

Request Parameters:

  • page: Page number for pagination (default: 1)
  • limit: Number of results per page (default: 10, max: 100)
  • sort: Field to sort by (options: 'name', 'created', 'lastLogin')
  • order: Sort order ('asc' or 'desc')
  • search: Optional search term to filter results

Response Format:

{
  "data": [
    {
      "id": "string",
      "username": "string",
      "email": "string",
      "createdAt": "string (ISO date)",
      "lastLogin": "string (ISO date) | null",
      "role": "string"
    }
  ],
  "meta": {
    "total": "number",
    "page": "number",
    "limit": "number",
    "pages": "number"
  }
}

Error Responses:

  • 400 Bad Request: Invalid parameters
  • 401 Unauthorized: Missing or invalid authentication
  • 403 Forbidden: Insufficient permissions
  • 500 Internal Server Error: Server-side issue

Rate Limiting: This endpoint allows 100 requests per minute per IP address. Exceeding this limit will result in a 429 Too Many Requests response.