fix: show correct Numbas test from the task def with all assets loaded

thoth-tech · Apr 10, 2024 · d33f8a4 · d33f8a4
1 parent 365a422
commit d33f8a4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/src/app/api/services/numbas.service.ts b/src/app/api/services/numbas.service.ts
@@ -13,13 +13,12 @@ export class NumbasService {
   /**
    * Fetches a specified resource for a given unit and task.
    *
-   * @param unitId - The ID of the unit
    * @param taskDefId - The ID of the task definition
    * @param resourcePath - Path to the desired resource
    * @returns An Observable with the Blob of the fetched resource
    */
-  fetchResource(unitId: number, taskDefId: number, resourcePath: string): Observable<any> {
-    const resourceUrl = `${API_URL}/numbas_api/${taskDefId}/numbas_data/${resourcePath}`;
+  fetchResource(taskDefId: number, resourcePath: string): Observable<any> {
+    const resourceUrl = `${API_URL}/numbas_api/${taskDefId}/${resourcePath}`;
     const resourceMimeType = this.getMimeType(resourcePath);
 
     return this.http.get(resourceUrl, { responseType: 'blob' }).pipe(

diff --git a/src/app/common/numbas-component/numbas-component.component.ts b/src/app/common/numbas-component/numbas-component.component.ts
@@ -1,7 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Task } from 'src/app/api/models/task';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
 import { NumbasLmsService } from 'src/app/api/services/numbas-lms.service';
 import { NumbasService } from 'src/app/api/services/numbas.service';
 
@@ -11,12 +9,11 @@ declare global {
 
 @Component({
   selector: 'f-numbas-component',
-  templateUrl: './numbas-component.component.html'
+  templateUrl: './numbas-component.component.html',
+  styleUrls: ['numbas-component.component.scss'],
 })
-export class NumbasComponent implements OnInit {
+export class NumbasComponent implements OnInit, OnChanges {
   @Input() task: Task;
-  @Input() unit: Unit;
-  @Input() taskDef: TaskDefinition;
 
   currentMode: 'attempt' | 'review' = 'attempt';
 
@@ -40,32 +37,38 @@ export class NumbasComponent implements OnInit {
     };
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.task) {
+      this.task = changes.task.currentValue;
+      this.lmsService.setTask(this.task);
+    }
+  }
+
   launchNumbasTest(mode: 'attempt' | 'review' = 'attempt'): void {
     this.currentMode = mode;
+
     const iframe = document.createElement('iframe');
-    iframe.src = 'http://example.org';
+    iframe.src = `http://localhost:3000/api/numbas_api/${this.task.taskDefId}/index.html`;
+
     iframe.style.position = 'fixed';
     iframe.style.top = '0';
     iframe.style.left = '0';
     iframe.style.width = '100%';
     iframe.style.height = '100%';
-    iframe.style.zIndex = '9999'; // Set a high z-index value
-
-    // Get the topmost element in the document
-    var topElement = document.documentElement.firstChild;
+    iframe.style.zIndex = '9999';
 
-    // Replace the top element with the iframe
-    document.documentElement.replaceChild(iframe, topElement);
+    document.body.appendChild(iframe);
   }
 
   interceptIframeRequests(): void {
     const originalOpen = XMLHttpRequest.prototype.open;
     const numbasService = this.numbasService;
+    const taskDefId = this.task.taskDefId;
     XMLHttpRequest.prototype.open = function (this: XMLHttpRequest, method: string, url: string | URL, async: boolean = true, username?: string | null, password?: string | null) {
       if (typeof url === 'string' && url.startsWith('/api/numbas_api/')) {
         const resourcePath = url.replace('/api/numbas_api/', '');
         this.abort();
-        numbasService.fetchResource(1, 1, resourcePath).subscribe(
+        numbasService.fetchResource(taskDefId, resourcePath).subscribe(
           (resourceData) => {
             if (this.onload) {
               this.onload.call(this, resourceData);

diff --git a/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html b/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html
@@ -57,11 +57,7 @@ <h4>
           </span>
         </div>
         <div class="card-body">
-          <f-numbas-component
-            task="task"
-            unit="task.unit"
-            taskDef="task.definition">
-          </f-numbas-component>
+          <f-numbas-component [task]="task"></f-numbas-component>
         </div>
       </div>
     </div>