About arc42
arc42, the template for documentation of software and system architecture.
Template Version 8.2 EN. (based upon AsciiDoc version), January 2023
Created, maintained and © by Dr. Peter Hruschka, Dr. Gernot Starke and contributors. See https://arc42.org.
1. Introduction and Goals
WIChat is an interactive web-based quiz game where users guess locations from images, earning rewards for correct answers. The system generates questions and hints using Wikidata and an external LLM, enhancing user experience through conversational clues. The platform includes user registration, game history tracking, and various gameplay modes.
1.1. Requirements Overview
1.1.1. Business Goals
-
Enhance audience engagement through an interactive online quiz.
-
Automate question and hint generation using AI and Wikidata.
-
Provide a scalable and accessible web-based trivia game.
1.1.2. Essential Features
-
User registration, authentication, and game history tracking.
-
Quiz system with image-based multiple-choice questions.
-
AI-powered hint system via an external LLM API.
-
Timed responses, scoring, and rewards.
-
API access for user data and question generation.
1.1.3. Essential Functional Requirements
-
Automatic question and answer generation from Wikidata.
-
Conversational AI hints for user assistance.
-
Fair play enforcement with time constraints.
-
User performance tracking and leaderboard system.
1.2. Quality Goals
Priority | Quality Goal | Motivation |
---|---|---|
High |
Scalability |
Ensure the system can support a growing number of users and future feature expansions. |
High |
Performance |
Provide low-latency interactions for real-time quiz gameplay. |
High |
Security |
Protect user data and prevent cheating or unauthorized access. |
High |
Usability |
Ensure that users can easily navigate and interact with the application. |
Medium |
Availability |
Guarantee uptime and reliability for a seamless user experience. |
Medium |
Maintainability |
Use a modular architecture to facilitate updates and future improvements. |
1.3. Stakeholders
Role/Name | Contact | Expectations |
---|---|---|
RTVE |
RTVE Team |
Ensure an engaging and well-integrated quiz experience aligned with their brand. |
Users |
Players |
Enjoy a fun, challenging, and fair gameplay experience. |
Developers |
Dev Team |
Work with a clear architecture and maintainable codebase. |
System Administrators |
Ops Team |
Maintain reliable deployment, monitoring, and observability. |
LLM API Providers |
Third-party LLM Providers |
Ensure access to the language model API. |
Hosting Provider |
Microsoft Azure |
Provide reliable and scalable hosting solutions for the application. |
2. Architecture Constraints
2.1. Organizational Constraints
Constraints | Explanations |
---|---|
Fixed data source |
Questions, images, and hints must be generated exclusively from Wikidata data. |
External language model |
A LLM accessed through a predefined API will be used, limiting the choice of models, customization options, and potential for fine-tuning or adaptation to specific needs. |
2.2. Technical Constraints
Constraints | Explanations |
---|---|
Mandatory web platform |
The application must be accessible via web browsers and deployed online. |
Conversational hints logic |
Hints must be generated while mitigating hallucinations using specific techniques, integrated with Wikidata. |
Docker for containerization |
Docker must be used for application containerization, as the solution’s architecture requires that all components be packaged into containers to ensure portability, isolation, and compatibility across environments |
GitHub Actions for CI/CD |
GitHub Actions must be used for automating the CI/CD pipeline, ensuring seamless integration, testing, and deployment processes. |
2.3. Legal and Regulatory Constraints
Constraints | Explanations |
---|---|
Privacy compliance |
User data must comply with regulations like GDPR. |
Data licensing |
Images and data used must adhere to Wikidata licensing policies and ensure proper usage. |
2.4. Product Constraints
Constraints | Explanations |
---|---|
Fixed question format |
Each question must have one correct answer and several incorrect ones generated automatically, with balanced and coherent options. |
User registration |
The system must include functionalities for registration, participation history, and statistics. |
Mandatory interaction |
Users must interact with the system to obtain conversational hints about the questions. |
Time-limited answers |
Each question must be answered within a set time, necessitating efficient interaction and time management design. |
Automatic generation |
Both the questions and distractors must be generated automatically, restricting manual design to ensure consistency and scalability. |
2.5. Operational Constraints
Constraints | Explanations |
---|---|
Scalability |
The system must support multiple simultaneous users. |
Monitoring and deployment |
Observability and deployment automation are required. The deployment must maintain high availability, meaning the infrastructure must be capable of handling potential failures with minimal service disruption, ensuring maximum uptime. Due to this, an online virtual machine provider must be selected for deployment. |
Docker for deployment |
Docker is also used in the deployment process to ensure efficient management of production, testing, and development environments. This facilitates scalability and maintenance by allowing more precise control over dependencies and configurations. |
3. Context and Scope
3.1. Business Context
WIChat is an interactive web-based quiz game application, inspired by "Saber y Ganar". Users can register, log in, and play the game, where they are presented with images and have to guess the associated place or object. The novelty lies in the integration of a conversational language model (LLM), which allows users to interact with the game and get hints for the answers dynamically. The questions and images are generated from Wikidata, providing an automated, real-time experience.
3.1.1. Involved Actors
Actor | Description |
---|---|
User |
A person who accesses the application to play the quiz game. |
Administrator |
Responsible for managing system infrastructure and security. |
LLM Provider |
External service that provides AI-generated quiz questions and hints. |
Database |
MySQL used to store user information, game history, and question data. |
WikiData |
External service used to retrieve image and metadata for question generation. |
3.1.2. Business Context Table
Communication Partner | Inputs | Outputs |
---|---|---|
User |
Login credentials, game interactions |
Quiz questions, score updates |
LLM Provider |
Quiz prompts |
AI-generated questions and answers |
Database |
User data, game records |
Stored authentication and game history |
WikiData |
Data requests for images and metadata |
Retrieved image and metadata for questions |
3.2. Technical Context
The system consists of several services developed in Java using Spring Boot, a web frontend using HTML, and a relational database. Communication between services is handled via REST API and HTTPS.
3.2.1. Technical Interfaces
Component | Technology | Interface |
---|---|---|
Web Application |
HTML, Spring (Java) |
Connects to backend services via HTTPS |
User Service |
Spring (Java) |
REST API for managing user data (login, history) |
Question Service |
Spring (Java) |
REST API to retrieve and display questions and images |
LLM Service |
External (REST API) |
Connects to external LLM provider for dynamic hints |
WikiData Service |
External (REST API) |
Retrieves image and question metadata from Wikidata |
Database |
MySQL |
Stores user data, game history, and question data |
3.2.2. Mapping Input/Output to Channels
Component | Input/Output | Channel/Protocol |
---|---|---|
RestApiService |
External developer interactions |
HTTPS |
Frontend |
User interactions, game display |
HTTPS |
Database |
User data, game history, questions |
Specific database driver (MySQL) |
WikiData |
Data for question generation |
HTTP |
Question Generator |
Generated questions |
In-memory |
Question Service |
Questions for game |
In-memory |
Player Service |
Player data |
In-memory |
LLM Service |
Hint generation, AI responses |
REST API via HTTPS |
4. Solution Strategy
4.1. Introduction and Purpose
We chose to build upon last year’s base application, selecting technologies that we were most comfortable with and that aligned well with the project requirements. The application consists of a web-based platform where users can register, compete against others, and answer questions. Additionally, it integrates a Large Language Model (LLM) to provide hints and assist users in responding to quiz questions.
This section outlines the key architectural decisions and strategies that shape the system, including technology choices, architectural patterns, and approaches to achieving the system’s quality goals.
4.2. Technology Decisions
-
Architecture: Model-View-Controller (MVC) pattern.
-
Backend: Spring Boot for API development and business logic.
-
Frontend: Thymeleaf for dynamic rendering within the MVC framework.
-
Database: HSQLDB for structured data storage.
-
Authentication: Spring Security with JWT for secure access control.
-
Hosting & Deployment: Docker and Kubernetes for scalability.
-
Integration: Wikidata API for question generation and an external LLM API for hints.
4.3. System Decomposition
The application follows an MVC architecture with clearly defined layers:
-
Model Layer: Represents the data and business logic.
-
View Layer: Uses Thymeleaf templates for rendering dynamic content.
-
Controller Layer: Manages requests and responses, handling business logic with Spring Boot.
-
Database: Stores user data, questions, and game history in PostgreSQL.
-
LLM Integration: Provides AI-generated hints via an external API.
-
External APIs: Wikidata for question data and third-party services for deployment.
4.4. Strategies for Quality Goals
Priority | Quality Goal | Strategy |
---|---|---|
High |
Scalability |
Load balancing, database connection pooling, and optimized queries. |
High |
Performance |
Asynchronous processing with Spring Boot and caching mechanisms. |
High |
Security |
Spring Security, encrypted storage, and role-based access control. |
Medium |
Availability |
Deployment with Kubernetes and monitoring tools. |
Medium |
Maintainability |
Modular architecture with well-documented Spring Boot services. |
4.5. Organizational Decisions
-
Development Process: Agile methodology with Scrum.
-
Collaboration Tools: GitHub for version control and Jira for task management.
-
Testing Strategy: Unit tests with JUnit, integration tests with Spring Test, and performance testing.
4.6. Justification
These decisions ensure that the system is scalable, secure, and maintainable, leveraging Spring Boot’s powerful ecosystem for enterprise-grade applications while integrating AI-powered hints and automated question generation.
5. Building Block View
5.1. Whitebox Overall System
<Overview Diagram>
- Motivation
-
<text explanation>
- Contained Building Blocks
-
<Description of contained building block (black boxes)>
- Important Interfaces
-
<Description of important interfaces>
5.1.1. <Name black box 1>
<Purpose/Responsibility>
<Interface(s)>
<(Optional) Quality/Performance Characteristics>
<(Optional) Directory/File Location>
<(Optional) Fulfilled Requirements>
<(optional) Open Issues/Problems/Risks>
5.1.2. <Name black box 2>
<black box template>
5.1.3. <Name black box n>
<black box template>
5.1.4. <Name interface 1>
…
5.1.5. <Name interface m>
5.2. Level 2
5.2.1. White Box <building block 1>
<white box template>
5.2.2. White Box <building block 2>
<white box template>
…
5.2.3. White Box <building block m>
<white box template>
5.3. Level 3
5.3.1. White Box <_building block x.1_>
<white box template>
5.3.2. White Box <_building block x.2_>
<white box template>
5.3.3. White Box <_building block y.1_>
<white box template>
6. Runtime View
6.1. <Runtime Scenario 1>
-
<insert runtime diagram or textual description of the scenario>
-
<insert description of the notable aspects of the interactions between the building block instances depicted in this diagram.>
It is possible to use a sequence diagram:

