buildHtml
baseUrl https://dotlab.scroll.pub
metaTags
editButton /edit.html
title Vector Dot Product Explorer
style.css

header
 class hero
 div
  class hero-content
  h1 Vector Dot Product Lab
  p Interactive 3D vector visualization with real-time calculations
main
 class container
 section
  class controls
  div
   class vector-inputs
   div
    class vector-group
    h3 Vector A
    div
     class slider-group
     label X
     input
      type range
      id ax
      min -5
      max 5
      value 2
     input
      type number
      class number-input
      value 2
    div
     class slider-group
     label Y
     input
      type range
      id ay
      min -5
      max 5
      value 3
     input
      type number
      class number-input
      value 3
    div
     class slider-group
     label Z
     input
      type range
      id az
      min -5
      max 5
      value 1
     input
      type number
      class number-input
      value 1
   div
    class vector-group
    h3 Vector B
    div
     class slider-group
     label X
     input
      type range
      id bx
      min -5
      max 5
      value 4
     input
      type number
      class number-input
      value 4
    div
     class slider-group
     label Y
     input
      type range
      id by
      min -5
      max 5
      value -1
     input
      type number
      class number-input
      value -1
    div
     class slider-group
     label Z
     input
      type range
      id bz
      min -5
      max 5
      value 2
     input
      type number
      class number-input
      value 2
 section
  class visualization
  canvas
   id vectorCanvas
  div
   class result-box
   p
    class formula
    span A · B = 
    span
     id calculation
   p 0
    class result
    id dotResult
 section
  class explanation
  h2 How Dot Product Works
  div
   class formula-steps
   p The dot product of two vectors is calculated by:
   p | A · B = (A<sub>x</sub> × B<sub>x</sub>) + (A<sub>y</sub> × B<sub>y</sub>) + (A<sub>z</sub> × B<sub>z</sub>)
    class math-formula
   p It represents the product of their magnitudes and the cosine of the angle between them.
footer
 div
  class footer-content
  p Created with ♥ by the Math Visualization Community

script.js