Adding a Calculator Block to a Moodle Quiz

Moodle quizzes can include blocks, such as an HTML block containing a calculator.
This is useful if you want students to have a calculator available during the exam, as some students may forget their calculator or have dead batteries.

The basic process has two parts:

  1. Enable blocks during quiz attempts in the quiz settings.
  2. Add an HTML block to the quiz and paste in the calculator code.

Part 1: Enable Blocks During Quiz Attempts

  1. Go to your Moodle course.
  2. Click the quiz where you want to add the calculator.
  3. Open the quiz Settings.
  4. Find the section called Appearance.
  5. Expand this section via Show More to see Show blocks during quiz attempts.
  6. I also recommend clicking Outlined for Question Container Style.
  7. Change this setting to Yes.
  8. Save the quiz settings.

This setting is important. If it is not enabled, students will not see the calculator block
while they are taking the quiz.

Part 2: Add the Calculator Block

  1. Go to the Quiz.
  2. Temporarily disable SafeExam for the quiz, if relevant.
  3. Start an attempt.
  4. Toggle editing on in the top-right corner of your screen.
  5. Open the right side block drawer if it is not already visible.
  6. Choose Add a block.
  7. Select Text. (In some Moodle setups, this may be called HTML instead.)
  8. Give the block a title, such as Calculator.
  9. You need to enter HTML mode. To do this, go to View and <> Source Code.
  10. Paste in the code below.
  11. Save the block.
  12. Preview the quiz as a student to make sure the calculator appears during the attempt.

Choosing a Desmos Calculator

Desmos provides several calculator options. In the code below, the scientific calculator is active by default.
To use a different calculator, change the iframe link.

Calculator type Desmos link
Basic calculator https://www.desmos.com/fourfunction
Scientific calculator (in the code below) https://www.desmos.com/scientific
Graphing calculator https://www.desmos.com/calculator

Code to Paste into the Moodle HTML Block

The code below does two things:

  1. It changes the quiz window so that the calculator block has more room and distracting navigation is removed.
  2. It embeds a Desmos calculator in the block.

The comments inside the code explain what each part is doing. The comments do not affect what students see.

