How to include images, videos, and much more

Quarterfall makes it easy to create high-quality study material and assignments. You can apply various types of formatting. You can easily include all sorts of media, like images, videos, presentations, audio fragments, and so on. You can also include formatted and color-coded  code in various programming languages. And you can include emoji and equations.

To create beautiful assignments in an easy way, Quarterfall does not use a WYSIWYG editor but instead uses Markdown. This might be surprising at first sight but with Markdown, and the extensions Quarterfall adds, you can create much nicer assignments than with other editors. And it also goes faster, as you can continue typing without having to press all sort of buttons. In this tutorial we give you an overview of the possibilities.

We assume you created a course, with a module and an empty assignment that we call "Using formatting". We will demonstrate the possibilities using a study material block. But understand that you can use the same everywhere you enter texts, like in the introduction, an exercise text, in answers in multiple choice, in solutions, and even in student feedback. So the first step is to add a study material block. So the screen will look as follows:

At the left there is the input field where you can enter the Markdown text. At the right you see the preview with the formatted text. If you don't see the preview, make sure the switch Show preview in the menu at the top-right is on. And make sure the window is wide enough. Any text you type at the left will almost immediately get interpreted and the result is shown at the right.

Basic formatting

Let us start with some basic formatting.

Bold and italic

If you want to make a piece of text italic, put it between * symbols. Make sure the first star is immediately before the italic text and the second star is immediately behind the italic text, without any spaces between it. So for example: *this is italic*.

To make a piece of text bold put two * symbols in front and behind it. And to make it both bold and italic, put three * symbols in front and behind it. Here is an example:

Note that the three parts are put on the same line. The way you split your text in lines does not have effect on the result. The same applies to extra spaces you add in your text. They are ignored (most of the time; see below). The reason is that the text should look good, independent of the size of the screen of the student.

If you want to break to a new line you can either put an empty line below the text, to start a new paragraph, or you must end the line with two spaces, as we do in the example below.

Headings and lines

To add a large heading, start the text with the # symbol and a space. (Don't forget the space!) For smaller headings use ## or ###.

To add a horizontal line, simple put --- (three dashes) on the line. Here is an example. Note that here we put two spaces after the four texts to put them on separate lines.

Lists and quotes

It it easy to add lists to your text. You can have bullet lists and numbered lists. For bullet lists, start every line with a dash (-) and a space. For a numbered list, start them with a number, a dot, and a space. (The numbers do not need to be correct; You can use 1. for all of them.) Here is an example:

Note that we also included a block quote. A block quote starts with a > sign and a space. 

You cannot use different symbols for the bullet lists. But that is actually also not a good idea as it might confuse students. Uniform style is always very important.

Images

Obviously you can include images in your text. Although Markdown has a simple image mechanism, Quarterfall adds its own to give you more control.

There are two ways you can add images. The first way is to include an image that is already stored on the web. In this case you must provide the url to the image. The second, preferred, way is to attach the image to the assignment and refer to it in the text. Here we describe the first way. The next section deals with attached images.

Say we want to include an image of a famous composer, store in the url http://muziekgeschiedenis.hugoverweij.nl/images/mozartcols3.jpg. You can add the following to your text:

```image
url: http://muziekgeschiedenis.hugoverweij.nl/images/mozartcols3.jpg
position: left
border: true
```

This is built up as follows. The image is described in a block. The block starts with three backquotes and end with three backquotes. Quarterfall has many of such include blocks that all have the same form. After the first three backquotes is the type of content. In this case an image. On the next line we provided the url that points to the image. And then there can be some options. In the example above we used the position option to place the image at the left rather than in the center, and the border option to draw a border around the image. There are also options to set the size and shape of the image. See the help on including images for more information.

Note that you can use jpg images, png images, or svg images. The latter type is scalable, so that often gives better quality, in particular when using it for diagrams. B.t.w. you can use a free tool like Google Drawing to create drawings or diagrams and save them as svg.

Attaching images

The second way to show an image is to attach the image to the assignment and then link to it in the text. This has a number of advantages. First of all, the assignment will continue to work correctly, even if the image on the web is deleted. Secondly, the image is copied when the assignment is copied. So you never run the risk that an image disappears when you e.g. destroy an old course. And, finally, you can actually crop the image when you attach it.

