{
  "meta": {
    "version": "4.000.9103",
    "fileFormatVersion": "0.4",
    "date": "2024-12-02T20:18:35.209Z",
    "name": "generic-html-js",
    "description": "",
    "groupName": "JavaScript",
    "tags": [
      {
        "text": "widget"
      },
      {
        "text": "annotation&video"
      }
    ],
    "schedulerLogOff": true
  },
  "data": {
    "datanodes": [
      {
        "name": "htmlStr",
        "type": "JSON_formula_plugin",
        "settings": {
          "name": "htmlStr",
          "autoStart": true,
          "explicitTrig": false,
          "json_var_formula": "return `\n <h1>This is heading 1</h1>\n<h2>This is heading 2</h2>\n<h3>This is heading 3</h3>\n<h4>This is heading 4</h4>\n<h5>This is heading 5</h5>\n<h6>This is heading 6</h6>\n    <section>\n      <h2>A Simple HTML5 Page</h2>\n      <p>\n        This is an example of a simple HTML5 webpage using some of it's basic elements.\n        </p>\n      </section>\n    \n    <section>\n      <h2> CSS3 for Styling</h2>\n      <p>\n        To make this webpage visually appealing we'll use some of the basic CSS3 code in another example. CSS Makes styling of the page more easy and convinient.\n        </p>\n      </section>\n    \n    <section>\n      <h2> Progress bar </h2>\n       <p>\n        Progress you'll make<br>\n        When you undertand HTML5 code<progress max=\"100\" value=50></progress><br>\n        When you understand CSS3 Code <progress max=\"100\" value=50></progress><br>\n        When you understand HTML5+CSS3 Code<progress max=100 value=100></progress>\n      </p>\n    </section>\n  \n  <section>\n    <mark> For more understandibility how css works this page doesn't inlude any CSS3 code.</mark>\n  </section>\n    \n    \n    <footer>\n      <p>\n        This is the modified example of the code taught by Colleen van Lent in her Introduction to CSS3 course on coursera.</p>\n    </footer>\n`;"
        }
      }
    ]
  },
  "libraries": {
    "pyodideStandard": [],
    "pyodideMicropip": []
  },
  "dashboard": {
    "annotationHtmlA": {
      "layout": {
        "top": 4,
        "left": 5,
        "height": 526,
        "width": 934,
        "z-index": "1"
      },
      "container": {
        "instanceId": "annotationHtmlA",
        "modelJsonId": "annotationHtml"
      },
      "modelParameters": {
        "fontsize": 0.3,
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "textColor": "var(--widget-color)",
        "valueFontFamily": "var(--widget-font-family)",
        "textAlign": "left",
        "displayBorder": false,
        "centerVertically": true,
        "showWidget": true,
        "enableWidget": true
      },
      "modelHiddenParams": {
        "html": ""
      }
    }
  },
  "connections": {
    "annotationHtmlA": {
      "html": {
        "name": "html",
        "dataNode": "htmlStr",
        "dataFields": []
      }
    }
  },
  "display": {
    "theme": "default",
    "backgroundColor": "var(--widget-color-0)",
    "inheritThemeBackgroundColor": true,
    "marginX": 10,
    "marginY": 10,
    "width": 1294,
    "height": 590,
    "enforceHeightLimit": false
  },
  "navBarNotification": false
}