diff --git a/images/03_Business_Context_Diagram.png b/images/03_Business_Context_Diagram.png
new file mode 100644
index 00000000..6010a5c8
Binary files /dev/null and b/images/03_Business_Context_Diagram.png differ
diff --git a/images/03_Technical_Context.png b/images/03_Technical_Context.png
new file mode 100644
index 00000000..9b202551
Binary files /dev/null and b/images/03_Technical_Context.png differ
diff --git a/images/05_Level_3_Diagram.png b/images/05_Level_3_Diagram.png
new file mode 100644
index 00000000..4c654c43
Binary files /dev/null and b/images/05_Level_3_Diagram.png differ
diff --git a/images/Consult Statistics.png b/images/Consult Statistics.png
new file mode 100644
index 00000000..88f68fb2
Binary files /dev/null and b/images/Consult Statistics.png differ
diff --git a/images/Consult questions.png b/images/Consult questions.png
new file mode 100644
index 00000000..399aa342
Binary files /dev/null and b/images/Consult questions.png differ
diff --git a/images/Level 1 b/images/Level 1
new file mode 100644
index 00000000..e69de29b
diff --git a/images/Level 2 b/images/Level 2
new file mode 100644
index 00000000..e69de29b
diff --git a/images/Question generation 1.png b/images/Question generation 1.png
new file mode 100644
index 00000000..50ab0819
Binary files /dev/null and b/images/Question generation 1.png differ
diff --git a/images/Question generation 2.png b/images/Question generation 2.png
new file mode 100644
index 00000000..e1d73a75
Binary files /dev/null and b/images/Question generation 2.png differ
diff --git a/images/Scenario diagram.png b/images/Scenario diagram.png
deleted file mode 100644
index 996cfa01..00000000
Binary files a/images/Scenario diagram.png and /dev/null differ
diff --git a/images/Sequence diagram WikidataApi.png b/images/Sequence diagram WikidataApi.png
deleted file mode 100644
index 48454277..00000000
Binary files a/images/Sequence diagram WikidataApi.png and /dev/null differ
diff --git a/images/Sequence diagram.png b/images/Sequence diagram.png
deleted file mode 100644
index b71a8790..00000000
Binary files a/images/Sequence diagram.png and /dev/null differ
diff --git a/images/deployment.png b/images/deployment.png
new file mode 100644
index 00000000..cc2c2080
Binary files /dev/null and b/images/deployment.png differ
diff --git a/index.html b/index.html
index 82957f93..67e275c6 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="generator" content="Asciidoctor 2.0.20">
+<meta name="generator" content="Asciidoctor 2.0.21">
 <title>Template</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
 <style>
@@ -140,7 +140,7 @@
 #content::before{content:none}
 #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
 #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #dddddf}
-#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px}
+#header>h1:only-child{border-bottom:1px solid #dddddf;padding-bottom:8px}
 #header .details{border-bottom:1px solid #dddddf;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:flex;flex-flow:row wrap}
 #header .details span:first-child{margin-left:-.125em}
 #header .details span.email a{color:rgba(0,0,0,.85)}
@@ -162,6 +162,7 @@
 #toctitle{color:#7a2518;font-size:1.2em}
 @media screen and (min-width:768px){#toctitle{font-size:1.375em}
 body.toc2{padding-left:15em;padding-right:0}
+body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px}
 #toc.toc2{margin-top:0!important;background:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #e7e7e9;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
 #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
 #toc.toc2>ul{font-size:.9em;margin-bottom:0}
@@ -327,7 +328,7 @@
 a.image object{pointer-events:none}
 sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
 sup.footnote a,sup.footnoteref a{text-decoration:none}
-sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
+sup.footnote a:active,sup.footnoteref a:active,#footnotes .footnote a:first-of-type:active{text-decoration:underline}
 #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
 #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
 #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
@@ -472,27 +473,24 @@ <h1><span class="image"><img src="./images/arc42-logo.png" alt="arc42"></span> T
 <li><a href="#_organizational_decisions">4.4. Organizational Decisions</a></li>
 </ul>
 </li>
