<?xml version="1.0" encoding="UTF-16"?>
<!-- This XML file has been created by WebEJS 1.0. Visit http://t.um.es/webejs -->
<!-- Please, open it with WebEJS or save the file to your hard disk on your EJS' user directory and open it with Desktop Ejs 6.01 or later. -->
<Osejs version="7.0" password="">
<Osejs.Information>
<Title><![CDATA[Math Estimation]]></Title>
<Copyright><![CDATA[]]></Copyright>
<Keywords><![CDATA[]]></Keywords>
<Password><![CDATA[unused]]></Password>
<Level><![CDATA[]]></Level>
<Language><![CDATA[]]></Language>
<Abstract><![CDATA[]]></Abstract>
<FixedNavigationBar>false</FixedNavigationBar>
<RunAlways>true</RunAlways>
<UseInterpreter>true</UseInterpreter>
<UseDeltaForODE>false</UseDeltaForODE>
<PreviewFullModel>false</PreviewFullModel>
<ModelTab></ModelTab>
<ModelTabTitle><![CDATA[]]></ModelTabTitle>
<ModelName><![CDATA[]]></ModelName>
<CSSFile></CSSFile>
<HTMLHead><![CDATA[]]></HTMLHead>
<SaveInXMLFormat>true</SaveInXMLFormat>
<IncludeSource>true</IncludeSource>
<IncludeLibrary>true</IncludeLibrary>
<UglifyJS>false</UglifyJS>
<Logo></Logo>
<Author><![CDATA[]]></Author>
<AuthorLogo></AuthorLogo>
<DetectedFiles><![CDATA[]]></DetectedFiles>
<AuxiliaryFiles><![CDATA[]]></AuxiliaryFiles>
</Osejs.Information>
<Osejs.Description>
</Osejs.Description>
<Osejs.Model>
<Osejs.Model.FramesPerSecond>20</Osejs.Model.FramesPerSecond>
<Osejs.Model.StepsPerDisplay>1</Osejs.Model.StepsPerDisplay>
<Osejs.Model.RealTimeVariable></Osejs.Model.RealTimeVariable>
<Osejs.Model.Autostart>true</Osejs.Model.Autostart>
<Osejs.Model.Variables>
<Osejs.Model.Variables.Page>
<Type>undefined</Type>
<Name>Var Table 1</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[scenarios]]></Name>
<Value><![CDATA[{}]]></Value>
<Type><![CDATA[Object]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[selectedScenario]]></Name>
<Value><![CDATA["Scenario A"]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[shapeX]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[shapeY]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[imagePiece]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[shapeIndex]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[pieces]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[selected]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[enabled]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[number]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[numberOfPieces]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
</Osejs.Model.Variables>
<Osejs.Model.Initialization>
<Osejs.Model.Initialization.Page>
<Type>undefined</Type>
<Name>scenarios</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
scenarios = {
    "Scenario A": {
        shape: "blue",
        scenario: "Estimate the area of this irregular shape",
        x: 3,
        y: 2,
        pieces: [
            {connected: [2]},
            {connected: -1},
            {connected: [0]},
            {connected: -1},
            {connected: -1},
            {connected: -1},
        ],
        area: 5
    },
    "Scenario B": {
        shape: "orange",
        scenario: "Estimate the area of this irregular shape",
        x: 3,
        y: 2,
        pieces: [
            {connected: [2, 3, 5]},
            {connected: -1},
            {connected: [0, 3, 5]},
            {connected: [0, 2, 4]},
            {connected: -1},
            {connected: [0, 2, 3]}
        ],
        area: 4
    },
    "Scenario C": {
        shape: "heart",
        scenario: "Estimate the area of this heart",
        x: 4,
        y: 3,
        pieces: [
            {connected: [8]},
            {connected: -1},
            {connected: -1},
            {connected: [11]},
            {connected: [9]},
            {connected: -1},
            {connected: -1},
            {connected: [10]},
            {connected: [0]},
            {connected: [4]},
            {connected: [7]},
            {connected: [3]},
        ],
        area: 8
    },
}
]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
<Osejs.Model.Initialization.Page>
<Type>CODE_EDITOR</Type>
<Name>init</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
initShape();
]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
</Osejs.Model.Initialization>
<Osejs.Model.Evolution>
</Osejs.Model.Evolution>
<Osejs.Model.Constraints>
</Osejs.Model.Constraints>
<Osejs.Model.Library>
<Osejs.Model.Library.Page>
<Type>undefined</Type>
<Name>initShape</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function initShape() {
    shapeX = [];
    shapeY = [];
    imagePiece = [];
    pieces = [];
    selected = [];
    enabled = [];
    number = [];
    numberOfPieces = 0;
    shapeIndex = -1
    
    let numOfPieces = scenarios[selectedScenario].pieces.length;
    let rows = scenarios[selectedScenario].y;
    let columns = scenarios[selectedScenario].x;

    let margin = 3.2;
    let graphWidth = 20;
    let graphHeight = 20;
    let index = 1;

    let totalSpacingX = (columns - 1) * margin;
    let totalSpacingY = (rows - 1) * margin;

    let startX = (graphWidth - totalSpacingX) / 2;
    let startY = (graphHeight - totalSpacingY) / 2;

    for (let row = rows - 1; row >= 0; row--) {
        for (let col = 0; col < columns; col++) {
            let x = startX + col * margin;
            let y = startY + row * margin;

            shapeX.push(x);
            shapeY.push(y);
            pieces.push("rgba(0,0,0,0)");
            selected.push(0);
            enabled.push("ENABLED_NO_MOVE");
            number.push("");
            imagePiece.push(`./${scenarios[selectedScenario].shape}/${scenarios[selectedScenario].shape}-${index}.png`);
            
            index += 1;
        }
    }
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>onClick</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function onClick(shapeIndex) {
    const selectedIndex = selected.findIndex(value => value === 1);
    const isSelected = selected.includes(1);
    const shapePiece = scenarios[selectedScenario].pieces[shapeIndex];

    if (selectedIndex === shapeIndex) {
        selected[shapeIndex] = 0;
        console.log('1');
        return;
    }

    if (!isSelected && shapePiece.connected === -1) {
        numberOfPieces += 1;
        pieces[shapeIndex] = "rgba(3, 255, 0, 0.91)";
        enabled[shapeIndex] = "ENABLED_NONE";
        number[shapeIndex] = numberOfPieces;
        console.log('2');
        return;
    }

    if (isSelected) {
        selected.fill(0);

        if (shapePiece.connected === -1) {
            alert("Try matching a closer estimation to one block");
            return;
        }

        if (shapePiece.connected.includes(selectedIndex)) {
            numberOfPieces += 1;
            pieces[shapeIndex] = "rgba(3, 255, 0, 0.91)";
            enabled[shapeIndex] = "ENABLED_NONE";
            number[shapeIndex] = numberOfPieces;
            pieces[selectedIndex] = "rgba(3, 255, 0, 0.91)";
            enabled[selectedIndex] = "ENABLED_NONE";
            number[selectedIndex] = numberOfPieces;
        } else {
            alert("Try matching a closer estimation to one block");
        }
        return;
    }

    selected[shapeIndex] = 1;
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>check</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function check () {
    if (scenarios[selectedScenario].area === numberOfPieces) {
        alert("You did it!");
        reset();
    } else {
        alert("Incorrect! Try again!");
        reset();
    }
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>reset</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function reset() {
    initShape();
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
</Osejs.Model.Library>
<Osejs.Model.Elements>
</Osejs.Model.Elements>
</Osejs.Model>
<Osejs.HtmlView>
<Osejs.HtmlView.Page>
<Type>HTML_VIEW_EDITOR</Type>
<Name>HtmlView</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<SizeOption>0</SizeOption>
<X>0</X>
<Y>0</Y>
<Width>800</Width>
<Height>600</Height>
<KeepHidden>true</KeepHidden>
<RootProperties>
</RootProperties>
<Tree>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[wrapper]]></Name>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[firstRow]]></Name>
<Parent><![CDATA[wrapper]]></Parent>
<Property name="CSS"><![CDATA["{ margin-bottom: 10px }"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[currentScenario]]></Name>
<Parent><![CDATA[firstRow]]></Parent>
<Property name="Text"><![CDATA[scenarios[selectedScenario].scenario]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[secondRow]]></Name>
<Parent><![CDATA[wrapper]]></Parent>
<Property name="CSS"><![CDATA["{ margin-bottom: 10px }"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ComboBox</Type>
<Name><![CDATA[selectScenario]]></Name>
<Parent><![CDATA[secondRow]]></Parent>
<Property name="CSS"><![CDATA["{ margin-right: 10px }"]]></Property>
<Property name="Options"><![CDATA[["Scenario A", "Scenario B", "Scenario C"]]]></Property>
<Property name="OnChange"><![CDATA[var opts = _view.selectScenario.getProperty("SelectedOptions");  
selectedScenario = (opts.length > 0)? opts[0]:"";
initShape();]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Button</Type>
<Name><![CDATA[check]]></Name>
<Parent><![CDATA[secondRow]]></Parent>
<Property name="Text"><![CDATA["check"]]></Property>
<Property name="CSS"><![CDATA["{ margin-right: 10px }"]]></Property>
<Property name="OnPress"><![CDATA[check()]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Button</Type>
<Name><![CDATA[reset]]></Name>
<Parent><![CDATA[secondRow]]></Parent>
<Property name="Text"><![CDATA["reset"]]></Property>
<Property name="OnPress"><![CDATA[reset()]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.PlottingPanel</Type>
<Name><![CDATA[plottingPanel]]></Name>
<Parent><![CDATA[wrapper]]></Parent>
<Property name="AutoScaleX"><![CDATA[false]]></Property>
<Property name="AutoScaleY"><![CDATA[false]]></Property>
<Property name="MinimumX"><![CDATA[0]]></Property>
<Property name="MinimumY"><![CDATA[0]]></Property>
<Property name="MaximumX"><![CDATA[20]]></Property>
<Property name="MaximumY"><![CDATA[20]]></Property>
<Property name="Enabled"><![CDATA[true]]></Property>
<Property name="Width"><![CDATA["600px"]]></Property>
<Property name="Height"><![CDATA["600px"]]></Property>
<Property name="Gutters"><![CDATA[[0,0,0,0]]]></Property>
<Property name="OnPress"><![CDATA[selected = selected.map(() => 0)]]></Property>
<Property name="TLMessage"><![CDATA[`Number of squares estimated: ${numberOfPieces}`]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ImageSet2D</Type>
<Name><![CDATA[shapeSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="NumberOfElements"><![CDATA[scenarios[selectedScenario].pieces.length]]></Property>
<Property name="X"><![CDATA[shapeX]]></Property>
<Property name="Y"><![CDATA[shapeY]]></Property>
<Property name="SizeX"><![CDATA[3]]></Property>
<Property name="SizeY"><![CDATA[3]]></Property>
<Property name="ImageUrl"><![CDATA[imagePiece]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ShapeSet2D</Type>
<Name><![CDATA[shapeCoverSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="NumberOfElements"><![CDATA[scenarios[selectedScenario].pieces.length]]></Property>
<Property name="X"><![CDATA[shapeX]]></Property>
<Property name="Y"><![CDATA[shapeY]]></Property>
<Property name="SizeX"><![CDATA[3]]></Property>
<Property name="SizeY"><![CDATA[3]]></Property>
<Property name="ShapeType"><![CDATA["RECTANGLE"]]></Property>
<Property name="EnabledPosition"><![CDATA[enabled]]></Property>
<Property name="Sensitivity"><![CDATA[0]]></Property>
<Property name="ElementInteracted"><![CDATA[shapeIndex]]></Property>
<Property name="OnPress"><![CDATA[onClick(shapeIndex)]]></Property>
<Property name="FillColor"><![CDATA[pieces]]></Property>
<Property name="LineWidth"><![CDATA[selected]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.TextSet2D</Type>
<Name><![CDATA[numberSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="Text"><![CDATA[number]]></Property>
<Property name="NumberOfElements"><![CDATA[scenarios[selectedScenario].pieces.length]]></Property>
<Property name="X"><![CDATA[shapeX]]></Property>
<Property name="Y"><![CDATA[shapeY]]></Property>
</HtmlView.Element>
</Tree>
</Content>
</Osejs.HtmlView.Page>
</Osejs.HtmlView>
</Osejs>