feat: improved uvl tutorial content and use html tags for content ins…

…tead of plain text

WebSocketClient/assets/uvlTutorialContent.ts

@@ -1,9 +1,9 @@
 export const tutorialContent = [{
     title: "Welcome",
-    text: "Welcome to the UVL Tutorial! All code listings will automatically be placed in the editor on the left. Click 'Next' to start the tutorial."
+    text: "<p>Welcome to the UVL Tutorial! </br>All code listings will automatically be placed in the editor on the left. Click <b>'Next'</b> to start the tutorial.</p>"
 }, {
     title: "Basic Feature Model",
-    text: "Start with the 'features' key word to start enumerating your features. Indentations matter in UVL and represent the tree structure. We will start with a basic feature model that represents a computer. Every computer needs a CPU and can optionaly have some devices connected via SATA.",
+    text: "<p>Start with the <b><tt>features</tt></b> key word to start enumerating your features. Indentations matter in UVL and represent the tree structure.</br>We will start with a basic feature model that represents a computer. Every computer needs a CPU and can optionaly have some devices connected via SATA.</p>",
     codeListing: `features
     Computer
         mandatory
@@ -12,7 +12,7 @@ export const tutorialContent = [{
             SATADevices`
 }, {
     title: "Special Feature Names",
-    text: "To use special characters or spaces in feature names use \" to enclose the names.",
+    text: "<p>To use special characters or spaces in feature names use <b><tt>\"</tt></b> to enclose the names.</br>In this example we write <b><tt>SATA-Devices</tt></b> with a dash instead of <b><tt>SATADevices</tt></b>.</p>",
     codeListing: `features
     Computer
         mandatory
@@ -21,7 +21,7 @@ export const tutorialContent = [{
             "SATA-Devices"`
 }, {
     title: "Basic Constraints",
-    text: "Use the 'constraints' keyword to start the section of constraints. In its basic form, a constraint uses propositional logic. In this example we enforce that if a computer contains a dedicated graphics card, it must also use liquid cooling. ",
+    text: "<p>Use the <b><tt>constraints</tt></b> keyword to start the section of constraints. In its basic form, a constraint uses propositional logic.</br>In this example we enforce that if a computer contains a dedicated graphics card, it must also use liquid cooling. We do that with the <b><tt>=></tt></b> symbol to represent an implication.</br>Other logic connectors are <b><tt>&</tt></b>, <b><tt>|</tt></b>, <b><tt>not</tt></b></p>",
     codeListing: `features
     Computer
         mandatory
@@ -41,7 +41,7 @@ constraints
     Dedicated => Liquid`
 }, {
     title: "Feature Attributes",
-    text: "Features can have attributes in curly brackets as key value pairs. The value can be omitted if it is a boolean attribute and the value is true. This is the case for the 'abstract' attribute in the feature 'Computer'. We also use attribues to indicate the power consumption of different parts of the computer.",
+    text: "<p>Features can have attributes in curly brackets as key value pairs. The value can be omitted if it is a boolean attribute and the value is true. This is the case for the <b><tt>abstract</tt></b> attribute in the feature <b><tt>Computer</tt></b>. We also use attribues to indicate the power consumption of different parts of the computer.</p>",
     codeListing: `features
     Computer {abstract}
         mandatory
@@ -61,7 +61,7 @@ constraints
     Dedicated => Liquid`
 }, {
     title: "Complex Constraints",
-    text: "We can now create more complex constraints and for example access attribtues of features. In this case we use the aggregate function 'sum' to sum over all powerConsumption attributes and check if the overall powerConsumption is larger than a threshold and if so enforce a stronger power supply unit. You could also access feature attribtues and perform basic calculations with them.",
+    text: "<p>We can now create more complex constraints and for example access attribtues of features. In this case we use the aggregate function <b><tt>sum</tt></b> to sum over all powerConsumption attributes and check if the overall <b><tt>powerConsumption</tt></b> is larger than a threshold and if so enforce a stronger power supply unit. You could also access feature attribtues and perform basic calculations with them.</p>",
     codeListing: `features
     Computer {abstract}
         mandatory
@@ -86,7 +86,7 @@ constraints
     sum(powerConsumption) > 300 => StrongPSU`
 }, {
     title: "Group Cardinality",
-    text: "Group cardinalities are more generic than 'or' and 'alternative'. In our example the motherboard only has space for up to 2 SATA-Devices. So we enforce that there are 0, 1, or 2 SATA-Devices.",
+    text: "<p>Group cardinalities are more generic than <b><tt>or</tt></b> and <b><tt>alternative</tt></b>.</br>In our example the motherboard only has space for up to 2 SATA-Devices. So we enforce that there are 0, 1, or 2 SATA-Devices.</p>",
     codeListing: `features
     Computer {abstract}
         mandatory
@@ -115,7 +115,7 @@ constraints
     sum(powerConsumption) > 300 => StrongPSU`
 }, {
     title: "Feature Cardinality",
-    text: "Feature Cardinality allows a feature to be selected multiple times. In our example we can use up to 4 ram bars.",
+    text: "<p>Feature Cardinality allows a feature to be selected multiple times. In our example we can use up to 4 ram bars.</p>",
     codeListing: `features
     Computer {abstract}
         mandatory
@@ -145,7 +145,7 @@ constraints
     sum(powerConsumption) > 300 => StrongPSU`
 }, {
     title: "Types",
-    text: "In UVL you can use types to create special features. In this case we change the power supply unit. It has a 'Manufacturer' feature of the type 'String' and a 'Watt' feature of the type 'Integer'. This means, when configuring the feature model, the features are not just selected or deselected, but get a value of their coresponding type. We can utilize this for even more complex constraints and check if the manufaturer of the CPU and the PSU match.",
+    text: "<p>In UVL you can use types to create special features. In this case we change the power supply unit. It has a <b><tt>Manufacturer</tt></b> feature of the type <b><tt>String</tt></b> and a <b><tt>Watt</tt></b> feature of the type <b><tt>Integer</tt></b>.</br>This means, when configuring the feature model, the features are not just selected or deselected, but get a value of their coresponding type. We can utilize this for even more complex constraints and check if the manufaturer of the CPU and the PSU match.</p>",
     codeListing: `features
     Computer {abstract}
         mandatory
@@ -176,5 +176,5 @@ constraints
     CPU.Manufacturer == Manufacturer`
 }, {
     title: "The End",
-    text: "Now you have a basic understanding of the Universal Variablity Language. Go on and use the playground to test the language. If you plan on using the language more frequently we recommend installing an extension in an IDE of your choice, because it provides more features. Press the 'Done' button to close the tutorial."
+    text: "<p>Now you have a basic understanding of the Universal Variablity Language. Go on and use the playground to test the language.</br>If you plan on using the language more frequently we recommend installing an extension in an IDE of your choice, because it provides more features. Press the 'Done' button to close the tutorial.</p>"
 }]

WebSocketClient/src/uvlTutorial.ts

@@ -39,9 +39,10 @@ export default function initUvlTutorial(editor: editor.IStandaloneCodeEditor) {
         let newDiv = document.createElement('div');
         newDiv.id = "uvl-tutorial-div";
         let headline = document.createElement('h2');
+
         headline.textContent = content.title;
         let text = document.createElement('div');
-        text.textContent = content.text;
+        text.innerHTML = content.text;
         text.className = 'text';
 
         let navigationContainer = document.createElement('div');

WebSocketClient/style/style.css

@@ -9,6 +9,10 @@ body {
     background-color: #1e1e1e; /* Dark background color */
 }
 
+h2 {
+    text-align: center;
+}
+
 .error {
     color: red;
 }