Long Multiplication

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="config">


<input type="numeric" placeholder="Large number" maxlen="3" data-bind="value: N1"/>
<span>X</span>
<input type="numeric" placeholder="Small number" maxlen="2" data-bind="value: N2"/>
<button data-bind="click: start, visible: Index() == 0">
=
</button>
</div>

<div class="main">

<div class="calc">
<div class="m carries" data-bind="digits: MCarries"></div>
<div class="n1" data-bind="digits: N1"></div>
<div class="n2" data-bind="digits: N2"></div>
<div class="r1" data-bind="digits: R1"></div>
<div class="r2" data-bind="digits: R2"></div>
<div class="result" data-bind="digits: Result"></div>
<div class="s carries" data-bind="digits: SCarries"></div>
</div>
<div class="help">
<!-- ko  with: Step -->
<div data-bind="html: $parent.populate(Help)">

</div>
<!-- /ko -->
<button data-bind="visible: Index() > 0, click: next">
Next step &gt;&gt;
</button>
<div class="clear">

<button data-bind="visible: Index() > 0, click: Index.bind(0, 0)">
Clear and start again
</button>
</div>
</div>
</div>

CSS

.main {
  display: flex;
}

.help {
  padding-left: 20px;
}

.config {
  margin-bottom: 20px;
}

.digits {
font-size: 24px;
width: 8em;
  display:flex;
  justify-content: flex-end;
  align-items: center;
}

.digits span {
  display: inline-block;
  border: 1px solid #ff00eb;
  padding: 10px;
  text-align: center;
  width: 1em;
  height: 1em;
  font-size: 24px;
  font-weight: bold;
  margin: 2px;
  border-radius: 3px;
}

.carries span {
  border-style: dotted;
}

.m span, .r1 span, .r2 span {
  border-color: #6060ff;
}

.result span, .s span {
 border-color: #209020; 
}

.result {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 3px solid  #209020;
  border-bottom: 3px solid  #209020;
}

.m {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid  #6060ff;
}

.highlight {
  text-shadow: 0 0 2px #0000ff;
      background: #ffff90;
    color: #0000ff;
}

.merged {
  font-size: 1.5em;
  font-weight: bold;
}

.carries .u {
  text-indent: -9999px;
}

.clear { align-self: flex-end; margin-top: 100px;; }

JavaScript

function Model()
{
 	var _this = this;
  
  this.N1 = ko.observable(356);
  this.N2 = ko.observable(72);
  this.MCarries = ko.observable();
  
  this.R1 = ko.observable();
  this.R2 = ko.observable();
  this.Result = ko.observable();
  this.SCarries = ko.observable();
  
  this.Products = {
  	uu: ko.observable(),
    tu: ko.observable(),
    hu: ko.observable(),
  	ut: ko.observable(),
    tt: ko.observable(),
    ht: ko.observable()
  };
  
  this.Steps = [
  	{
    	Help: 'Hi! Enter a 3 digit and a 2 digit number to multiply and press <b>=</b>!'
    },
    {
    	Help: '<p>First, we are going to multiple the <b>ones</b> of the <b class="n2">second</b> number with each digit in the <b class="n1">first</b>.</p><p>Don\'t worry if you can see that will be more than 10! We\'ll come to that!</p>',
      Action: function() 
      {
      	_this.highlight('n2', 'u');
      }
    },
    {
    	Help: '<p>So, we multiply $N1.u by $N2.u...</p>',
      Action: function() 
      {
      	_this.highlight('n1', 'u');
      }
    },
    {
    	Help: '<p>$N1.u by $N2.u gives us $PRODUCT.uu</p>'
    },   
    {
    	Help: '<p>Now put the <b>ones</b> - in this case $PRODUCT.uuu - underneath:</p>',
      Action: function() 
      {
        _this.R1(_this.part(_this.Products.uu(), 'u'));
        
        _this.highlight('r1', 'u');
      }
    },   
    {
    	If: function() { return _this.Products.uu() > 10; },
    	Help: '<p>Now put the <b>tens</b> - in this case $PRODUCT.uut - above in the <b>tens</b> box:</p>',
      Action: function() 
      {
        _this.MCarries(_this.part(_this.Products.uu(), 't') + '0');
        
        _this.highlight('r1', 'u', 'off');
        _this.highlight('m.carries', 't');
      }
    },
    {
    	Help: '<p>Okay! That\'s the <b>ones</b> done! Now we move on to multiply the <b>tens</b> of the <b class="n1">first</b> number with the <b>ones</b> of the <b class="n2">second</b>!</p>',
      Action: function() 
      {
      	_this.highlight('n1',...