To attach an image to an assignment, while editing an assignment, click on the menu button at the top right of the screen. Here select the Files item.

You will now see an (empty) list of the files you attached to the assignment. You can actually attach all sorts of files to an assignment, not just images. For example, you can attach documents that a student must read or files that must be downloaded by the student to make the assignment. Press the button Upload file and select the image you want to attach. In the next step you can select the part of the image you want to use:

Press Ok and the image (part) will be saved. and appears in the list:

Note that the image has a label. "mozart" in this case. The default label is the name of the file. But you can change it using the edit icon at the right. Navigate back to the assignment page using the bread crumbs at the top. Instead of referring to an url we should now refer to the label, as follows:

And you are done. It might feel like slightly more work than using the url, but it is the better way to do this.

Videos

You can also add videos to your assignments, for example, of you teaching a class about the topic. Quarterfall supports videos stored at YouTube, Vimeo, and DailyMotion. Here we will add a YouTube video. However, if you want to provide your students with high-quality video you might want to use a paid service, like Vimeo instead.

The video we are going to add is at: https://www.youtube.com/watch?v=vJG698U2Mvo. It is a famous video about selective attention. To add it, we again use an include block in your text, like with image. But this time the type is not image, but youtube. Again, you provide the url, and some optional options.

In this case, we set autoplay to true to let the video start immediately. You can also indicate whether to loop the video and whether to show the controls at the bottom. And you can change the size or position.

This is basically all there it to know about adding videos. Pretty simple, don't you think?

Tables

You can easily add simple tables to your assignments. You basically create the table with vertical bars and dashes. Here is an example:

There are a few important things to note here.

  • The fist line contains the column headers, separated by vertical bars. If you don't want a header, you must still add it! Without it, this is not considered a table. But if you leave all texts in it blank, no header will be shown (see below). 
  • The next line separates the headers from the rest of the table. This line is essential! It actual indicates that this is a table. 
  • Next follow the lines in the table. Note that formatting is rather free here. You can can additional spaces if you want but they won't have effect. The line with the most cells determines the number of columns. 

Cells will default be aligned to the left. In the second line that separates the headers from the rest you can change this. Add a colon at the left for left aligned, at the right for right aligned, and add both left and right for centered. Here is an example:

Formulas and equations

Quarterfall has an extensive mechanism to show formulas and equations. This is based on the TeX/LaTeX formulas, which are also used in other packages like MatLab. This includes many special symbols and formula building commands. Let us start with the basics. A formula can be added inline by putting it between $ symbols. It can be put on a separate line by placing it between double $ symbols. Like this:

Note that it actually looks different in these cases. When placed inline, the systems tries to keep the height as small as possible. What we typed as a formula description might look rather complicated. But hang on, it will all become clear in a moment. Here are the most important things you need to know.

Simple formulas

The basic are:

  • All normal letters are interpreted as variable names.
  • Most other symbols do what you expect them to do.
  • Subscripts are indicated by putting an underscore symbol (_) in front of it, and superscripts by using a hat symbol (^). 
  • For Greek letters, use a backslash followed by the name of the symbol, like \alpha. For uppercase Greek letters, start the name with a capital, like \Delta.

Here are some examples:

When you want to have a superscript or subscript consisting of more than one symbol, put it between curly brackets, like $\alpha_{12}$.

Other symbols

You can use many other symbols. Symbols all start with a backslash, followed with the name of the symbol. Here are some. For a complete overviews see the KaTeX documentation.

  • Special symbols, like \infty (infinity).
  • Arrows, like \to, \leftarrow, \Leftarrow (with double lines), and so on.
  • Mathematical operators, like \sin, \cos, \lim, \max, \log, and so on.
  • Relations, like \geq (greater or equal), \leq (less or equal), \in, and so on.
  • Operators, like \sum, \prod, and \int (integral).
  • Spacing, like \space or \, (small space) .

Such symbols can have subscript and superscripts. These are place at the logical position. Here are some examples;

Functions

