diff --git a/examples/ExampleStyled/basicCanvas.js b/examples/ExampleStyled/basicCanvas.js
new file mode 100644
index 0000000..fd4dbf6
--- /dev/null
+++ b/examples/ExampleStyled/basicCanvas.js
@@ -0,0 +1,8 @@
+function setup() {
+  // try changing the values here
+  createCanvas(300,200);
+  background(0);
+}
+
+function draw() {
+}
diff --git a/examples/ExampleStyled/basicShapes.js b/examples/ExampleStyled/basicShapes.js
new file mode 100644
index 0000000..456f9fa
--- /dev/null
+++ b/examples/ExampleStyled/basicShapes.js
@@ -0,0 +1,16 @@
+function setup() {
+  createCanvas(300,200);
+  background(255);
+}
+
+function draw() {
+  // try changing the values of each shape and their fill() values
+  fill(0);
+  ellipse(50,50,20,30);
+  fill(255,0,0);
+  rect(150,50,100,50);
+  fill(0,255,0);
+  triangle(50,150,100,150,100,100);
+  fill(0,0,255);
+  quad(200,150,250,150,250,180,200,190);
+}
diff --git a/examples/ExampleStyled/index.html b/examples/ExampleStyled/index.html
index 257e524..e3fee5e 100644
--- a/examples/ExampleStyled/index.html
+++ b/examples/ExampleStyled/index.html
@@ -20,7 +20,12 @@
     <section id="tableOutput-content"></section>
     <section id="soundOutput-content"></section>
     <script src="../../dist/p5.accessibility.js"></script>
+<!-- Uncomment the file you want to view -->
     <script src="app.js"></script>
+<!--
+    <script src="basicCanvas.js"></script>
+    <script src="basicShapes.js"></script>
+-->
 </body>
 
-</html>
\ No newline at end of file
+</html>