Mini-Applications in KI-Léierbud

Marco Barnig, 18.8.2025

Mini-applications are the core of the KI-Léierbud portal. They consist of the following elements:

1. A sequence of web pages with content downloaded via REST API from the KI-Léierbud WordPress server for the “knowledge,” “quiz,” and “polls” mini-applications, and individual interactive web pages for the “hands-on” applications.

2. A set of html, css, js, svg, and png files, structured as follows:

project-root/
├─ section/
│  └─ app-name/
│     ├─ index.html
│     └─ assets/ (css/js/svg…)
└─ operations/
   ├─ login/
   │  └─ index.html
   └─ search/
      └─ index.html

These directories are preferably stored in the /httpdocs/ folder of the PLESK server. If necessary, they may be installed in specific subdomains of ki-leierbud.lu for technical reasons.

3. Graphic cards with an illustration and description of the mini-application (similar to the LetzAI prompt cards) that are displayed in the portal dashboard. Besides promoting the KI-Léierbud on social networks, they are also used as the first and last card in the web page sequences described in point 1.

Layout and Features of the Mini-Applications

The layout of the “knowledge,” “quiz,” and “polls” mini-applications is template-based.

• A single template is sufficient for the “knowledge” sequences (different background colors may optionally be chosen depending on the intended user level).
• Three templates are required for the “quiz” sequences, depending on the quiz type (yes/no, multiple choice, etc.). The same number of 3 also seems appropriate to standardize the “polls.”
• All templates are based on a common Master-Template with header and footer

Mini-Application “Knowledge/Visionaries”

The “Visionaries” mini-application serves as an example to present the typical layout and features of a “Knowledge” mini-application.

A functional prototype of this mini-application is available at:

https://ki-leierbud.lu/knowledge/visionaries

A detailed screenshot of one page from the related sequence is shown below:

Some other pages are assembled in the second figure below:

The following figure shows the sequence of web pages displayed on a mobile device in the “Visionaries” sequence:

You can directly access a specific page, for example the French page about Harold Cohen with ID=1501, by adding the suffix ?id=1501 to the URL:

https://ki-leierbud.lu/knowledge/visionaries/?id=1501

You can also retrieve a page in a specific language by adding the suffix ?lang=xx to the URL of an existing page in another language. If the page does not exist in the desired language xx, the following priority order will be applied: en, fr, de, pt, lb.

Development of the “Knowledge” Template

The template for the “Knowledge” mini-application was developed within two days using ChatGPT-5. The complete conversation from start to finish is available at the following shared link:

https://chatgpt.com/share/68a6f4e5-58ac-8005-9db8-74577cd58ba0

Reading this conversation should enable non-technical collaborators to quickly become familiar with development assisted by ChatGPT-5 and to develop templates for mini-applications themselves.

Remaining Errors in the “Knowledge” Template

The “Knowledge” mini-application template still contains a few residual errors, especially on mobile phones. One issue is that the width of the header and footer exceeds the screen width in portrait mode. Another issue is that the “swipe” function has not yet been implemented. However, by rotating the mobile device to landscape mode, one can still test all the features. The language handling for accessing a specific page also still requires some adjustment.

I plan to fix these issues once the layout and features have been definitively approved by the partners.

Mini-Application “The People Who Shaped AI”

Comments and explanations by Marco Barnig

1. Figma

Since I was not familiar with Figma until recently, it took me a while to understand that it is a powerful digital tool for illustrating the layout of a website.

Back in 1997, when I created my first static website on the Webplaza of the Telecommunications Division of the P&T public company, I regularly sketched page layouts on squared paper. Most of my ideas came to me at night—during dreams or bouts of insomnia. I would get up, quickly draw a sketch on paper, and then return to bed to fall asleep again.

2. Collaboration Across Generations

To facilitate collaboration and mutual understanding between the different generations involved in the KI-Léierbud project, I tried to design wireframes in my baby-boomer style as an example in Figma, starting with Alan Turing.

3. Wireframe “Alan Turing”

My original idea for the functional wireframe of the “Alan Turing” page is shown below:

4. Mockup “Alan Turing”

My original idea for the graphical mockup of the “Alan Turing” page is presented in the following figure.

I limited myself to defining a harmonious palette of three colors—used respectively for the top and bottom fixed bars and for the central content area.

5. Interactive Prototype “Alan Turing”

I added the image and text for “Alan Turing” into the WordPress CMS under a new category: knowledge/visionaries.
The ID of the first article is 1961. I extended the existing prototype URL https://app8.ki-leierbud.lu with the parameter /?p=1961&color=ocean.
The content displayed in the browser looks as follows:

6. Revised Wireframes and Mockups “Alan Turing”

Based on the Figma mockup proposed by Sumin, and in order to support all the required functionalities, I revised the functional and graphical wireframes as follows:

7. Interactive Prototype of the Mini-Application “The People Who Shaped AI”

To demonstrate the practical operation of the “Alan Turing” page and its integration within the mini-application “The People Who Shaped AI”, I added a few more visionaries and pioneers, as well as a first and last page, into the WordPress CMS.

I also created a new JSON file with a uniform black color palette.

My plan is to adapt the code and host it at:

https://ki-leierbud.lu/knowledge/visionaries/

In the meantime, it can be tested with the current code at:

https://app8.ki-leierbud.lu/?p=1988&color=black