Functions also start with a backslash. Functions have arguments. If the argument is a single symbol you can put it behind it. Otherwise, put it between curly brackets. Sometimes there are multiple arguments. Here are some of the most important ones:

  • \not. This puts a slash through the next symbol. For example, $2 \not = 1$. 
  • \sqrt. The square root of the argument. This can actually have an optional argument between square brackets to indicate what root, like $\sqrt[3]{27}$.
  • \overline or \underline that put a line above or below the arguments.
  • \bf and \it. They make the argument bold or italic.
  • \text. This formats the argument as normal text, rather than symbols.
  • \frac. This shows a fraction. It has two arguments. The first one goes above the line and the second one below it. For example $\frac{1}{x}$.

Here are again some examples:

There is a lot more functionality available. For example, you can create matrices, use colors, and even special fonts and sizes. For a complete overviews see the KaTeX documentation.

Programming code

Quarterfall is in particular suited for ICT education. Hence, we included considerable support for programming. There are special code questions where students must provide some piece of code in a given programming language. This will be the topic of a special tutorial on code questions. Here we will just show how to include pieces of code in your texts.

For this we again use the include block mechanism. As before a block starts with three back quotes, followed by the name of the programming language. Next follows the code. And the block is closed using again three back quotes. We currently support the following languages:

  • javascript
  • c
  • cpp (that is C++)
  • csharp (C#)
  • java
  • python

More will be added in the future. Here is an example of a question that contains two code blocks in different languages:

Note in the preview that the code blocks get line numbers and use colors for syntax highlighting. You can actually change the coloring used in your personal settings.

Documents

You can also include other documents in your text. For example, a pdf file with some reading material, or the slides of you presentation. Here we are going to include a little pdf file called hello.pdf, with a very short text. 

As a first step, attach the file to the assignment. This works in exactly the same way as shown above for attaching images. As a label it will get "hello". Next, in the text, add an include block, starting with three back quotes, followed by the type "file". Indicate the label, and end it with three back quotes. Like this:

The students can now read the pdf file. (If they click on it they can also download or print it, and zoom in or out. Quarterfall supports a number of different types of files. You can actually also include programming code files this way and they will be shown in the same way as when you include the code in the text.

Presentations can also be shown. The easiest way it to turn them into pdf and include them in the same way. You can also use a service like SlideShare and upload you presentation there. Quarterfall contains a special slideshare include block to include such presentations. For more information, see the help on the text editor.

External

As we have seen above, Quarterfall makes it very easy to include videos, images, presentations, documents, and so on in your assignments. But for other types of content there is a generic option, called an iframe. Basically, an iframe is an area in which another web page or file is shown. The content of such an iframe is completely independent of the Quarterfall page. It is simply shown in the indicated area. You can interact with its content, in the same way you would interact with the original web page. 

You again use an include block, starting with three back quotes, followed by the type iframe. Next you specify the url of the web page or file to show. Optionally you can specify some options and you end with three back quotes again.

As an example, let us show how to include some music player in an assignment. For this we will use a  piece of music from SoundCloud, a site where people can distribute music for free. To do this, you first need the url of the piece of music. To this end go to SoundCloud, find the music you want to include, and click on the Share link below it. Now as option at the top choose Embed. You will see a very long string that will look something like this:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/629246505&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

In the middle there is something that starts with src=" and ends with visual=true". This is the web page we need. However, you can remove all the options after the track number. So you end with:

https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/629246505

This is the url you place in the iframe block. So it will look as follows:

Note that we include a size option for the iframe, to precisely control its size to be 300 by 130 pixels, as SoundCloud likes it. 

You can use the iframe include block for many other things. But be careful. Not all websites allow you to use them in an iframe. For example, you cannot include Facebook or Slack directly in an iframe.

Formatting at other places

Not only the text in a text block is Markdown. Basically every text you type in can be formatted, using all the possibilities described above. This applies to the text of the questions, the choices for a multiple choice question, the solutions you provide, and the feedback. So you can for example make a multiple choice question where the choices are images, equations, or pieces of code. And you can include explanatory videos in your solutions or feedback. Here is an example:

Well done

You now know how to create beautiful looking assignments. And we actually did not even cover all the possibilities. For example, all includes have a number of options that you can use to control how they look and behave. For complete documentation, see the help on the text editor.

We have a number of other tutorials for you, to help you getting the most out of Quarterfall.

Still need help? Contact Us Contact Us