diff --git a/Jars/Jars_with_html.json b/Jars/Jars_with_html.json
new file mode 100644
index 0000000000000000000000000000000000000000..64bffec29e0730df0616f6eccedae9f6a0f85bf9
--- /dev/null
+++ b/Jars/Jars_with_html.json
@@ -0,0 +1,159 @@
+{
+ "svg":"Jars_with_html.svg",
+ "comment": "VisB Visualization for Jars by Jonas Erdmann",
+ "items": [
+ {
+ "id": "jar_%0_full",
+ "attr": "height",
+ "value": "level(j%0) * 20",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "jar_%0_text",
+ "attr": "text",
+ "value": "level(j%0)",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "jar_%0_svg",
+ "attr": "height",
+ "value": "maxf(j%0) * 20",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "jar_%0_svg",
+ "attr": "y",
+ "value": "0 -(max({maxf(j3), maxf(j5)}) * 20 - 100)",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "jar_%0_empty",
+ "attr": "height",
+ "value": "maxf(j%0) * 20",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "left_%0",
+ "attr": "y2",
+ "value": "maxf(j%0) * 20",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "right_%0",
+ "attr": "y2",
+ "value": "maxf(j%0) * 20",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "goal_achieved",
+ "attr": "opacity",
+ "value": "IF max({level(j3), level(j5)}) = max({maxf(j3), maxf(j5)}) -1 THEN 1 ELSE 0 END"
+ },
+ {
+ "id": "transfer_left",
+ "attr": "opacity",
+ "value": "IF level(j3) = maxf(j3) THEN 0 ELSE IF level(j5) = 0 THEN 0 ELSE 1 END END"
+ },
+ {
+ "id": "transfer_right",
+ "attr": "opacity",
+ "value": "IF level(j5) = maxf(j5) THEN 0 ELSE IF level(j3) = 0 THEN 0 ELSE 1 END END"
+ },
+ {
+ "id": "transfer_sym3",
+ "attr": "opacity",
+ "value": "IF level(j3) = 0 & level(j5) = 0 THEN 0 ELSE IF level(j3) = maxf(j3) & level(j5) = maxf(j5) THEN 0 ELSE 1 END END"
+ },
+ {
+ "id": "goal",
+ "attr": "x1",
+ "value": "IF maxf(j3) > maxf(j5) THEN 2 ELSE 107 END"
+ },
+ {
+ "id": "goal",
+ "attr": "x2",
+ "value": "IF maxf(j3) > maxf(j5) THEN 48 ELSE 153 END"
+ },
+ {
+ "id": "j%0_span",
+ "attr": "text",
+ "value": "level(j%0)",
+ "comment": "this is an HTML element",
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ }
+
+],
+ "events": [
+ {
+ "id": "fill_%0",
+ "event": "FillJar",
+ "predicates": ["j=j%0"],
+ "hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
+ { "attr":"opacity", "enter":"0.8", "leave":"1.0"}],
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "fill_%0_sym",
+ "event": "FillJar",
+ "predicates": ["j=j%0"],
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "empty_%0",
+ "event": "EmptyJar",
+ "predicates": ["j=j%0"],
+ "repeat": [
+ ["3"], ["5"]
+ ],
+ "hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
+ { "attr":"opacity", "enter":"0.8", "leave":"1.0"}]
+ },
+ {
+ "id": "empty_%0_sym",
+ "event": "EmptyJar",
+ "predicates": ["j=j%0"],
+ "repeat": [
+ ["3"], ["5"]
+ ]
+ },
+ {
+ "id": "transfer",
+ "event": "Transfer",
+ "hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
+ { "attr":"opacity", "enter":"0.8", "leave":"1.0"}]
+ },
+ {
+ "id": "transfer_left",
+ "event": "Transfer"
+ },
+ {
+ "id": "transfer_right",
+ "event": "Transfer"
+ },
+ {
+ "id": "transfer_sym3",
+ "event": "Transfer"
+ }
+ ]
+}
+
diff --git a/Jars/Jars_with_html.svg b/Jars/Jars_with_html.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3ef58973ffbfda221cd15e43cfb2c95a27b3604f
--- /dev/null
+++ b/Jars/Jars_with_html.svg
@@ -0,0 +1,52 @@
+
+
+<!--svg for Jars by Jonas Erdmann-->
+<svg width="360" height="260"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<g id="jar_3" transform="rotate(180 25 100)">
+ <svg id ="jar_3_svg" width="50" height="60" X="0" y="00">
+ <g id="leer_3" opacity="1">
+ <rect id="jar_3_empty" x="0" y="0" width="50" height="60" style="fill:#DDEEFF"/>
+ <rect id="jar_3_full" x="0" y="0" width="50" height="60" style="fill:#267CEB"/>
+ <line id="left_3" x1="50" y1="0" x2="50" y2="60" style="stroke:#000000;stroke-width:4"/>
+ <line id="right_3" x1="0" y1="0" x2="0" y2="60" style="stroke:#000000;stroke-width:4"/>
+ <line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
+ </svg>
+</g>
+<text id="jar_3_text" opacity="1" x="20" y="95">0</text>
+
+<g id="jar_5" transform="rotate(180 130 100)">
+ <svg id="jar_5_svg" width="50" height="100" x="105" y="0">
+ <g id="leer_5" opacity="1" >
+ <rect id="jar_5_empty" x="0" y="0" width="50" height="100" style="fill:#DDEEFF"/>
+ <rect id ="jar_5_full" x="0" y="0" width="50" height="100" style="fill:#267CEB"/>
+ <line id="left_5" x1="50" y1="0" x2="50" y2="100" style="stroke:#000000;stroke-width:4"/>
+ <line id="right_5" x1="0" y1="0" x2="0" y2="100" style="stroke:#000000;stroke-width:4"/>
+ <line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
+ </svg>
+</g>
+<text id="jar_5_text" opacity="1" x="125" y="95">0</text>
+<line id="goal" x1="107" y1="120" x2="153" y2="120" stroke-width="2" stroke="#FF7777"/>
+
+<circle id="fill_3" cx="25" cy="25" r="15" fill="#BBBBBB"/>
+<rect id="fill_3_sym" x="20" y="20" width="10" height="12" style="fill:#267CEB"/>
+<circle id="fill_5" cx="130" cy="25" r="15" fill="#BBBBBB"/>
+<rect id="fill_5_sym" x="125" y="20" width="10" height="12" style="fill:#267CEB"/>
+<circle id="empty_3" cx="25" cy="65" r="15" fill="#BBBBBB"/>
+<rect id="empty_3_sym" x="20" y="60" width="10" height="12" style="fill:#DDEEFF"/>
+<circle id="empty_5" cx="130" cy="65" r="15" fill="#BBBBBB"/>
+<rect id="empty_5_sym" x="125" y="60" width="10" height="12" style="fill:#DDEEFF"/>
+<circle id="transfer" cx="77.5" cy="45" r="15" fill="#BBBBBB"/>
+<polyline id="transfer_left" points="70,45 76,41 76,49" fill="#00000"/>
+<polyline id="transfer_right" points="85,45 79,41 79,49" fill="#00000"/>
+<rect id="transfer_sym3" x="76" y="43.5" height="3" width="3"/>
+<text id="goal_achieved" opacity="0" x="160" y="125" fill="#FF4444" font-weight="bold">Goal achieved!</text>
+
+</svg>
+<ul>
+<li>Jar3: <b><span id=j3_span>XX</span></b> Gallons
+</li>
+<li>Jar5: <b><span id=j5_span>XX</span></b> Gallons
+</li>
+</ul>
\ No newline at end of file