diff --git a/Assets/Resources/Prefabs/UI/FrameITUI.prefab b/Assets/Resources/Prefabs/UI/FrameITUI.prefab
index d726a68734f04ede2a1ac84dea1ce8d5bcacf4e6..a1609d901a39ae0cf6544a1861fb1e23141bf7ae 100644
--- a/Assets/Resources/Prefabs/UI/FrameITUI.prefab
+++ b/Assets/Resources/Prefabs/UI/FrameITUI.prefab
@@ -406,12 +406,12 @@ PrefabInstance:
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
       propertyPath: m_AnchorMax.y
-      value: 1
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
       propertyPath: m_AnchorMin.y
-      value: 1
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
@@ -561,7 +561,7 @@ PrefabInstance:
     - target: {fileID: 6500467619489830996, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: 605880
+      value: 146554910
       objectReference: {fileID: 0}
     - target: {fileID: 7849991042685492731, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
@@ -611,7 +611,7 @@ PrefabInstance:
     - target: {fileID: 7989559431199338490, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: -33660
+      value: -8136900
       objectReference: {fileID: 0}
     - target: {fileID: 8004702056544321748, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
diff --git a/Assets/Resources/Prefabs/UI/Ingame/HidingCanvas.prefab b/Assets/Resources/Prefabs/UI/Ingame/HidingCanvas.prefab
index ba7a6d62ac82c3a2206515433c0f5d0aea8f4c2e..d46918be32052d1850dd5431f381855637b54ca6 100644
--- a/Assets/Resources/Prefabs/UI/Ingame/HidingCanvas.prefab
+++ b/Assets/Resources/Prefabs/UI/Ingame/HidingCanvas.prefab
@@ -3467,6 +3467,11 @@ PrefabInstance:
       propertyPath: targetUrl
       value: http://127.0.0.1:5500/scrollView.html
       objectReference: {fileID: 0}
+    - target: {fileID: 2459857651630437765, guid: 1e9d514b702f5784791a4df8d22e1866,
+        type: 3}
+      propertyPath: PageScaleFactor
+      value: 4
+      objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_Pivot.x
@@ -3490,7 +3495,7 @@ PrefabInstance:
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_AnchorMax.y
-      value: 0
+      value: 1
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
@@ -3505,12 +3510,12 @@ PrefabInstance:
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_SizeDelta.x
-      value: 32
+      value: 890
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_SizeDelta.y
-      value: 32
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
@@ -3572,6 +3577,11 @@ PrefabInstance:
       propertyPath: m_LocalEulerAnglesHint.z
       value: 0
       objectReference: {fileID: 0}
+    - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
+        type: 3}
+      propertyPath: m_ConstrainProportionsScale
+      value: 1
+      objectReference: {fileID: 0}
     - target: {fileID: 8825460134736404412, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_Name
@@ -3603,12 +3613,6 @@ MonoBehaviour:
   m_Script: {fileID: 11500000, guid: 534d25977ad35154781c29672ce2bb13, type: 3}
   m_Name: 
   m_EditorClassIdentifier: 
-  onHintRequested:
-    m_PersistentCalls:
-      m_Calls: []
-  onClick:
-    m_PersistentCalls:
-      m_Calls: []
 --- !u!1001 &3298748675541104415
 PrefabInstance:
   m_ObjectHideFlags: 0
@@ -3749,7 +3753,7 @@ PrefabInstance:
     - target: {fileID: 4838871000058222821, guid: 49deb83b881477047bfac0ee629a7ae9,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: -0.000030517578
+      value: 0
       objectReference: {fileID: 0}
     m_RemovedComponents: []
   m_SourcePrefab: {fileID: 100100000, guid: 49deb83b881477047bfac0ee629a7ae9, type: 3}
diff --git a/Assets/Scripts/UI/InGame/ScrollDetails.cs b/Assets/Scripts/UI/InGame/ScrollDetails.cs
index 3c7f26db1dd287a73e42fc0cb82f20da52af282e..0ff048e7ede4f73f4ce5a498980fd295a013edf3 100644
--- a/Assets/Scripts/UI/InGame/ScrollDetails.cs
+++ b/Assets/Scripts/UI/InGame/ScrollDetails.cs
@@ -70,7 +70,7 @@ private void ShowScroll(Scroll newScroll)
 
         var description = newScroll.description;
         // if description is a html description, extract the alternative text representation
-        if (newScroll.description.StartsWith("<scroll-description"))
+        if (Regex.IsMatch(newScroll.description, ".*<scroll-description.*"))
         {
             description = Regex.Match(newScroll.description, "<scroll-description [^>]* alt=((?>\\\")|(?>\\'))([^>]*?)\\1[^>]*>").Groups[2].Value;
         }
diff --git a/Assets/Scripts/UI/InGame/WebViewController.cs b/Assets/Scripts/UI/InGame/WebViewController.cs
index 0be29c3f3c66ce0d40ccdd1b8cb2681e42242c4e..422ceffdf2a0b8ed8c44fb8e36044a1f621546ec 100644
--- a/Assets/Scripts/UI/InGame/WebViewController.cs
+++ b/Assets/Scripts/UI/InGame/WebViewController.cs
@@ -10,6 +10,7 @@
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
+using System.Text.RegularExpressions;
 using UnityEngine;
 using UnityEngine.Events;
 
@@ -61,7 +62,7 @@ private void DocumentUpdatedHandler(documentUpdatedEvent _)
     private async void RegisterBrowserEventhandlers()
     {
         // register js event handlers in the browser
-        _ = webViewComponent.tab.Evaluate("dropZones = document.querySelectorAll('[dropzone=\"copy\"]'); dropZones.forEach( dropZone => dropZone.addEventListener(\"drop\", ev => dropHandler(ev, \"DropEvent\")) )");
+        _ = webViewComponent.tab.Evaluate("addDropZoneEventListeners()");
         
         // register c# event handlers
         // get the dropzones from the scroll and add the event handler to track when something is dropped
@@ -86,10 +87,22 @@ private async void SetScrollContent(Scroll scroll)
         DomNodeWrapper scrollContainer = await document.querySelectorAsync("#scrollContainer");
 
         var description = scroll.description;
-        // if scroll is a lagacy plain text scroll, generate html with slots for the required facts
-        if (!scroll.description.StartsWith("<scroll-description"))
+        if (Regex.IsMatch(description, ".*<scroll-description.*"))
         {
-            // generate slots for a plane text scroll description
+            description = Regex.Replace(description, "<scroll-slot([^>]*)>([^<]*)</scroll-slot>", match =>
+            {
+                Debug.LogWarning($"Regex: Value'{match.Value}', Group[{match.Groups.Count - 1}]={match.Groups[match.Groups.Count -1]}");
+                var extraAttributes = match.Groups[1].Value;
+                var slotId = match.Groups[2].Value;
+                var assignment = SwitchScrollUI.activeScrollData.Assignments[slotId];
+                /** label of the assigned fact, or the slot label if nothing assigned */
+                var label = assignment.IsSet ? assignment.fact.GetLabel(StageStatic.stage.factState) : scroll.requiredFacts.Find(fact => fact.@ref.uri == slotId).label;
+                return $"<mi dropzone='copy' data-slot-id='{slotId}' {(assignment.IsSet ? $"data-fact-id='{assignment.fact.Id}'" : "")} {extraAttributes}>{label}</mi>";
+            });
+        }
+        else
+        {
+            // scroll is a lagacy plain text scroll, generate html with slots for the required facts
             var factSlots = SwitchScrollUI.activeScrollData.Assignments
                 .Where(pair => pair.Value.IsVisible)
                 .Select(pair =>
@@ -123,6 +136,14 @@ private async void DropzoneAttributeModifiedHandler(attributeModifiedEvent attri
                 throw new Exception("data-slot-id attribute not found on dropzone");
             }
 
+            // if fact has been unasigned from the scroll
+            if (attributeModifiedEvent.value == "null")
+            {
+                // remove fact from slot
+                SwitchScrollUI.activeScrollData.AssignFact(slot, null);
+                return;
+            }
+
             // get the fact from the fact id
             if (!FactRecorder.AllFacts.TryGetValue(attributeModifiedEvent.value, out Fact fact))
             {
diff --git a/Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html b/Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html
index 9c1302c95e31cd7ba6be52159ab4604dc93e37da..fcdf0a1b8e346dc5e8610fe0c6aa189d2c7e5664 100644
--- a/Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html
+++ b/Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html
@@ -4,9 +4,6 @@
   <title>Scroll View</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
-    body {
-      font-size: 100px;
-    }
     [dropzone] {
       background-color: grey;
     }
@@ -72,7 +69,7 @@
       </mtable>
     </math>
   </div>
-  <button type="button" title="Apply the scroll" onclick="applyScroll()">Magic</button><br>
+  <button type="button" title="Apply the scroll" onclick="applyScroll('')">Magic</button><br>
   <button type="button" title="Hint" onclick="getHint('http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC')">Hint</button>
 </body>
   <script>
@@ -191,52 +188,59 @@
   
   /** @param {DragEvent} event  */
   function dropHandler(event) {
-      event.preventDefault()
-  
-      const data = event.dataTransfer.getData("application/json")
-      //const data = event.dataTransfer.getData("text/plain")
-      console.log(`Droped data: '${event.dataTransfer.types}'`, event.dataTransfer.types)
-  
-      /** @type {Fact} */
-      const fact = JSON.parse(data)
-      console.warn(`Droped Fact '${fact.label}':`, fact)
-  
-      /** @type {HTMLElement} */
-      const element = event.target
-  
-      if (element.hasAttribute("data-allowed-types")) {
-          //const allowedTypesStr = element.dataset["allowed-types"]
-          const allowedTypesStr = element.getAttribute("data-allowed-types")
-          const allowedTypes = allowedTypesStr.split(",")
-  
-          if (!allowedTypes.includes(fact.s_type)) {
-              console.warn(`The drop target data-type '${fact.s_type}' is not a member of the allowed types '${allowedTypesStr}'`)
-              return
-          }
+    event.preventDefault()
+    console.log("dropHandler", event)
+
+    const data = event.dataTransfer.getData("application/json")
+    //const data = event.dataTransfer.getData("text/plain")
+    console.log(`Droped data: '${event.dataTransfer.types}'`, event.dataTransfer.types)
+
+    /** @type {Fact} */
+    const fact = JSON.parse(data)
+    console.warn(`Droped Fact '${fact.label}':`, fact)
+
+    /** @type {HTMLElement} */
+    const element = event.target
+
+    if (element.hasAttribute("data-allowed-types")) {
+      //const allowedTypesStr = element.dataset["allowed-types"]
+      const allowedTypesStr = element.getAttribute("data-allowed-types")
+      const allowedTypes = allowedTypesStr.split(",")
+
+      if (!allowedTypes.includes(fact.s_type)) {
+        console.warn(`The drop target data-type '${fact.s_type}' is not a member of the allowed types '${allowedTypesStr}'`)
+        return
       }
-  
-      element.innerHTML = fact.label
-      element.fact = fact
-      element.dataset.factId = fact.id
-  }
-  
-  
-  /*
-  * debug functions
-  */
-  
-  /** @param {DragEvent} event  */
-  function printHandler(event, evName) {
-      let items = event.dataTransfer.types
-      console.log(`${evName} getData: '${event.dataTransfer.getData("application/json")}'`, items)
-      console.log(`${evName} getData: '${event.dataTransfer.types}'`, items)
+    }
+
+    element.innerHTML = fact.label
+    element.fact = fact
+    element.dataset.factId = fact.id
   }
-  /** @param {DragEvent} event  */
-  function printPreventDefaultHandler(event, evName) {
-      printHandler(event, evName)
-      event.preventDefault()
+
+  /** @param {MouseEvent} event  */
+  function clickHandler(event) {
+    event.preventDefault()
+    console.log("clickHandler")
+    console.log("clickHandler", event)
+    switch (event.button) {
+      case 0:
+        console.log("Left button clicked")
+        event.target.fact = null
+        event.target.dataset.factId = null
+        break
+      case 1:
+        console.log("Middle button clicked")
+        break
+      case 2:
+        console.log("Right button clicked")
+        getHint(event.target.dataset.slotId)
+        break
+      default:
+        console.log("Unknown button clicked")
+    }
   }
-  
+
   /*
   * register the drag event listeners
   */
@@ -249,10 +253,29 @@
   //document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
   
   // select all dropzones and add drop event listeners
-  let dropZones = document.querySelectorAll('[dropzone="copy"]')
-  dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
+  //let dropZones = document.querySelectorAll('[dropzone="copy"]')
+  //dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
+  
+  /** select all dropzones and add drop event listeners */
+  function addDropZoneEventListeners() {
+    console.log("addDropZoneEventListeners")
+    document.querySelectorAll('[dropzone="copy"]')
+      .forEach( dropZone => {
+        dropZone.removeEventListener("drop", dropHandler)
+        dropZone.removeEventListener("click", clickHandler)
+        dropZone.removeEventListener("contextmenu", clickHandler)
+        //dropZone.addEventListener("dragover", ev => ev.preventDefault())
+        dropZone.addEventListener("drop", dropHandler)
+        dropZone.addEventListener("click", clickHandler)
+        dropZone.addEventListener("contextmenu", clickHandler)
+      })
+  }
+  //addDropZoneEventListeners()
   </script>
 
+
+
+
   <!--<script src="visualiseCursor.mjs" defer type="module"></script>-->
   <!--<script>
   /* mouse and pointer event handling */
diff --git a/Packages/bessw.unity.webview b/Packages/bessw.unity.webview
index 8cd56ed2cf3b543fcc6d895932a6f13e6b9400fd..b54ce216768ba77511fd87b5c17739232e0c5775 160000
--- a/Packages/bessw.unity.webview
+++ b/Packages/bessw.unity.webview
@@ -1 +1 @@
-Subproject commit 8cd56ed2cf3b543fcc6d895932a6f13e6b9400fd
+Subproject commit b54ce216768ba77511fd87b5c17739232e0c5775