-<li><a href="#section-building-block-view">5. Building Block View</a>
+<li><a href="#_building_block_view">5. Building block view</a>
 <ul class="sectlevel2">
-<li><a href="#_whitebox_overall_system">5.1. Whitebox Overall System</a></li>
+<li><a href="#_level_1_overall_systems_whitebox">5.1. Level 1: Overall System&#8217;s whitebox</a></li>
 <li><a href="#_level_2">5.2. Level 2</a></li>
 <li><a href="#_level_3">5.3. Level 3</a></li>
 </ul>
 </li>
 <li><a href="#section-runtime-view">6. Runtime View</a>
 <ul class="sectlevel2">
-<li><a href="#_usage_diagram">6.1. Usage diagram</a></li>
-<li><a href="#_runtime_scenario_1">6.2. &lt;Runtime Scenario 1&gt;</a></li>
-<li><a href="#_runtime_scenario_2">6.3. &lt;Runtime Scenario 2&gt;</a></li>
-<li><a href="#">6.4. &#8230;&#8203;</a></li>
-<li><a href="#_runtime_scenario_n">6.5. &lt;Runtime Scenario n&gt;</a></li>
-<li><a href="#_wikidata_questions_requests">6.6. Wikidata questions requests</a></li>
+<li><a href="#_user_plays_a_match_only_one_question_batch_is_needed">6.1. User plays a match. Only one question batch is needed.</a></li>
+<li><a href="#_user_plays_a_match_an_example_of_dynamic_question_generation">6.2. User plays a match. An example of dynamic question generation.</a></li>
+<li><a href="#_user_consults_its_game_statistics">6.3. User consults its game statistics.</a></li>
+<li><a href="#_user_consults_questions_used_in_games">6.4. User consults questions used in games.</a></li>
 </ul>
 </li>
 <li><a href="#section-deployment-view">7. Deployment View</a>
 <ul class="sectlevel2">
 <li><a href="#_infrastructure_level_1">7.1. Infrastructure Level 1</a></li>
-<li><a href="#_infrastructure_level_2">7.2. Infrastructure Level 2</a></li>
 </ul>
 </li>
 <li><a href="#section-concepts">8. Cross-cutting Concepts</a>
@@ -861,7 +859,11 @@ <h3 id="_technical_constraints">2.1. Technical constraints</h3>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Version Control</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">In order of the project to be graded adequately, it must use <em>GitHub</em> as its version control software. The contributions of each team member and agreements reached must be easily traceable.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">In order of the project to be graded adequately, it must use <em>GitHub</em> as its version control system. The contributions of each team member and agreements reached must be easily traceable.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Wikidata</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">To generate questions, WikiData would be used as a knowledge base. Wikidata is a free and open knowledge base that can be read and edited by both humans and machines. Wikidata acts as central storage for the structured data of its sister Wikimedia projects, including Wikipedia, Wikivoyage, Wiktionary, Wikisource and others.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Continuous integration and delivery</strong></p></td>
@@ -1068,12 +1070,9 @@ <h3 id="_technical_context">3.2. Technical Context</h3>
 </div>
 </div>
 </div>
-<div class="paragraph">
-<p>The following diagram represents the general structure of the project, as well as the communication channels between various system components. It shows communication to external sources, as well as communications between the various microsystems.</p>
-</div>
 <div class="imageblock">
 <div class="content">
-<img src="./images/03-deployment-diagram-EN.png" alt="03 deployment diagram EN">
+<img src="./images/03_Technical_Context.png" alt="03 Technical Context">
 </div>
 </div>
 <div style="page-break-after: always;"></div>
@@ -1178,123 +1177,75 @@ <h3 id="_organizational_decisions">4.4. Organizational Decisions</h3>
 </ul>
 </div>
 <div style="page-break-after: always;"></div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-building-block-view">5. Building Block View</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
+<div id="section-building-block-view" class="sidebarblock arc42help">
 <div class="content">
 <div class="paragraph">
 <div class="title">Content</div>
