@teachinglab/omd 0.1.0

package/src/omdOperator.js

@@ -0,0 +1,73 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+import { jsvgTextBox } from "@teachinglab/jsvg";
+
+export class omdOperator extends omdMetaExpression
+{
+    constructor( Oper = '+' )
+    {
+        // initialization
+        super();
+
+        this.type = "omdOperator";
+        this.operator = Oper;
+
+        this.numText = new jsvgTextBox();
+        this.numText.setWidthAndHeight( 30,30 );
+        this.numText.setText( this.operator );
+        this.numText.setFontFamily( "Albert Sans" );
+        this.numText.setFontColor( "black" );
+        this.numText.setFontSize( 18 );
+        this.numText.setVerticalCentering();
+        this.numText.setAlignment("center");
+        //]this.numText.div.style.border = "1px solid black";
+        this.addChild( this.numText );
+
+        this.setOperator( Oper );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.operator != "undefined" )
+            this.setOperator( data.operator );
+    }
+
+    setOperator( Op )
+    {
+        if ( Op == '+' )
+            this.operator = '+';
+
+        if ( Op == '-' )
+            this.operator = '−';
+
+        if ( Op == '/' )
+            this.operator = '÷';
+        if ( Op == '÷' )
+            this.operator = '÷';
+
+        if ( Op == 'x' )
+            this.operator = '×';
+        if ( Op == '*' )
+            this.operator = '×';
+        if ( Op == '•' )
+            this.operator = '×';
+        if ( Op == '×' )
+            this.operator = '×';
+        if ( Op == '=' )
+            this.operator = '=';
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        var T = this.operator;
+        var W = 12 + T.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( T );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}

package/src/omdPowerExpression.js

@@ -0,0 +1,92 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdExpression } from "./omdExpression.js"
+import { omdMetaExpression } from "./omdMetaExpression.js"
+import { omdNumber } from "./omdNumber.js"
+import { omdVariable } from "./omdVariable.js"
+import { omdTerm } from "./omdTerm.js"
+import { jsvgGroup } from "@teachinglab/jsvg";
+
+export class omdPowerExpression extends omdMetaExpression
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdPowerExpression";
+        
+        this.expression = null;
+        this.exponent = null;
+
+        this.expressionHolder = new jsvgGroup();
+        this.addChild( this.expressionHolder );
+
+        this.exponentHolder = new jsvgGroup();
+        this.addChild( this.exponentHolder );
+    }
+
+    // make a power expression of (2x+2)^(3x+3)
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.baseExpression != "undefined" )
+        {
+            // console.log("A");
+            // console.log( data.baseExpression );
+            if ( data.baseExpression.omdType == "expression" )
+                this.expression = new omdExpression();
+            if ( data.baseExpression.omdType == "number" )
+                this.expression = new omdNumber();
+            if ( data.baseExpression.omdType == "variable" )
+                this.expression = new omdVariable();
+            if ( data.baseExpression.omdType == "term" )
+                this.expression = new omdTerm();
+            this.expression.loadFromJSON(  data.baseExpression  );
+            this.expressionHolder.removeAllChildren();
+            this.expressionHolder.addChild( this.expression );
+        }
+        if ( typeof data.exponentExpression != "undefined" )
+        {
+            // console.log("B");
+            // console.log( data.exponentExpression );
+            if ( data.exponentExpression.omdType == "expression" )
+                this.exponent = new omdExpression();
+            if ( data.exponentExpression.omdType == "number" )
+                this.exponent = new omdNumber();
+            if ( data.exponentExpression.omdType == "variable" )
+                this.exponent = new omdVariable();
+            if ( data.exponentExpression.omdType == "term" )
+                this.exponent = new omdTerm();
+            this.exponent.loadFromJSON(  data.exponentExpression  );
+            this.exponentHolder.removeAllChildren();
+            this.exponentHolder.addChild( this.exponent );
+        }
+
+        this.updateLayout();
+    }
+
+    setExpressionAndPower( expression, exponent )
+    {
+        this.expression = expression;
+        this.expressionHolder.removeAllChildren();
+        this.expressionHolder.addChild( expression );
+
+        this.exponent = exponent;
+        this.exponentHolder.removeAllChildren();
+        this.exponentHolder.addChild( exponent );
+
+        // this.expression.hideBackgroundByDefault();
+        // this.exponent.hideBackgroundByDefault();
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.expressionHolder.setPosition(0,0);
+
+        this.exponentHolder.setPosition( this.expression.width-10,-15);
+        this.exponentHolder.setScale( 0.70 );
+    }
+}

