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

# Request and render step-by-step solutions in Stemfard

> Learn how to request and render detailed step-by-step solutions in HTML, LaTeX, and speech formats to support learners at every level.

Stemfard can return detailed step-by-step solutions alongside every result, breaking down the underlying mathematics into clear, sequenced explanations. This is especially valuable for educational applications where showing the work matters as much as the answer itself. You control the level of detail and the output format, so the same API call can power anything from a visual math renderer to a screen reader.

## Enabling steps

Steps are tied to the `api_level` parameter. Setting it to `"lite"` returns only the result with no solution detail. Use `"standard"` or `"detailed"` to include steps.

| `api_level`  | Result | Steps               | Background theory |
| ------------ | ------ | ------------------- | ----------------- |
| `"lite"`     | Yes    | No                  | No                |
| `"standard"` | Yes    | Yes                 | Optional          |
| `"detailed"` | Yes    | Full expanded steps | Optional          |

Set `api_level` in your request body:

```json theme={null}
{
  "a": [[1, 2], [3, 4]],
  "b": [[5, 6], [7, 8]],
  "api_level": "detailed"
}
```

## Choosing an output format

Use the `steps_output_formats` field to specify which format (or formats) you want the steps returned in. You can request any combination of `"html"`, `"latex"`, and `"speech"` in a single call.

<Tip>
  You can request all three formats in a single API call by passing `"steps_output_formats": ["html", "latex", "speech"]`. This avoids making multiple requests and lets you store all representations on the first fetch.
</Tip>

## Including background theory

Set `steps_bg: true` to include background theory alongside the solution steps. This provides conceptual context — definitions, theorems, and relevant properties — that helps students understand *why* each step is valid, not just *what* to do.

```json theme={null}
{
  "a": [[1, 2], [3, 4]],
  "b": [[5, 6], [7, 8]],
  "api_level": "detailed",
  "steps_bg": true,
  "steps_output_formats": ["html", "latex"]
}
```

## Complete example

The following request computes the matrix product of two 2×2 matrices and asks for steps in all three output formats with background theory included.

<CodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url https://api.stemfard.com/api/v1/mathematics/linear-algebra/matrix-operations/matrix-arithmetic/matmul \
    --header 'Authorization: Bearer <your-api-key>' \
    --header 'Content-Type: application/json' \
    --data '{
      "a": [[1, 2], [3, 4]],
      "b": [[5, 6], [7, 8]],
      "api_level": "detailed",
      "result_name": "product",
      "steps_bg": true,
      "steps_output_formats": ["html", "latex", "speech"],
      "decimals": null
    }'
  ```

  ```javascript JavaScript theme={null}
  const response = await fetch(
    'https://api.stemfard.com/api/v1/mathematics/linear-algebra/matrix-operations/matrix-arithmetic/matmul',
    {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer <your-api-key>',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        a: [[1, 2], [3, 4]],
        b: [[5, 6], [7, 8]],
        api_level: 'detailed',
        result_name: 'product',
        steps_bg: true,
        steps_output_formats: ['html', 'latex', 'speech'],
        decimals: null,
      }),
    }
  );
  const data = await response.json();
  ```
</CodeGroup>

**Sample response**

```json theme={null}
{
  "result_name": "product",
  "result": [[19, 22], [43, 50]],
  "steps": {
    "html": "<ol><li>Multiply row 1 of A by column 1 of B: (1×5) + (2×7) = <strong>19</strong></li><li>Multiply row 1 of A by column 2 of B: (1×6) + (2×8) = <strong>22</strong></li><li>Multiply row 2 of A by column 1 of B: (3×5) + (4×7) = <strong>43</strong></li><li>Multiply row 2 of A by column 2 of B: (3×6) + (4×8) = <strong>50</strong></li></ol>",
    "latex": "\\begin{enumerate}\\item (1 \\cdot 5) + (2 \\cdot 7) = 19\\item (1 \\cdot 6) + (2 \\cdot 8) = 22\\item (3 \\cdot 5) + (4 \\cdot 7) = 43\\item (3 \\cdot 6) + (4 \\cdot 8) = 50\\end{enumerate}",
    "speech": "Step 1: Multiply row 1 of A by column 1 of B. 1 times 5 plus 2 times 7 equals 19. Step 2: Multiply row 1 of A by column 2 of B. 1 times 6 plus 2 times 8 equals 22. Step 3: Multiply row 2 of A by column 1 of B. 3 times 5 plus 4 times 7 equals 43. Step 4: Multiply row 2 of A by column 2 of B. 3 times 6 plus 4 times 8 equals 50.",
    "background": "Matrix multiplication computes the dot product of each row in A with each column in B. The result matrix C has dimensions m×p when A is m×n and B is n×p."
  }
}
```

## Rendering each format

<Tabs>
  <Tab title="HTML">
    The `steps.html` value is a ready-to-render HTML string. Inject it directly into a container element in your web application. Sanitize the string if it originates from user-controlled input, but for API-generated content this is safe to use as-is.

    ```javascript theme={null}
    const { steps } = await response.json();

    const container = document.getElementById('steps-container');
    container.innerHTML = steps.html;
    ```

    If you want to apply custom styles, wrap the injected content in a styled parent:

    ```javascript theme={null}
    container.innerHTML = `<div class="math-steps">${steps.html}</div>`;
    ```
  </Tab>

  <Tab title="LaTeX">
    The `steps.latex` value contains LaTeX markup. Use [MathJax](https://www.mathjax.org/) or [KaTeX](https://katex.org/) to render it in the browser.

    **With MathJax** — wrap the LaTeX in display math delimiters and call `MathJax.typesetPromise`:

    ```javascript theme={null}
    const { steps } = await response.json();

    const container = document.getElementById('steps-container');
    container.textContent = `\\[${steps.latex}\\]`;
    await MathJax.typesetPromise([container]);
    ```

    **With KaTeX** — use `katex.renderToString` for synchronous rendering:

    ```javascript theme={null}
    import katex from 'katex';

    const { steps } = await response.json();

    const html = katex.renderToString(steps.latex, {
      throwOnError: false,
      displayMode: true,
    });

    document.getElementById('steps-container').innerHTML = html;
    ```
  </Tab>

  <Tab title="Speech">
    The `steps.speech` value is a plain-English narration of each step. Use it directly with the Web Speech API for text-to-speech, or display it as accessible text for screen readers.

    **Text-to-speech playback:**

    ```javascript theme={null}
    const { steps } = await response.json();

    const utterance = new SpeechSynthesisUtterance(steps.speech);
    utterance.rate = 0.9;
    utterance.lang = 'en-US';
    window.speechSynthesis.speak(utterance);
    ```

    **Accessible hidden text for screen readers:**

    ```javascript theme={null}
    const srOnly = document.createElement('p');
    srOnly.className = 'sr-only'; // visually hidden via CSS
    srOnly.textContent = steps.speech;
    document.getElementById('result-section').appendChild(srOnly);
    ```
  </Tab>
</Tabs>

## Controlling decimal precision in steps

By default, intermediate values in steps use the same precision as the final result. Set `apply_decimals_in_steps: true` together with a `decimals` value to round intermediate calculations in the step output as well:

```json theme={null}
{
  "a": [[1.123456, 2.654321], [3.987654, 4.456789]],
  "b": [[5.111111, 6.222222], [7.333333, 8.444444]],
  "api_level": "detailed",
  "steps_output_formats": ["html"],
  "decimals": 2,
  "apply_decimals_in_steps": true
}
```