6.2. <Runtime Scenario 2>
6.3. …
6.4. <Runtime Scenario n>
7. Deployment View
7.1. Infrastructure Level 1
<Overview Diagram>
- Motivation
-
<explanation in text form>
- Quality and/or Performance Features
-
<explanation in text form>
- Mapping of Building Blocks to Infrastructure
-
<description of the mapping>
7.2. Infrastructure Level 2
7.2.1. <Infrastructure Element 1>
<diagram + explanation>
7.2.2. <Infrastructure Element 2>
<diagram + explanation>
…
7.2.3. <Infrastructure Element n>
<diagram + explanation>
8. Cross-cutting Concepts
8.1. <Concept 1>
<explanation>
8.2. <Concept 2>
<explanation>
…
8.3. <Concept n>
<explanation>
9. Architecture Decisions
This section records the key architectural decisions made during the development of the project, ranked by importance. Each decision includes justifications, impacts and evaluated alternatives.
10. Quality Requirements
10.1. Quality Tree
10.2. Quality Scenarios
11. Risks and Technical Debts
12. Glossary
Term | Definition |
---|---|
Wikidata |
A free and open knowledge base that provides structured data to support various applications, including WIChat’s question generation. |
LLM (Large Language Model) |
An advanced AI model capable of understanding and generating human-like text, used in WIChat to provide interactive hints. |
API (Application Programming Interface) |
A set of protocols and tools that allow different software components to communicate, enabling external access to user and question data. |
Gamification |
The integration of game-like elements, such as rewards and leaderboards, to enhance user engagement and motivation. |
Scalability |
The ability of the system to handle increased load and users without significant performance degradation. |
Observability |
The capability to monitor, log, and analyze system performance and behavior to ensure reliability and quick issue resolution. |