package/src/omdProblem.js

@@ -0,0 +1,55 @@
+
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgTextBox } from "@teachinglab/jsvg";
+
+export class omdProblem extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdProblem";
+        this.theText = "";
+
+        this.problemText = new jsvgTextBox();
+        this.problemText.setWidthAndHeight( 400,130 );
+        this.problemText.setText ( "this it the problem text" );
+        this.problemText.setFontFamily( "Albert Sans" );
+        this.problemText.setFontColor( "black" );
+        this.problemText.setFontSize( 18 );
+        this.addChild( this.problemText );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.problemText != "undefined" )
+            this.theText = data.problemText;
+
+        if ( typeof data.visualization != "undefined" )
+        {
+            this.visualJSON = data.visualization;
+            console.log( this.visualJSON );
+
+            var obj = window.theApp.handleAIResponse( this.visualJSON );
+            obj.parent.removeChild( obj );
+            this.addChild( obj );
+            obj.setPosition( 0,150 );
+            //obj.setPosition( obj.xpos, obj.ypos+120 );
+        }
+
+        this.updateLayout();
+    }
+
+    setName( newName )
+    {
+        this.name = newName;
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.problemText.setText ( this.theText );
+        this.setWidthAndHeight( 300,200 );
+    }
+}

package/src/omdRatioChart.js

