Authoring with Multimeda, Plots and PDF

Grok supports images, audio, video, matplotlib plots and PDF as content within slides, as the output of a problem or as a file associated with a problem. These outputs can be automarked using either our image comparison marker, or the custom python marker.

In this document:

Browser support

All multimedia content is dependent on browser support. We recommend using browser friendly png, mp3, mp4 or PDF files. The full list of extensions supported is:

  • Image: PNG, JPG, WEBP, BMP
  • Audio: MP3, WAV, OGG
  • Video: MP4, WEBM, OGV
  • Other: PDF

Uploading a file as an asset

To use a multimedia file, you'll first need to upload it as an asset attached to either a module, or a problem.

1. Click the assets button to go to the assets page

2. Click "new asset" to upload an asset

3. Select a file and upload it

4. You can now use the URL of that file by right-clicking and copying it

Including multimedia in slide content

Most multimedia files can simply be included by using the regular HTML elements. For example an image would be: 

<img src="sampleurl.png" alt="Sample image">

And a video would be: 

<video src="sampleurl.mp4" alt="Sample video">

There is more information in our Content Markup documentation.

For a PDF document you will need to display it in an iframe. An iframe is a webpage within a webpage. This is quite simple as well, like: 

<iframe src="sampleurl.pdf">

You can also use an iframe to include an interactive SVG or HTML file: 

<iframe src="sampleurl.svg">

It's required that your content is uploaded to our website first before you use it with something like this.

Including multimedia in a problem workspace

Problems can include multimedia files like pictures, videos, audio or PDF as part of the workspace. This can be used for multimedia programming, or data science.

1. Make sure your file is uploaded to assets, and then add a new file to the workspace:

2. Name the file something appropriate, and set the file settings to be a "Content URL"

3. Paste the URL into the file contents

Your content should now display in the workspace for this problem. View it in preview mode to check:

Outputting multimedia from a problem

Grok supports two special files for multimedia (all our special files have three underscores):

  •  ___media* for any multimedia files (e.g. ___media.mp3 )
  •  ___plot.png for plotting and charting files

Any code that creates either of these files will display it in the output pane in Grok. For example you could use this python code: 

open('___media.mp3', 'wb').write(open('sample.mp3', 'rb').read())

To create an output audio file from an input audio file.

Marking multimedia in a problem

Grok does not have extensive support for marking multimedia. The two main ways you could mark multimedia are:

  1. Exact image comparison, see our example course.
  2. Custom Python marker, out of scope for this document

Our image differ provides exact image comparison marking. To use the image differ:

1. Set the common output checker to "Image Diff". This will use the diff of images as the check, rather than the diff of STDIO.

2. Include the URL of the expected image as the content of a "URL File Out" file:

Using multimedia in an inline snippet

Inline snippets can also include Content URLs and output media files, just like a problem. For further information please read the Content Markup documentation.

See this example for a program that outputs an image: 

```
open('___media.png', 'wb').write(open('sample.png', 'rb').read())
```
```eg:last;content-url:someurl.png;path:sample.png;hidden
```

This creates a hidden file with the name sample.png that gets its content from someurl.png (this should be a full URL).

The python reads this file, and then outputs the sample file as __media.png when run.

Related Articles