This is a (short) tutorial page on how to integrate VisuAlgo's visualization and training pages for creating a web-based lecture notes, programming contest problem editorial, or custom-made online quiz using VisuAlgo.

Let's suppose that a Computer Science lecturer wants to explain about shortest paths (SSSP) problem or a programming contest chief judge wants to explain a solution for a problem that can be reduced into a standard shortest path problem. He/she can write the explanation here, and embed VisuAlgo's sssp page with the correct URL parameters to showcase the solution.

For example, this UVa 10986 - Sending email problem is about a classic SSSP problem.

Look at the page source of this HTML file to study how we can embed VisuAlgo to your problem editorial using iframe. To get the JSON, click "Draw Graph", draw the required graph, check "copy JSON text to clipboard", and use that JSON text like shown below.

This one is to illustrate the sample test case 1. Ask your reader to run the Dijkstra's algorithm (any variant) from source vertex 0 on that graph to get the same answer as in sample output: 10 (shortest path from 0 → 10 is 10, actually 10x10 = 100). Note that as VisuAlgo limits the weight to 2 digits only (99) for visualization purpose, I have scaled down all edge weights by dividing all weights by 10.

This one is to illustrate the sample test case 2. Ask your reader to run the Dijkstra's algorithm (any variant) from source vertex 2 on that graph to get the same answer as in sample output: 15 (shortest path from 2 → 1 → 0 is 15, actually 15*10 = 150).

We can also use VisuAlgo online quiz feature, like this:

End of the current version of the tutorial. If you have feedback on this new feature, let Steven know (stevenhalim at gmail dot com).