@@ -0,0 +1,232 @@
+
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgEllipse, jsvgArc, jsvgLine, jsvgRect } from "@teachinglab/jsvg";
+
+export class omdRatioChart extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+
+        this.valueA = 1;
+        this.valueB = 2;
+        this.size = 'large';
+        this.renderType = 'pie';
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.valueA != "undefined" )
+            this.valueA = data.valueA;
+
+        if ( typeof data.valueB != "undefined" )
+            this.valueB = data.valueB;
+
+        if ( typeof data.renderType != "undefined" )
+            this.renderType = data.renderType;
+
+        if ( typeof data.size != "undefined" )
+            this.size = data.size;
+
+        this.updateLayout();
+    }
+
+    setValues( A, B )
+    {
+        this.valueA = A;
+        this.valueB = B;
+        this.updateLayout();
+    }
+
+    setRenderType( R )
+    {
+        this.renderType = R;
+        this.updateLayout();
+    }
+
+    setSize( S )
+    {
+        this.size = S;
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        if ( this.renderType == 'pie' )
+            this.renderAsPie();
+        
+        if ( this.renderType == 'dots' || this.renderType == 'dot' || this.renderType == 'tile' )
+            this.renderAsDots();
+
+        if ( this.renderType == 'bar' )
+            this.renderAsBar();
+    }
+
+    renderAsPie()
+    {
+        var circleSize = 120;
+        if ( this.size == "large" )
+            circleSize = 120;
+        if ( this.size == "medium" )
+            circleSize = 80;
+        if ( this.size == "small" )
+            circleSize = 40;
+
+        // holder group
+        var G = new jsvgGroup();
+        G.setPosition( circleSize/2, circleSize/2 );
+        this.addChild( G );
+
+        var C = new jsvgEllipse();
+        C.setFillColor( omdColor.mediumGray );
+        C.setWidthAndHeight( circleSize, circleSize );
+        G.addChild( C );
+
+        var p = this.valueA / ( this.valueA + this.valueB );
+        var A1 = 0;
+        var A2 = 360 * p;
+
+        var pieShape = new jsvgArc();
+        pieShape.createPieSlice( circleSize / 2.0, A1, A2 );
+        pieShape.setFillColor( "black" );
+        G.addChild( pieShape );
+
+        var total = this.valueA + this.valueB;
+        var dA = Math.PI*2.0 / total;
+        for( var i=0; i<total; i++ )
+        {
+            var A = i * dA - Math.PI/2.0;
+            var pX = Math.cos(A) * circleSize/2;
+            var pY = Math.sin(A) * circleSize/2;
+            var L = new jsvgLine();
+            L.setStrokeColor("white");
+            L.setEndpoints( 0, 0, pX, pY );
+            G.addChild( L );
+        }
+    }
+
+    renderAsDots()
+    {
+        if ( this.size == 'large' )
+        {
+            var W = 120;
+            var H = 150;
+            var dotSize = 15;
+            var spacer = W / 4;
+        }
+        if ( this.size == 'medium' )
+        {
+            var W = 80;
+            var H = 100;
+            var dotSize = 12;
+            var spacer = W / 4;
+        }
+        if ( this.size == 'small' )
+        {
+            var W = 40;
+            var H = 50;
+            var dotSize = 5;
+            var spacer = W / 4;
+        }
+        
+        var R = new jsvgRect();
+        R.setWidthAndHeight( W*2,H );       // twice the width
+        R.setCornerRadius( dotSize );
+        R.setFillColor( omdColor.lightGray );
+        this.addChild( R );
+
+        this.width = R.width;
+        this.height = R.height;
+
+        // make top dots
+        var pX = spacer;
+        var pY = spacer;
+
+        for( var i=0; i<this.valueA; i++ )
+        {
+            var dot = new jsvgEllipse();
+            dot.setFillColor( "black" );
+            dot.setWidthAndHeight( dotSize,dotSize );
+            dot.setPosition( pX, pY );
+            this.addChild( dot );
+            pX += spacer;
+            if ( i != 0 && i%3 == 2 )
+            {
+                pX = spacer;
+                pY += spacer;
+            }
+        }
+
+        // make  bottom dots
+        var pX = spacer*5;
+        var pY = spacer;
+        for( var i=0; i<this.valueB; i++ )
+        {
+            var dot = new jsvgEllipse();
+            dot.setFillColor( "black" );
+            dot.setWidthAndHeight( dotSize,dotSize );
+            dot.setPosition( pX, pY );
+            this.addChild( dot );
+            pX += spacer;
+            if ( i != 0 && i%3 == 2 )
+            {
+                pX = spacer*5;
+                pY += spacer;
+            }
+        }
+
+        // make divider line
+        var L = new jsvgLine();
+        L.setEndpoints( spacer*4, spacer/2, spacer*4, H-spacer/2 );
+        this.addChild( L );
+    }
+
+    renderAsBar()
+    {
+        if ( this.size == 'large' )
+        {
+            var W = 240;
+        }
+        if ( this.size == 'medium' )
+        {
+            var W = 120;
+        }
+        if ( this.size == 'small' )
+        {
+            var W = 80;
+        }
+
+        var p = this.valueA / ( this.valueA + this.valueB );
+
+        var B1 = new jsvgRect();
+        B1.setWidthAndHeight( W, 30 );
+        // B1.setCornerRadius(5);
+        B1.setFillColor( omdColor.mediumGray );
+        this.addChild( B1 );
+
+        var B2 = new jsvgRect();
+        // B2.setCornerRadius(5);
+        B2.setWidthAndHeight( p*W, 30 );
+        B2.setFillColor( "black" );
+        this.addChild( B2 );
+
+        var total = this.valueA + this.valueB;
+        var spacer = W / total;
+        for( var i=1; i<total; i++ )
+        {
+            var pX = i * spacer;
+            var L = new jsvgLine();
+            L.setStrokeColor("white");
+            L.setEndpoints( pX, 0, pX, 30 );
+            this.addChild( L );
+        }
+    }
+
+}
+

