Request and render step-by-step solutions in Stemfard

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:

{
  "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.

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.

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.

{
  "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.

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
  }'

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();

Sample response

{
  "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

HTML
LaTeX
Speech

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.

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:

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

The steps.latex value contains LaTeX markup. Use MathJax or KaTeX to render it in the browser.With MathJax — wrap the LaTeX in display math delimiters and call MathJax.typesetPromise:

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:

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;

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:

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:

const srOnly = document.createElement('p');
srOnly.className = 'sr-only'; // visually hidden via CSS
srOnly.textContent = steps.speech;
document.getElementById('result-section').appendChild(srOnly);

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:

{
  "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
}

Get Started

Core Concepts

Guides

Request and render step-by-step solutions in Stemfard

Enabling steps

Choosing an output format

Including background theory

Complete example

Rendering each format

Controlling decimal precision in steps

​Enabling steps

​Choosing an output format

​Including background theory

​Complete example

​Rendering each format

​Controlling decimal precision in steps

Enabling steps

Choosing an output format

Including background theory

Complete example

Rendering each format

Controlling decimal precision in steps