#9 Tips & tricks for designing and structuring your TeachCenter course (Part 3)

Short description of the learning setting

Period: SS22 und WS22

Courses:

„Object-Oriented Programming 1“ (OOP1) and „Introduction to Structured Programming“ (German abbreviation: ESP)

Group Size: more than 500 students per course

Delivery method: Flipped Classroom in ESP and online in OOP1

TeachCenter courses with many contents and activities tend to become confusing for both students and teachers. In Part 2 (article #08 in the category TeachCenter) we presented a simple method for creating more structure in a TeachCenter course. In this article we extend this method with Bootstrap components. In this way, we not only improve the appearance of our TeachCenter courses, but also provide a better overview.

What is Bootstrap?

Bootstrap is a frontend framework that can create versatile graphical elements on a website with just a few lines of HTML. Such elements can be, for example, button groups (external site) /buttons (external site) , cards (external site) and accordions (external site) . The only requirement for using Bootstrap elements is a basic knowledge of HTML. We also like to use alerts (external site) to highlight important information.

Why Bootstrap components in the TeachCenter?

Figure 1 shows a section in the TeachCenter filled with many elements. The links in this example lead to preparation videos (in a flipped classroom setting) and lecture recordings. Additional materials are provided for all videos. Such a list might be difficult to keep track of.

With Bootstrap, such a list can be divided into collapsible parts with a collapsible „accordion“, where each part can be expanded and collapsed. This makes it possible to hide the contents of past lecture units by collapsing the corresponding parts. This improves the overview without restricting the availability of content. Students who want to access content in a collapsed part can expand it with one click.

Figure 2 shows a revised version of the section in Figure 1, where the materials of each unit are grouped in a separate collapsible. Individual collapsible parts can be expanded and collapsed as desired. Videos have been embedded in each collapsible part so that they can be viewed directly in the TeachCenter.

In addition, students can access all supplementary materials through buttons. We also used Bootstrap to display the individual elements within a collapsible.

The starting point of all our restructuring work is a text and media area, as it already was in Part 2. It is the only component that was used to achieve the desired result through Bootstrap. Bootstrap elements can be used in all places where the text editor is available (e.g. when creating text and media areas, in forums or text pages.) To add Bootstrap elements, you have to switch to the Source Code view of the text editor.

Tips for implementation in your own TeachCenter course

Finally, we would like to give you some advice for using Bootstrap:

• An overview of all Bootstrap components (external site) is available online.
• The Bootstrap documentation provides many examples to get a basic overview. The HTML code of these examples can be used in your own TeachCenter course and adapted as you wish.

To insert a basic accordion with expandable subsections, use the following code:

<div id="accordionExample">

<div>

<div id="headingOne">

<h2><button

type="button" data-toggle="collapse" data-target="#collapseOne"

aria-expanded="true" aria-controls="collapseOne"> Collapsible Group

Item #1 </button></h2>

</div>

<div id="collapseOne" aria-labelledby="headingOne"

data-parent="#accordionExample">

<div>Some placeholder content for the first accordion

panel. This panel is shown by default, thanks to the <code>.show</code>

class.</div>

</div>

</div>

</div>

Another option to add simple collapsible sections with HTML is the following code:

<p id="example-simple-details">Details/Summary</p>

<details>

<summary>

<h2>Abschnitt 1</h2>

</summary>

<p>In pinyin, each Chinese syllable is spelled in terms of an optional initial

and a final, each of which is represented by one or more letters.</p>

<p>Hanyu Pinyin was developed in the 1950s by a group of Chinese linguists

including Wang Li, Lu Zhiwei, Li Jinxi, Luo Changpei and, particularly, Zhou

Youguang, who has been called the "father of pinyin".</p>

</details>

A third option of creating collapsible sections without using any HTML is to use subsections, which can be added like regular sections.

• The IDs accordion1, header1 and collapse1 used in the code should be unique. That is, there should be no other collapsible sections with the same IDs. Otherwise, clicking on a specific part may unintentionally open or close another part.
• For complex use cases, it may be easier to first edit the HTML code in an editor such as VS Code or Notepad++ and only then paste it into the text editor.

Don’t forget: All materials linked via buttons should be hidden for students in the original list. How this works has already been described in part 2 (TC #08).