package/src/omdRationalExpression.js

@@ -0,0 +1,115 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+import { omdExpression } from "./omdExpression.js"
+import { omdNumber } from "./omdNumber.js"
+import { omdVariable } from "./omdVariable.js"
+import { omdTerm } from "./omdTerm.js"
+
+export class omdRationalExpression extends omdMetaExpression
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdPowerExpression";
+        
+        this.numeratorExpression = null;
+        this.denominatorExpression = null;
+
+        this.numeratorHolder = new jsvgGroup();
+        this.addChild( this.numeratorHolder );
+
+        this.denominatorHolder = new jsvgGroup();
+        this.addChild( this.denominatorHolder );
+
+        this.dividerLine = new jsvgLine();
+        this.setStrokeWidth( 2 );
+        this.setStrokeColor( "black" );
+        this.addChild( this.dividerLine );
+    }
+
+    // make a power expression of (2x+2)^(3x+3)
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.numeratorExpression != "undefined" )
+        {
+            // console.log("A");
+            // console.log( data.baseExpression );
+            if ( data.numeratorExpression.omdType == "expression" )
+                this.numeratorExpression = new omdExpression();
+            if ( data.numeratorExpression.omdType == "number" )
+                this.numeratorExpression = new omdNumber();
+            if ( data.numeratorExpression.omdType == "variable" )
+                this.numeratorExpression = new omdVariable();
+            if ( data.numeratorExpression.omdType == "term" )
+                this.numeratorExpression = new omdTerm();
+            this.numeratorExpression.loadFromJSON(  data.numeratorExpression  );
+            this.numeratorHolder.removeAllChildren();
+            this.numeratorHolder.addChild( this.numeratorExpression );
+        }
+        if ( typeof data.denominatorExpression != "undefined" )
+        {
+            // console.log("B");
+            // console.log( data.exponentExpression );
+            if ( data.denominatorExpression.omdType == "expression" )
+                this.denominatorExpression = new omdExpression();
+            if ( data.denominatorExpression.omdType == "number" )
+                this.denominatorExpression = new omdNumber();
+            if ( data.denominatorExpression.omdType == "variable" )
+                this.denominatorExpression = new omdVariable();
+            if ( data.denominatorExpression.omdType == "term" )
+                this.denominatorExpression = new omdTerm();
+            this.denominatorExpression.loadFromJSON(  data.denominatorExpression  );
+            this.denominatorHolder.removeAllChildren();
+            this.denominatorHolder.addChild( this.denominatorExpression );
+        }
+    
+        this.updateLayout();
+    }
+
+
+    setNumeratorAndDenominator( numerator, denominator )
+    {
+        this.numeratorExpression = numerator;
+        this.numeratorHolder.removeAllChildren();
+        this.numeratorHolder.addChild( numerator );
+
+        this.denominatorExpression = denominator;
+        this.denominatorHolder.removeAllChildren();
+        this.denominatorHolder.addChild( denominator );
+
+        this.numeratorExpression.hideBackgroundByDefault();
+        this.denominatorExpression.hideBackgroundByDefault();
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.numeratorHolder.setPosition(5, 0);
+        this.denominatorHolder.setPosition( 5, 30 );
+
+        // get max width
+        var W = this.numeratorExpression.width;
+        if ( this.denominatorExpression.width  > W )
+            W = this.denominatorExpression.width;
+
+        // center numerator
+        var pX = W/2 - this.numeratorExpression.width/2 + 5;
+        this.numeratorHolder.setPosition( pX, 0 );
+
+        // center denominator
+        pX = W/2 - this.denominatorExpression.width/2 + 5;
+        this.denominatorHolder.setPosition( pX, 30 );
+
+        // update line width
+        this.dividerLine.setEndpoints( 10-5,30, W+5,30 );
+
+        // update back rect
+        this.backRect.setWidthAndHeight( W+10, 60 );
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}