WebSketchpad Sample Page

Version: 4.8.0

This page demonstrates three methods of writing static HTML pages that contain WebSketchpad sketches. These methods do not require writing any JavaScript or direct interaction with the WebSketchpad engine. One must only create an appropriate HTML element with special attributes. When the page is loaded, the software will search for these attributes and configure the page itself.

All pages that contain WebSketchpad sketches should reference the CSS stylesheet contained in this distribution and the following JavaScript files:

• wsp-min.js
• wsp-runner.js

By URL

The following is the pattern for loading a sketch document from a url. The document referred to must be a valid JSON document. The url is named in the "data-url" attribute.

       
        <div class="sketch_canvas" data-url="./sketches/Triangle_export.json"></div>
     

By Var

This method for initializing the sketch passes a JavaScript variable the value of which is a sketch document. In this case the variable is defined in the header of this HTML document, but it could be defined in a separate JavaScript file that is referred to in the header. The variable containing the sketch is named in the "data-var" attribute.

        <div class="sketch_canvas" data-var="triangle3"></div>