How to get started

Log in Select Course/Program Enroll Learn Get certificate
Unlimited reading across the academy

Monthly plans for all courses and curricula. Unlimited = read all*; Unlimited+ = read and practice all*. Certification stays per course.

Unlimited Unlimited+
* No certification. Unlimited does not include practice.

Diagram Integration

Add visual content to enhance your questions

In this guide
Visual Learning
Diagram Types
Variable Integration
Best Practices
Resource Management

Visual Learning

Visual content significantly improves learning outcomes. BlitzGrok supports multiple ways to add diagrams and images to your questions:

  • SVG files for static images
  • Inline SVG for embedded graphics
  • BlitzDiagrams for interactive, dynamic diagrams
  • Python functions for programmatic generation

Diagram Types

SVG Files

Best for: Static images, illustrations, pre-made diagrams

  1. Upload your SVG file to the resources section
  2. Reference the file path in the question's model field
  3. File will be loaded and displayed automatically
diagram.svg

Inline SVG

Best for: Simple shapes, custom graphics, embedded content

  1. Write SVG code directly in the model field
  2. Must start with <svg
  3. Content is used as-is in the question
<svg width="200" height="100">...</svg>

BlitzDiagrams JSON

Best for: Dynamic diagrams, variable-based visuals, complex layouts

  1. Create diagram JSON with width, height, and elements
  2. Use variables from your question context
  3. Diagram renders dynamically based on variable values
{ "width": 400, "height": 300, "elements": [...] }

See existing DIAGRAM_GUIDE.md for detailed BlitzDiagrams documentation.

Python Function Path

Best for: Complex generation logic, programmatic creation

  1. Create a Python function that generates diagram JSON
  2. Reference the function path in the model field
  3. Function receives question variables as context
module.function_name

Variable Integration

The power of diagrams in BlitzGrok is their ability to use question variables. This means your diagrams can change based on the question instance.

Example: Dynamic Line Length

Question Variables
length = randint(5, 15)
BlitzDiagrams JSON
{
  "width": 400,
  "height": 200,
  "elements": [
    {
      "type": "line",
      "x1": 50,
      "y1": 100,
      "x2": "50 + length * 20",
      "y2": 100,
      "label": "{length} units"
    }
  ]
}

Best Practices

  • Keep it simple — Don't overcomplicate diagrams
  • Use appropriate sizes — Ensure diagrams fit on mobile screens
  • Label clearly — Add text to explain diagram elements
  • Test variables — Ensure diagrams work with all variable combinations
  • Optimize performance — Complex diagrams can slow question generation
  • Consider accessibility — Provide text alternatives when possible

Resource Management

The Resources section in your Instructor panel allows you to:

  • Upload and manage SVG files
  • Create diagram collections
  • Build reusable diagram models
  • Organize visual content

Access resources from your Curriculum manager to start building your visual content library.

Related Guides

Use diagrams alongside formatting and questions.

Content Formatting Question Creation Course Workflow
Need help with diagrams?

We're here to assist

Contact Us