From 60560169ac7b3036f02357548fc07f6ad2aa956c Mon Sep 17 00:00:00 2001 From: Zeke McCrary Date: Mon, 25 Sep 2023 18:13:57 -0400 Subject: [PATCH 1/4] cleaned up js code --- .../vector_addition_calculator.js | 136 +++++++++--------- .../vector2d/vector_addition_calculator.html | 6 +- 2 files changed, 68 insertions(+), 74 deletions(-) diff --git a/static/vector2d/js/vector_addition_calculator/vector_addition_calculator.js b/static/vector2d/js/vector_addition_calculator/vector_addition_calculator.js index 6ae9e4c..3351476 100644 --- a/static/vector2d/js/vector_addition_calculator/vector_addition_calculator.js +++ b/static/vector2d/js/vector_addition_calculator/vector_addition_calculator.js @@ -3,7 +3,6 @@ let vector_table = document.getElementById("vector-table"); let showMath = document.getElementById("show-math"); let stepsDiv = document.getElementById("steps-div"); let outputDiv = document.getElementById("output-div"); - let bottomRow = rows[rows.length - 1]; const translations = { @@ -27,41 +26,6 @@ function clamp_n180_180(degrees) { } -function addRow(event) { - let inputs = bottomRow.children; // The actual td wrappers for the inputs - - // check if the bottom row is not empty - if (inputs[0].children[0].value !== "" || inputs[1].children[0].value !== "") { - let row = document.createElement("tr"); - row.setAttribute("class", "table-row"); - - let box1 = document.createElement("td"); - box1.setAttribute("class", "table-box"); - let inp1 = document.createElement("input"); - inp1.setAttribute("class", "table-input"); - inp1.setAttribute("placeholder", translations.en.magnitude); - box1.append(inp1); - - let box2 = document.createElement("td"); - box2.setAttribute("class", "table-box"); - - let inp2 = document.createElement("input"); - inp2.setAttribute("class", "table-input"); - inp2.setAttribute("placeholder", translations.en.direction); - box2.append(inp2); - - row.append(box1, box2); - vector_table.children[0].appendChild(row); - - // Update bottomRow and move the event listener onto it - bottomRow.removeEventListener("keyup", addRow); - rows = document.getElementsByClassName("table-row"); - bottomRow = rows[rows.length - 1]; - bottomRow.addEventListener("keyup", addRow); - } -} - - function addStep(parent, content) { let paragraph = document.createElement("p"); paragraph.innerText = content; @@ -69,6 +33,34 @@ function addStep(parent, content) { } +function createRow() { + let input = document.createElement("input"); + input.setAttribute("class", "table-input"); + input.setAttribute("placeholder", translations.en.magnitude); + input.setAttribute("name", "magnitude"); + + let tBox1 = document.createElement("td"); + tBox1.setAttribute("class", "table-box"); + tBox1.append(input); + + input = document.createElement("input"); + input.setAttribute("class", "table-input"); + input.setAttribute("placeholder", translations.en.direction); + input.setAttribute("name", "direction"); + + let tBox2 = document.createElement("td"); + tBox2.setAttribute("class", "table-box"); + tBox2.append(input); + + + let tRow = document.createElement("tr"); + tRow.setAttribute("class", "table-row"); + tRow.append(tBox1, tBox2); + + return tRow; +} + + function sumVectors(args) { let xTotal = 0; let yTotal = 0; @@ -136,6 +128,26 @@ function sumVectors(args) { + + +function addRow(event) { + let inputs = bottomRow.children; // The actual td wrappers for the inputs + + // check if the bottom row is not empty + if (inputs[0].children[0].value !== "" || inputs[1].children[0].value !== "") { + let row = createRow(); + + vector_table.children[0].appendChild(row); + + // Update bottomRow and move the event listener onto it + bottomRow.removeEventListener("keyup", addRow); + rows = document.getElementsByClassName("table-row"); + bottomRow = rows[rows.length - 1]; + bottomRow.addEventListener("keyup", addRow); + } +} + + function calculate(event) { if (event.button === 0) { stepsDiv.innerText = ""; @@ -165,13 +177,18 @@ function calculate(event) { let answer = sumVectors(vectorArray); - let magDiv = document.createElement("div"); magDiv.innerText = "Magnitude: " + answer[0]; - outputDiv.prepend(magDiv); + let magDiv = document.createElement("div"); + magDiv.innerText = "Magnitude: " + answer[0]; + + let dirDiv = document.createElement("div"); + dirDiv.innerText = "Direction: " + answer[1] + "°"; + + let dirClampedDiv = document.createElement("div"); + dirClampedDiv.innerText = "Direction (-180 to 180): " + clamp_n180_180(answer[1]) + "°"; - let dirDiv = document.createElement("div"); dirDiv.innerText = "Direction: " + answer[1] + "°"; - outputDiv.append(dirDiv); - let dirClampedDiv = document.createElement("div"); dirClampedDiv.innerText = "Direction (-180 to 180): " + clamp_n180_180(answer[1]) + "°"; + outputDiv.prepend(magDiv); + outputDiv.append(dirDiv); outputDiv.append(dirClampedDiv); } } @@ -191,46 +208,24 @@ function clearTable(event) { stepsDiv.innerText = ""; stepsDiv.style.borderStyle = "hidden"; - vector_table.children[0].remove(); - let tBody = document.createElement("tbody"); - - let tRow = document.createElement("tr"); - tRow.setAttribute("class", "table-row"); - - let tBox1 = document.createElement("td"); - tBox1.setAttribute("class", "table-box"); - - let inp1 = document.createElement("input"); - inp1.setAttribute("class", "table-input"); - inp1.setAttribute("placeholder", translations.en.magnitude); - tBox1.append(inp1); + let tRow = createRow(); + tRow.addEventListener("keyup", addRow); - let tBox2 = document.createElement("td"); - tBox2.setAttribute("class", "table-box"); - - let inp2 = document.createElement("input"); - inp2.setAttribute("class", "table-input"); - inp2.setAttribute("placeholder", translations.en.direction); - tBox2.append(inp2); + vector_table.children[0].remove(); + vector_table.append(document.createElement("tbody")); + vector_table.children[0].append(tRow); - tRow.append(tBox1, tBox2); bottomRow = tRow; - tRow.addEventListener("keyup", addRow); - - tBody.append(tRow); - vector_table.append(tBody); } function enableMathDisplay(event) { if (event.button === 0) { - if (showMath.getAttribute("data-active") === "true") { + if (stepsDiv.getAttribute("data-active") === "true") { showMath.setAttribute("style", "background-color: lightgray"); - showMath.setAttribute("data-active", "false"); stepsDiv.setAttribute("data-active", "false"); } - else if (showMath.getAttribute("data-active") === "false") { + else if (stepsDiv.getAttribute("data-active") === "false") { showMath.setAttribute("style", "background-color: cadetblue"); - showMath.setAttribute("data-active", "true"); stepsDiv.setAttribute("data-active", "true"); } } @@ -239,7 +234,6 @@ function enableMathDisplay(event) { // Register event listeners showMath.addEventListener("click", enableMathDisplay); - document.getElementById("clear-button").addEventListener("click", clear); document.getElementById("calculate-button").addEventListener("click", calculate); bottomRow.addEventListener("keyup", addRow); diff --git a/templates/vector2d/vector_addition_calculator.html b/templates/vector2d/vector_addition_calculator.html index 195be41..0fdcbae 100644 --- a/templates/vector2d/vector_addition_calculator.html +++ b/templates/vector2d/vector_addition_calculator.html @@ -13,13 +13,13 @@

2D Vector Addition Calculator

This calculator uses sin and cos functions to convert each vector to Cartesian coordinates, then add them together and convert the result back to polar coordinates, which is displayed to the user.

-
Show Calculations
+
Show Calculations
- - + +

From 60f35da5bf275c87a470d329328edaf4254e8989 Mon Sep 17 00:00:00 2001 From: Quintin Dunn <93884113+quintindunn@users.noreply.github.com> Date: Wed, 4 Oct 2023 04:11:08 -0400 Subject: [PATCH 2/4] Added styling to 2dvectors home page --- .../css/2dvectors_home/2dvectors_home.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 static/vector2d/css/2dvectors_home/2dvectors_home.css diff --git a/static/vector2d/css/2dvectors_home/2dvectors_home.css b/static/vector2d/css/2dvectors_home/2dvectors_home.css new file mode 100644 index 0000000..404936a --- /dev/null +++ b/static/vector2d/css/2dvectors_home/2dvectors_home.css @@ -0,0 +1,15 @@ +.page-content { + padding: 2vh 3vw; +} + +.heading { + text-align: center; +} + +.info > p { + text-indent: 20px; +} + +ul { + list-style-type: none; +} From 4f653db6b3f121772b12702f545a468798b13ae5 Mon Sep 17 00:00:00 2001 From: Quintin Dunn <93884113+quintindunn@users.noreply.github.com> Date: Wed, 4 Oct 2023 04:11:08 -0400 Subject: [PATCH 3/4] Added styling to 2dvectors home page --- .gitignore | 4 +- .../css/2dvectors_home/2dvectors_home.css | 15 +++++++ templates/vector2d/index.html | 44 +++++++++++++++++-- 3 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 static/vector2d/css/2dvectors_home/2dvectors_home.css diff --git a/.gitignore b/.gitignore index 235c354..dc4a3e4 100644 --- a/.gitignore +++ b/.gitignore @@ -176,4 +176,6 @@ cython_debug/ *.vsix # FLASK_SECRET -FLASK_SECRET.key \ No newline at end of file +FLASK_SECRET.key + +node_modules \ No newline at end of file diff --git a/static/vector2d/css/2dvectors_home/2dvectors_home.css b/static/vector2d/css/2dvectors_home/2dvectors_home.css new file mode 100644 index 0000000..404936a --- /dev/null +++ b/static/vector2d/css/2dvectors_home/2dvectors_home.css @@ -0,0 +1,15 @@ +.page-content { + padding: 2vh 3vw; +} + +.heading { + text-align: center; +} + +.info > p { + text-indent: 20px; +} + +ul { + list-style-type: none; +} diff --git a/templates/vector2d/index.html b/templates/vector2d/index.html index 02f2329..a52e42c 100644 --- a/templates/vector2d/index.html +++ b/templates/vector2d/index.html @@ -1,9 +1,47 @@ {% extends 'vector2d/vector_template.html' %} {% block title %}Information on 2D Vectors{% endblock title %} -{% block head %} {% endblock head %} +{% block head %} + +{% endblock head %} {% block content %} -

Information on 2-dimensional vectors...

-

2D Vectors are a way of representing motion on a 2-dimensional plane. Vectors, or polar coordinates, consist of two numbers, a distance and an angle. While working with them can simplify some problems, doing conversions between them and Cartesian coordinates can be repetitive and time-consuming.

+
+
+

What are 2-Dimensional Vectors

+
+
+
+

2D Vectors are a way of representing motion on a 2-dimensional plane. Vectors, or polar coordinates, consist of two numbers, a distance or velocity and an angle. While working with them can simplify some problems, doing conversions between them and Cartesian coordinates can be repetitive and time-consuming.

+

The vectors are represented with a distance/velocity and an angle in a plethora of ways, though here will be represented in a distance @ angle format, i.e. 25m@45° representing 25 meters at a 45-degree angle. Additionally, it can be represented in a diagram like this:

+ Example image of a vector diagram + +

These vectors can be added using a graphical method, or a computational method. While the graphical method might be easier to wrap your head around, you can quickly lose precision and the more vectors added together, the worse it will most likely get. When adding vectors graphically it's important to remember the rule to line the vectors up tip to tail. What this means is that every vector should be placed with the start of the vector being aligned with the end of the previous vector. The full steps to add vectors graphically are as follows:

+ {# ToDo: Add the steps for graphically adding vectors. #} +
    +
  • 1. Do thing 1
    • +
  • 2. Do thing 2
    • +
  • 3. Do thing 3
    • +
  • 4. Do thing 4
    • +
  • 5. Do thing 5
    • +
+ + {# ToDo: Create an example image of adding vectors graphically. #} + Example image of adding vectors graphically +

While a tiny bit more work to understand, a much more precise method for adding the together is through math, mostly staring trigonometry. Consisting of sin, cos, tan, and the pythagorean theorem. The steps to add vectors mathematically are too fairly simple.

+ {# ToDo: Add the steps for mathematically adding vectors. #} +
    +
  • 1. Do thing 1
    • +
  • 2. Do thing 2
    • +
  • 3. Do thing 3
    • +
  • 4. Do thing 4
    • +
  • 5. Do thing 5
    • +
+ {# ToDo: Create an example image of adding vectors mathematically. #} + Example image of adding vectors mathematically + +

Thoroughly knowing how to add vectors mathematically is vital for AP Physics 1, however once you know the ropes you can use our calculator which can add as many vectors together as you want, and will also show you the steps!

+
+
+ {% endblock content %} \ No newline at end of file From bdb42c794d820e05aa6b3959d286a4e05d78e007 Mon Sep 17 00:00:00 2001 From: Quintin Dunn <93884113+quintindunn@users.noreply.github.com> Date: Wed, 4 Oct 2023 04:19:41 -0400 Subject: [PATCH 4/4] Changed text on the 2d-vector calculator to reference the 2d-vectors homepage --- templates/vector2d/vector_addition_calculator.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/vector2d/vector_addition_calculator.html b/templates/vector2d/vector_addition_calculator.html index 0fdcbae..edcc224 100644 --- a/templates/vector2d/vector_addition_calculator.html +++ b/templates/vector2d/vector_addition_calculator.html @@ -10,7 +10,7 @@

2D Vector Addition Calculator

-

This calculator uses sin and cos functions to convert each vector to Cartesian coordinates, then add them together and convert the result back to polar coordinates, which is displayed to the user.

+

Mathematical 2D vector addition is done using sin and cos functions to convert each vector to Cartesian coordinates, these are then added back together and converted back to polar coordinates, more information on this can be found here.

Show Calculations