solo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Step-Down Method</title>
<link rel="icon" href="assets/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="wrap">

<header class="top">
  <div class="eyebrow" id="eyebrow">AD2102</div>
  <h1 id="title">Step-Down Method</h1>
  <p class="sub" id="blurb"></p>
  <div class="navlinks"><a href="index.html">Join your team</a></div>
</header>

<section class="panel" id="given"></section>

<h2 style="margin:30px 0 2px">Steps</h2>
<p class="note">One step at a time.</p>
<div id="steps"></div>

<section class="panel">
  <h2>Worksheet</h2>
  <p class="note">Parentheses mean a department is emptying itself out.</p>
  <div class="scroll">
  <table class="ws"><thead id="wshead"></thead><tbody id="wsbody"></tbody></table>
  </div>
</section>

<section class="panel final" id="final">
  <h2>Your totals</h2>
  <p class="note" id="totnote"></p>
  <div class="hero" id="hero"></div>
  <div id="ohrates"></div>
</section>

<div class="toolbar">
  <span class="prog" id="prog">Step 1 of 3</span>
  <button id="back">Back</button>
  <button id="print">Print / PDF</button>
  <button class="primary" id="fwd">Next step</button>
  <button class="ghost" id="swap">Switch case</button>
</div>

</div>

<script type="module">
import { mountExercise, renderGiven } from "./assets/exercise.js";
import { getProblem, PROBLEM_IDS, money, plain, parseNum } from "./assets/data.js";

var $ = function(id){ return document.getElementById(id); };
var ex = null, P = null, step = 1, pid = "4B-5";

function totalsFooter(){
  var hero = $("hero"); hero.innerHTML = "";
  var parts = P.parts || [{label:null}];
  var ops = P.depts.filter(function(d){ return !d.svc; });
  parts.forEach(function(part, pi){
    if(part.label){
      var h = document.createElement("div");
      h.className = "partlabel";
      h.textContent = part.label;
      hero.appendChild(h);
    }
    var row = document.createElement("div");
    row.className = "herorow";
    ops.forEach(function(d){
      var c = document.createElement("div"); c.className = "card";
      c.innerHTML = '<div class="t"></div><div class="v" id="f-'+pi+'-'+d.id+'">-</div>';
      c.querySelector(".t").textContent = d.name;
      row.appendChild(c);
    });
    var tc = document.createElement("div"); tc.className = "card";
    tc.style.background = "var(--accent-soft)"; tc.style.borderColor = "var(--accent)";
    tc.innerHTML = '<div class="t">Your total</div><div class="v" id="f-'+pi+'-tot">-</div>';
    row.appendChild(tc);
    hero.appendChild(row);
  });
}

function syncTotals(){
  var parts = P.parts || [{label:null}];
  var host = $("ohrates");
  host.innerHTML = "";
  var rates = {};

  parts.forEach(function(part, pi){
    P.depts.filter(function(d){ return !d.svc; }).forEach(function(d){
      var cell = document.getElementById("wsfinal-"+pi+"-"+d.id);
      var out  = document.getElementById("f-"+pi+"-"+d.id);
      if(cell && out) out.textContent = cell.textContent;
    });
    var t = document.getElementById("wsfinal-"+pi+"-total");
    var o = document.getElementById("f-"+pi+"-tot");
    if(t && o) o.textContent = t.textContent;

    if(!part.overheadRates) return;
    if(!host.firstChild){
      var h = document.createElement("h3");
      h.textContent = "Predetermined overhead rates";
      host.appendChild(h);
      var n = document.createElement("p"); n.className = "note";
      n.textContent = "Your department total divided by its activity base.";
      host.appendChild(n);
    }
    if(part.label){
      var pl = document.createElement("div");
      pl.className = "partlabel"; pl.textContent = part.label;
      host.appendChild(pl);
    }
    part.overheadRates.forEach(function(r){
      var cell = document.getElementById("wsfinal-"+pi+"-"+r.dept);
      var v = cell ? parseNum(cell.textContent) : NaN;
      (rates[r.dept] = rates[r.dept] || []).push(isNaN(v) ? null : v / r.base);
      var p2 = document.createElement("p");
      p2.style.margin = "0 0 6px";
      p2.innerHTML = "<b>" + r.label + "</b>: " +
        (isNaN(v) ? "-" : money(v) + " ÷ " + plain(r.base) + " " + r.baseLabel +
         " = <b>" + money(v / r.base, 2) + " " + r.unit + "</b>");
      host.appendChild(p2);
    });
  });

  /* both methods done: show what the choice of method actually cost */
  if(parts.length > 1 && P.compare){
    var lines = [];
    Object.keys(rates).forEach(function(d){
      var a = rates[d][0], b = rates[d][1];
      if(a == null || b == null) return;
      var dep = P.depts.filter(function(x){ return x.id === d; })[0];
      lines.push("<b>" + dep.name + "</b>: " + money(a,2) + " step-down against " +
                 money(b,2) + " direct, a gap of " + money(Math.abs(a-b),2) + ".");
    });
    if(lines.length){
      var h2 = document.createElement("h3");
      h2.textContent = "Compare";
      host.appendChild(h2);
      lines.forEach(function(l){
        var q = document.createElement("p"); q.style.margin = "0 0 6px"; q.innerHTML = l;
        host.appendChild(q);
      });
      var nn = document.createElement("p"); nn.className = "note";
      nn.style.marginTop = "10px"; nn.textContent = P.compare.note;
      host.appendChild(nn);
    }
  }
}

function mount(id){
  pid = id;
  P = getProblem(id);
  if(ex) ex.destroy();
  document.title = P.label + " · " + P.org;
  $("eyebrow").textContent = "AD2102 · " + P.label;
  $("title").textContent = P.org;
  $("blurb").textContent = P.blurb;
  $("swap").textContent = "Switch to " + getProblem(other(id)).label;
  $("totnote").textContent = "These are your numbers, not the answer. Each method should add back to "
    + money(P.grandTotal) + ".";
  renderGiven($("given"), P);
  totalsFooter();
  ex = mountExercise({
    problem: P,
    worksheetBody: $("wsbody"),
    worksheetHead: $("wshead"),
    steps: $("steps"),
    progress: $("prog"),
    final: $("final"),
    teacherLed: true,
    onTotals: syncTotals
  });
  go(1);
}
function other(id){ return PROBLEM_IDS[(PROBLEM_IDS.indexOf(id)+1) % PROBLEM_IDS.length]; }

function go(n){
  step = Math.max(1, Math.min(P.steps.length, n));
  ex.setUnlocked(step);
  $("back").disabled = step === 1;
  $("fwd").disabled  = step === P.steps.length;
  $("final").classList.toggle("show", step === P.steps.length);
}
$("back").addEventListener("click", function(){ go(step-1); });
$("fwd").addEventListener("click", function(){ go(step+1); });
$("swap").addEventListener("click", function(){ mount(other(pid)); });
$("print").addEventListener("click", function(){ window.print(); });
mount("4B-5");
</script>
</body>
</html>