diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css
new file mode 100644
index 0000000..a2731fd
--- /dev/null
+++ b/docs/assets/uncertainty/uncertainty.css
@@ -0,0 +1,37 @@
+#click_box {
+    width: 100%;
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+}
+
+#display_box {
+    width: 100%;
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+}
+
+#right_box {
+    margin-left: 10%;
+}
+
+.datapoint {
+    height: 10px;
+    width: 10px;
+    background-color: #4051b5;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+}
+
+.border_zone {
+    outline: 10px solid white;
+    width: 45%;
+    position: relative;
+    float: left;
+}
+
+.dummy {
+    margin-top: 100%;
+}
\ No newline at end of file
diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js
new file mode 100644
index 0000000..f3271fd
--- /dev/null
+++ b/docs/assets/uncertainty/uncertainty.js
@@ -0,0 +1,86 @@
+const xs = [];
+const ys = [];
+
+function addPoint(e) {
+    // get coordinates of mouseclick
+    const click_box = document.getElementById("click_box");
+    var rect = click_box.getBoundingClientRect();
+    var x = (e.clientX - rect.left - 5) / rect.width * 100;
+    var y = (e.clientY - rect.top - 5) / rect.width * 100;
+
+    // save coordinates
+    xs.push(x);
+    ys.push(y);
+
+    // create new datapoint
+    const datapoint = document.createElement("span");
+    datapoint.classList.add("datapoint");
+
+    // add datapoint to div
+    click_box.appendChild(datapoint);
+
+    // place datapoint at correct coordinates
+    datapoint.style.left = x + "%";
+    datapoint.style.top = y + "%";
+
+    // let datapoint be behind border to prevent clipping edge
+    datapoint.style.zIndex = -1;
+
+    // update mean and errorbars view box
+    updateCentre();
+}
+
+function updateCentre() {
+    // create and append mean point to view box if it does not exist yet
+    if (xs.length == 1) {
+        const datapoint = document.createElement("span");
+        datapoint.classList.add("datapoint");
+        datapoint.id = "mean_point";
+
+        const display_box = document.getElementById("display_box");
+        display_box.appendChild(datapoint);
+    }
+
+    // calculate mean
+    var x = 0;
+    var y = 0;
+    for (var i = 0; i < xs.length; i++) {
+        x += xs[i]/xs.length;
+        y += ys[i]/ys.length;
+    }
+
+    // calculate standard error
+    var x_square_sum = 0;
+    var y_square_sum = 0;
+
+    for (var i = 0; i < xs.length; i++) {
+        x_square_sum += Math.pow((xs[i] - x), 2);
+        y_square_sum += Math.pow((ys[i] - y), 2);
+    }
+
+    var dx = Math.pow(x_square_sum, 0.5) / xs.length
+    var dy = Math.pow(y_square_sum, 0.5) / ys.length
+
+    // get dimensions of view box
+    const display_box = document.getElementById("display_box");
+    var rect = display_box.getBoundingClientRect();
+
+    // set errorbars
+    const xbar = document.getElementById("xbar");
+    const ybar = document.getElementById("ybar");
+
+    xbar.x1.baseVal.value = x - dx + 5 / rect.width * 100;
+    xbar.x2.baseVal.value = x + dx + 5 / rect.width * 100;
+    xbar.y1.baseVal.value = y + 5 / rect.width * 100;
+    xbar.y2.baseVal.value = y + 5 / rect.width * 100;
+
+    ybar.x1.baseVal.value = x + 5 / rect.width * 100;
+    ybar.x2.baseVal.value = x + 5 / rect.width * 100;
+    ybar.y1.baseVal.value = y - dy + 5 / rect.width * 100;
+    ybar.y2.baseVal.value = y + dy + 5 / rect.width * 100;
+
+    // set mean point
+    const meanpoint = document.getElementById("mean_point");
+    meanpoint.style.left = x + "%";
+    meanpoint.style.top = y + "%";
+}
\ No newline at end of file
diff --git a/docs/mvc.md b/docs/mvc.md
index 3621895..46dd5a7 100644
--- a/docs/mvc.md
+++ b/docs/mvc.md
@@ -107,4 +107,20 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
     1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast?
     1. Gebruik het plan om je eigen code aan te passen en test dat het werkt.
     
-
+<div style="overflow:hidden" width="100%">
+
+<div class="border_zone">
+    <div id="click_box" onclick="addPoint(event)">
+        <div class="dummy"></div>
+    </div>
+</div>
+
+<div class="border_zone" id="right_box">
+    <div id="display_box">
+        <svg width="100%" preserveAspectRatio="none" style="display: block;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <line id="xbar" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="0.5" />
+            <line id="ybar" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="0.5" /></svg>
+    </div>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 238a23e..90d894b 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -48,12 +48,14 @@ extra_javascript:
   - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js
   - assets/ADC_slider/ADC_slider.js
   - assets/run_button/run_button.js
+  - assets/uncertainty/uncertainty.js
 
 extra_css:
   - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
   - stylesheets/extra.css
   - assets/ADC_slider/ADC_slider.css
   - assets/run_button/run_button.css
+  - assets/uncertainty/uncertainty.css
 
 nav:
   - index.md