helpwithcs's public fiddles
-
Challenge: Wave of Circles
Make a wavy line using circles.
-
Raphael: Loading Images
A sad, but working attempt at loading images using Raphael.
-
Challenge: Basic Eye
A circle inside an ellipse to "look like" an eye.
-
Practice: Manipulate Ellipse
Basic example showing creating of canvas and drawing an ellipse.
-
Practice: Manipulate Circle
Basic example showing creating of canvas and drawing a circle.
-
Practice: Manipulate Rectangle
Basic example showing creating of canvas and drawing a rectangle with rounded corners.
-
Challenge: Rectangle Staircase: Solution
Draw 4 rectangles. Each should have same height, stacked on top of one another and get progressively longer.
-
Challenge: 3 Adjacent Tangential Circles: Solution
Draw a circle in the centre of the canvas then place another just touching (tangential) the centre circle on its left side and another on the right.
-
Challenge: Drawing Circles: Solution
Draw circles in each of the corners of the canvas and a fifth circle in the centre of the canvas.
-
Highlighting Text Using lettering.js
Lettering.js allows you to hover over letters, words and lines.
-
Framing Content
Place border around image and caption block pair.
-
mz2jwobo
No-Library (pure JS), HTML, CSS, JavaScript
-
Text to Speech Using Google Translate
No-Library (pure JS), HTML, CSS, JavaScript
-
Display Enlarged Image Using Magnifier.js
Example taken: http://mark-rolich.github.io/Magnifier.js/
-
Fluid Flow Rate Table Using DataTable
jQuery 2.1.0, HTML, CSS, JavaScript
-
SVG: Recording Flow Rate
This is a three part diagram showing a fluid flowing out of one container and into another. Timing starts when fluid reaches bottom container and ends when desired volume is reached.
-
Display Video without Suggested Videos (and ads)
jQuery 2.1.0, HTML, CSS, JavaScript
-
Drag Circle using Raphael
Drag the circle around the canvas to see it change colour and size.
-
Snowman by Gassia T. (2015)
This is a modified version. It uses an x_offset variable to move the snowman away from the edge. Changing this value can also make the snowman appear to move.
-
Final: Shape and Counting Question Game
Select the right number of shapes as indicated by the problem.