{
  "information": {
    "Title": "Antibiotic_Dice",
    "Author": [
      "sithu",
      "lookang",
      "story by jiawen"
    ],
    "AuthorLogo": [
      "",
      "",
      ""
    ],
    "Password": "unused",
    "Keywords": "",
    "Abstract": "",
    "Copyright": "",
    "Level": "",
    "Language": "",
    "Logo": [
      "./disease_logo.png"
    ],
    "RunAlways": "true",
    "ModelTab": "",
    "ModelTabTitle": "",
    "ModelName": "",
    "FixedNavigationBar": "false",
    "CSSFile": "",
    "DetectedFiles": [
      "./disease_logo.png"
    ],
    "AuxiliaryFiles": [
      "./logo.png",
      "./logov22.png",
      "./logov2.png"
    ],
    "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": "canvasHeight",
              "Value": "\"100%\"",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "canvasWidth",
              "Value": "\"90vh\"",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "showSim",
              "Value": "true",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "showGraph",
              "Value": "true",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "showTable",
              "Value": "true",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "chartMaxX",
              "Value": "10",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "chartMaxY",
              "Value": "10",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "font",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "fontSmall",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "fontExtraSmall",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "fontExtraExtraSmall",
              "Value": "",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "antibiotic",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "containerADicePos",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "containerBDicePos",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceShadedA",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceShadedB",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceImagesA",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceImagesB",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceVisibilityA",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "diceVisibilityB",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "MAX_DOSES",
              "Value": "10",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "noOfNormalBacteria",
              "Value": "6",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "noOfResistantBacteria",
              "Value": "4",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalX",
              "Value": "[0]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalY",
              "Value": "[noOfNormalBacteria]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantX",
              "Value": "[0]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantY",
              "Value": "[noOfResistantBacteria]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalDoseCount",
              "Value": "0",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantDoseCount",
              "Value": "0",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalSizeX",
              "Value": "1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalSizeY",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantSizeX",
              "Value": "1",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantSizeY",
              "Value": "[]",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        },
        {
          "Name": "antibiotic2",
          "Active": "true",
          "Internal": "false",
          "Type": "VARIABLE_EDITOR",
          "PageComment": "",
          "Variables": [
            {
              "Name": "runningA",
              "Value": "false",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "runningB",
              "Value": "false",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "intervalA",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "intervalB",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "chartWidth",
              "Value": "\"100%\"",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "chartHeight",
              "Value": "\"42vh\"",
              "Type": "String",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "simulationPaused",
              "Value": "false",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "timeoutA",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "timeoutB",
              "Value": "",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "totalCycles",
              "Value": "100",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "dosesPerCycle",
              "Value": "10",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "showCurrentRunTable",
              "Value": "true",
              "Type": "boolean",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "normalDeathDose",
              "Value": "null",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "resistantDeathDose",
              "Value": "null",
              "Type": "Object",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "cycleCount",
              "Value": "0",
              "Type": "int",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            },
            {
              "Name": "",
              "Value": "",
              "Type": "double",
              "Dimension": "",
              "Comment": "",
              "Domain": ""
            }
          ]
        }
      ]
    },
    "initialization": {
      "pages": [
        {
          "Name": "antibiotic",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Define separate central points and margins for each container\r\nconst centerA = -0.6;       // Center for ContainerA elements\r\nconst centerB = 0.8;        // Center for ContainerB elements\r\n\r\nconst marginA = 0.25;      // Margin between consecutive ContainerA elements\r\nconst marginB = 0.25;      // Margin between consecutive ContainerB elements\r\n\r\n// Number of elements for each container\r\nconst countA = 6;\r\nconst countB = 4;\r\n\r\n// Initialize arrays for positions, shading, and visibility\r\ncontainerADicePos = [];\r\ndiceShadedA = [];\r\ndiceVisibilityA = [];\r\n\r\ncontainerBDicePos = [];\r\ndiceShadedB = [];\r\ndiceVisibilityB = [];\r\n\r\n// Position ContainerA elements spreading left from centerA\r\nfor (let i = 0; i < countA; i++) {\r\n  // Place elements to the left of centerA with spacing marginA\r\n  const xPosA = centerA - (marginA * (i + 1));\r\n  containerADicePos.push([xPosA, 0]);\r\n  diceShadedA.push(false);\r\n  diceVisibilityA.push(true);\r\n}\r\n\r\n// Position ContainerB elements spreading right from centerB\r\nfor (let i = 0; i < countB; i++) {\r\n  // Place elements to the right of centerB with spacing marginB\r\n  const xPosB = centerB + (marginB * (i + 1));\r\n  containerBDicePos.push([xPosB, 0]);\r\n  diceShadedB.push(false);\r\n  diceVisibilityB.push(true);\r\n}\r\n\r\nconsole.log(\"ContainerA positions:\", containerADicePos);\r\nconsole.log(\"ContainerB positions:\", containerBDicePos);\r\n\r\ninitializeDice();\r\n"
        },
        {
          "Name": "font",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// font\n\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    fontExtraSmall = \"normal normal \" + 0.5 * fontSize + \"px 'Comic Sans MS', 'Comic Sans', cursive\";\n    fontExtraExtraSmall = \"normal normal \" + 0.4 * 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;"
        }
      ]
    },
    "evolution": {
      "information": {
        "FPS": "20",
        "SPD": "1",
        "RealTimeVariable": "",
        "Autoplay": "true"
      },
      "pages": []
    },
    "fixed_relations": {
      "pages": []
    },
    "custom": {
      "pages": [
        {
          "Name": "initializeDice",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Function to set all 7 dice to random sides\nfunction initializeDice() {\n  for (let i = 0; i < noOfNormalBacteria; i++) {\n      diceImagesA[i] = getRandomDiceImage();\n  }\n  \n  for (let i = 0; i < noOfResistantBacteria; i++) {\n      diceImagesB[i] = getRandomDiceImage();\n  }\n}"
        },
        {
          "Name": "getRandomDiceImage",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Function to get a random dice image path\nfunction getRandomDiceImage() {\n  const randomIndex = Math.floor(Math.random() * 6) + 1;\n  return `./images/${randomIndex}.png`;\n}"
        },
        {
          "Name": "rollDiceFiveTimesA",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Roll dice 5 times for one antibiotic dose\nfunction rollDiceFiveTimesA(callbackAfterRound) {\n  let rollCount = 0;\n\n  intervalA = setInterval(() => {\n    // Roll the dice: update diceImages for visible cells\n    for (let i = 0; i < noOfNormalBacteria; i++) {\n      if (diceVisibilityA[i]) {\n        diceImagesA[i] = getRandomDiceImage();\n      }\n    }\n\n    _model.update();\n    rollCount++;\n\n    if (rollCount >= 5) {\n      clearInterval(intervalA);\n\n      // Check which bacteria die based on last roll outcome\n      for (let i = 0; i < noOfNormalBacteria; i++) {\n        // If dice is still visible and the face rolled is 1-4:\n        if (diceVisibilityA[i] && /\\/[1-4]\\.png$/.test(diceImagesA[i])) {\n          diceShadedA[i] = true;  // Mark as dead (shade)\n        }\n      }\n\n      _model.update();\n\n      // Wait 2 seconds before making the bacteria disappear\n      timeoutA = setTimeout(() => {\n        for (let i = 0; i < noOfNormalBacteria; i++) {\n          if (diceShadedA[i]) {\n            diceVisibilityA[i] = false; // Hide the dead bacteria\n            diceShadedA[i] = false;     // Reset shading if needed\n          }\n        }\n\n        _model.update();\n\n        // After updating visibility, execute callback if provided\n        if (typeof callbackAfterRound === \"function\") {\n          callbackAfterRound();\n        }\n      }, 200);\n    }\n  }, 100);\n}"
        },
        {
          "Name": "rollDiceFiveTimesB",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// rollDiceFiveTimesB// Roll dice 5 times for one antibiotic dose for ContainerB\nfunction rollDiceFiveTimesB(callbackAfterRound) {\n  let rollCount = 0;\n\n  intervalB = setInterval(() => {\n    // Roll the dice: update diceImagesB for visible cells\n    for (let i = 0; i < noOfResistantBacteria; i++) {\n      if (diceVisibilityB[i]) {\n        diceImagesB[i] = getRandomDiceImage();\n      }\n    }\n\n    _model.update(); // Update the view for containerB if necessary\n    rollCount++;\n\n    if (rollCount >= 5) {\n      clearInterval(intervalB);\n\n      // Check which bacteria die based on last roll outcome for containerB (5 or 6)\n      for (let i = 0; i < noOfResistantBacteria; i++) {\n        // If dice is still visible and the face rolled is 5 or 6:\n        if (diceVisibilityB[i] && /\\/[6]\\.png$/.test(diceImagesB[i])) {\n          diceShadedB[i] = true;  // Mark as dead (shade)\n        }\n      }\n\n      _model.update();\n\n      // Wait 2 seconds before making the bacteria disappear\n      timeoutB = setTimeout(() => {\n        for (let i = 0; i < noOfResistantBacteria; i++) {\n          if (diceShadedB[i]) {\n            diceVisibilityB[i] = false; // Hide the dead bacteria\n            diceShadedB[i] = false;     // Reset shading if needed\n          }\n        }\n\n        _model.update();\n\n        // After updating visibility, execute callback if provided\n        if (typeof callbackAfterRound === \"function\") {\n          callbackAfterRound();\n        }\n      }, 200);\n    }\n  }, 100);\n}"
        },
        {
          "Name": "allBacteriaDeadA",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "// Utility to check if all bacteria are dead (all dice not visible)\nfunction allBacteriaDeadA() {\n  return diceVisibilityA.every(visible => !visible);\n}"
        },
        {
          "Name": "allBacteriaDeadB",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function allBacteriaDeadB() {\n  return diceVisibilityB.every(visible => !visible);\n}"
        },
        {
          "Name": "startCombinedSimulation",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function startCombinedSimulation() {\r\n  if (runningA || runningB) return;  // prevent concurrent starts\r\n  runningA = true;\r\n  runningB = true;\r\n  simulationPaused = false;\r\n  _model.update();\r\n  \r\n  startCombinedSimulationCycle();\r\n}\r\n"
        },
        {
          "Name": "countSurvivingNormal",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function countSurvivingNormal() {\n  // Count visible cells in containerA simulation\n  return diceVisibilityA.filter(visible => visible).length;\n}"
        },
        {
          "Name": "countSurvivingResistant",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function countSurvivingResistant() {\n  // Count visible cells in containerB simulation\n  return diceVisibilityB.filter(visible => visible).length;\n}"
        },
        {
          "Name": "resetSimulations",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function resetSimulations() {\r\n  simulationPaused = false;\r\n  clearInterval(intervalA);\r\n  clearInterval(intervalB);\r\n  clearTimeout(timeoutA);\r\n  clearTimeout(timeoutB);\r\n  \r\n  normalDeathDose = null;\r\n  resistantDeathDose = null;\r\n\r\n//   runningA = false;\r\n//   runningB = false;\r\n  // Reset ContainerA variables\r\n  normalDoseCount = 0;\r\n  normalX = undefined;\r\n  normalY = undefined;\r\n  normalSizeY = undefined;\r\n  for (let i = 0; i < noOfNormalBacteria; i++) {\r\n    diceVisibilityA[i] = true;\r\n    diceShadedA[i] = false;\r\n    diceImagesA[i] = \"\"; // reset image as needed\r\n  }\r\n\r\n  // Reset ContainerB variables\r\n  resistantDoseCount = 0;\r\n  resistantX = undefined;\r\n  resistantY = undefined;\r\n  resistantSizeY = undefined;\r\n  for (let i = 0; i < noOfResistantBacteria; i++) {\r\n    diceVisibilityB[i] = true;\r\n    diceShadedB[i] = false;\r\n    diceImagesB[i] = \"\"; // reset image as needed\r\n  }\r\n\r\n  // Clear the table cells for both Normal and Resistant data\r\n  for (let i = 0; i <= 10; i++) {\r\n    let normalCell = document.getElementById(\"Normal_\" + i);\r\n    let resistantCell = document.getElementById(\"Resistant_\" + i);\r\n    if(normalCell) normalCell.innerHTML = \"\";\r\n    if(resistantCell) resistantCell.innerHTML = \"\";\r\n  }\r\n\r\n  // Clear chart data arrays\r\n  normalX = [0];\r\n  normalY = [noOfNormalBacteria];\r\n  normalSizeX = 1;\r\n  normalSizeY = [];\r\n  resistantX = [0];\r\n  resistantY = [noOfResistantBacteria];\r\n  resistantSizeX = 1;\r\n  resistantSizeY = [];\r\n  \r\n  console.log(\"normalX\", normalX);\r\n  console.log(\"resistantY\", resistantY);\r\n  initializeDice();\r\n\r\n  _model.update();\r\n}\r\n"
        },
        {
          "Name": "pauseSimulation",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function pauseSimulation() {\n  simulationPaused = true;\n}"
        },
        {
          "Name": "resumeSimulation",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function resumeSimulation() {\n  simulationPaused = false;\n  startCombinedSimulationCycle();\n}"
        },
        {
          "Name": "toggleTable",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function toggleTable() {\n   if (showCurrentRunTable) showCurrentRunTable = false;\n   else showCurrentRunTable = true;\n   console.log(\"showCurrentRunTable\", showCurrentRunTable);\n}"
        },
        {
          "Name": "startCombinedSimulationCycle",
          "Active": "true",
          "Internal": "false",
          "Type": "CODE_EDITOR",
          "Comment": "",
          "Code": "function startCombinedSimulationCycle() {\r\n  // Base condition: Check if cycle completed for this batch of doses\r\n  if (normalDoseCount >= MAX_DOSES && resistantDoseCount >= MAX_DOSES) {\r\n    console.log(`Completed cycle ${cycleCount + 1} of ${totalCycles}.`);\r\n\r\n    // Create a new row for this cycle\r\n    let newRow = document.createElement('tr');\r\n    cycleCount++;  // Increment cycle count for display\r\n\r\n    let cycleCell = document.createElement('td');\r\n    cycleCell.innerText = cycleCount;\r\n\r\n    let normalCell = document.createElement('td');\r\n    normalCell.innerText = normalDeathDose !== null ? normalDeathDose : '-';\r\n\r\n    let resistantCell = document.createElement('td');\r\n    resistantCell.innerText = resistantDeathDose !== null ? resistantDeathDose : '-';\r\n\r\n    newRow.append(cycleCell, normalCell, resistantCell);\r\n    document.getElementById('deathRecordBody').appendChild(newRow);\r\n\r\n    // Check if more cycles remain\r\n    if (cycleCount < totalCycles) {\r\n      // Reset for new cycle\r\n      normalDeathDose = null;\r\n      resistantDeathDose = null;\r\n    //   resetSimulationsAForCycle();\r\n    //   resetSimulationsBForCycle();\r\n      resetSimulations();\r\n\r\n      // Reset cycle-specific counters for next batch\r\n      normalDoseCount = 0;\r\n      resistantDoseCount = 0;\r\n\r\n      _model.update();\r\n      startCombinedSimulationCycle(); // Start next cycle\r\n    } else {\r\n      console.log(\"All cycles complete.\");\r\n      runningA = false;\r\n      runningB = false;\r\n      _model.update();\r\n    }\r\n    return;\r\n  }\r\n\r\n  // Check for pause\r\n  if (simulationPaused) {\r\n    console.log(\"Simulation paused.\");\r\n    return;\r\n  }\r\n\r\n  // Increment dose counts for this round\r\n  normalDoseCount++;\r\n  resistantDoseCount++;\r\n\r\n  // Run roll for ContainerA, then ContainerB sequentially, then start next round\r\n  rollDiceFiveTimesA(() => {\r\n    let survivorsA = countSurvivingNormal();\r\n    if (survivorsA === 0 && normalDeathDose === null) {\r\n      normalDeathDose = normalDoseCount;\r\n    }\r\n    normalX.push(normalDoseCount);\r\n    normalY.push(survivorsA);\r\n    normalSizeY.push(normalY.length === 1 ? -survivorsA : survivorsA - normalY.slice(-2)[0]);\r\n    \r\n    // Optionally update A table cells\r\n    let cellA = document.getElementById(\"Normal_\" + (normalDoseCount - 1));\r\n    if(cellA) cellA.innerHTML = survivorsA;\r\n    \r\n    rollDiceFiveTimesB(() => {\r\n      let survivorsB = countSurvivingResistant();\r\n      if (survivorsB === 0 && resistantDeathDose === null) {\r\n        resistantDeathDose = resistantDoseCount;\r\n      }\r\n      resistantX.push(resistantDoseCount);\r\n      resistantY.push(survivorsB);\r\n      resistantSizeY.push(resistantY.length === 1 ? -survivorsB : survivorsB - resistantY.slice(-2)[0]);\r\n      \r\n      // Optionally update B table cells\r\n      let cellB = document.getElementById(\"Resistant_\" + (resistantDoseCount - 1));\r\n      if(cellB) cellB.innerHTML = survivorsB;\r\n\r\n      _model.update();\r\n      // Proceed to next round after both A and B rolls complete\r\n      startCombinedSimulationCycle();\r\n    });\r\n  });\r\n}\r\n"
        }
      ]
    },
    "elements": {
      "list": []
    }
  },
  "view": {
    "Tree": [
      {
        "Name": "topPanel",
        "Type": "Panel",
        "Expanded": "true",
        "Properties": [
          {
            "name": "Width",
            "value": "\"100%\""
          }
        ],
        "Children": [
          {
            "Name": "showSim",
            "Type": "CheckBox",
            "Properties": [
              {
                "name": "Text",
                "value": "\"Show simulation\""
              },
              {
                "name": "Checked",
                "value": "true"
              },
              {
                "name": "OnCheckOn",
                "value": "showSim=true"
              },
              {
                "name": "OnCheckOff",
                "value": "showSim=false"
              },
              {
                "name": "Display",
                "value": "\"none\""
              }
            ]
          },
          {
            "Name": "showGraph",
            "Type": "CheckBox",
            "Properties": [
              {
                "name": "Text",
                "value": "\"Show graph\""
              },
              {
                "name": "OnCheckOn",
                "value": "showGraph=true"
              },
              {
                "name": "OnCheckOff",
                "value": "showGraph=false"
              },
              {
                "name": "Checked",
                "value": "true"
              },
              {
                "name": "Visibility",
                "value": "false"
              },
              {
                "name": "Display",
                "value": "\"none\""
              }
            ]
          },
          {
            "Name": "showTable",
            "Type": "CheckBox",
            "Properties": [
              {
                "name": "Text",
                "value": "\"Show table\""
              },
              {
                "name": "OnCheckOn",
                "value": "showTable=true"
              },
              {
                "name": "OnCheckOff",
                "value": "showTable=false"
              },
              {
                "name": "Checked",
                "value": "true"
              },
              {
                "name": "Visibility",
                "value": "false"
              },
              {
                "name": "Display",
                "value": "\"none\""
              }
            ]
          },
          {
            "Name": "runBtn",
            "Type": "Button",
            "Properties": [
              {
                "name": "Text",
                "value": "(runningA || runningB) ? `Running cycle ${cycleCount + 1}` : \"Start simulation\""
              },
              {
                "name": "Width",
                "value": "\"20%\""
              },
              {
                "name": "OnClick",
                "value": "resetSimulations();\nstartCombinedSimulation();"
              },
              {
                "name": "Disabled",
                "value": "runningA || runningB"
              }
            ]
          },
          {
            "Name": "pauseResumeBtn",
            "Type": "TwoStateButton",
            "Properties": [
              {
                "name": "TextOn",
                "value": "\"\u25b6 Resume\""
              },
              {
                "name": "TextOff",
                "value": "\"\u23f8\ufe0ePause\""
              },
              {
                "name": "State",
                "value": "simulationPaused"
              },
              {
                "name": "OffClick",
                "value": "pauseSimulation();"
              },
              {
                "name": "OnClick",
                "value": "resumeSimulation();"
              },
              {
                "name": "Disabled",
                "value": "!runningA && !runningB"
              },
              {
                "name": "Width",
                "value": "\"20%\""
              }
            ]
          },
          {
            "Name": "resetBtn",
            "Type": "Button",
            "Properties": [
              {
                "name": "Text",
                "value": "\"\u21bbReset\""
              },
              {
                "name": "Width",
                "value": "\"20%\""
              },
              {
                "name": "OnClick",
                "value": "//resetSimulations();\n\n  clearInterval(intervalA);\n  clearInterval(intervalB);\n  clearTimeout(timeoutA);\n  clearTimeout(timeoutB);\n_reset();"
              }
            ]
          },
          {
            "Name": "tableToggle",
            "Type": "Button",
            "Properties": [
              {
                "name": "Text",
                "value": "showCurrentRunTable ? \"Show total results\" : \"Show current results\""
              },
              {
                "name": "OnClick",
                "value": "toggleTable();"
              },
              {
                "name": "Width",
                "value": "\"25%\""
              }
            ]
          }
        ]
      },
      {
        "Name": "simPanel",
        "Type": "Panel",
        "Expanded": "true",
        "Properties": [
          {
            "name": "Display",
            "value": "\"inline-block\""
          },
          {
            "name": "Width",
            "value": "showTable ? \"75%\" : \"100%\""
          }
        ],
        "Children": [
          {
            "Name": "plottingPanel",
            "Type": "PlottingPanel",
            "Expanded": "true",
            "Properties": [
              {
                "name": "AutoScaleX",
                "value": "false"
              },
              {
                "name": "AutoScaleY",
                "value": "false"
              },
              {
                "name": "SquareAspect",
                "value": "true"
              },
              {
                "name": "Enabled",
                "value": "true"
              },
              {
                "name": "ShowAreaRectangle",
                "value": "false"
              },
              {
                "name": "EnabledDragging",
                "value": "\"true\""
              },
              {
                "name": "Display",
                "value": "showSim==true?\"inline-block\":\"none\""
              },
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "Gutters",
                "value": "[0, 0, 0, 0]"
              },
              {
                "name": "Visibility",
                "value": "showSim===true"
              },
              {
                "name": "MaximumY",
                "value": "1"
              },
              {
                "name": "MinimumY",
                "value": "-1"
              },
              {
                "name": "MinimumX",
                "value": "-2"
              },
              {
                "name": "MaximumX",
                "value": "2"
              },
              {
                "name": "Height",
                "value": "showGraph ? \"45vh\" : \"90vh\""
              },
              {
                "name": "GridXShow",
                "value": "false"
              },
              {
                "name": "GridYShow",
                "value": "false"
              },
              {
                "name": "AxisXShow",
                "value": "false"
              },
              {
                "name": "AxisYShow",
                "value": "false"
              }
            ],
            "Children": [
              {
                "Name": "susceptibleBox",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "FillColor",
                    "value": "\"#d6d8ff\""
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "X",
                    "value": "-1.5"
                  },
                  {
                    "name": "SizeX",
                    "value": "3"
                  },
                  {
                    "name": "SizeY",
                    "value": "2"
                  }
                ]
              },
              {
                "Name": "resistantBox",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "FillColor",
                    "value": "\"#ffd6d6\""
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "X",
                    "value": "1.5"
                  },
                  {
                    "name": "SizeX",
                    "value": "3"
                  },
                  {
                    "name": "SizeY",
                    "value": "2"
                  }
                ]
              },
              {
                "Name": "containerALeftBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "-1.6"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.02"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.4"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "containerARightBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "0.2"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.02"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.4"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "containerABottomBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "-0.7"
                  },
                  {
                    "name": "SizeX",
                    "value": "1.8"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.02"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Y",
                    "value": "-0.2"
                  },
                  {
                    "name": "LineWidth",
                    "value": "0"
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "shadeSetA",
                "Type": "ShapeSet2D",
                "Properties": [
                  {
                    "name": "Visibility",
                    "value": "diceShadedA"
                  },
                  {
                    "name": "Position",
                    "value": "containerADicePos"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.15"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.2"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"ROUND_RECTANGLE\""
                  },
                  {
                    "name": "LineWidth",
                    "value": "0"
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Gray\""
                  }
                ]
              },
              {
                "Name": "diceSetA",
                "Type": "ImageSet2D",
                "Properties": [
                  {
                    "name": "Position",
                    "value": "containerADicePos"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.15*1.5"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.2*1.5"
                  },
                  {
                    "name": "Visibility",
                    "value": "diceVisibilityA"
                  },
                  {
                    "name": "ImageUrl",
                    "value": "diceImagesA"
                  }
                ]
              },
              {
                "Name": "containerBLeftBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "0.4"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.02"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.4"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "containerBRightBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "1.6"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.02"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.4"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "containerBBottomBorder",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "1"
                  },
                  {
                    "name": "SizeX",
                    "value": "1.2"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.02"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"RECTANGLE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Black\""
                  },
                  {
                    "name": "Y",
                    "value": "-0.2"
                  },
                  {
                    "name": "LineWidth",
                    "value": "0"
                  },
                  {
                    "name": "Visibility",
                    "value": "false"
                  }
                ]
              },
              {
                "Name": "shadeSetB",
                "Type": "ShapeSet2D",
                "Properties": [
                  {
                    "name": "Position",
                    "value": "containerBDicePos"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.15"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.2"
                  },
                  {
                    "name": "Visibility",
                    "value": "diceShadedB"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"ROUND_RECTANGLE\""
                  },
                  {
                    "name": "LineWidth",
                    "value": "0"
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Gray\""
                  }
                ]
              },
              {
                "Name": "diceSetB",
                "Type": "ImageSet2D",
                "Properties": [
                  {
                    "name": "Position",
                    "value": "containerBDicePos"
                  },
                  {
                    "name": "SizeX",
                    "value": "0.15*1.5"
                  },
                  {
                    "name": "SizeY",
                    "value": "0.2*1.5"
                  },
                  {
                    "name": "Visibility",
                    "value": "diceVisibilityB"
                  },
                  {
                    "name": "ImageUrl",
                    "value": "diceImagesB"
                  }
                ]
              },
              {
                "Name": "susceptibleTxt",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Dice representing susceptible bacteria cells\""
                  },
                  {
                    "name": "X",
                    "value": "-1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0.9"
                  },
                  {
                    "name": "Font",
                    "value": "fontExtraSmall"
                  }
                ]
              },
              {
                "Name": "resistantTxt",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Dice representing resistant bacteria cells\""
                  },
                  {
                    "name": "X",
                    "value": "1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0.9"
                  },
                  {
                    "name": "Font",
                    "value": "fontExtraSmall"
                  }
                ]
              },
              {
                "Name": "susceptibleTxt_2",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"These cells die if the result shows 1, 2, 3 or 4\""
                  },
                  {
                    "name": "X",
                    "value": "-1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0.75"
                  },
                  {
                    "name": "Font",
                    "value": "fontExtraExtraSmall"
                  }
                ]
              },
              {
                "Name": "resistantTxt_2",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"These cells die if the result shows 6\""
                  },
                  {
                    "name": "X",
                    "value": "1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0.75"
                  },
                  {
                    "name": "Font",
                    "value": "fontExtraExtraSmall"
                  }
                ]
              }
            ]
          },
          {
            "Name": "chartPanel_2",
            "Type": "PlottingPanel",
            "Expanded": "true",
            "Properties": [
              {
                "name": "AutoScaleX",
                "value": "false"
              },
              {
                "name": "AutoScaleY",
                "value": "false"
              },
              {
                "name": "Height",
                "value": "\"42vh\""
              },
              {
                "name": "Gutters",
                "value": "[50,0,0,40]"
              },
              {
                "name": "TitleX",
                "value": "\"No. of doses\""
              },
              {
                "name": "TitleXFont",
                "value": "\"normal normal large \\\"Times New Roman\\\", Times, serif\""
              },
              {
                "name": "TitleY",
                "value": "\"No. of surviving cells after each dose\""
              },
              {
                "name": "TitleYFont",
                "value": "\"normal normal large \\\"Times New Roman\\\", Times, serif\""
              },
              {
                "name": "MinimumX",
                "value": "0"
              },
              {
                "name": "MaximumX",
                "value": "chartMaxX"
              },
              {
                "name": "MinimumY",
                "value": "0"
              },
              {
                "name": "XFixedTick",
                "value": "0"
              },
              {
                "name": "XTickStep",
                "value": "1"
              },
              {
                "name": "YFixedTick",
                "value": "0"
              },
              {
                "name": "YTickStep",
                "value": "1"
              },
              {
                "name": "XScalePrecision",
                "value": "0"
              },
              {
                "name": "XAutoTicks",
                "value": "false"
              },
              {
                "name": "YAutoTicks",
                "value": "false"
              },
              {
                "name": "YScalePrecision",
                "value": "0"
              },
              {
                "name": "AxisXFont",
                "value": "\"normal normal 1vw\""
              },
              {
                "name": "AxisYFont",
                "value": "\"normal normal 1vw\""
              },
              {
                "name": "MarginX",
                "value": "10"
              },
              {
                "name": "MarginY",
                "value": "10"
              },
              {
                "name": "Enabled",
                "value": "true"
              },
              {
                "name": "ShowAreaRectangle",
                "value": "false"
              },
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "Display",
                "value": "showGraph==true?\"inline-block\":\"none\""
              },
              {
                "name": "MaximumY",
                "value": "chartMaxY"
              },
              {
                "name": "Visibility",
                "value": "showGraph===true"
              },
              {
                "name": "TitleYMargin",
                "value": "-25"
              },
              {
                "name": "TitleXMargin",
                "value": "35"
              }
            ],
            "Children": [
              {
                "Name": "normalShapeSet",
                "Type": "ShapeSet2D",
                "Properties": [
                  {
                    "name": "X",
                    "value": "normalX"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"ELLIPSE\""
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Blue\""
                  },
                  {
                    "name": "Y",
                    "value": "normalY"
                  },
                  {
                    "name": "SizeX",
                    "value": "chartMaxX/40"
                  },
                  {
                    "name": "SizeY",
                    "value": "chartMaxY/15"
                  },
                  {
                    "name": "NumberOfElements",
                    "value": "normalX.length"
                  }
                ]
              },
              {
                "Name": "resistantShapeSet",
                "Type": "ShapeSet2D",
                "Properties": [
                  {
                    "name": "Y",
                    "value": "resistantY"
                  },
                  {
                    "name": "X",
                    "value": "resistantX"
                  },
                  {
                    "name": "ShapeType",
                    "value": "\"ELLIPSE\""
                  },
                  {
                    "name": "SizeX",
                    "value": "chartMaxX/40"
                  },
                  {
                    "name": "SizeY",
                    "value": "chartMaxY/15"
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Orange\""
                  },
                  {
                    "name": "NumberOfElements",
                    "value": "resistantX.length"
                  }
                ]
              },
              {
                "Name": "normalSegmentSet",
                "Type": "SegmentSet2D",
                "Properties": [
                  {
                    "name": "Offset",
                    "value": "\"SOUTH_WEST\""
                  },
                  {
                    "name": "Y",
                    "value": "normalY"
                  },
                  {
                    "name": "X",
                    "value": "normalX"
                  },
                  {
                    "name": "SizeX",
                    "value": "normalSizeX"
                  },
                  {
                    "name": "SizeY",
                    "value": "normalSizeY"
                  },
                  {
                    "name": "LineColor",
                    "value": "\"Blue\""
                  },
                  {
                    "name": "LineWidth",
                    "value": "2"
                  },
                  {
                    "name": "NumberOfElements",
                    "value": "normalSizeY.length"
                  },
                  {
                    "name": "Visibility",
                    "value": "normalSizeY.length !== 0"
                  }
                ]
              },
              {
                "Name": "resistantSegmentSet",
                "Type": "SegmentSet2D",
                "Properties": [
                  {
                    "name": "Offset",
                    "value": "\"SOUTH_WEST\""
                  },
                  {
                    "name": "Y",
                    "value": "resistantY"
                  },
                  {
                    "name": "X",
                    "value": "resistantX"
                  },
                  {
                    "name": "SizeX",
                    "value": "resistantSizeX"
                  },
                  {
                    "name": "SizeY",
                    "value": "resistantSizeY"
                  },
                  {
                    "name": "LineColor",
                    "value": "\"Orange\""
                  },
                  {
                    "name": "LineWidth",
                    "value": "2"
                  },
                  {
                    "name": "NumberOfElements",
                    "value": "resistantSizeY.length"
                  },
                  {
                    "name": "Visibility",
                    "value": "resistantSizeY.length !== 0"
                  }
                ]
              }
            ]
          },
          {
            "Name": "legendPanel_2",
            "Type": "PlottingPanel",
            "Expanded": "true",
            "Properties": [
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "Height",
                "value": "\"3vh\""
              },
              {
                "name": "Gutters",
                "value": "[0,0,0,0]"
              },
              {
                "name": "AutoScaleX",
                "value": "false"
              },
              {
                "name": "AutoScaleY",
                "value": "false"
              },
              {
                "name": "Visibility",
                "value": "showGraph===true"
              },
              {
                "name": "Display",
                "value": "showGraph==true?\"inline-block\":\"none\""
              },
              {
                "name": "XAutoTicks",
                "value": "false"
              },
              {
                "name": "YAutoTicks",
                "value": "false"
              },
              {
                "name": "XFixedTick",
                "value": "0"
              },
              {
                "name": "YFixedTick",
                "value": "0"
              },
              {
                "name": "AxisXShow",
                "value": "false"
              }
            ],
            "Children": [
              {
                "Name": "Light_2",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Normal\""
                  },
                  {
                    "name": "X",
                    "value": "-0.2"
                  },
                  {
                    "name": "Y",
                    "value": "-0.3"
                  },
                  {
                    "name": "Font",
                    "value": "\"normal normal medium \\\"Times New Roman\\\", Times, serif\""
                  }
                ]
              },
              {
                "Name": "lightOrange_2",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "ShapeType",
                    "value": "\"ELLIPSE\""
                  },
                  {
                    "name": "SizeX",
                    "value": "0.04"
                  },
                  {
                    "name": "SizeY",
                    "value": "1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0"
                  },
                  {
                    "name": "X",
                    "value": "-0.3"
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Blue\""
                  }
                ]
              },
              {
                "Name": "Windy_2",
                "Type": "Text2D",
                "Properties": [
                  {
                    "name": "Text",
                    "value": "\"Resistant\""
                  },
                  {
                    "name": "X",
                    "value": "0.35"
                  },
                  {
                    "name": "Y",
                    "value": "-0.3"
                  },
                  {
                    "name": "Font",
                    "value": "\"normal normal medium \\\"Times New Roman\\\", Times, serif\""
                  }
                ]
              },
              {
                "Name": "windyGray_2",
                "Type": "Shape2D",
                "Properties": [
                  {
                    "name": "ShapeType",
                    "value": "\"ELLIPSE\""
                  },
                  {
                    "name": "SizeX",
                    "value": "0.04"
                  },
                  {
                    "name": "SizeY",
                    "value": "1.5"
                  },
                  {
                    "name": "Y",
                    "value": "0"
                  },
                  {
                    "name": "X",
                    "value": "0.25"
                  },
                  {
                    "name": "FillColor",
                    "value": "\"Orange\""
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "Name": "dataPanel",
        "Type": "Panel",
        "Expanded": "true",
        "Properties": [
          {
            "name": "Display",
            "value": "showTable==true?\"inline-block\":\"none\""
          },
          {
            "name": "Width",
            "value": "\"25%\""
          },
          {
            "name": "Height",
            "value": "\"120vh\""
          },
          {
            "name": "Visibility",
            "value": "showTable===true"
          }
        ],
        "Children": [
          {
            "Name": "tablePanel",
            "Type": "Panel",
            "Properties": [
              {
                "name": "Html",
                "value": "<table class=\"dataTable\">\n  <colgroup>\n    <col style=\"width: 30%;\">\n    <col style=\"width: 35%;\">\n    <col style=\"width: 35%;\">\n  </colgroup>\n    <tr>\n        <th rowspan=\"2\">No. of antibiotic doses</th>\n        <th colspan=\"2\">No. of bacteria cells surviving after each antibiotic dose</th>\n    </tr>\n    <tr>\n        <th>Susceptible</th>\n        <th>Antibiotic-resistant</th>\n    </tr>\n    <tr>\n      <th>0</th>\n      <td>6</td>\n      <td>4</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td id=\"Normal_0\"></td>\n      <td id=\"Resistant_0\"></td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td id=\"Normal_1\"></td>\n      <td id=\"Resistant_1\"></td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td id=\"Normal_2\"></td>\n      <td id=\"Resistant_2\"></td>\n    </tr>\n    <tr>\n      <th>4</th>\n      <td id=\"Normal_3\"></td>\n      <td id=\"Resistant_3\"></td>\n    </tr>\n    <tr>\n      <th>5</th>\n      <td id=\"Normal_4\"></td>\n      <td id=\"Resistant_4\"></td>\n    </tr>\n    <tr>\n      <th>6</th>\n      <td id=\"Normal_5\"></td>\n      <td id=\"Resistant_5\"></td>\n    </tr>\n    <tr>\n      <th>7</th>\n      <td id=\"Normal_6\"></td>\n      <td id=\"Resistant_6\"></td>\n    </tr>\n    <tr>\n      <th>8</th>\n      <td id=\"Normal_7\"></td>\n      <td id=\"Resistant_7\"></td>\n    </tr>\n    <tr>\n      <th>9</th>\n      <td id=\"Normal_8\"></td>\n      <td id=\"Resistant_8\"></td>\n    </tr>\n    <tr>\n      <th>10</th>\n      <td id=\"Normal_9\"></td>\n      <td id=\"Resistant_9\"></td>\n    </tr>\n</table>\n<style>\n.dataTable {\n  width: 100%;\n  height: 100%;\n  border: 2px solid #555;\n  font-size: 1.2vw;\n  table-layout: fixed;       /* Added to fix column widths and scale table */\n  word-wrap: break-word;     /* Ensure long text breaks to prevent overflow */\nbackground: #aaa\n}\n  .dataTable tr {\n      background: #eee;\n  }\n  .dataTable tr th {\n      background: #ddd;\n  }\n  .dataTable tr td, .dataTable tr th {\n      width: 20%;\n      padding: 0.5em;\n  }\n  .splitCell {\n    height: 3em;\n  }\n  /*.splitCell {\n    background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);\n  }*/\n.splitCell>div {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n}\n\n.bottom {\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n}\n\n.top {\n  position: absolute;\n  top: 1px;\n  right: 1px;\n}\n</style>"
              },
              {
                "name": "Height",
                "value": "\"91vh\""
              },
              {
                "name": "Display",
                "value": "showCurrentRunTable==true?\"inline-block\":\"none\""
              },
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "Visibility",
                "value": "showCurrentRunTable===true"
              }
            ]
          },
          {
            "Name": "tablePanel_2",
            "Type": "Panel",
            "Properties": [
              {
                "name": "Html",
                "value": "<div class=\"scrollable-container\">\n  <table id=\"deathRecordTable\" class=\"dataTable\">\n    <thead>\n      <tr>\n        <th>Cycle</th>\n        <th>Susceptible Death Dose</th>\n        <th>Antibiotic-resistant Death Dose</th>\n      </tr>\n    </thead>\n    <tbody id=\"deathRecordBody\">\n      <!-- Rows will be added here dynamically -->\n    </tbody>\n  </table>\n</div>\n<style>\n.scrollable-container {\n  height: 91vh;               /* Fixed height */\n  overflow-y: auto;           /* Enable vertical scroll */\n  display: block;             /* Default block behavior */\n  padding: 0;                 /* Remove any padding */\n  margin: 0;                  /* Remove any margin */\n  box-sizing: border-box;     /* Include border/padding in height */\n}\n\n.deathTable {\n  width: 100%;\n  border: 2px solid #555;\n  font-size: 1.2vw;\n  table-layout: fixed;\n  word-wrap: break-word;\n  border-collapse: collapse;  /* For a consistent look */\n  margin: 0;                  /* Remove default margin */\nbackground: #aaa;\n}\n\n.deathTable th, \n.deathTable td {\n  padding: 0.5em;\n  border: 1px solid #555;\n}\n\n.deathTable thead tr {\n  position: sticky;\n  top: 0;\n  background: #ddd;\n  z-index: 1;\n}\n\n</style>"
              },
              {
                "name": "Display",
                "value": "showCurrentRunTable==false?\"inline-block\":\"none\""
              },
              {
                "name": "Width",
                "value": "\"100%\""
              },
              {
                "name": "Visibility",
                "value": "showCurrentRunTable===false"
              }
            ]
          }
        ]
      }
    ],
    "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/"
  }
}