<script>
  document.addEventListener('DOMContentLoaded', function() {

    /*
      This script runs after the Moodle quiz page has finished loading.

      The goal is to make the quiz page less cluttered and give more space
      to the calculator block on the right side of the screen.

      In general:
      - "querySelector" finds one item on the page.
      - "querySelectorAll" finds all matching items on the page.
      - "style.display = 'none'" hides something without deleting it.
      - "remove()" completely removes something from the page.
      - "style.width" changes how wide something is.
    */


    // --- Layout Clean-up and Navigation Restrictions ---


    // 1. Hide the top navigation bar, header elements, and course index.
    // These are Moodle page elements that can take up space or distract students.
    document.querySelectorAll('.navbar, .mr-auto, .w-100, .courseindex')
      .forEach(el => {
        el.style.display = 'none';
      });


    // 2. Remove the left drawer.
    // The left drawer often contains the course index or course navigation.
    // Removing it gives the quiz more horizontal space.
    const leftDrawer = document.getElementById(
      'theme_boost-drawers-courseindex'
    );

    if (leftDrawer) {
      leftDrawer.remove();
    }


    // 3. Remove the button that opens and closes the left drawer.
    // Since we removed the left drawer, students do not need its toggle button.
    const leftToggle = document.querySelector('.drawer-left-toggle');

    if (leftToggle) {
      leftToggle.remove();
    }


    // 4. Remove layout classes related to the left drawer.
    // Moodle uses these classes to reserve space for the drawer.
    // Removing the classes helps the main quiz area shift back to the left.
    document.body.classList.remove('show-drawer-left');

    const page = document.getElementById('page');

    if (page) {
      page.classList.remove('show-drawer-left');
    }


    // 5. Expand the main content area.
    // This tells Moodle's main content area to use the available page width.
    const mainContent = document.querySelector(
      '[data-region="main-content"]'
    );

    if (mainContent) {
      mainContent.style.marginLeft = '0';
      mainContent.style.width = '100%';
      mainContent.style.flex = '1 1 auto';
    }


    // 6. Add a little right padding to the main quiz content.
    // This keeps quiz text from running too close to the calculator drawer.
    const mainDiv = document.querySelector('div[role="main"]');

    if (mainDiv) {
      mainDiv.style.paddingRight = '55px';
    }


    // 7. Make the right drawer wider.
    // This is the drawer where Moodle blocks appear.
    // A width of 390px gives the Desmos calculator more room.
    const rightDrawer = document.getElementById(
      'theme_boost-drawers-blocks'
    );

    if (rightDrawer) {
      rightDrawer.style.width = '390px';
      rightDrawer.style.maxWidth = '390px';
    }


    // 8. Remove footer navigation.
    // Moodle sometimes shows navigation such as:
    // previous activity, jump menu, and next activity.
    // This removes that footer navigation from the quiz page.
    const footerNav = document.querySelector('.activity-navigation');

    if (footerNav) {
      footerNav.remove();
    }


    // --- Styling Enhancements ---


    // 9. Style question blocks for clarity.
    // This changes the background and border of the question area.
    // It does not change the question itself.
    document.querySelectorAll('.formulation.outlined.clearfix').forEach(
      div => {
        div.style.backgroundColor = '#f7f7f7';
        div.style.borderTop = '1px dotted #234234';
        div.style.borderBottom = '0';
        div.style.borderRight = '0';
        div.style.borderLeft = '0';
        div.style.fontSize = '18px';
      }
    );


    // 10. Improve spacing for multiple-choice options.
    // This gives answer choices more breathing room.
    document.querySelectorAll('.form-check').forEach(item => {
      item.style.marginBottom = '10px';
      item.style.display = 'block';
    });


    // --- Error Message Enhancements ---


    /*
      Moodle sometimes gives students short error messages.

      The code below looks for two specific Moodle error messages
      and adds a little more explanation.

      This is especially useful when students type something like:
      - Pi instead of a decimal approximation,
      - commas inside large numbers, such as 14,205,
      - or symbols in a box that expects only a number.
    */

    const updates = [
      {
        original: "Please answer all parts of the question.",
        addition: " If you did, then this error usually means that you have entered symbols into a space that expected only numbers. For example, typing Pi into a space that expected a numerical approximation, or writing 14205 as 14,205."
      },
      {
        original: "You must enter a valid number.",
        addition: " You must enter a valid number as a decimal (or decimal approximation)."
      }
    ];


    // This checks the page for the exact error messages above.
    // If it finds one, it adds the extra explanation.
    updates.forEach(update => {
      const elements = Array.from(document.querySelectorAll("*"))
        .filter(el => el.textContent.trim() === update.original);

      elements.forEach(el => {
        el.textContent += update.addition;
      });
    });

  });
</script>

<p>
  <strong><u>Tip</u></strong>:
  You can type <code>ans</code> to load your previous computation and use it,
  for example <code>sqrt(ans)</code>.
  <br>
  Be sure to check if you are in
  <strong>radian</strong> mode or <strong>degree</strong> mode.
</p>

<!--
  Choose one Desmos calculator.

  Basic calculator:
  https://www.desmos.com/fourfunction

  Scientific calculator:
  https://www.desmos.com/scientific

  Graphing calculator:
  https://www.desmos.com/calculator

  The iframe below currently uses the scientific calculator.
  To change calculators, replace the src link.
-->

<iframe
  src="https://www.desmos.com/scientific"
  title="Desmos Scientific Calculator"
  width="100%"
  height="600"
  style="border: 1px solid #ccc;">
</iframe>

Optional: Use the Basic Calculator Instead

To use the basic calculator, replace this line:

src="https://www.desmos.com/scientific"

with this line:

src="https://www.desmos.com/fourfunction"

Optional: Use the Graphing Calculator Instead

To use the graphing calculator (not recommended, the sidebar isn't large enough), replace this line:

src="https://www.desmos.com/scientific"

with this line:

src="https://www.desmos.com/calculator"

A Few Notes

  • Always preview the quiz as a student after adding the block.
  • Some Moodle sites restrict JavaScript in HTML blocks. If the script disappears after saving, your Moodle administrator may need to allow trusted content or help place the code.
  • The calculator students see depends on the Desmos link used in the iframe.
  • If this is being used on a proctored test, make sure the calculator choice matches your course and testing policies.