TripleLog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<style>
.output > span {
display: inline-block;
width: 2rem;
height: 1.5rem;
padding: 0.25rem 0.25rem;
text-align: center;
background: #DDD;
}
.output > span:nth-child(2n-1) {
background: #EEE;
}
</style>
</head>
<body>
<div>
<input type="text" id="infix" value="2+3*(17-5)" oninput="newInput()" onchange="newInput()" />
</div>
Infix Array:
<div id="infixArray" class="output">
</div>
<button onclick="addToPostfix();">Push to Postfix</button>
<button onclick="addToStack();">Push to Stack</button>
<button onclick="stackToPostfix();">Stack to Postfix</button>
<button onclick="stackToTrash();">Remove from Stack</button>
<button onclick="nextCharacter();">Next Character</button>
<table>
<thead>
<tr><th>Step</th><th>Postfix Array</th><th>Stack</th></tr>
</thead>
<tbody id="allSteps">
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>var prec = {};
prec[',']=1;
prec['=']=1.5;
prec['<=']=1.5;
prec['>=']=1.5;
prec['==']=1.5;
prec['!=']=1.5;
prec['>']=1.5;
prec['<']=1.5;
prec['+']=2;
prec['-']=2;
prec['*']=3;
prec['/']=3;
prec['^']=4;
prec['%']=10;
prec['max']=10;
prec['min']=10;
prec['sum']=10;
prec['sin']=10;
prec['cos']=10;
prec['tan']=10;
prec['csc']=10;
prec['sec']=10;
prec['cot']=10;
prec['ln']=10;
prec['log']=10;
prec['_']=11;
var currentPostfix = [];
var currentStack = [];
var currentStep = 1;
var currentArr = [];
newInput();
function toInfixArray(input){
var arr = [];
var str = "";
for (var i=0;i<input.length;i++){
if ("+-*/()^%,{}_".indexOf(input[i]) > -1){
if (str.length > 0){arr.push(str);}
arr.push(input[i]);
str = "";
}
else if ("!=<>".indexOf(input[i]) > -1){
if (i+1 < input.length && input[i+1] == "="){
if (str.length > 0){arr.push(str);}
arr.push(input[i]+input[i+1]);
i++;
}
else {
if (str.length > 0){arr.push(str);}
arr.push(input[i]);
}
str = "";
}
else if (input[i] == " "){
if (str.length > 0){arr.push(str);}
str = "";
}
else {
str += input[i];
}
}
if (str.length > 0){arr.push(str);}
return arr;
}
function toPostfixArray(input,max=-1){
var stack = [];
var postfix = [];
var maxx = max;
if (maxx > input.length || maxx < 0){maxx = input.length;}
for (var i=0;i<maxx;i++){
if (prec[input[i]]){
if (stack.length == 0){
stack.push(input[i]);
}
else if (prec[stack[stack.length-1]] < prec[input[i]]){
stack.push(input[i]);
}
else if (stack[stack.length-1] == "^" && input[i] == "^"){
stack.push(input[i]);
}
else {
while (stack.length > 0 && prec[stack[stack.length-1]] >= prec[input[i]]) {
if (stack[stack.length-1] == "^" && input[i] == "^"){break;}
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
stack.push(input[i]);
}
}
else if (input[i] == '(' || input[i] == '{'){
stack.push(input[i]);
}
else if (input[i] == ')'){
while (stack.length > 0 && stack[stack.length-1] != "(") {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
if (stack.length > 2 && stack[stack.length-2] == "_"){
stack.pop();
stack.pop();
var last = stack[stack.length-1];
postfix.push(last);
}
stack.pop();
}
else if (input[i] == '}'){
while (stack.length > 0 && stack[stack.length-1] != "{") {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
stack.pop();
}
else {
postfix.push(input[i]);
}
}
if (max == -1){
while (stack.length > 0) {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
return postfix;
}
return {postfix:postfix,stack:stack};
}
function newInput(){
currentPostfix = [];
currentStack = [];
currentStep = 1;
var arr = toInfixArray(document.getElementById('infix').value);
currentArr = arr;
var postfix = toPostfixArray(arr,-1);
console.log(postfix)
var out = document.getElementById('infixArray');
out.innerHTML = "";
for (var i=0;i<arr.length;i++){
var span = document.createElement('span');
span.textContent = arr[i];
out.appendChild(span);
}
var allSteps = document.getElementById('allSteps');
allSteps.innerHTML = "";
for (var ii=1;ii<arr.length+1;ii++){
var obj = toPostfixArray(arr,ii);
var tr = document.createElement('tr');
var cell1 = document.createElement('td');
cell1.textContent = arr[ii-1];
tr.appendChild(cell1);
var cell2 = document.createElement('td');
cell2.classList.add('output');
cell2.id = "postfix-"+ii;
var cell3 = document.createElement('td');
cell3.classList.add('output');
cell3.id = "stack-"+ii;
tr.appendChild(cell2);
tr.appendChild(cell3);
for (var i=0;i<obj.postfix.length;i++){
//var span = document.createElement('span');
//span.textContent = obj.postfix[i];
//cell2.appendChild(span);
}
for (var i=0;i<obj.stack.length;i++){
//var span = document.createElement('span');
//span.textContent = obj.stack[i];
//cell3.appendChild(span);
}
allSteps.appendChild(tr);
}
}
function addToPostfix(){
var c = currentArr[currentStep-1];
currentPostfix.push(c);
var el = document.getElementById('postfix-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentPostfix.length;i++){
var span = document.createElement('span');
span.textContent = currentPostfix[i];
el.appendChild(span);
}
}
function stackToPostfix(){
var c = currentStack[currentStack.length-1];
currentPostfix.push(c);
var el = document.getElementById('postfix-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentPostfix.length;i++){
var span = document.createElement('span');
span.textContent = currentPostfix[i];
el.appendChild(span);
}
currentStack.pop();
var el = document.getElementById('stack-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentStack.length;i++){
var span = document.createElement('span');
span.textContent = currentStack[i];
el.appendChild(span);
}
}
function addToStack(){
var c = currentArr[currentStep-1];
currentStack.push(c);
var el = document.getElementById('stack-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentStack.length;i++){
var span = document.createElement('span');
span.textContent = currentStack[i];
el.appendChild(span);
}
}
function stackToTrash(){
currentStack.pop();
var el = document.getElementById('stack-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentStack.length;i++){
var span = document.createElement('span');
span.textContent = currentStack[i];
el.appendChild(span);
}
}
function nextCharacter(){
currentStep++;
var el = document.getElementById('postfix-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentPostfix.length;i++){
var span = document.createElement('span');
span.textContent = currentPostfix[i];
el.appendChild(span);
}
var el = document.getElementById('stack-'+currentStep);
el.innerHTML = "";
for (var i=0;i<currentStack.length;i++){
var span = document.createElement('span');
span.textContent = currentStack[i];
el.appendChild(span);
}
}Learn the postfix algorithm by manually working through examples step-by-step.
To view this on TripleLog, click here.
This page provides the infixed array and has buttons for users to select the correct next action to take. Improve this quiz by telling the user whether their action is correct, allowing undo options, or more.
Edit the script.js file to change the algorithm. Add operations or have fun with alternative precedences.