This week, I started my second year teaching a graduate level intro to quant methods course in the Bush school at TAMU. My preparations for the upcoming semester have coincided with the launch of Quarto, and I decided it will be a great opportunity to familiarize myself with the new tool, and at the same time upgrade the material I prepare for my students. In this post, I describe my experience with Quarto as I used it to build html page as a web-based syllabus for my Fall 2022 class.
One thing that many instructors struggle with is writing a syllabus that students will actually read – it is an essential document that provides important information and super relevant to students. During professional development seminar I completed this past summer, I came across the idea of a web-based syllabus (some refer to it also as “Liquid syllabus”).
Why a web-based syllabus? I realized that one central benefit of such document is that it is more interactive and engaging to students compared to a 'boring' PDF. It allows me to organize all the important information in a more engaging structure that should motivate students to read the whole thing and obtain this important information.
Making the web-based syllabus
With this idea in mind, I decided to prepare an html page for the class syllabus, and that it would be a great opportunity to learn how to work with the new Quarto system.
The first wow moment for me in this process was learning of the visual editor – a cool feature that provides instant output of the document/page, and can give us a general idea of how the final product is going to looks like. As a long time use of R Markdown who is sometime frustrated from the time it usually takes to render a PDF document, this feature is a great new addition for instant feedback. While it is possible to type directly into the visual editor, I prefer to use the source code route (switching back and force offer valuable instant feedback).
When planning the web-page, one of the most important things I was looking for is an appealing look, one that will draw students’ attention. Quarto offers many fun themes to choose from - I opted for the Sketchy theme that has a cool design and looks a little different than what you would expect from an official class document. As all basic features of the document/page, the theme is defined in the YAML.
Keep in mind that my main goal was to make the document engaging and something that students would spend time reading. As such, the layout of the page is super-important. Using basic css to create a layout of multiple columns allowed me to center more content in a visible spot on the webpage.
What other cool features did I include in the webpage? I created a logo for the class!!
R is famous for its Hex logos for packages and other stuff. I used this great package from Guangchuang Yu to design a unique logo for my class. Then, I added it to the webpage. As bonus, I printed the logo on hex stickers and gave them to my students, creating a cool identity for the class – we all have our very own hex stickers.
If you ever had the pleasure of writing a syllabus, you know it has many sections that must be included. A long PDF (or dare I say “Word??”) file makes it less likely that students will spend the time to read the entire document (mine is about 12 pages long).
The online version of the syllabus offers multiple solutions to overcome this problem. One example is creating separate tabs for each section, providing students with more flexibility and allowing them to shift between tabs and read the information in the order they prefer.
One more useful suggestion I adopted from the summer seminar is to add a more 'personal angle' to the syllabus. Inserting some personal background on the instructor can be useful and increase the chances that students would feel more comfortable and pay more attention to the content in the syllabus. Well, with some basic html for images, I added a few pictures from my past travels, giving students some personal background on me.
In other sections/tabs, I implemented css tools to make some modifications to the web-page and draw readers’ attention to the content. For instance, using colors to highlight text or underlining some portions of text. These types of ‘tricks’ make it much easier to emphasize important dates that I want to ensure students remember (like when assignments are due).
When I finished building the webpage, I uploaded it to the course github repo. Over the last few years I have been using github pages every semester to build a simple and easy-to-use website for all my courses. A github pages website provides easy access to all course material and many students have mentioned they really liked it. Now with the online syllabus, the course website had two versions of the syllabus – an html document that is a little easier to navigate and more interactive, and the official PDF version.
In summary, Quarto is an awesome tool and I only scratched the surface of its capabilities when creating a simple html document. I’m sure going to continue using it going forward.
If you want the full experience of my course website, here is the link (you can jump straight to the git repo from the website).