-<p>The building block view shows the static decomposition of the system into building blocks (modules, components, subsystems, classes, interfaces, packages, libraries, frameworks, layers, partitions, tiers, functions, macros, operations, data structures, &#8230;&#8203;) as well as their dependencies (relationships, associations, &#8230;&#8203;)</p>
+<p>The building block view shows the static decomposition of the system into building blocks (modules, components, subsystems, classes, interfaces, packages, libraries, frameworks, layers, partitions, tiers, functions, macros, operations, data structures, &#8230;&#8203;) as well as their dependencies (relationships, associations, &#8230;&#8203;)
+This view is mandatory for every architecture documentation.
+In analogy to a house this is the <em>floor plan</em>.
+.Motivation
+Maintain an overview of your source code by making its structure understandable through
+abstraction.
+This allows you to communicate with your stakeholder on an abstract level without disclosing implementation details.
+.Form
+The building block view is a hierarchical collection of black boxes and white boxes
+(see figure below) and their descriptions.
+image::05_building_blocks-EN.png["Hierarchy of building blocks"]
+<strong>Level 1</strong> is the white box description of the overall system together with black
+box descriptions of all contained building blocks.
+<strong>Level 2</strong> zooms into some building blocks of level 1.
+Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.
+<strong>Level 3</strong> zooms into selected building blocks of level 2, and so on.
+.Further Information
+See <a href="https://docs.arc42.org/section-5/">Building Block View</a> in the arc42 documentation.</p>
 </div>
-<div class="paragraph">
-<p>This view is mandatory for every architecture documentation.
-In analogy to a house this is the <em>floor plan</em>.</p>
 </div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Maintain an overview of your source code by making its structure understandable through
-abstraction.</p>
 </div>
-<div class="paragraph">
-<p>This allows you to communicate with your stakeholder on an abstract level without disclosing implementation details.</p>
 </div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>The building block view is a hierarchical collection of black boxes and white boxes
-(see figure below) and their descriptions.</p>
 </div>
-<div class="imageblock">
-<div class="content">
-<img src="./images/05_building_blocks-EN.png" alt="Hierarchy of building blocks">
 </div>
-</div>
-<div class="paragraph">
-<p><strong>Level 1</strong> is the white box description of the overall system together with black
-box descriptions of all contained building blocks.</p>
-</div>
-<div class="paragraph">
-<p><strong>Level 2</strong> zooms into some building blocks of level 1.
-Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.</p>
-</div>
-<div class="paragraph">
-<p><strong>Level 3</strong> zooms into selected building blocks of level 2, and so on.</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-5/">Building Block View</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
+<div class="sect1">
+<h2 id="_building_block_view">5. Building block view</h2>
+<div class="sectionbody">
 <div class="sidebarblock arc42help">
 <div class="content">
 <div class="paragraph">
-<p>Here you describe the decomposition of the overall system using the following white box template. It contains</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>an overview diagram</p>
-</li>
-<li>
-<p>a motivation for the decomposition</p>
-</li>
-<li>
-<p>black box descriptions of the contained building blocks. For these we offer you alternatives:</p>
-<div class="ulist">
-<ul>
-<li>
-<p>use <em>one</em> table for a short and pragmatic overview of all contained building blocks and their interfaces</p>
-</li>
-<li>
-<p>use a list of black box descriptions of the building blocks according to the black box template (see below).
-Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).</p>
-</li>
-</ul>
-</div>
-</li>
-<li>
-<p>(optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box.
+<p>Here you describe the decomposition of the overall system using the following white box template. It contains
+ * an overview diagram
+ * a motivation for the decomposition
+ * black box descriptions of the contained building blocks. For these we offer you alternatives:
+   <strong> use <em>one</em> table for a short and pragmatic overview of all contained building blocks and their interfaces
+   </strong> use a list of black box descriptions of the building blocks according to the black box template (see below).
+   Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).
+ * (optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box.
 Since there are so many ways to specify interfaces why do not provide a specific template for them.
  In the worst case you have to specify and describe syntax, semantics, protocols, error handling,
  restrictions, versions, qualities, necessary compatibilities and many things more.
 In the best case you will get away with examples or simple signatures.</p>
-</li>
-</ul>
 </div>
 </div>
 </div>
+<div class="sect2">
+<h3 id="_level_1_overall_systems_whitebox">5.1. Level 1: Overall System&#8217;s whitebox</h3>
+<div class="imageblock">
+<div class="content">
+<img src="./images/Level%201:%20Overall%20System's%20whitebox.png" alt="Level 1" width="1054" height="578">
+</div>
+</div>
+<div class="sect3">
+<h4 id="_motivation">5.1.1. Motivation</h4>
 <div class="paragraph">
-<p><em><strong>&lt;Overview Diagram&gt;</strong></em></p>
+<p>This level shows how the application will work internally in generaly. The client, WebApp, access to the different services provided by the microservices which make up the program.</p>
 </div>
-<div class="dlist">
-<dl>
-<dt class="hdlist1">Motivation</dt>
-<dd>
-<p><em>&lt;text explanation&gt;</em></p>
-</dd>
-<dt class="hdlist1">Contained Building Blocks</dt>
-<dd>
-<p><em>&lt;Description of contained building block (black boxes)&gt;</em></p>
-</dd>
-<dt class="hdlist1">Important Interfaces</dt>
-<dd>
-<p><em>&lt;Description of important interfaces&gt;</em></p>
-</dd>
-</dl>
 </div>
+<div class="sect3">
+<h4 id="_contained_building_blocks">5.1.2. Contained Building Blocks</h4>
 <div class="sidebarblock arc42help">
 <div class="content">
 <div class="paragraph">
-<p>Insert your explanations of black boxes from level 1:</p>
-</div>
-<div class="paragraph">
-<p>If you use tabular form you will only describe your black boxes with name and
+<p>Insert your explanations of black boxes from level 1:
+If you use tabular form you will only describe your black boxes with name and
 responsibility according to the following schema:</p>
 </div>
 <table class="tableblock frame-all grid-all stretch">
@@ -1311,11 +1262,11 @@ <h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
 <tbody>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;black box 1&gt;</em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>&lt;Text&gt;</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;Text&gt;</em></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;black box 2&gt;</em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>&lt;Text&gt;</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;Text&gt;</em></p></td>
 </tr>
 </tbody>
 </table>
@@ -1325,78 +1276,49 @@ <h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
 </div>
 </div>
 </div>
-<div class="sect3">
-<h4 id="_name_black_box_1">5.1.1. &lt;Name black box 1&gt;</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Client of the application which will interact with it.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">WIQ App</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">System developed to be used by the users. The games will be based on the information obtanined from WikiData</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">WikiData</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Service external to the application from which the application questions will be obtained. Wikidata is a collaboratively edited multilingual knowledge graph hosted by the Wikimedia Foundation.</p></td>
+</tr>
+</tbody>
+</table>
 <div class="sidebarblock arc42help">
 <div class="content">
 <div class="paragraph">
-<p>Here you describe &lt;black box 1&gt;
-according the the following black box template:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>Purpose/Responsibility</p>
-</li>
-<li>
-<p>Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.</p>
-</li>
-<li>
-<p>(Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, &#8230;&#8203;.</p>
-</li>
-<li>
-<p>(Optional) directory/file location</p>
-</li>
-<li>
-<p>(Optional) Fulfilled requirements (if you need traceability to requirements).</p>
-</li>
-<li>
-<p>(Optional) Open issues/problems/risks</p>
-</li>
-</ul>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em>&lt;Purpose/Responsibility&gt;</em></p>
-</div>
-<div class="paragraph">
-<p><em>&lt;Interface(s)&gt;</em></p>
-</div>
-<div class="paragraph">
-<p><em>&lt;(Optional) Quality/Performance Characteristics&gt;</em></p>
-</div>
-<div class="paragraph">
-<p><em>&lt;(Optional) Directory/File Location&gt;</em></p>
-</div>
-<div class="paragraph">
-<p><em>&lt;(Optional) Fulfilled Requirements&gt;</em></p>
-</div>
-<div class="paragraph">
-<p><em>&lt;(optional) Open Issues/Problems/Risks&gt;</em></p>
-</div>
+<p>Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.
+You have to decide which building blocks of your system are important enough to justify such a detailed description.
+Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks.
+Leave out normal, simple, boring or standardized parts of your system</p>
 </div>
-<div class="sect3">
-<h4 id="_name_black_box_2">5.1.2. &lt;Name black box 2&gt;</h4>
-<div class="paragraph">
-<p><em>&lt;black box template&gt;</em></p>
 </div>
 </div>
-<div class="sect3">
-<h4 id="_name_black_box_n">5.1.3. &lt;Name black box n&gt;</h4>
+<div class="sidebarblock arc42help">
+<div class="content">
 <div class="paragraph">
-<p><em>&lt;black box template&gt;</em></p>
+<p>&#8230;&#8203;describes the internal structure of <em>building block 1</em>.</p>
 </div>
 </div>
-<div class="sect3">
-<h4 id="_name_interface_1">5.1.4. &lt;Name interface 1&gt;</h4>
-<div class="paragraph">
-<p>&#8230;&#8203;</p>
 </div>
-</div>
-<div class="sect3">
-<h4 id="_name_interface_m">5.1.5. &lt;Name interface m&gt;</h4>
-
 </div>
 </div>
 <div class="sect2">
@@ -1404,81 +1326,123 @@ <h3 id="_level_2">5.2. Level 2</h3>
 <div class="sidebarblock arc42help">
 <div class="content">
 <div class="paragraph">
-<p>Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.</p>
-</div>
-<div class="paragraph">
-<p>You have to decide which building blocks of your system are important enough to justify such a detailed description.
-Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks.
-Leave out normal, simple, boring or standardized parts of your system</p>
+<p>Here you describe &lt;black box 1&gt;
+according the the following black box template:
+* Purpose/Responsibility
+* Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.
+* (Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, &#8230;&#8203;.
+* (Optional) directory/file location
+* (Optional) Fulfilled requirements (if you need traceability to requirements).
+* (Optional) Open issues/problems/risks</p>
 </div>
 </div>
 </div>
-<div class="sect3">
-<h4 id="_white_box_building_block_1">5.2.1. White Box <em>&lt;building block 1&gt;</em></h4>
-<div class="sidebarblock arc42help">
+<div class="imageblock">
 <div class="content">
-<div class="paragraph">
-<p>&#8230;&#8203;describes the internal structure of <em>building block 1</em>.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
+<img src="./images/Level%202:general%20structure%20of%20a%20system.png" alt="Level 2" width="1031" height="578">
 </div>
 </div>
 <div class="sect3">
-<h4 id="_white_box_building_block_2">5.2.2. White Box <em>&lt;building block 2&gt;</em></h4>
+<h4 id="_motivation_2">5.2.1. Motivation</h4>
 <div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
-</div>
-<div class="paragraph">
-<p>&#8230;&#8203;</p>
+<p><strong><em>WiQ</em></strong> application is the general structure of a system in which users will have the possibility to play a video game implementation of the popular RTVE programme, "Saber y Ganar".</p>
 </div>
 </div>
 <div class="sect3">
-<h4 id="_white_box_building_block_m">5.2.3. White Box <em>&lt;building block m&gt;</em></h4>
-<div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
-</div>
+<h4 id="_contained_building_blocks_2">5.2.2. Contained Building Blocks</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Web App</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Layer in which the user will interact directly and which will connect with the different services.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Questions Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Microservice to generate the questions used by the application from WikiData</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Game Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Microservice that implements the quiz game</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Question Historic Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Microservice that stores the generated questions for later consultation</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User Statistics Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Microservice that stores the statistics of the games played by the user.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Authentification Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Authentication microservice that allows the user to register and log in.</p></td>
+</tr>
+</tbody>
+</table>
 </div>
 </div>
 <div class="sect2">
 <h3 id="_level_3">5.3. Level 3</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you can specify the inner structure of (some) building blocks from level 2 as white boxes.</p>
-</div>
-<div class="paragraph">
-<p>When you need more detailed levels of your architecture please copy this
-part of arc42 for additional levels.</p>
-</div>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_white_box_building_block_x_1">5.3.1. White Box &lt;_building block x.1_&gt;</h4>
-<div class="sidebarblock arc42help">
+<div class="imageblock">
 <div class="content">
-<div class="paragraph">
-<p>Specifies the internal structure of <em>building block x.1</em>.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
+<img src="./images/05_Level_3_Diagram.png" alt="05 Level 3 Diagram">
 </div>
 </div>
 <div class="sect3">
-<h4 id="_white_box_building_block_x_2">5.3.2. White Box &lt;_building block x.2_&gt;</h4>
+<h4 id="_motivation_3">5.3.1. Motivation</h4>
 <div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
+<p>To display the inner architecture of the different microservices, as well as how do their components interact with themselves and with other components from other microsystems. All microservices follow the MVC architectural pattern, to the exception of the questions generator service. (since it has no UI to handle)</p>
 </div>
 </div>
 <div class="sect3">
-<h4 id="_white_box_building_block_y_1">5.3.3. White Box &lt;_building block y.1_&gt;</h4>
-<div class="paragraph">
-<p><em>&lt;white box template&gt;</em></p>
-</div>
+<h4 id="_contained_building_blocks_3">5.3.2. Contained Building Blocks</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Questions Generator</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Contains the required templates and proceedings to construct questions. In order to do so, it delegates the Wikidata querying to the Wikidata extractor. When the data is returned, the question is formulated through templates.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Wikidata Extractor</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Handles extraction and formatting of Wikidata’s output. It’s queries must cover all necessary information in order to construct the question(s), including not only the correct response, but also believable and coherent “decoy responses”.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Questions Historic Controller</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Receives the generated questions, and sends them to the database. Besides, it also handles recovering them from the database and sending them where they are needed. (e.g: as response from an API call, or to the UI)</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User Statistics Controller</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Receives various information about the player’s performance in the match. There, some processing may occur before storing it in the database. Also handles retrieving the information and sending it where it’s needed (e.g: as response from an API call, or to the UI).</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Game Controller</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Handles all the game’s logic; where the user input’s processing takes place. It can request questions to the Questions Microservice, and also gather user statistics, to later be set to the User Statistics Controller.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">UI for the game and statistics</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Handles appeareance and presentation. Actions taken by the user are communicated to their respective controllers, that may respond accordingly.</p></td>
+</tr>
+</tbody>
+</table>
 <div style="page-break-after: always;"></div>
 </div>
 </div>
@@ -1550,52 +1514,40 @@ <h2 id="section-runtime-view">6. Runtime View</h2>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_usage_diagram">6.1. Usage diagram</h3>
+<h3 id="_user_plays_a_match_only_one_question_batch_is_needed">6.1. User plays a match. Only one question batch is needed.</h3>
 <div class="imageblock">
 <div class="content">
-<img src="./images/Scenario%20diagram.png" alt="Scenario diagram" width="399" height="471">
+<img src="./images/Question%20generation%201.png" alt="Question generation 1" width="1045" height="560">
 </div>
 </div>
-</div>
-<div class="sect2">
-<h3 id="_runtime_scenario_1">6.2. &lt;Runtime Scenario 1&gt;</h3>
-<div class="ulist">
-<ul>
-<li>
-<p><em>&lt;insert runtime diagram or textual description of the scenario&gt;</em></p>
-</li>
-<li>
-<p><em>&lt;insert description of the notable aspects of the interactions between the
-building block instances depicted in this diagram.&gt;</em></p>
-</li>
-</ul>
-</div>
 <div class="paragraph">
-<p>It is possible to use a sequence diagram:</p>
+<p>In circumstances in which few questions are needed for the game, it may be possible to extract all of them in a batch without affecting performance and response times. Besides, extracting them this way opens up the possibility of using multiple threads to gather the data, greatly increasing performance. However, if the querying times are too high, this strategy may cause great delays while loading the game. A possible alternative is explained below:</p>
 </div>
+</div>
+<div class="sect2">
+<h3 id="_user_plays_a_match_an_example_of_dynamic_question_generation">6.2. User plays a match. An example of dynamic question generation.</h3>
 <div class="imageblock">
 <div class="content">
-<img src="./images/Sequence%20diagram.png" alt="Sequence diagram" width="332" height="335">
+<img src="./images/Question%20generation%202.png" alt="Question generation 2" width="1062" height="835">
 </div>
 </div>
+<div class="paragraph">
+<p>In cases where a lot of questions are needed, or wikidata querying has a great impact on performance, this alternative may prove to be convenient. By distributing the data fetching along the entire match, bottlenecks on performance will be reduced. Depending on the system load (or, optionally client device&#8217;s specifications!) batch sizes may vary, adapting to maintain responsiveness.</p>
 </div>
-<div class="sect2">
-<h3 id="_runtime_scenario_2">6.3. &lt;Runtime Scenario 2&gt;</h3>
-
 </div>
 <div class="sect2">
-<h3 id="">6.4. &#8230;&#8203;</h3>
-
+<h3 id="_user_consults_its_game_statistics">6.3. User consults its game statistics.</h3>
+<div class="imageblock">
+<div class="content">
+<img src="./images/Consult%20Statistics.png" alt="Consult Statistics" width="466" height="305">
+</div>
 </div>
-<div class="sect2">
-<h3 id="_runtime_scenario_n">6.5. &lt;Runtime Scenario n&gt;</h3>
-
 </div>
 <div class="sect2">
-<h3 id="_wikidata_questions_requests">6.6. Wikidata questions requests</h3>
+<h3 id="_user_consults_questions_used_in_games">6.4. User consults questions used in games.</h3>
 <div class="imageblock">
 <div class="content">
-<img src="./images/Sequence%20diagram%20WikidataApi.png" alt="Sequence diagram WikidataApi" width="418" height="305">
+<img src="./images/Consult%20questions.png" alt="Consult questions" width="466" height="305">
 </div>
 </div>
 <div style="page-break-after: always;"></div>
@@ -1687,63 +1639,34 @@ <h3 id="_infrastructure_level_1">7.1. Infrastructure Level 1</h3>
 </div>
 </div>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="./images/deployment.png" alt="Deployment View">
+</div>
+</div>
 <div class="paragraph">
-<p><em><strong>&lt;Overview Diagram&gt;</strong></em></p>
+<p>In addition to what is shown in the diagram, we will also use Graphana and Prometheus during the production stage as code monitoring systems.</p>
 </div>
 <div class="dlist">
 <dl>
 <dt class="hdlist1">Motivation</dt>
 <dd>
-<p><em>&lt;explanation in text form&gt;</em></p>
+<p>Our goal is to run the application with Docker in a Azure VM.
+However, during the production stage, each contributor will deploy the project locally.
+Final product will be deployed in <a href="http://wiq.sytes.net/" class="bare">http://wiq.sytes.net/</a> (if that does not work, try <a href="http://20.77.37.219:3000/" class="bare">http://20.77.37.219:3000/</a>).</p>
 </dd>
 <dt class="hdlist1">Quality and/or Performance Features</dt>
 <dd>
-<p><em>&lt;explanation in text form&gt;</em></p>
-</dd>
-<dt class="hdlist1">Mapping of Building Blocks to Infrastructure</dt>
-<dd>
-<p><em>&lt;description of the mapping&gt;</em></p>
+<p>As for performance features, our current Azure MV has 2 GiB RAM and 1vCPU.
+If that was not enough, we can always switch to an Oracle VM, which has better resources for free.
+Each microservice has its own container aswell as its own database in case of needing one.</p>
 </dd>
 </dl>
 </div>
-</div>
-<div class="sect2">
-<h3 id="_infrastructure_level_2">7.2. Infrastructure Level 2</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you can include the internal structure of (some) infrastructure elements from level 1.</p>
-</div>
-<div class="paragraph">
-<p>Please copy the structure from level 1 for each selected element.</p>
-</div>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_1">7.2.1. <em>&lt;Infrastructure Element 1&gt;</em></h4>
-<div class="paragraph">
-<p><em>&lt;diagram + explanation&gt;</em></p>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_2">7.2.2. <em>&lt;Infrastructure Element 2&gt;</em></h4>
-<div class="paragraph">
-<p><em>&lt;diagram + explanation&gt;</em></p>
-</div>
-<div class="paragraph">
-<p>&#8230;&#8203;</p>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_n">7.2.3. <em>&lt;Infrastructure Element n&gt;</em></h4>
-<div class="paragraph">
-<p><em>&lt;diagram + explanation&gt;</em></p>
-</div>
 <div style="page-break-after: always;"></div>
 </div>
 </div>
 </div>
-</div>
 <div class="sect1">
 <h2 id="section-concepts">8. Cross-cutting Concepts</h2>
 <div class="sectionbody">
@@ -1932,17 +1855,17 @@ <h2 id="section-design-decisions">9. Architecture Decisions</h2>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">React</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Use of React</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">It is the most used javascript framework and there is a lot of documentation about it.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">All of us in the team will have to learn how to use it because we have never worked with it.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">JavaScript</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Use of JavaScript</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">It is a language we have all used.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">It is a complex language that can cause us problems while other simpler languages could make our work easier.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">MongoDB</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Use of MongoDB</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Being a non-relational database, it is easier to use. In addition, it is used by large telecommunications companies.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Non-relational databases are the ones with which we have the least experience.</p></td>
 </tr>
@@ -2079,12 +2002,6 @@ <h3 id="_quality_scenarios">10.2. Quality Scenarios</h3>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Privacy</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">In order to be able to play, the user must log in to the application.</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Only the user who created/owns the account will have access to it (unless he/she gives someone else his/her credentials).</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">High</p></td>
-</tr>
-<tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Usability</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">The ease of interaction with the user should be enhanced through intuitive and simple interfaces to enhance the user experience.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Users will be able to understand how the game works thanks to the clarity of its rules and ease of navigation.</p></td>
@@ -2100,13 +2017,19 @@ <h3 id="_quality_scenarios">10.2. Quality Scenarios</h3>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Integrity</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">The game must be played without errors.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">The answer determined as correct for each question by the system shall be the one that is actually correct.</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">High</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Medium</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Interactivity</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">The user must answer a series of questions in which the user must select the correct answer in each case.</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">For each of the questions, the user must select the correct answer from those provided by the system.</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">High</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Medium</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Privacy</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">In order to be able to play, the user must log in to the application.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Only the user who created/owns the account will have access to it (unless he/she gives someone else his/her credentials).</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Low</p></td>
 </tr>
 </tbody>
 </table>
@@ -2228,6 +2151,18 @@ <h2 id="section-glossary">12. Glossary</h2>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><em>Usability</em></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><em>Ease with which users can interact with a product, system or application to achieve their objectives effectively, efficiently and satisfactorily.</em></p></td>
 </tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Dynamic question generation</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>There may be circumstances where pre-generating the questions isn&#8217;t feasible. So instead, questions can be generated while the user is playing the game and answering questions.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Decoy answer</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>For questions that offer multiple options to select the correct answer from, it will be necessary to generate believable incorrect answers, that match the topic and theme of the question. For example, when asking about the longest river in Egypt, along with the correct answer (The Nile) some other river names of the country could be chosen for alternatives.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Question template</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>General structure of a question, which can or cannot transcend topics. For example, valid templates for questions could be: "What&#8217;s the tallest mountain in &lt;country&gt;?" "What is &lt;concept&gt;?" "Who invented &lt;x&gt;?"</em></p></td>
+</tr>
 </tbody>
 </table>
 </div>
@@ -2236,7 +2171,7 @@ <h2 id="section-glossary">12. Glossary</h2>
 <div id="footer">
 <div id="footer-text">
 Version 8.2 EN<br>
-Last updated 2024-02-07 00:36:09 +0100
+Last updated 2024-02-21 23:13:49 +0100
 </div>
 </div>
 </body>