Thesis Online Framework Features

An in-depth look into using the Thesis Online Framework

Jeff Jacobs

Master of Arts

LUCA School of arts

September 2024

Promotors:

Introduction

Welcome to the documentation for your online thesis! My name is Jeff Jacobs, game design professor at Luca School of Arts. I created this template for our students to create their own online thesis.

We started to feel that pure text documents got a bit outdated, especially for our medium of Game Design. Students want to show off their work using video and audio, maybe even a playable WebGL build right here in their thesis! Let’s walk through all of the features this template offers you.

This resource is divided into two primary chapters Template Features and Content Features.

Template Features

Automatic TOC

The template automatically generates a Table Of Contents for you. When you look at the site on a large display it will be shown off to the left side. All of the chapters are clickable and will take you to their respective chapter in the text. Once you scroll into a chapter it’s sub-chapters will show up.

You can easily write chapters in the following way :

# Chapter One
Lorem ipsum dolor sit amet

## Subchapter One
Lorem ipsum dolor sit amet

### Subsubchapter One
Lorem ipsum dolor sit amet

You can change the level of the chapter using h1, h2 or h3. That way all h2-s are a subchapter of the h1 above them. In the same way all h3-s are a subchapter of the h2 above them. You can add even more levels but generally you should really not go deeper than 3.

Warning: if your chapter starts with a number or contains a period it will break the TOC!

To fix this set a custom ID for your chapter that does not start with a number and does not have any spaces or periods :

# 99.0 Air Balloons {#airBalloonsCustomID}

Footnotes

Sometimes when you are writing your thesis you don’t want to break the flow of your text by explaining something the reader probably knows. However it’s always good to make sure you explain even what to you might be obvious. In such a case it’s very easy to add a footnote in your text. For example next to this line of text will be a footnoteA test footnote about how you can add footnotes..

References

Whenever you’re referencing another source like a paper you need to cite it! Luckily citing them inside the text is very easy. For example, if we would talk about how Shigeru Miyamoto explains that making New Super Mario Bros. for DS was a fresh start returning to the core principles Mario games, you could simple add a <d-cite> tag referencing the correct source in your bibliography.

All your references should be put inside the thesis.bib file under /assets/bibliography. In this file you put your references in a specific format. For example if you would want to cite Jeff Jacobs’ amazing master’s thesis you could reference it like this.

Each type of source to cite has their own formatting. Let’s take a look at the following examples :

Content Features

The following features can be used to show off your project using various types of media.

Quotes

To add a quote like the following :

The way to get started is to quit talking and begin doing. - Walt Disney

Code Blocks

Adding code blocks is super easy. All you need to do is start a block of code with three backticks and write the programming language, then paste in your code! Here is an example of some code

public class WorldGreeter : MonoBehaviour
{
	private string message = "Hello World";

	private void Start()
	{
		Debug.Log(message);
	}
}

Tables

Easily add tables like the following one :

The code for this table looks like the following :

| Subject             | Interest level | Importance          |
| :----:              | ---:           | :---                |
| Game Engines        | 9001           | Extremely important |
| Level Design        | 37             | Very important      |
| Advanced Production | 42             | Super important     |

The spaces added in the example are only used to make the table more readable in code, they are removed once the table is created. You can use :----: to center the cell contents for a column. Likewise you can use :--- and ---: to align cell contents to the left or right of the column.

Grid system

Using the grid system we can create rows and columns to shape content on the page. For example if you want to write text in two equal columns you could get this :

By writing the following :

<div class="row">
<div class="col-md">

This text will be put in the first column and will get half the width of the row.
This happens because both columns use `col-sm` so they get equal space in the row.

</div>
<div class="col-md">

This text will be put in the second column, so the right one. 
It gets the exact same width as the first column.

</div>
</div>

