Anything with Reveal.js

Created by Asvin Goel

The plugin allows to add anything inside an HTML object using an optional JSON string and a javascript function.

The plugin uses a user-given function to manipulate all HTML ojects of the given class. Options can be provided as a JSON string within a comment inside the HTML object and default values can be given for all parameters used by the function.

Example setup


Reveal.initialize({
  // ...
  anything: [ {
    className: "random", 
    defaults: {min: 0, max: 9}, 
    initialize: (function(container, options){ 
      container.innerHTML = Math.trunc( options.min + Math.random()*(options.max-options.min + 1) ); 
      }) 
    },
  ],
  dependencies: [
    // ...
    { src: 'reveal.js-plugins/anything/anything.js' },				
  ]
});

Example without JSON content

Today's winning 3 digit number is : , , .

Above text can be generated by the code:


Today's winning 3 digit number is : , , .

Note, that the default values are used because no JSON string is provided.

Example with JSON content

Today's roll of a die is: .

Above text can be generated by the code:


Today's roll of a die is: .

Note, that the default values are overwritten by the parameters given in the JSON string.

Animated SVG

Javascript libraries

You can use external javascript libraries e.g. to insert function plots and charts.

Function-plot.js

Chart.js

Decision trees with D3.js

Anything with D3.js

Based on This is a globe by Mike Bostock.

World tour

Based on World Tour by Mike Bostock.

The end

Check out other plugins by clicking on    and then on "Plugins ".

Have a look at the source code & documentation on Github.

Fork me on GitHub