{
  "information": {
    "Title": "Blending_Segmenting_Board",
    "Author": [
      "sithu",
      "lookang",
      "eve",
      "huaylee"
    ],
    "AuthorLogo": [
      "",
      "",
      "",
      ""
    ],
    "Password": "unused",
    "Keywords": "",
    "Abstract": "",
    "Copyright": "",
    "Level": "",
    "Language": "",
    "Logo": [
      "./images/screenshot.png"
    ],
    "RunAlways": "true",
    "ModelTab": "",
    "ModelTabTitle": "",
    "ModelName": "",
    "FixedNavigationBar": "false",
    "CSSFile": "",
    "DetectedFiles": [
      "./images/screenshot.png"
    ],
    "AuxiliaryFiles": [
      "./images/screenshot.png",
      "./sound/"
    ],
    "HTMLHead": "<script \nasync=\"true\" src=\"https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ\"></script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-S9EWRY1CPJ');\n</script>",
    "SaveInXMLFormat": "false",
    "IncludeSource": "true",
    "IncludeLibrary": "true",
    "UglifyJS": "false",
    "PreviewFullModel": "false",
    "UseInterpreter": "true",
    "UseDeltaForODE": "false"
  },
  "description": {
    "pages": []
  },
  "model": {
    "variables": {
      "pages": [
        {
          "Name": "Var Table 1",
          "Active": "true",
          "Internal": "false",
          "Type": "undefined",
          "PageComment": "",
          "Variables": [
            {
              "Name": "canvasWidth",
              "Value": "\"100%\"",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "canvasHeight",
              "Value": "\"90vh\"",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelX",
              "Value": "[]",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelY",
              "Value": "[]",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantX",
              "Value": "[]",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantY",
              "Value": "[]",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowels",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonants",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "margin",
              "Value": "0.005",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "tileWidth",
              "Value": "0.2",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "tileHeight",
              "Value": "0.15",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "numVowels",
              "Value": "0",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "numConsonants",
              "Value": "0",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelRows",
              "Value": "3",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelColumns",
              "Value": "5",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelStartX",
              "Value": "-0.9",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelStartY",
              "Value": "0.5",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantRows",
              "Value": "3",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantColumns",
              "Value": "5",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantStartX",
              "Value": "0.0",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantStartY",
              "Value": "0.5",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "Var Table 2",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "vowelsText",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantsText",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelsTextColor",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantsTextColor",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelsBgColor",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantsBgColor",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "vowelInteracted",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantInteracted",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementBoxX",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementBoxY",
              "Value": "0.8",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementBoxWidth",
              "Value": "0.2",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementBoxHeight",
              "Value": "0.2",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "numPlacementBoxes",
              "Value": "6",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "selectedTileIndex",
              "Value": "",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "selectedTileType",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementCardBgColor",
              "Value": "[\"white\",\"white\",\"white\",\"white\",\"white\",\"white\"]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementCardTextColor",
              "Value": "[\"white\",\"white\",\"white\",\"white\",\"white\",\"white\"]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementCardText",
              "Value": "[\"\",\"\",\"\",\"\",\"\",\"\"]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementCardInteracted",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "restartX",
              "Value": "0",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "restartY",
              "Value": "0.8",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "placementCards",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "Var Table 3",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "vowelsBordered",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "consonantsBordered",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "previousSelectedTileIndex",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "previousSelectedTileType",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadPanelX",
              "Value": "0.7",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadPanelYStart",
              "Value": "0.8",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadPanelYStep",
              "Value": "0.1",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "blendBtnX",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "blendBtnY",
              "Value": "placementBoxY",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet1Y",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet2Y",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet1X",
              "Value": "0.7",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet2X",
              "Value": "0.91",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSetStartY",
              "Value": "0.43",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "numOfWordsReadByColumn",
              "Value": "15",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "Var Table 5",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "wordsReadSet1Text",
              "Value": "[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet2Text",
              "Value": "[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet1Info",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet2Info",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet1Interacted",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "wordsReadSet2Interacted",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "lookang",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "blendX",
              "Value": "-0.5",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "blendY",
              "Value": "0.65",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "fontSize",
              "Value": "12",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "font",
              "Value": "font = \"normal normal \" + fontSize + \"px\";",
              "Type": "string",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "fontSmall",
              "Value": "font = \"normal normal \" + fontSize/2 + \"px\";",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "t",
              "Value": "0",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "dt",
              "Value": "0.05",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "blendvX",
              "Value": "1",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "lastCardIndex",
              "Value": "-1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        }
      ]
    },
    "initialization": {
      "pages": [
        {
          "Name": "varInit",
          "Active": "true",
          "Internal": "false",
          "Type": "undefined",
          "Comment": "",
          "Code": "// varInit\n \nvowels = [\n    { text: 'a', backgroundColor: 'yellow', textColor: 'red' },\n    { text: 'e', backgroundColor: 'yellow', textColor: 'red' },\n    { text: 'i', backgroundColor: 'yellow', textColor: 'red' },\n    { text: 'o', backgroundColor: 'yellow', textColor: 'red' },\n    { text: 'u', backgroundColor: 'yellow', textColor: 'red' },\n    { text: 'y', backgroundColor: 'yellow', textColor: 'red' }, //lookang\n\n    // R-controlled vowels\n    { text: 'ar', backgroundColor: 'orange', textColor: 'red' },\n    { text: 'er', backgroundColor: 'orange', textColor: 'red' },\n    { text: 'ir', backgroundColor: 'orange', textColor: 'red' },\n    { text: 'or', backgroundColor: 'orange', textColor: 'red' },\n    { text: 'ur', backgroundColor: 'orange', textColor: 'red' },\n\n    // Vowel teams and diphthongs\n    { text: 'ai', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ay', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ea', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ee', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ie', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'igh', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'oa', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'oo', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ow', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'ou', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'oi', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'oy', backgroundColor: 'pink', textColor: 'red' },\n    { text: 'al', backgroundColor: 'pink', textColor: 'red' } // lookang\n];\n\n// Consonants array\nconsonants = [\n    { text: 'b', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'c', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'd', backgroundColor: 'lightblue', textColor: 'black', sound: './sound/d.m4a' },\n    { text: 'f', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'g', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'h', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'j', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'k', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'l', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'm', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'n', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'p', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'qu', backgroundColor: 'lightblue', textColor: 'black' }, //lookang\n    { text: 'r', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 's', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 't', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'v', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'w', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'x', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'y', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'z', backgroundColor: 'lightblue', textColor: 'black' },\n\n    // Consonant digraphs\n    { text: 'ff', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'll', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'ss', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'zz', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'ch', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'sh', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'th', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'wh', backgroundColor: 'lightblue', textColor: 'black' },\n   // { text: 'ph', backgroundColor: 'lightblue', textColor: 'black' }, //lookang 20240920\n    { text: 'tch', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'dge', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'ck', backgroundColor: 'lightblue', textColor: 'black' },\n    { text: 'ng', backgroundColor: 'lightblue', textColor: 'black' },\n    //{ text: 'nk', backgroundColor: 'lightblue', textColor: 'black' }  //lookang 20240920\n];\n\n// Extract text for TextSet2D\nvowelsText = vowels.map(v => v.text);          // Extract vowel texts\nconsonantsText = consonants.map(c => c.text);  // Extract consonant texts\n\nvowelsBgColor = vowels.map(v => v.backgroundColor);\nconsonantsBgColor = consonants.map(c => c.backgroundColor);\n\nvowelsTextColor = vowels.map(v => v.textColor);\nconsonantsTextColor = consonants.map(c => c.textColor);\n\nnumVowels = vowels.length;\nnumConsonants = consonants.length;\n\n \nfor (let i = 0; i < numVowels; i++) {\n    vowelsBordered[i] = 0;\n}\n\nfor (let i = 0; i < numConsonants; i++) {\n    consonantsBordered[i] = 0;\n}\n\n\n"
        },
        {
          "Name": "positioning",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// positioning\n\nlet halfWidth = 1.0;\nlet maxColumns = Math.floor(halfWidth / (tileWidth + margin));\n\n// **Positioning vowels**\nlet vowelStartX = -0.88;  // Start vowels on the left side\n\n// **Positioning consonants**\nlet consonantStartX = -0.05;  // Start consonants in the right half\n\nfor (let i = 0; i < numVowels; i++) {\n    let row = Math.floor(i / maxColumns);  // Calculate the current row\n    let col = i % maxColumns;              // Calculate the current column\n    vowelX[i] = vowelStartX + col * (tileWidth + margin);  // X position for each vowel\n    vowelY[i] = vowelStartY - row * (tileHeight + margin);  // Move down a row if needed\n}\n\nfor (let i = 0; i < numConsonants; i++) {\n    let row = Math.floor(i / maxColumns);  // Calculate the current row\n    let col = i % maxColumns;              // Calculate the current column\n    consonantX[i] = consonantStartX + col * (tileWidth + margin);  // X position for each consonant\n    consonantY[i] = consonantStartY - row * (tileHeight + margin);  // Move down a row if needed\n}\n\nlet totalWidth = numPlacementBoxes * placementBoxWidth;  // Total width occupied by boxes\n\n// Center the placement boxes horizontally\nlet boxStartX = -(totalWidth / 2) + 0.1;\n\nrestartX = boxStartX - 0.2;\n\nfor (let i = 0; i < numPlacementBoxes; i++) {\n    placementBoxX.push(boxStartX + i * placementBoxWidth);  // Tight alignment, no gaps between boxes\n}\n\nblendBtnX = boxStartX + totalWidth + 0.05;\n\n\nfor (let i = 0; i < numOfWordsReadByColumn; i++) {\n    wordsReadSet1Y.push(wordsReadSetStartY - i * 0.09);\n}\n\nfor (let i = 0; i < numOfWordsReadByColumn; i++) {\n    wordsReadSet2Y.push(wordsReadSetStartY - i * 0.09);\n}"
        },
        {
          "Name": "font",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// font\nsetResponsiveFontSize()"
        },
        {
          "Name": "fontTL",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// fontTL\n\nif (_isMobile){\n  //do nothing\n  }\n  \n  else{\n    // copy this into the initialization\n// make the font bigger\n\n_view.letterTilePanel_2.getMessageDecoration(\"TL\").getFont().setFontSize(\"1vw\");\n_view.letterTilePanel_2.getMessageDecoration(\"TR\").getFont().setFontSize(\"1.5vw\");\n_view.letterTilePanel_2.getMessageDecoration(\"TR\").getFont().setFontFamily(\"'Comic Sans MS', 'Comic Sans', cursive\");\n\n_view.letterTilePanel_2.getMessageDecoration(\"BL\").getFont().setFontSize(\"1vw\");\n_view.letterTilePanel_2.getMessageDecoration(\"BR\").getFont().setFontSize(\"1vw\");\n\n_view.letterTilePanel_2.getMessageDecoration(\"TL\").getStyle().setFillColor(\"red\");\n    }"
        }
      ]
    },
    "evolution": {
      "information": {
        "FPS": "20",
        "SPD": "1",
        "RealTimeVariable": "",
        "Autoplay": "false"
      },
      "pages": [
        {
          "Name": "Evol Page 1",
          "Active": "true",
          "Internal": "false",
          "Type": "ODE_EDITOR",
          "Comment": "",
          "IndependentVariable": "t",
          "Increment": "dt",
          "Equations": [
            {
              "state": "blendX",
              "rate": "blendvX"
            },
            {
              "state": "",
              "rate": ""
            }
          ],
          "Method": "RungeKutta",
          "AbsoluteTolerance": "",
          "PreliminaryCode": {
            "Code": "// Preliminary code for ODE : Evol Page 1",
            "Comment": ""
          },
          "EventMaximumStep": "",
          "Events": {
            "pages": [
              {
                "Name": "Event 1",
                "Active": "true",
                "Internal": "false",
                "Type": "undefined",
                "Action": "// Action for Event 1\nblendvX = 0\n_pause()",
                "Comment": "",
                "EventType": "CROSSING_EVENT",
                "Iterations": "100",
                "Method": "BISECTION",
                "StopAtEvent": "true",
                "Tolerance": "1.0e-5",
                "ZeroCondition": "var blendXmax = Math.max(-0.5,lastCardIndex/5-0.5);\nconsole.log(blendXmax - blendX);\nreturn blendXmax - blendX ; // Condition for Event 1\n\n\n"
              }
            ]
          },
          "ZenoEffect": {
            "Code": "",
            "Comment": "",
            "StopAfterEffect": "true"
          },
          "AccelerationIndependentOfVelocity": "false",
          "ForceSynchronization": "false",
          "UseBestInterpolation": "false",
          "EstimateFirstStep": "false",
          "MemoryLength": "",
          "InternalStep": "",
          "MaximumStep": "",
          "MaximumNumberOfSteps": "10000",
          "RelativeTolerance": "",
          "Tolerance": "",
          "DelayList": "",
          "DelayMaximum": "",
          "DelayAddDiscont": "",
          "DelayInitialCondition": {
            "Comment": "",
            "Code": ""
          },
          "DirectIncidenceMatrix": "",
          "Discontinuities": {
            "pages": []
          },
          "ErrorHandling": {
            "pages": []
          }
        }
      ]
    },
    "fixed_relations": {
      "pages": []
    },
    "custom": {
      "pages": [
        {
          "Name": "onVowelClick",
          "Active": "true",
          "Internal": "false",
          "Type": "undefined",
          "Comment": "",
          "Code": "// Function to handle vowel clicks\nfunction onVowelClick(index) {\n    if (previousSelectedTileIndex !== null && previousSelectedTileType === \"vowel\") {\n        vowelsBordered[previousSelectedTileIndex] = 0;\n    } else if (previousSelectedTileIndex !== null && previousSelectedTileType === \"consonant\") {\n        consonantsBordered[previousSelectedTileIndex] = 0;\n    }\n    \n    selectedTileIndex = index;\n    selectedTileType = \"vowel\";  // Mark this as a vowel selection\n    vowelsBordered[index] = 1;\n    \n    previousSelectedTileIndex = index;\n    previousSelectedTileType = \"vowel\";\n}\n"
        },
        {
          "Name": "responsiveFont",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// responsiveFont\nfunction setResponsiveFontSize(percent) {\n    // Get the viewport dimensions\n    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;\n    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n    var percent = 0.05\n    // Calculate the font size based on viewport width or height\n    var fontSize = Math.min(viewportWidth * percent, viewportHeight * percent); // Adjust the multiplier as needed\n\n    // Set the font size\n    // Set the font size and font family (Comic Sans)\n    font = \"normal normal \" + fontSize + \"px 'Comic Sans MS', 'Comic Sans', cursive\";\n   fontSmall = \"normal normal \" + 0.75 * fontSize + \"px 'Comic Sans MS', 'Comic Sans', cursive\";\n\n    // Apply the font size to your elements\n    // For example, you can apply it to a specific element with a class\n    //document.getElementById(\"yourElementId\").style.font = font;\n}"
        },
        {
          "Name": "fullScreen",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// fullScreen\n/*jslint browser:true */\nfunction toggleFullScreen() {\n  try {\n    const doc = document.documentElement;\n    \n    // Check if any fullscreen element exists\n    const isFullScreen = document.fullscreenElement || \n                         document.mozFullScreenElement || \n                         document.webkitFullscreenElement || \n                         document.msFullscreenElement;\n\n    if (!isFullScreen) {\n      // Request full-screen mode based on the browser\n      if (doc.requestFullscreen) {\n        doc.requestFullscreen();\n      } else if (doc.msRequestFullscreen) {\n        doc.msRequestFullscreen();\n      } else if (doc.mozRequestFullScreen) {\n        doc.mozRequestFullScreen();\n      } else if (doc.webkitRequestFullscreen) {\n        doc.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); // Pass input permission for older WebKit\n      }\n    } else {\n      // Exit full-screen mode based on the browser\n      if (document.exitFullscreen) {\n        document.exitFullscreen();\n      } else if (document.msExitFullscreen) {\n        document.msExitFullscreen();\n      } else if (document.mozCancelFullScreen) {\n        document.mozCancelFullScreen();\n      } else if (document.webkitExitFullscreen) {\n        document.webkitExitFullscreen();\n      }\n    }\n  } catch (e) {\n    console.error(\"Error toggling full-screen mode:\", e);\n  }\n}\n\n// Handle screen orientation for mobile devices (optional)\nwindow.addEventListener(\"orientationchange\", () => {\n  if (screen.orientation && screen.orientation.lock) {\n    screen.orientation.lock('landscape').catch(err => console.warn('Failed to lock orientation:', err));\n  }\n});\n"
        },
        {
          "Name": "onConsonantClick",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Function to handle consonant clicks\nfunction onConsonantClick(index) {\n    if (previousSelectedTileIndex !== null && previousSelectedTileType === \"vowel\") {\n        vowelsBordered[previousSelectedTileIndex] = 0;\n    } else if (previousSelectedTileIndex !== null && previousSelectedTileType === \"consonant\") {\n        consonantsBordered[previousSelectedTileIndex] = 0;\n    }\n    \n    selectedTileIndex = index;\n    selectedTileType = \"consonant\";  // Mark this as a vowel selection\n    consonantsBordered[index] = 1;\n    \n    previousSelectedTileIndex = index;\n    previousSelectedTileType = \"consonant\";\n}"
        },
        {
          "Name": "onPlacementBoxClick",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// onPlacementBoxClick\nfunction onPlacementBoxClick(index) {\n    // Check if a tile card has been selected\n    if (selectedTileIndex !== null && selectedTileIndex !== undefined && selectedTileType !== null && selectedTileType !== undefined) {\n        \n        // Check if a vowel or consonant is selected\n        let selectedTile;\n        //let selectedTile.backgroundColor = \"white\" //lookang to fix bug if click without any selected vowels etc\n        if (selectedTileType === \"vowel\") {\n            selectedTile = vowels[selectedTileIndex];\n        } else if (selectedTileType === \"consonant\") {\n            selectedTile = consonants[selectedTileIndex];\n        }\n\n        // Place the selected tile into the clicked placement box\n        placementCardBgColor[index] = selectedTile.backgroundColor;\n        placementCardTextColor[index] = selectedTile.textColor;\n        placementCardText[index] = selectedTile.text;\n        \n        if (selectedTileIndex !== null && selectedTileType === \"vowel\") {\n        vowelsBordered[selectedTileIndex] = 0;\n        } else if (selectedTileIndex !== null && selectedTileType === \"consonant\") {\n        consonantsBordered[selectedTileIndex] = 0;\n        }\n        \n        placementCards[index] = {\n            tileIndex: selectedTileIndex,\n            tileType: selectedTileType\n        };\n\n        // Reset the selected tile after placing it in the box\n        selectedTileIndex = null;\n        selectedTileType = null;\n\n    } else {\n        placementCardBgColor[index] = \"white\";\n        placementCardTextColor[index] = \"white\";\n        placementCardText[index] = \"\";\n        \n        placementCards[index] = null;\n    }\n    lastCardIndex = findHighestNonNullIndex(placementCards);\n}"
        },
        {
          "Name": "onResetButtonClick",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// onRestartButtonClick\n\nfunction onResetButtonClick() {\n    // Clear all placement boxes\n    for (let i = 0; i < numPlacementBoxes; i++) {\n        placementCardBgColor[i] = \"white\";\n        placementCardTextColor[i] = \"white\";\n        placementCardText[i] = \"\";\n    }\n    placementCards = [];\n    lastCardIndex = -1;\n    \n    // move arrow back\n    blendX = -0.5 // start is -0.5 instead of 0\n    blendvX = 0\n    \n}"
        },
        {
          "Name": "speech",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// speech\n// copy this custom function\n// in iOS need to add speech to the play button as On iOS the API works but must be triggered by a user action callback, like a response to a tap event, to provide a better experience to users and avoid unexpected sounds out of your phone\nfunction speech (option) {\n\n\ntry { // allow code to run in Student Learning Space \nvar isCordova = (!!this.parent.cordova || !!window.cordova);\nif(isCordova) { // check it is running in Android or iOS\n       // parent.TTS.speak({text:option,locale:'zh-CN'});\n\tparent.TTS.speak({text:option,locale:'us-EN'});\n\t// parent.TTS.speak({text:option,locale:'en-US'});\n\t// parent.TTS.speak({text:option,locale:'id-ID'});\n} \n} \ncatch(e) {\n  var isCordova = false;\n  }\n  \n   var msg = new SpeechSynthesisUtterance(option);\n\n  //https://stackoverflow.com/questions/43983845/speechsynthesis-api-for-chinese-firefox\n  // Set the text.\n\t//msg.text = option; \n\t//https://forums.developer.apple.com/message/323564#323564\n\t// comment out the next 2 lines for english\n//msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Ting-Ting'; })[0];\n//msg.lang = 'zh-CH'; // need for android?\n//msg.lang = 'id-ID'; // need for android?\nmsg.lang = 'us-EN'; // need for android?\n\n//https://flaviocopes.com/speech-synthesis-api/\n//debug\n//console.log(`Voices #: ${speechSynthesis.getVoices().length}`)\n//speechSynthesis.getVoices().forEach(voice => {\n// console.log(voice.name, voice.lang)\n//})\n//debug\n\n// Queue this utterance.\nwindow.speechSynthesis.speak(msg);\n\n\n\n \n\n}"
        },
        {
          "Name": "onBlendClick",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function onBlendClick() {\r\n    \r\n    let isAdded = false;\r\n    let word = placementCardText.join(\"\");\r\n    \r\n    if (!word) return;\r\n    \r\n    \r\n    for (let i = 0; i < wordsReadSet1Text.length; i++) {\r\n        if (wordsReadSet1Text[i] === word) {\r\n            isAdded = true;\r\n            break;\r\n        }\r\n        else if (!wordsReadSet1Text[i]) {\r\n            wordsReadSet1Text[i] = word;\r\n            isAdded = true;\r\n            wordsReadSet1Info.push([...placementCards]);\r\n            console.log(wordsReadSet1Info);\r\n            break;\r\n        }\r\n    }\r\n    \r\n    console.log(wordsReadSet1Text.join());\r\n\r\n    \r\n    if (!isAdded) {\r\n        for (let i = 0; i < wordsReadSet1Text.length; i++) {\r\n        if (wordsReadSet2Text[i] === word) {\r\n            isAdded = true;\r\n            break;\r\n        } else if (!wordsReadSet2Text[i]) {\r\n            wordsReadSet2Text[i] = word;\r\n            isAdded = true;\r\n            wordsReadSet2Info.push([...placementCards]);\r\n            console.log(wordsReadSet2Info);\r\n            break;\r\n        }\r\n    }\r\n    }\r\n}\r\n"
        },
        {
          "Name": "onWordReadClick",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// onWordReadClick\n\nfunction onWordReadClick(newPlacementCards) {\n    onResetButtonClick();\n    let tileInfo;\n    for (let i = 0; i < newPlacementCards.length; i++) {\n        if (!newPlacementCards[i]) continue;\n        if (newPlacementCards[i].tileType === \"vowel\") {\n            tileInfo = vowels[newPlacementCards[i].tileIndex];\n        } else if (newPlacementCards[i].tileType === \"consonant\") {\n            tileInfo = consonants[newPlacementCards[i].tileIndex];\n        }\n        placementCardBgColor[i] = tileInfo.backgroundColor;\n        placementCardTextColor[i] = tileInfo.textColor;\n        placementCardText[i] = tileInfo.text;\n        \n        placementCards = [...newPlacementCards];\n        lastCardIndex = findHighestNonNullIndex(placementCards);\n    }\n}"
        },
        {
          "Name": "findHighestNonNullIndex",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// findHighestNonNullIndex\nfunction findHighestNonNullIndex(arr) {\n    // Start from the end of the array and move backwards\n    for (let i = arr.length - 1; i >= 0; i--) {\n        if (arr[i] !== null) {\n            return i; // Return the index as soon as a non-null element is found\n        }\n    }\n    return -1; // Return -1 if no non-null element is found\n}"
        }
      ]
    },
    "elements": {
      "list": []
    }
  },
  "view": {
    "Tree": [
      {
        "Name": "singlePlotPanel",
        "Type": "Panel",
        "Expanded": "true",
        "Children": [
          {
            "Name": "labelPanel",
            "Type": "Panel",
            "Expanded": "true",
            "Properties": [
              {
                "name": "Display",
                "value": "\"inline-flex\""
              },
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "CSS",
                "value": "{ \"justify-content\": \"flex-end\"}"
              }
            ],
            "Children": [
              {
                "Name": "sound",
                "Type": "CheckBox",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"sound\""
                  },
                  {
                    "name": "Font",
                    "value": "font"
                  }
                ]
              },
              {
                "Name": "topLabel",
                "Type": "Label",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Blending/Segmenting Board\""
                  },
                  {
                    "name": "Font",
                    "value": "font"
                  }
                ]
              },
              {
                "Name": "blendbutton_2",
                "Type": "Button",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Blend \u2192\""
                  },
                  {
                    "name": "OnPress",
                    "value": "onBlendClick();"
                  },
                  {
                    "name": "Font",
                    "value": "font"
                  },
                  {
                    "name": "Width",
                    "value": "\"20%\""
                  },
                  {
                    "name": "OnRelease",
                    "value": "//if (lastCardIndex !== -1 ||lastCardIndex !== 0) { \nif (lastCardIndex >0.5 ) { //0.5 is chosen as -1,0 dont move\nif (blendX !== -0.5) blendX = -0.5;\nblendvX = 0.5\n_play()\n}"
                  }
                ]
              },
              {
                "Name": "resetbutton_2_2",
                "Type": "Button",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Reset \u21ba\""
                  },
                  {
                    "name": "OnPress",
                    "value": "//_reset();\nonResetButtonClick();"
                  },
                  {
                    "name": "Font",
                    "value": "font"
                  },
                  {
                    "name": "Width",
                    "value": "\"20%\""
                  }
                ]
              }
            ]
          },
          {
            "Name": "wrappedPanel",
            "Type": "WrappedPanel",
            "Expanded": "true",
            "Properties": [
              {
                "name": "CSS",
                "value": "{ \"display\":\"block\"}"
              }
            ],
            "Children": [
              {
                "Name": "letterTilePanel_2",
                "Type": "PlottingPanel",
                "Expanded": "true",
                "Properties": [
                  {
                    "name": "Height",
                    "value": "canvasHeight"
                  },
                  {
                    "name": "Width",
                    "value": "canvasWidth"
                  },
                  {
                    "name": "Enabled",
                    "value": "true"
                  },
                  {
                    "name": "EnabledDragging",
                    "value": "\"ENABLED_NO_MOVE\""
                  },
                  {
                    "name": "Gutters",
                    "value": "[0,0,0,0]"
                  },
                  {
                    "name": "TRMessage",
                    "value": "\"Click on the black arrow to blend and read the word.\""
                  },
                  {
                    "name": "OnOrientationChange",
                    "value": "setResponsiveFontSize()"
                  },
                  {
                    "name": "OnZoom",
                    "value": "setResponsiveFontSize()"
                  },
                  {
                    "name": "OnResize",
                    "value": "setResponsiveFontSize()"
                  },
                  {
                    "name": "OnDoubleClick",
                    "value": "toggleFullScreen()"
                  },
                  {
                    "name": "TLMessage",
                    "value": "\"lastCardIndex=\"+lastCardIndex"
                  }
                ],
                "Children": [
                  {
                    "Name": "placementBoxSet",
                    "Type": "ShapeSet2D",
                    "Properties": [
                      {
                        "name": "X",
                        "value": "placementBoxX"
                      },
                      {
                        "name": "Y",
                        "value": "placementBoxY"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"RECTANGLE\""
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numPlacementBoxes"
                      },
                      {
                        "name": "FillColor",
                        "value": "\"White\""
                      },
                      {
                        "name": "SizeX",
                        "value": "placementBoxWidth"
                      },
                      {
                        "name": "SizeY",
                        "value": "placementBoxHeight"
                      },
                      {
                        "name": "OnPress",
                        "value": "placementCardInteracted=placementCardInteracted\n\n\nif (placementCardInteracted==placementCardInteracted){\n    onPlacementBoxClick(placementCardInteracted);\n}"
                      },
                      {
                        "name": "ElementInteracted",
                        "value": "placementCardInteracted"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "Sensitivity",
                        "value": "0"
                      }
                    ]
                  },
                  {
                    "Name": "placementCardSet",
                    "Type": "ShapeSet2D",
                    "Properties": [
                      {
                        "name": "NumberOfElements",
                        "value": "numPlacementBoxes"
                      },
                      {
                        "name": "X",
                        "value": "placementBoxX"
                      },
                      {
                        "name": "Y",
                        "value": "placementBoxY"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"ROUND_RECTANGLE\""
                      },
                      {
                        "name": "SizeX",
                        "value": "placementBoxWidth * 5/6"
                      },
                      {
                        "name": "SizeY",
                        "value": "placementBoxHeight * 5/6"
                      },
                      {
                        "name": "FillColor",
                        "value": "placementCardBgColor"
                      },
                      {
                        "name": "LineWidth",
                        "value": "0"
                      }
                    ]
                  },
                  {
                    "Name": "Reset",
                    "Type": "Text2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "\"Reset\""
                      },
                      {
                        "name": "X",
                        "value": "restartX"
                      },
                      {
                        "name": "Y",
                        "value": "restartY"
                      },
                      {
                        "name": "OnPress",
                        "value": "onResetButtonClick();"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "Visibility",
                        "value": "false"
                      }
                    ]
                  },
                  {
                    "Name": "placementCardText",
                    "Type": "TextSet2D",
                    "Properties": [
                      {
                        "name": "NumberOfElements",
                        "value": "numPlacementBoxes"
                      },
                      {
                        "name": "X",
                        "value": "placementBoxX"
                      },
                      {
                        "name": "Y",
                        "value": "placementBoxY"
                      },
                      {
                        "name": "FillColor",
                        "value": "placementCardTextColor"
                      },
                      {
                        "name": "Text",
                        "value": "placementCardText"
                      },
                      {
                        "name": "Font",
                        "value": "font"
                      }
                    ]
                  },
                  {
                    "Name": "vowelSet",
                    "Type": "ShapeSet2D",
                    "Properties": [
                      {
                        "name": "NumberOfElements",
                        "value": "numVowels"
                      },
                      {
                        "name": "X",
                        "value": "vowelX"
                      },
                      {
                        "name": "Y",
                        "value": "vowelY"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"ROUND_RECTANGLE\""
                      },
                      {
                        "name": "FillColor",
                        "value": "vowelsBgColor"
                      },
                      {
                        "name": "OnPress",
                        "value": "vowelInteracted=vowelInteracted\n\n\nif (vowelInteracted==vowelInteracted){\n    onVowelClick(vowelInteracted);\n    console.log(\"selectedTileIndex \" + selectedTileIndex);\n    console.log(\"selectedTileType \" + selectedTileType);\n//speech(vowelsText[vowelInteracted])\n}"
                      },
                      {
                        "name": "ElementInteracted",
                        "value": "vowelInteracted"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "LineWidth",
                        "value": "vowelsBordered"
                      },
                      {
                        "name": "SizeX",
                        "value": "tileWidth"
                      },
                      {
                        "name": "SizeY",
                        "value": "tileHeight"
                      },
                      {
                        "name": "Sensitivity",
                        "value": "0"
                      }
                    ]
                  },
                  {
                    "Name": "consonantSet",
                    "Type": "ShapeSet2D",
                    "Properties": [
                      {
                        "name": "X",
                        "value": "consonantX"
                      },
                      {
                        "name": "Y",
                        "value": "consonantY"
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numConsonants"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"ROUND_RECTANGLE\""
                      },
                      {
                        "name": "FillColor",
                        "value": "consonantsBgColor"
                      },
                      {
                        "name": "ElementInteracted",
                        "value": "consonantInteracted"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "OnPress",
                        "value": "consonantInteracted=consonantInteracted\n\nif (consonantInteracted==consonantInteracted){\n    onConsonantClick(consonantInteracted);\n    console.log(\"selectedTileIndex \" + selectedTileIndex);\n    console.log(\"selectedTileType \" + selectedTileType);\n//speech(consonantsText[consonantInteracted]) //lookang\n}"
                      },
                      {
                        "name": "LineWidth",
                        "value": "consonantsBordered"
                      },
                      {
                        "name": "SizeX",
                        "value": "tileWidth"
                      },
                      {
                        "name": "SizeY",
                        "value": "tileHeight"
                      },
                      {
                        "name": "Sensitivity",
                        "value": "0"
                      }
                    ]
                  },
                  {
                    "Name": "vowelText",
                    "Type": "TextSet2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "vowelsText"
                      },
                      {
                        "name": "X",
                        "value": "vowelX"
                      },
                      {
                        "name": "Y",
                        "value": "vowelY"
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numVowels"
                      },
                      {
                        "name": "FillColor",
                        "value": "vowelsTextColor"
                      },
                      {
                        "name": "Font",
                        "value": "font"
                      }
                    ]
                  },
                  {
                    "Name": "consonantText",
                    "Type": "TextSet2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "consonantsText"
                      },
                      {
                        "name": "X",
                        "value": "consonantX"
                      },
                      {
                        "name": "Y",
                        "value": "consonantY"
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numConsonants"
                      },
                      {
                        "name": "FillColor",
                        "value": "consonantsTextColor"
                      },
                      {
                        "name": "Font",
                        "value": "font"
                      }
                    ]
                  },
                  {
                    "Name": "wordsReadBackground",
                    "Type": "Shape2D",
                    "Properties": [
                      {
                        "name": "Y",
                        "value": "-0.15"
                      },
                      {
                        "name": "X",
                        "value": "0.83"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"RECTANGLE\""
                      },
                      {
                        "name": "FillColor",
                        "value": "\"rgb(200,220,208)\""
                      },
                      {
                        "name": "SizeX",
                        "value": "0.3"
                      },
                      {
                        "name": "SizeY",
                        "value": "1.45"
                      }
                    ]
                  },
                  {
                    "Name": "blendBtn",
                    "Type": "Shape2D",
                    "Properties": [
                      {
                        "name": "Y",
                        "value": "blendBtnY"
                      },
                      {
                        "name": "X",
                        "value": "blendBtnX"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"ROUND_RECTANGLE\""
                      },
                      {
                        "name": "FillColor",
                        "value": "\"Green\""
                      },
                      {
                        "name": "SizeX",
                        "value": "0.15"
                      },
                      {
                        "name": "SizeY",
                        "value": "0.15"
                      },
                      {
                        "name": "OnPress",
                        "value": "onBlendClick();"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "Visibility",
                        "value": "false"
                      }
                    ]
                  },
                  {
                    "Name": "Blend",
                    "Type": "Text2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "\"Blend\""
                      },
                      {
                        "name": "X",
                        "value": "blendBtnX"
                      },
                      {
                        "name": "Y",
                        "value": "blendBtnY"
                      },
                      {
                        "name": "FillColor",
                        "value": "\"white\""
                      }
                    ]
                  },
                  {
                    "Name": "Words_read",
                    "Type": "Text2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "\"Words read\""
                      },
                      {
                        "name": "FillColor",
                        "value": "\"Blue\""
                      },
                      {
                        "name": "X",
                        "value": "0.7"
                      },
                      {
                        "name": "Y",
                        "value": "0.53"
                      },
                      {
                        "name": "Font",
                        "value": "fontSmall"
                      },
                      {
                        "name": "RelativePosition",
                        "value": "\"WEST\""
                      }
                    ]
                  },
                  {
                    "Name": "wordsReadSet1",
                    "Type": "TextSet2D",
                    "Properties": [
                      {
                        "name": "X",
                        "value": "wordsReadSet1X"
                      },
                      {
                        "name": "Y",
                        "value": "wordsReadSet1Y"
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numOfWordsReadByColumn"
                      },
                      {
                        "name": "Text",
                        "value": "wordsReadSet1Text"
                      },
                      {
                        "name": "ElementInteracted",
                        "value": "wordsReadSet1Interacted"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "OnPress",
                        "value": "wordsReadSet1Interacted=wordsReadSet1Interacted;\n\n\nif (wordsReadSet1Interacted==wordsReadSet1Interacted){\n  if (!wordsReadSet1Info[wordsReadSet1Interacted]) return;\n  onWordReadClick(wordsReadSet1Info[wordsReadSet1Interacted]);\n  console.log(wordsReadSet1Info[wordsReadSet1Interacted]);\n}"
                      },
                      {
                        "name": "Font",
                        "value": "fontSmall"
                      },
                      {
                        "name": "RelativePosition",
                        "value": "\"WEST\""
                      },
                      {
                        "name": "Sensitivity",
                        "value": "20"
                      }
                    ]
                  },
                  {
                    "Name": "wordsReadSet2",
                    "Type": "TextSet2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "wordsReadSet2Text"
                      },
                      {
                        "name": "X",
                        "value": "wordsReadSet2X"
                      },
                      {
                        "name": "Y",
                        "value": "wordsReadSet2Y"
                      },
                      {
                        "name": "NumberOfElements",
                        "value": "numOfWordsReadByColumn"
                      },
                      {
                        "name": "OnPress",
                        "value": "wordsReadSet2Interacted=wordsReadSet2Interacted;\n\n\nif (wordsReadSet2Interacted==wordsReadSet2Interacted){\n  if (!wordsReadSet2Info[wordsReadSet2Interacted]) return;\n  onWordReadClick(wordsReadSet2Info[wordsReadSet2Interacted]);\n  console.log(wordsReadSet2Info[wordsReadSet2Interacted]);\n}"
                      },
                      {
                        "name": "ElementInteracted",
                        "value": "wordsReadSet2Interacted"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_NO_MOVE\""
                      },
                      {
                        "name": "Font",
                        "value": "fontSmall"
                      },
                      {
                        "name": "Sensitivity",
                        "value": "20"
                      }
                    ]
                  },
                  {
                    "Name": "blend_text",
                    "Type": "Text2D",
                    "Properties": [
                      {
                        "name": "Text",
                        "value": "\"\u27a4\""
                      },
                      {
                        "name": "X",
                        "value": "blendX"
                      },
                      {
                        "name": "Y",
                        "value": "blendY"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_X\""
                      },
                      {
                        "name": "OnDrag",
                        "value": "var blendXmax = 0.5\nvar blendXmin = -0.5\nblendX = Math.max(blendXmin, blendX);\nblendX = Math.min(blendXmax, blendX);"
                      },
                      {
                        "name": "Font",
                        "value": "font"
                      },
                      {
                        "name": "Visibility",
                        "value": "false"
                      }
                    ]
                  },
                  {
                    "Name": "arrow2D",
                    "Type": "Arrow2D",
                    "Properties": [
                      {
                        "name": "X",
                        "value": "blendX"
                      },
                      {
                        "name": "Y",
                        "value": "blendY"
                      },
                      {
                        "name": "SizeX",
                        "value": "0.2"
                      },
                      {
                        "name": "SizeY",
                        "value": "0"
                      },
                      {
                        "name": "MarkEnd",
                        "value": "\"TRIANGLE\""
                      },
                      {
                        "name": "OnDrag",
                        "value": "var blendXmax = Math.max(placementCardInteracted/5-0.5,-0.5)\nvar blendXmin = -0.5\nblendX = Math.max(blendXmin, blendX);\nblendX = Math.min(blendXmax, blendX);"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_X\""
                      },
                      {
                        "name": "Offset",
                        "value": "\"CENTERED\""
                      },
                      {
                        "name": "LineWidth",
                        "value": "4"
                      },
                      {
                        "name": "OnPress",
                        "value": "if (lastCardIndex !== -1) {\nif (blendX !== -0.5) blendX = -0.5;\nblendvX = 0.5\n_play()\n}"
                      },
                      {
                        "name": "Sensitivity",
                        "value": "20"
                      }
                    ]
                  },
                  {
                    "Name": "blendArrowDrag",
                    "Type": "Shape2D",
                    "Properties": [
                      {
                        "name": "X",
                        "value": "blendX"
                      },
                      {
                        "name": "Y",
                        "value": "blendY"
                      },
                      {
                        "name": "SizeX",
                        "value": "0.2"
                      },
                      {
                        "name": "SizeY",
                        "value": "0.1"
                      },
                      {
                        "name": "Sensitivity",
                        "value": "0"
                      },
                      {
                        "name": "ShapeType",
                        "value": "\"RECTANGLE\""
                      },
                      {
                        "name": "OnPress",
                        "value": "if (lastCardIndex !== -1) {\nif (blendX !== -0.5) blendX = -0.5;\nblendvX = 0.5\n_play()\n}"
                      },
                      {
                        "name": "EnabledPosition",
                        "value": "\"ENABLED_X\""
                      },
                      {
                        "name": "DrawFill",
                        "value": "false"
                      },
                      {
                        "name": "DrawLines",
                        "value": "false"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "Name": "soundPanel",
            "Type": "Panel",
            "Expanded": "true",
            "Properties": [],
            "Children": [
              {
                "Name": "audio",
                "Type": "Audio",
                "Properties": [
                  {
                    "name": "AudioUrl",
                    "value": "\"./sound/d.m4a\""
                  },
                  {
                    "name": "Controls",
                    "value": "true"
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    "RootProperties": []
  },
  "metadata": {
    "APP": "WebEJS",
    "CreatedWith": "WebEJS : The web version of Easy JavaScript Simulations",
    "MoreInfo": "WebEJS 1.1",
    "version": "https://www.um.es/fem/wikis/webejs/"
  }
}