Try to write the code for the columns exactly like in the example when facing issues. You can put almost anything in these columns, specific markdown features like highlighting text using backticks ` does not work in a column. You can also make them larger or smaller. The columns live in a 12-wide grid. Instead of col-md we can use col-md-1 up to col-md-12 to tell the column how wide it should be. If you want multiple columns to stay together on the same row and be the full width of the page, you need to make sure that the values always add up 12.

One caveat is that you need to write these columns in the markdown document in sort of a weird way. People that know HTML or other tag-based languages will want to write the <div> tags using indentation. But because we are using HTML directly in our Markdown document we need to write all these tags without any tabs or spaces before them to make the markdown work. If you ever see weird things happening in your columns, take a look at this features.md document to see how you need to write grids.

Images

Images are included using the figure.liquid tag. You need to pass at least two variables to make it work. In the path= variable you put the path to the image, including the extension. So for example path="assets/img/thesis/cube.jpg". All images also need a caption= variable where you describe the image. This is a general rule for all figures in a thesis and also helps people with limited vision since screen reader software will read the caption to them.

In addition you can also use the optional zoomable=true variable, it makes it so the image can be clicked to make it go full-screen.

You can also use animated GIFs. However, keep in mind that GIF files are not efficient. Generally a GIF is larger than an MP4 file of the same framerate and size unless it’s optimized. Therefore try to use MP4 files instead of GIFs to save on storage and network traffic / site load speed.

Images in Grids

We use the Grid system to choose the size of our images and place them next to text.

Like in this example where we put this text next to an image where we use col-md-4 to make the image 4/12 wide and col-md-8 to make the text 8/12 wide.

Grouped Images

Here is an example with three images next to each other using the exact same code, just adding more div tags with image data in them :

Since we’re using col-md for all images they all get exactly the same width. If you want to make one image larger you can of course change the width using the grid system. The following example uses col-md-5, col-md-3 and col-md-4 to change the widths. Remember that all these widths added up can not exceed 12 or the last images will just move down to the next row.

Image Swiper

Now for some more advanced image content. This example sets up images in a swiper component, letting the user swipe or click buttons to go to the next image.

A collection of three images, first a chess set, then a rubix cube and finally a set of four colored boardgame pawns.

Image Comparer

The following example lets you create a comparison image. This is especially great for showing off before / after images. Simply put two images in a img-comparison-slider tag and the template does the rest.

Video

Of course the biggest advantage of putting our thesis online is being able to not only show images but also play video! You can either link local video files in mp4 format or link an external file like one from youtube.

To link a youtube video the path should start with https://www.youtube.com/embed/ then you should add the video code. This is the code directly after the watch?v= in the url. Also make sure to remove Also make sure you only get the code and not anything including an & or anything after that. Your video code should be 11 characters long. You can specify the start and end time in seconds inside the url. To make a video start at 1:36 and end at 2:30 you could use ?start=96&end=150 at the end of the video path since 1:36 is 96 seconds and 2:30 is 150 seconds.

Audio

Perhaps you are using a lot of custom audio in your project and you want your readers to be able to play the audio right here on your site? Simply use the audio includes at point it at an mp3 file in your assets/audio/ folder. Or point it an an mp3 file online.

Mermaid diagrams

Thanks to the Mermaid plugin in the template we can easily add all sorts of diagrams. I won’t go into detail on these since there are just so many options. You can read more about the plugin on here.

Some examples :

Flowchart

flowchart LR
    A(Start) -->|Awake| B[Idle]
    B --> C{IsHungry?}
    C -->|True| D[Eat]
    C -->|False| E[Dance]

Class diagram

classDiagram
    class MonoBehaviour {
        Start()
    }
    class HelloWorld {
        string message
        Start()
        LogMessage()
    }
    class IMessageLogger {
        <<interface>>
        LogMessage()
    }
    MonoBehaviour --|> HelloWorld
    IMessageLogger --|> HelloWorld : implements

Pie chart

pie title VR headset ownership in march 2024
    "Other" : 13.51
    "Windows MR" : 4.26
    "HTC Vive" : 4.51
    "Rift S" : 8.17
    "Quest 3" : 15.03
    "Valve Index" : 16.68
    "Quest 2" : 37.84

3D Models

You can integrate a model viewer

Twine

You can integrate exported twine stories

WebGL builds

And now for the big finale : You can even embed Unity WebGL builds on your page! This game is the Oasis scene from the Unity URP Sample Scenes built for the WebGL platform. Since we don’t want people to download gigabytes of data when they simply visit our site you would never upload your whole game here. Make a small build of a single test scene or small part of your game instead, showing off a specific feature or asset you made. This example is around 100MB thanks to forcing it to use the Mobile Graphics target in the Graphics settings.