DebugAlgebraPalletteMathLive-changes.html

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Playing with MathLive</title>

<link rel="stylesheet" href="../mathlive/dist/mathlive.core.css" type="text/css">
<link rel="stylesheet" href="../mathlive/dist/mathlive.css" type="text/css">
<script>
    var require = {
        baseUrl: './',
        paths: {
            "jquery": "../mathlive/node_modules/jquery-3.2.1.js",
            "mathlive": "../mathlive/src"
        }
    };
</script>
<script data-main="main" src="../mathlive/node_modules/requirejs/require.js"></script>
<script src="editor.js"></script>

<style>
.staticMath {
	max-width: 35em;
	padding: 1ex;
}

.template {
}

.mathEditor {
	max-width: 35em;
	padding: 0ex;
	background-color: lightyellow
}

.mathEditorWithPalete {
	max-width: 60em;
   border: 2px solid green;
}

.step {
	max-width: 60em;
   border: 2px solid green;
}

.step table {
   border-style: none;
}

.step td {
   width: 40em;
   padding: 0em;
   border-style: none;
   border: 0px;
}

.mathEditorWithPalete table {
   border-style: none;
}

.mathEditorWithPalete td {
   width: 40em;
   padding: 1em;
   border-style: none;
   border: 0px;
}

.palette td {
   padding: 0.1em;
   border: 1px solid black;
   text-align:center;
}

table {
    border-collapse: collapse;
}

table, th, td {
   border: 1px solid black;
   padding: 1px;
   text-align:left;
}

</style>
</head>
<body lang=EN-US>

<h1> Step-by-step Example </h1>

<table>
 <tr class="step">
  <td>
    <div class="staticMath" tabindex="0">$$7x + 13 = -1$$</div>
  </td>
  <td>
  </td>
 </tr>
 <tr class="step">
  <td>
    <div class="staticMath" tabindex="0">$$7x\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{+}\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{13}=\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{-1}^{-14}$$</div>
  </td>
  <td>
  <p> Subtract 13 from both sides </p>
  </td>
 </tr>
 <tr class="step">
  <td>
    <div class="staticMath" tabindex="0">$$7x=-14$$</div>
  </td>
  <td>
  </td>
 </tr>
<tr class="mathEditorWithPalete">
  <td>
    <div class="mathEditor" id='mathEditorActive'> a x^2 \sqrt{y}
</div>
  </td> 
  <td>
     <span>
       <button  style="display: block;" name="Type reason for work">
	     <img width=30 height=30 src="pencil.png" alt="pencil icon">
	   </button>
       <button  style="display: inline;" name="Speak reason for work">
	     <img width=30 height=30 src="microphone.png" alt="microphone icon">
	   </button>
	 </span>
     <input type="text" id="mathEditorReason" placeholder="reason" name="Reason for edits"> 
  </td>
</tr>
<tr class="mathEditorWithPalete">
  <td>
    <div class="mathEditor"> \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{7}x= \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{-14}-2
	+\overset{a^{x-1}}{\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{x}}
+\underset\pi{\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{x}}
+\,{}_{down}\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{b_1} -\,{}^{up}\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{b_2}
</div>
  </td> 
  <td>
     <span>
       <button  style="display: block;" name="Type reason for work">
	     <img width=30 height=30 src="pencil.png" alt="pencil icon">
	   </button>
       <button  style="display: inline;" name="Speak reason for work">
	     <img width=30 height=30 src="microphone.png" alt="microphone icon">
	   </button>
	 </span>
     <input type="text" id="mathEditorReason" placeholder="reason" name="Reason for edits"> 
  </td>
</tr>
</table>

<table class="palette">
 <tr>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\frac{\blacksquare}{\square}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$${\blacksquare}^{\square}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$${\blacksquare}_{\square}$$</button>
  </td>
  <td>
  <button class="staticMath template"  onclick="MathLivePasteFromButton(this)">$$\sqrt{\blacksquare}$$</button>
  </td>
   <td>
  <button class="staticMath template"  onclick="MathLivePasteFromButton(this)">$$\sqrt[{\square}]{\blacksquare}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$ \,{}^\square \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\overset{\square}{\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$  \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare} ^{\square}$$</button>
  </td>
</tr>
 <tr>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\cdot$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\times$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\div$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\pm$$</button>
  </td>
  <td>
  </td>
  <td>
   <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$${\square} \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare} {\square}$$</button>
  </td>
</tr>
 <tr>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\leq$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\geq$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\neq$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\overset{?}{=}$$</button>
  </td>
  <td>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\,{}_\square \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\underset{\square}{\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare}}$$</button>
  </td>
  <td>
    <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$  \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\blacksquare} _{\square}$$</button>
  </td>

 </tr>
 <!-- add some user defined buttons -- need support drag/drop copy/paste for these
 <tr>
  <td width=194 colspan=2 >
  <button><p align=center><o:p>User 1</o:p></p></button>
  </td>
  <td>
  <button><p align=center><o:p>User 2</o:p></p></button>
  </td>
  <td>
  <button><p align=center><o:p>User 3</o:p></p></button>
  </td>
  <td>
  <button><p align=center><o:p>User 4</o:p></p></button>
  </td>
 </tr>
 -->
 
 <tr>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\Bigl{(}\blacksquare\Bigr{)}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\Bigl{[}\blacksquare\Bigr{]}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\Bigl{|}\blacksquare\Bigr{|}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\Bigl{\lfloor}\blacksquare\Bigr{\rfloor}$$</button>
  </td>
  <td>
  <button class="staticMath template" onclick="MathLivePasteFromButton(this)">$$\Bigl{\lceil}\blacksquare\Bigr{\rceil}$$</button>
  </td>
  <td>
  </td>
  <td>
  </td>
  <td>
  </td>
</tr>

 <tr>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\triangle$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\angle$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\cong$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\perp$$</button>
  </td>
  <td>
  <button class="staticMath" onclick="MathLivePasteFromButton(this)">$$\parallel$$</button>
  </td>
  <td>
  </td>
  <td>
  </td>
  <td>
  </td>
</tr>

 <tr>
  <td>
  <button onclick=
	"NewMathEditorRow(TheActiveMathField.latex())">
	  <p align=center>Copy<br>Down</p>
  </button>
  </td>
  <td>
  <button onclick=
     "NewMathEditorRow(CleanUpCrossouts(TheActiveMathField.latex()))">
	   <p align=center>Cleanup<br>Crossouts</p>
  </button>
  </td>
  <td>
    <button onclick=
	"NewMathEditorRow(CleanUpCrossouts(TheActiveMathField.latex()));
     NewMathEditorRow(TheActiveMathField.latex())">
      <p align=center>Cleanup &<br>Copy<br>Down</p>
    </button>
  </td>
  <td>
  <button onclick="DeleteActiveMath()"
    ><p align=center>Delete<br>Current<br>Step</p></button>
  </td>
  <td>
  <button><p align=center>Clear</p></button>
  </td>
  <td>
  <button><p align=center>Cut</p></button>
  </td>
  <td>
  <button><p align=center>Copy</p></button>
  </td>
  <td>
  <button><p align=center>Paste</p></button>
  </td>
 </tr>
</table>
</div>

</body>

</html>