Symbolic Equation Puzzle Calculator (HTML, CSS, JS)

Get the HTML, CSS, and JavaScript code to build your own Symbolic Equation Puzzle Calculator. This snippet, inspired by game challenges like BO6 Terminus puzzles, demonstrates how to create an interactive tool where users select SVG symbols for variables X, Y, and Z to compute results. A great example for learning DOM manipulation and interactive UI development.

#javascript

#html

#css

#symbolic calculator

#puzzle solver

#game equation

#terminus

#bo6

#svg

#interactive tool

#logic puzzle

#variable selection

/HTML *CSS ()JS Output Live Updates

/* ==== Symbolic Equation Calculator Styles ==== */
body.sec-active-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #eef1f5; /* Light neutral background */
  margin: 0;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
}

.sec-container {
  background-color: #ffffff;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 30, 80, 0.07);
  width: 100%;
  max-width: 750px;
  text-align: center;
}

.sec-title {
  font-size: 1.9rem;
  color: #1a2533;
  margin-top: 0;
  margin-bottom: 8px;
}

.sec-subtitle {
  font-size: 1rem;
  color: #52616e;
  margin-top: 0;
  margin-bottom: 30px;
}

.sec-variables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

@media (min-width: 650px) {
  .sec-variables-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sec-variable-group {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.sec-variable-label {
  font-size: 1.1rem;
  color: #343a40;
  margin-top: 0;
  margin-bottom: 15px;
}
.sec-variable-label span {
  font-weight: bold;
  color: #007bff;
}

.sec-symbol-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 10px;
  justify-items: center;
}

.sec-symbol-option {
  width: 60px; 
  height: 60px;
  border: 2px solid #ced4da;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

.sec-symbol-option svg {
  width: 70%;
  height: 70%;
  stroke-width: 2; /* Consistent stroke for SVGs */
  fill: none;
  stroke: #495057;
}

.sec-symbol-option:hover {
  border-color: #adb5bd;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.sec-symbol-option.selected {
  border-color: #007bff;
  background-color: #e7f3ff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}
.sec-symbol-option.selected svg {
  stroke: #007bff;
}

.sec-controls {
  margin-bottom: 25px;
}

.sec-button {
  border: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.sec-button-secondary {
  background-color: #6c757d;
  color: white;
}
.sec-button-secondary:hover {
  background-color: #5a6268;
}
.sec-button-secondary:active {
  transform: scale(0.97);
}

.sec-results-area {
  background-color: #e6f7ff;
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid #b3e0ff;
  text-align: left;
}

.sec-results-title {
  font-size: 1.2rem;
  color: #0056b3;
  margin-top: 0;
  margin-bottom: 10px;
}

.sec-result-item {
  font-size: 1rem;
  color: #212529;
  margin: 5px 0;
}
.sec-result-item strong {
  color: #004085;
  font-weight: bold;
}

<div class="sec-container">
  <h1 class="sec-title">Symbolic Equation Calculator</h1>
  <p class="sec-subtitle">Select symbol values for X, Y, and Z to solve the puzzle.</p>

<div class="sec-variables-grid">
    
    <div class="sec-variable-group">
      <h2 class="sec-variable-label">Variable X: <span id="selectedXValue">-</span></h2>
      <div class="sec-symbol-options" id="optionsX"></div>
    </div>

<div class="sec-variable-group">
      <h2 class="sec-variable-label">Variable Y: <span id="selectedYValue">-</span></h2>
      <div class="sec-symbol-options" id="optionsY"></div>
    </div>

<div class="sec-variable-group">
      <h2 class="sec-variable-label">Variable Z: <span id="selectedZValue">-</span></h2>
      <div class="sec-symbol-options" id="optionsZ"></div>
    </div>
  </div>

<div class="sec-controls">
      <button id="secResetButton" class="sec-button sec-button-secondary">Reset Selections</button>
  </div>

<div id="secResultsArea" class="sec-results-area">
    <h3 class="sec-results-title">Calculated Results:</h3>
    <p class="sec-result-item">1st Number: <strong id="secResult1">?</strong></p>
    <p class="sec-result-item">2nd Number: <strong id="secResult2">?</strong></p>
    <p class="sec-result-item">3rd Number: <strong id="secResult3">?</strong></p>
  </div>
</div>

document.addEventListener('DOMContentLoaded', function() {
    const optionsContainerX = document.getElementById('optionsX');
    const optionsContainerY = document.getElementById('optionsY');
    const optionsContainerZ = document.getElementById('optionsZ');

const selectedXValueEl = document.getElementById('selectedXValue');
    const selectedYValueEl = document.getElementById('selectedYValue');
    const selectedZValueEl = document.getElementById('selectedZValue');

const result1El = document.getElementById('secResult1');
    const result2El = document.getElementById('secResult2');
    const result3El = document.getElementById('secResult3');
    const resetButton = document.getElementById('secResetButton');

let selectedValues = { x: null, y: null, z: null };

const symbolValues = [0, 10, 11, 20, 21, 22];
    const svgTemplates = [
        // Value 0: Empty circle
        '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>',
        // Value 10: Circle with horizontal line
        '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><line x1="6" y1="12" x2="18" y2="12"/></svg>',
        // Value 11: Circle with vertical line
        '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><line x1="12" y1="6" x2="12" y2="18"/></svg>',
        // Value 20: Empty square
        '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>',
        // Value 21: Square with diagonal line
        '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/><line x1="7" y1="7" x2="17" y2="17"/></svg>',
        // Value 22: Square with cross
        '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="12" y1="6" x2="12" y2="18"/></svg>'
    ];

function createSymbolOption(value, svgHtml, variableName) {
        const optionDiv = document.createElement('div');
        optionDiv.classList.add('sec-symbol-option');
        optionDiv.innerHTML = svgHtml;
        optionDiv.dataset.value = value;
        optionDiv.dataset.variable = variableName;
        optionDiv.setAttribute('title', `Select ${value} for ${variableName.toUpperCase()}`);

optionDiv.addEventListener('click', function() {
            handleSelection(variableName, value, this);
        });
        return optionDiv;
    }

function populateOptions(container, variableName) {
        if (!container) return;
        symbolValues.forEach((val, index) => {
            const svg = svgTemplates[index] || svgTemplates[0]; // Fallback to first SVG
            container.appendChild(createSymbolOption(val, svg, variableName));
        });
    }

populateOptions(optionsContainerX, 'x');
    populateOptions(optionsContainerY, 'y');
    populateOptions(optionsContainerZ, 'z');

function handleSelection(variableName, value, selectedElement) {
        selectedValues[variableName] = value;

// Update displayed selected value
        if (variableName === 'x') selectedXValueEl.textContent = value;
        if (variableName === 'y') selectedYValueEl.textContent = value;
        if (variableName === 'z') selectedZValueEl.textContent = value;

// Update visual selection
        const parentContainer = selectedElement.parentElement;
        parentContainer.querySelectorAll('.sec-symbol-option').forEach(opt => {
            opt.classList.remove('selected');
        });
        selectedElement.classList.add('selected');

// Calculate if all selected
        if (selectedValues.x !== null && selectedValues.y !== null && selectedValues.z !== null) {
            calculateResults();
        }
    }

function calculateResults() {
        const x = selectedValues.x;
        const y = selectedValues.y;
        const z = selectedValues.z;

const res1 = (x * 2) + 11;
        const res2 = ((z * 2) + y) - 5;
        const res3 = Math.abs((z + y) - x);

result1El.textContent = res1;
        result2El.textContent = res2;
        result3El.textContent = res3;
    }

function resetSelections() {
        selectedValues = { x: null, y: null, z: null };
        selectedXValueEl.textContent = '-';
        selectedYValueEl.textContent = '-';
        selectedZValueEl.textContent = '-';

document.querySelectorAll('.sec-symbol-option.selected').forEach(opt => {
            opt.classList.remove('selected');
        });

result1El.textContent = '?';
        result2El.textContent = '?';
        result3El.textContent = '?';
    }

if (resetButton) resetButton.addEventListener('click', resetSelections);

// Add class to body for specific page styling
    if (document.querySelector('.sec-container')) {
        document.body.classList.add('sec-active-page');
    }

// Initial reset to set default display states
    resetSelections();
});