Answer highlight changes

stable.user.js

@@ -50,7 +50,7 @@
 // TODO:
 // grabboxes test on quiz page
 
-// TODO: test if this ; does not fuck up things
+// TODO: test if this ; does not fuck up things (it seams it does not)
 ;(function() {
   // eslint-disable-line
   // GM functions, only to disable ESLINT errors
@@ -84,7 +84,7 @@
 
   // forcing pages for testing. unless you test, do not set these to true!
   // only one of these should be true for testing
-  const forceTestPage = true // TODO: remove
+  const forceTestPage = false
   const forceResultPage = false
   const forceDefaultPage = false
   const logElementGetting = false
@@ -96,7 +96,7 @@
   var lastestVersion = ''
   var subjInfo
 
-  setVal('ISDEVEL', true) // TODO: remove
+  // setVal('ISDEVEL', true)
 
   if (getVal('ISDEVEL')) {
     console.log('Moodle script running in developement mode!')
@@ -351,35 +351,23 @@
 
   function createHoverOver(target) {
     const overlayElement = document.createElement('div')
-    overlayElement.style.cssText =
-      'position:fixed; pointer-events: none; user-select: none; z-index:10000'
     overlay.append(overlayElement)
     let currX, currY, currWidth, currHeight
-    const copyBoundingRect = () => {
-      let { x, y, width, height } = target.getBoundingClientRect()
-      if (x !== currX) {
-        overlayElement.style.left = x + 'px'
-        currX = x
-      }
-      if (y !== currY) {
-        overlayElement.style.top = y + 'px'
-        currY = y
-      }
-      if (width !== currWidth) {
-        overlayElement.style.width = width + 'px'
-        currWidth = width
-      }
-      if (height !== currHeight) {
-        overlayElement.style.height = height + 'px'
-        currHeight = height
-      }
-    }
-    copyBoundingRect()
-    const interval = setInterval(copyBoundingRect, 30)
-    overlayElement.destroy = () => {
-      clearInterval(interval)
-      overlayElement.remove()
-    }
+    let { left, top, width, height } = target.getBoundingClientRect()
+    left += window.scrollX
+    top += window.scrollY
+
+    SetStyle(overlayElement, {
+      pointerEvents: 'none',
+      userSelect: 'none',
+      position: 'absolute',
+      zIndex: 999999,
+      top: top + 'px',
+      left: left + 'px',
+      width: width + 'px',
+      height: height - 10 + 'px',
+    })
+
     return overlayElement
   }
 
@@ -1697,9 +1685,8 @@
               // going through "toColor"
               let highlight = createHoverOver(answers[toColor[i]])
               Object.assign(highlight.style, {
-                border: '7px solid rgba(100, 240, 100, 0.8)',
+                border: '4px solid rgba(100, 240, 100, 0.8)',
                 borderRadius: '10px',
-                margin: '-13px 0 0 -8px',
               })
             }
           }