What is Compiler API?

Compiler API is a playground application that allows editing, compiling and running sample codes through a web browser. Compiler API supports multiple languages such as C++, LaTeX, Octave, Python, and more (See list of supported languages for details). The main objective of the Compiler API is to facilitate intercative learning. Compiler API can be integrated into a Canvas page to build interactive course contents.

Try

Try provides an interactive environment to write, edit and execute code in any of the supported languages. A user or example designer can access Try in three ways:

https://compiler-api.wpi.edu/try.php is the main editor environment that enables the compile language select tool. A user can choose a compile language from the list and run the code. If the editor environment is empty, or if the current content is the preset content of the current compile language, changing the language automatically loads the minimal working example for the new language.
The user or example designer can fix the compile language and an editor preset using either:
1. a direct input in the URL (see Try with URL for details). This approach is more suitable for examples with no preset or a single line preset.
2. using an HTML form or a POST API (see Try with HTML for details). An HTML form provides an easy path to build examples with longer and more involved presets.

Try with URL

In order to set up a Try environment using the URL, we need to provide the language, and optionally the preset value, in the URL address as

https://compiler-api.wpi.edu/try.php?lang=[compile_lang]&preset=[preset]

where [compile_lang] defines the editor language and [preset] defines the preset content. If preset=auto the editor will load a minimal working example for [compile_lang]. For the complete list of [compile_lang] options see list of supported languages. As an example

https://compiler-api.wpi.edu/try.php?lang=cpp&preset=auto

loads a Try environment with a C++ compiler and a minimal working example to print "Hello World!". We can use this URL in an iframe as

which results in

For more information on styling the iframe see Embeding Try in a webpage.

Try with HTML Form

As an alternative to URL, we can use a POST request to https://compiler-api.wpi.edu/try.php to set the editor language and preset content. An easy approach to do so is to use an HTML form. The following example shows how to set up a LaTeX Try Me with a preset. This example and others are available to download in the Resources section.

File: LaTeX_Example.html
Content:

<html> <body onload = "document.apiform.submit();">
<form name="apiform", action = "https://compiler-api.wpi.edu/try.php", method="post", novalidate>
<input type = "hidden", name = "lang", value = "latex" /> 
<textarea name = "preset"> 
\documentclass{article}

% Start of the document.
\begin{document}

% document content.
Hello World!

% End of the document.
\end{document}
</textarea></form></body></html>

Embedding Try in a Webpage

A Try environment (https://compiler-api.wpi.edu/try.php) can be embedded in any webpage using an iframe. To do so, you may use an iframe container

where the src="https://compiler-api.wpi.edu/try.php" can be replaced by other URL options as explained in Try with URL.

To control the appearance of the iframe you may use an iframe container as described next.

CSS:
.compiler-api-container{
overflow: hidden;
height: 500px;
width: 100%;
}

.compiler-api-container iframe {
border: 0;
height: 100%;
width: 100%;
}

HTML:
<div class="compiler-api-container">
<iframe src="https://compiler-api.wpi.edu/try.php" title="Editor"></iframe>
</div>

A Try environment with compile language select option is embedded here as a reference:

Steps to Embed Try in Canvas

If there is no preset value or the preset content is composed of a single line, we can use the Try with URL method and include a URL with a desired language and preset in an iframe using the Canvas HTML editor. As an example, to include an Octave editor with auto preset in Canvas, click on the HTML editor tool on Canvas (as depicted in Step 4 - Part 1 image below) and type the following code in the page:

If the preset is more involved, we need can use an HTML file to store the preset content as explained in Try with an HTML Form and include the file in Canvas based on the following steps:

Step 1: Create an example HTML file as explained in Try with an HTML Form.
Step 2: Upload the HTML file in Canvas.
Step 3: Use the Upload Document Tool to insert the example file in the Canvas page
Step 4: Use the HTML editor to find the file_address of the file in Canvas. To do so, find the link to the file in the HTML file. The link is enclosed between <a> and </a> as <a id="somenumber" class="someclass" href="file_address?wrap=1" ... </a>.
Step 5: Create an iframe with src = file_address/download. Use style = "width:100%; height:500px; border:0;" for the iframe as
<iframe style = "width: 100%; height: 500px; border: 0;" title = "Try Example" src = "file_address/download"></iframe>
Step 6: You may now close the HTML editor and delete the link to the file that we made in Step 3.

The described steps are illustrated in the following images. Click on each image to access a higher resolution file.

Supported Languages

The following list includes the current supported languages and their corresponding lang values.

C++ : cpp
HTML : html
LaTeX : latex
Octave : octave
Python 3 : python
Plain Text : text

Restrictions

The maximum execution time is set to 5 seconds. This restriction is applied to eliminate halts due to possible infinite-loops in the codes and to ban usage of the platform for large projects.

Resources

The following resources are available to the user and example designers.

Example Design Templates

Zip file containing some example design templates and samples: examples.zip.
In this zip file you can find:
- example.html: Empty example template
- cpp_example.html: C++ example that uses the template with a preset value
- cpp_example_auto.html: C++ example with auto preset
- latex_example.html: LaTeX example

Preloaded Data

Sample Images

All images are on the public domain and collected from Wikipedia. To include any of the following images in a LaTeX document use \graphicspath{{/var/www/html/images/}} in the document preamble.

The list of sample images are:

a_sunday_on_la_grande_jatte.jpeg: "Sunday Afternoon on the Island of La Grande Jatte" by french artist Georges Seurat (Dimensions: 1600 x 1076, Size: 893 KB) [link to the image]
girl_with_a_pearl_earring.jpeg: "Girl with a Pearl Earring" by Dutch Golden Age painter Johannes Vermeer (Dimensions: 1011 × 1197, Size: 360 KB) [link to the image]
mona_lisa.jpeg: "Mona Lisa" by Leonardo da Vinci (Dimensions: 804 × 1198, Size: 340 KB) [link to the image]
starry_night.jpeg: "The Starry Night" by Vincent van Gogh (Dimensions: 1513 × 1198, Size: 856 KB) [link to the image]
the_scream.jpeg: "The Scream" by Norwegian artist Edvard Munch (Dimensions: 965 × 1198, Size: 336 KB) [link to the image]
the_son_of_man.jpeg: "The Son of Man" by the Belgian surrealist painter René Magritte (Dimensions: 266 × 374, Size: 82 KB) [link to the image]
the_storm_on_the_see_of_galilee.jpeg: "The Storm on the Sea of Galilee" by the Dutch Golden Age painter Rembrandt van Rijn (Dimensions: 482 × 599, Size: 66 KB) [link to the image]