computing-box/export/assets/js/hexadecimal.js

// Ensure the script only runs if the URL path contains "hexadecimal"
if (window.location.pathname.includes("hexadecimal")) {
  const isGCSE = window.location.pathname.includes("gcse-hexadecimal");
  const hexLength = isGCSE ? 2 : 4;       // GCSE: 2 hex digits, A Level: 4
  const binaryLength = isGCSE ? 8 : 16;   // GCSE: 8 bits, A Level: 16
  const maxDenary = isGCSE ? 255 : 65535;

  // Each slider represents a 4-bit nibble (0–15) at a given place value
  const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
  const sliders = {};

  // Order matters: left->right nibble columns
  const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];

  // Attach event listeners for sliders
  ["slider1", "slider16", "slider256", "slider4096"].forEach((sliderId) => {
    const slider = document.getElementById(sliderId);
    if (slider) {
      sliders[sliderId] = slider;
      slider.addEventListener("input", (e) => {
        e.stopPropagation(); // Prevent event propagation to Bootstrap
        updatePlace(parseInt(sliderId.replace("slider", ""), 10));
      });
    }
  });

  function updatePlace(place) {
    const slider = sliders[`slider${place}`];
    if (!slider) return;
    placeValues[place] = parseInt(slider.value, 10) || 0;
    updateNumbers();
  }

  function updateNumbers() {
    let denary = 0;
    let binary = "";
    let hexadecimal = "";

    columnValues.forEach((column) => {
      const value = placeValues[column] ?? 0; // nibble 0..15
      denary += value * column;
      binary += convertToBinaryNibble(value);
      hexadecimal += convertToHexDigit(value);
    });

    // Ensure fixed lengths
    binary = binary.slice(-binaryLength).padStart(binaryLength, "0");
    hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, "0");

    const binEl = document.getElementById("binaryNumber");
    const denEl = document.getElementById("denaryNumber");
    const hexEl = document.getElementById("hexadecimalNumber");

    if (binEl) binEl.innerText = binary;
    if (denEl) denEl.innerText = denary;
    if (hexEl) hexEl.innerText = hexadecimal;
  }

  function convertToBinaryNibble(num) {
    return num.toString(2).padStart(4, "0");
  }

  function convertToHexDigit(num) {
    return num.toString(16).toUpperCase(); // 0..F
  }

  function setSlidersFromDenary(denary) {
    // Clamp & normalise
    denary = Number.isFinite(denary) ? denary : 0;
    denary = Math.max(0, Math.min(maxDenary, Math.floor(denary)));

    // Convert denary into nibble values for each column
    columnValues.forEach((column) => {
      const nibble = Math.floor(denary / column);
      placeValues[column] = Math.max(0, Math.min(15, nibble));
      denary -= placeValues[column] * column;
    });

    // Push values to sliders (if present)
    columnValues.forEach((column) => {
      const slider = sliders[`slider${column}`];
      if (slider) slider.value = placeValues[column];
    });

    updateNumbers();
  }

  function cleanHexInput(input) {
    return String(input)
      .trim()
      .replace(/^0x/i, "")
      .toUpperCase();
  }

  function cleanBinaryInput(input) {
    return String(input).trim().replace(/\s+/g, "");
  }

  // === PUBLIC BUTTON HANDLERS ===
  // Call these from onclick="" on your buttons

  window.requestHexadecimal = function requestHexadecimal() {
    const raw = prompt(
      `Enter a ${hexLength}-digit hexadecimal value (0-9, A-F):`,
      ""
    );
    if (raw === null) return;

    const hex = cleanHexInput(raw);

    const re = new RegExp(`^[0-9A-F]{${hexLength}}$`);
    if (!re.test(hex)) {
      alert(`Please enter exactly ${hexLength} hex digit(s) using 0-9 and A-F.`);
      return;
    }

    const denary = parseInt(hex, 16);
    setSlidersFromDenary(denary);
  };

  window.requestDenaryForHexadecimal =
    function requestDenaryForHexadecimal() {
      const raw = prompt(`Enter a denary value (0 to ${maxDenary}):`, "");
      if (raw === null) return;

      // Allow digits only
      const cleaned = String(raw).trim();
      if (!/^\d+$/.test(cleaned)) {
        alert("Please enter a whole number in denary (digits only).");
        return;
      }

      const denary = parseInt(cleaned, 10);
      if (denary < 0 || denary > maxDenary) {
        alert(`Please enter a number between 0 and ${maxDenary}.`);
        return;
      }

      setSlidersFromDenary(denary);
    };

  window.requestBinaryforHexadecimal = function requestBinaryforHexadecimal() {
    const raw = prompt(`Enter a ${binaryLength}-bit binary value (0s and 1s):`, "");
    if (raw === null) return;

    const bin = cleanBinaryInput(raw);

    const re = new RegExp(`^[01]{${binaryLength}}$`);
    if (!re.test(bin)) {
      alert(`Please enter exactly ${binaryLength} bits using only 0 and 1.`);
      return;
    }

    const denary = parseInt(bin, 2);
    setSlidersFromDenary(denary);
  };

  document.addEventListener("DOMContentLoaded", () => {
    updateNumbers();
  });
}