<?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 Fractions xAPI v5]]></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[<style type="text/css">
.metadata { display: none; }
</style>
<script 
async="true" src="https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-S9EWRY1CPJ');
</script>]]></HTMLHead>
<SaveInXMLFormat>true</SaveInXMLFormat>
<IncludeSource>true</IncludeSource>
<IncludeLibrary>true</IncludeLibrary>
<UglifyJS>false</UglifyJS>
<Logo>./Screenshot2025-09-12093229.png</Logo>
<Author><![CDATA[kangRui;meiYoke;looKang]]></Author>
<AuthorLogo>;;</AuthorLogo>
<DetectedFiles><![CDATA[./Screenshot2025-09-12093229.png]]></DetectedFiles>
<AuxiliaryFiles><![CDATA[;./lib/xapiwrapper.min.js]]></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>initVar</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["Demonstration"]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[pastAttemptsByScenario]]></Name>
<Value><![CDATA[{}]]></Value>
<Type><![CDATA[Object]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[colors]]></Name>
<Value><![CDATA[["red", "green", "blue", "yellow"]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[colorLine]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[selectedColor]]></Name>
<Value><![CDATA[""]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[colorX]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[colorY]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[colorIndex]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[gridX]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[Object]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[gridY]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[Object]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[gridIndex]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[gridColors]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[gridNumbers]]></Name>
<Value><![CDATA[2]]></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.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>xApi</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[scenarioStartTime]]></Name>
<Value><![CDATA[""]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[score]]></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 = {
    "Demonstration": {
        text: "1/2 + 1/2",
        fractions: [
            {
                fraction: 1/2
            },
            {
                fraction: 1/2
            },
        ],
    },
    "Task A": {
        text: "1/3 + 4/6",
        fractions: [
            {
                fraction: 1/3
            },
            {
                fraction: 4/6
            },
        ],
    },
    "Task B": {
        text: "1/4 + 6/8",
        fractions: [
            {
                fraction: 1/4
            },
            {
                fraction: 6/8
            },
        ],
    },
    "Task C": {
        text: "1/3 + 3/9 + 2/6",
        fractions: [
            {
                fraction: 1/3
            },
            {
                fraction: 3/9
            },
            {
                fraction: 2/6
            },
        ],
    },
    "Task D": {
        text: "1/5 + 1/2 + 3/10",
        fractions: [
            {
                fraction: 1/5
            },
            {
                fraction: 1/2
            },
            {
                fraction: 3/10
            },
        ],
    },
}

]]></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[
initGrids();
initColor();
]]></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>initColors</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function initColor() {
    colorX = [];
    colorY = [];
    selectedColor = "";
    colorIndex = -1;
    colorLine = [];
    colorIndex = -1;
    
    const step = 2;
    const count = scenarios[selectedScenario].fractions.length;
    const halfSpan = (count - 1) / 2;

    for (let i = 0; i < count; i++) {
        colorX.push(2);
        const offset = (i - halfSpan) * step;
        colorY.push(14 + offset);
    }
    colorLine = Array.from({length: scenarios[selectedScenario].fractions.length}, () => "1");
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>initGrids</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function initGrids() {
    gridX = [];
    gridY = [];
    gridColors = [];
    
    gridColors = Array.from({length: gridNumbers}, () => "rgba(0,0,0,0)");
    
    const step = 2;
    const count = gridNumbers;
    
    const halfSpan = (count - 1) / 2;

    for (let i = 0; i < count; i++) {
        gridY.push(7);
        const offset = (i - halfSpan) * step;
        gridX.push(10 + offset);
    }
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>onClickColor</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function onClickColor(colorIndex) {
    if (!scenarioStartTime){
        scenarioStartTime= new Date();
        console.log(`Timer started for ${selectedScenario} at ${scenarioStartTime}`);
    }
    if (selectedColor === colors[colorIndex]) {
        selectedColor = "";
        colorLine[colorIndex] = 1;
    } else if (!selectedColor) {
        selectedColor = colors[colorIndex];
        colorLine[colorIndex] = 4;
    } else {
        selectedColor = colors[colorIndex];
        colorLine = Array.from({length: scenarios[selectedScenario].fractions.length}, () => "1");
        colorLine[colorIndex] = 4;
    }
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>onClickGrid</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function onClickGrid(gridIndex) {
   if (selectedColor){
        gridColors[gridIndex] = selectedColor;
   }
}
]]></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() {
    try {
        const { fractions } = scenarios[selectedScenario];
        const colorsToCheck = colors.slice(0, fractions.length);
        const grids = gridNumbers;
    
        const colorCounts = {};
        for (const color of gridColors) {
            colorCounts[color] = (colorCounts[color] || 0) + 1;
        }
    
        const actualCounts = colorsToCheck.map(color => colorCounts[color] || 0);
    
        const expectedCounts = fractions.map(f => Math.round(f.fraction * grids)).sort((a, b) => a - b);
        const sortedActualCounts = actualCounts.sort((a, b) => a - b);
        
        if (!pastAttemptsByScenario[selectedScenario]) {
            pastAttemptsByScenario[selectedScenario] = {
                attemptsTakenToComplete: 0,
                completed: false,
                log: [],
                timeTakenToComplete: "Did not complete"
            };
        }
          
        if (!pastAttemptsByScenario[selectedScenario].completed) {
            pastAttemptsByScenario[selectedScenario].attemptsTakenToComplete += 1;
        }
        
        pastAttemptsByScenario[selectedScenario].log.push({
            attempt: gridColors,
            timeStamp: `${Math.floor((new Date() - scenarioStartTime) / 1000 / 60)}m ${Math.floor((new Date() - scenarioStartTime) / 1000 % 60)}s`,
            correct: false
        })
    
        for (let i = 0; i < expectedCounts.length; i++) {
            if (expectedCounts[i] !== sortedActualCounts[i]) {
                alert("There is an error! Color the bar graph again!")
                return;
            }
        }
        
        if (!pastAttemptsByScenario[selectedScenario].completed) {
                pastAttemptsByScenario[selectedScenario].completed = true;
                pastAttemptsByScenario[selectedScenario].timeTakenToComplete = pastAttemptsByScenario[selectedScenario].log[pastAttemptsByScenario[selectedScenario].log.length-1].timeStamp
                score += 1;
        }
            
        pastAttemptsByScenario[selectedScenario].log[pastAttemptsByScenario[selectedScenario].log.length-1].correct = true;
    
        alert("Congrats! You did it, now try a different approach or a different task!");
        return;
    } finally {
        let attemptLogHtml = '';
        pastAttemptsByScenario[selectedScenario].log.forEach((log, index) => {
            const attemptDisplay = log.attempt
                .map(color => color === "rgba(0,0,0,0)" ? "empty" : color)
    
            attemptLogHtml += 'Attempt ' + (index + 1) + 
                ':<br>Grids Arranged: ' + attemptDisplay + 
                '<br>Fractions were arranged ' + 
                (log.correct ? 'correctly' : 'incorrectly') + 
                '<br>Time Stamp: ' + log.timeStamp + '<br><br>';
        });
    
        
        const feedback = 
          '<div>' +
            '<div>' +
              'Total Attempts Taken To Complete: ' + pastAttemptsByScenario[selectedScenario].attemptsTakenToComplete + '<br>' +
              'Managed To Complete: ' + pastAttemptsByScenario[selectedScenario].completed + '<br>' +
              'Total Time Taken to Complete: ' + pastAttemptsByScenario[selectedScenario].timeTakenToComplete + '<br><br>' +
              'Attempt Log:<br><br>' +
              attemptLogHtml +
            '</div>' +
          '</div>';
            console.log(feedback)
            console.log(score)
            storeState({score, feedback});
    }
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>xApi</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
// Using a namespace to prevent global variable clashes
const XAPIUtils = {
  parameters: null, // Parameters store
  getParameters: function () {
    if (!this.parameters) { // Ensure fetch once
      var urlParams = new URLSearchParams(window.location.search);
      var endpoint = urlParams.get('endpoint');
      var auth = urlParams.get('auth');
      var agent = JSON.parse(urlParams.get('agent'));
      var stateId = urlParams.get('stateId');
      var activityId = urlParams.get('activityId');

      // document.querySelector("#cookieId").innerText = "Cookie: " + auth;
      // document.querySelector("#questionId").innerText = "Question ID: " + activityId;
      // document.querySelector("#userId").innerText = "User ID: " + stateId;

      ADL.XAPIWrapper.changeConfig({
        "endpoint": endpoint + "/",
        "auth": `Basic ${auth}`
      });
      this.parameters = {
        agent,
        stateId,
        activityId
      };
    }

    return this.parameters;
  }
};

// Immediately invoke getParameters on page load
document.addEventListener("DOMContentLoaded", function () {
  XAPIUtils.getParameters(); // Fetch parameters once on load
});

function storeState(stateValue) { // Removed async
  try {
    const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store
    const activityId = parameters.activityId;
    const stateId = parameters.stateId;
    const agent = parameters.agent;
    const registration = null;

    ADL.XAPIWrapper.sendState(activityId, agent, stateId, registration, stateValue);
    console.log("Submitted: " + JSON.stringify(stateValue, null, 2));
  } catch (err) {
    console.error("An error has occurred!", err);
  }
}

function getState() {
  try {
    const parameters = XAPIUtils.getParameters(); // Retrieve parameters from store
    const activityId = parameters.activityId;
    const stateId = parameters.stateId;
    const agent = parameters.agent;

    const result = ADL.XAPIWrapper.getState(activityId, agent, stateId);
    document.querySelector("#getState").innerText = "First Load State: " + JSON.stringify(result, null, 2);
    return result;
  } catch (err) {
    console.error("An error has occurred!", err);
    document.querySelector("#getState").innerText = "Error has occurred: " + err;
  }
}

]]></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[scenarioDescription]]></Name>
<Parent><![CDATA[firstRow]]></Parent>
<Property name="Text"><![CDATA["Color the fractions seen below in as many ways you can on the bar graph."]]></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="Options"><![CDATA[["Demonstration", "Task A", "Task B", "Task C", "Task D"]]]></Property>
<Property name="OnChange"><![CDATA[var opts = _view.selectScenario.getProperty("SelectedOptions");  
selectedScenario = (opts.length > 0)? opts[0]:"";
scenarioStartTime = "";
initColor();
initGrids();]]></Property>
<Property name="CSS"><![CDATA["{ margin-right: 10px }"]]></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();
initColor();
initGrids();]]></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="CSS"><![CDATA["{ margin-right: 10px }"]]></Property>
<Property name="OnPress"><![CDATA[initColor();
initGrids();]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ComboBox</Type>
<Name><![CDATA[grids]]></Name>
<Parent><![CDATA[secondRow]]></Parent>
<Property name="Options"><![CDATA[[2,3,4,5,6,7,8,9,10,11,12]]]></Property>
<Property name="OnChange"><![CDATA[var opts = _view.grids.getProperty("SelectedOptions");  
gridNumbers = (opts.length > 0)? opts[0]:"";
initColor();
initGrids();]]></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="Width"><![CDATA["80%"]]></Property>
<Property name="Height"><![CDATA["70vh"]]></Property>
<Property name="Gutters"><![CDATA[[0,0,0,0]]]></Property>
<Property name="Enabled"><![CDATA[true]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ShapeSet2D</Type>
<Name><![CDATA[colorSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="X"><![CDATA[colorX]]></Property>
<Property name="Y"><![CDATA[colorY]]></Property>
<Property name="Visibility"><![CDATA[true]]></Property>
<Property name="Sensitivity"><![CDATA[0]]></Property>
<Property name="EnabledPosition"><![CDATA["ENABLED_NO_MOVE"]]></Property>
<Property name="ShapeType"><![CDATA["RECTANGLE"]]></Property>
<Property name="NumberOfElements"><![CDATA[scenarios[selectedScenario].fractions.length]]></Property>
<Property name="FillColor"><![CDATA[colors]]></Property>
<Property name="ElementInteracted"><![CDATA[colorIndex]]></Property>
<Property name="SizeY"><![CDATA[2]]></Property>
<Property name="SizeX"><![CDATA[2]]></Property>
<Property name="OnPress"><![CDATA[onClickColor(colorIndex)]]></Property>
<Property name="LineWidth"><![CDATA[colorLine]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ShapeSet2D</Type>
<Name><![CDATA[gridSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="X"><![CDATA[gridX]]></Property>
<Property name="Y"><![CDATA[gridY]]></Property>
<Property name="SizeX"><![CDATA[2]]></Property>
<Property name="SizeY"><![CDATA[2]]></Property>
<Property name="NumberOfElements"><![CDATA[gridNumbers]]></Property>
<Property name="Visibility"><![CDATA[true]]></Property>
<Property name="ElementInteracted"><![CDATA[gridIndex]]></Property>
<Property name="EnabledPosition"><![CDATA["ENABLED_NO_MOVE"]]></Property>
<Property name="Sensitivity"><![CDATA[0]]></Property>
<Property name="ShapeType"><![CDATA["RECTANGLE"]]></Property>
<Property name="FillColor"><![CDATA[gridColors]]></Property>
<Property name="OnPress"><![CDATA[onClickGrid(gridIndex)]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Text2D</Type>
<Name><![CDATA[fractionSet]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="X"><![CDATA[10]]></Property>
<Property name="Y"><![CDATA[14.5]]></Property>
<Property name="Text"><![CDATA[scenarios[selectedScenario].text]]></Property>
<Property name="FontSize"><![CDATA[30]]></Property>
</HtmlView.Element>
</Tree>
</Content>
</Osejs.HtmlView.Page>
</Osejs.HtmlView>
</Osejs>