Pull Request #8: Skipping the questions and adding the diagrams

FAIRplus · Dec 5, 2022 · 2c9f3f6 · 2c9f3f6
2 parents 25fed5e + ad540c6
commit 2c9f3f6
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.3",
+    "@angular-devkit/build-angular": "^0.1102.19",
     "@angular/cli": "~11.2.3",
     "@angular/compiler-cli": "~11.2.4",
     "@types/jasmine": "~3.6.0",

diff --git a/src/app/app-body/home.component.css b/src/app/app-body/home.component.css
@@ -40,10 +40,6 @@
 
 
 
-
-
-
-
 .submit-btn {
   float: right;
 }
@@ -56,6 +52,28 @@
   color: darkorange;
 }
 
+.tab-question-img {
+  width: 500px !important;
+  float: right;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  background-size: cover;
+
+}
+
+.tab-question-img-header {
+  text-align: end;
+  position: relative;
+  font-size: larger;
+  font-weight: bold;
+  top: -20px;
+  right: -500px;
+  transform: translate(-50%, -50%);
+  color: darkblue;
+  }
+
+
 .options{
 margin-bottom: 10px !important;
 }

diff --git a/src/app/app-body/home.component.html b/src/app/app-body/home.component.html
@@ -1,13 +1,26 @@
 <div class="app-body">
   <div class="card-container">
-    <nz-tabset nzType="card">
-      <nz-tab nzTitle="Representation & Format" (nzClick)="tabClicked(1)">
+    <nz-tabset [(nzSelectedIndex)]="currentSelectedTab" nzType="card" >
+      <nz-tab  nzTitle="Representation & Format"  >
 
         <p class="tab-question-txt">
-          [ {{tab1CurrentData.SectionId}} of {{tab1Data.length+tab2Data.length+tab3Data.length}}  ]
+          [{{tab1CurrentData.SectionId}} of {{tab1Data.length+tab2Data.length+tab3Data.length}}]
           {{ tab1CurrentData ? tab1CurrentData.Question : "" }}
         </p>
         <nz-divider></nz-divider>
+        <!-- position of the label 
+                <label class="tab-question-img-header">
+          {{ tab1CurrentData ? tab1CurrentData.SectionName : "" }}
+        </label>
+      -->
+        <div>
+          <label class="tab-question-img-header"> {{ tab1CurrentData ? tab1CurrentData.SectionName : "" }} </label>
+          <img class="tab-question-img"
+            [src]="tab1CurrentData.Image"
+            [title]="tab1CurrentData.SectionName"
+          />
+        </div>
+
         <div
           *ngFor="let item of tab1CurrentData.Options; let i = index"
           class="options"
@@ -36,12 +49,21 @@
         </div>
       </nz-tab>
 
-      <nz-tab nzTitle="Content & Context" (nzClick)="tabClicked(2)" >
+      <nz-tab nzTitle="Content & Context"    >
         <p class="tab-question-txt">
           [ {{tab2CurrentData.SectionId}} of {{tab1Data.length+tab2Data.length+tab3Data.length}}  ]
           {{ tab2CurrentData ? tab2CurrentData.Question : "" }}
         </p>
         <nz-divider></nz-divider>
+
+        <div>
+          <label class="tab-question-img-header"> {{ tab1CurrentData ? tab1CurrentData.SectionName : "" }} </label>
+          <img class="tab-question-img"
+            [src]="tab1CurrentData.Image"
+            [title]="tab1CurrentData.SectionName"
+          />
+        </div>
+
         <div
           *ngFor="let item of tab2CurrentData.Options; let i = index"
           class="options"
@@ -70,12 +92,21 @@
         </div>
       </nz-tab>
 
-      <nz-tab nzTitle="Hosting Environment Capabilities" (nzClick)="tabClicked(3)">
+      <nz-tab   nzTitle="Hosting Environment Capabilities" >
         <p class="tab-question-txt">
           [ {{tab3CurrentData.SectionId}} of {{tab1Data.length+tab2Data.length+tab3Data.length}} ]
           {{ tab3CurrentData ? tab3CurrentData.Question : "" }}
         </p>
         <nz-divider></nz-divider>
+
+        <div>
+          <label class="tab-question-img-header"> {{ tab1CurrentData ? tab1CurrentData.SectionName : "" }} </label>
+          <img class="tab-question-img"
+            [src]="tab1CurrentData.Image"
+            [title]="tab1CurrentData.SectionName"
+          />
+        </div>
+
         <div
           *ngFor="let item of tab3CurrentData.Options; let i = index"
           class="options"