Final changes in category pages

app/src/components/uncertainty/UncertaintyDetailPage.vue

@@ -16,7 +16,7 @@
             <RelationshipItem v-for="(relation, index) in props.uncertainty.relations" :relationship="relation" :key="index" :value="relation.relatedToId" @click="$emit('selected-uncertainty-id', relation.relatedToId.toString())"/>
         </div>
         <div class="additionalHelp">
-            <ExampleSection :description="props.uncertainty.exampleScenario" :imagePath="imagePath" :collaborationUrl="props.uncertainty.communityAnnotationUrl"/>
+            <ExampleSection header="Example Section" :description="props.uncertainty.exampleScenario" :imagePath="imagePath" :collaborationUrl="props.uncertainty.communityAnnotationUrl"/>
         </div>
     </main>
 </template>

app/src/components/util/ExampleSection.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="example-section">
-        <div class="scenario">
-            <h3>Example Scenario:</h3>
+        <div class="scenario" v-if="props.header !== undefined || props.description !== undefined">
+            <h3 v-if="props.header !== undefined">{{props.header}}</h3>
             <p v-for="section in descriptionSections" :key="section">{{ section }}</p>
         </div>
         <div class="supporting-image">
@@ -14,11 +14,13 @@
 
 </template>
 <script setup lang="ts">
+import { computed } from 'vue';
+
 
 const props = defineProps({
         description: {
             type: String,
-            required: true
+            required: false
         },
         imagePath: {
             type: String,
@@ -28,9 +30,19 @@ const props = defineProps({
             type: String,
             required: true
         },
+        header: {
+            type: String,
+            required: false
+        }
         });
 
-const descriptionSections = props.description.split("\n");
+const descriptionSections = computed(() =>{
+    if (props.description !== undefined) {
+        return props.description.split("\n");
+    } else {
+        return '';
+    }
+});
 
 </script>
 <style scoped>

app/src/data/categories/location.ts

@@ -8,7 +8,7 @@ const location : Category = {
     "name": "Location",
     "definition": "Describes where an uncertainty manifests itself within the architecture.",
     "description": "",
-    "exampleScenario": 'Within a system environment is the system structure. Within the system structure resides the system behaviour. The system behaviour is influenced by the input.',
+    "exampleScenario": 'The system environment is outside of the system structure. Within the system structure resides the system behaviour. The system behaviour is influenced by the input.',
     "options": [Input, systemBehaviour, systemEnvironment, systemStructure ],
     "imagePath": "location.png",
     "discussionUrl": "https://github.com/abunai-dev/UncertaintySourceArchive/issues/3"

app/src/data/categories/type.ts

@@ -6,7 +6,7 @@ const type : Category = {
     "name": "Type",
     "definition": "How much is known about the uncertainty and how can it be described.",
     "description": "",
-    "exampleScenario": 'When an uncertainty is classified as "Recognized Ignorance", it is not tangible. When it is classified as "Scenario Uncertainty", it is tangible but not quantifiable. When it is classified as "Statistical Uncertainty", it is quantifiable ',
+    "exampleScenario": 'When there is recognized ignorance, one does not have any knowledge of the uncertainty. When there is scenario uncertainty, one knows the possible outcomes of the uncertainty. When there is statistical uncertainty, one knows the probability distribution of the uncertainty.',
     "options": [ recognizedIgnorance, scenarioUncertainty, statisticalUncertainty ],
     "imagePath": "type.png",
     "discussionUrl": "https://github.com/abunai-dev/UncertaintySourceArchive/issues/24"