first commit

load-app.js

@@ -0,0 +1,136 @@
+import show_error from './show-error.mjs';
+console.clear();
+
+(async () => {
+  const compilation_error = await show_error;
+  if(compilation_error) {
+      return;
+  }
+});
+
+class NumbasEmbedder {
+  constructor() {
+    this.exams = {};
+
+    this.numbas_promise = new Promise(resolve => {
+      Numbas.queueScript('go', ['start-exam', 'display'], async () => {
+        Numbas.display.init();
+        resolve(Numbas);
+      })
+    })
+  }
+
+  get_exam(id) {
+    if(!this.exams[id]) {
+      const exam_ref = this.exams[id] = {}
+      exam_ref.promise = new Promise((resolve,reject) => {
+        exam_ref.resolve = resolve;
+        exam_ref.reject = reject;
+      });
+    }
+
+    return this.exams[id];
+  }
+
+  async add_exam(id, source_url) {
+    console.log('add exam',id, source_url);
+    await this.numbas_promise;
+    console.log('numbas loaded', id);
+    const res = await fetch(source_url);
+    const exam_file = await res.text();
+    const exam_json = JSON.parse(exam_file.slice(exam_file.indexOf('\n')))
+    const exam = window.exam = Numbas.createExamFromJSON(exam_json);
+
+    exam.display_id = id;
+    exam.init();
+    
+    exam.signals.on(['ready', 'display question list initialised'], () => {
+        console.info('exam ready', id);
+        Numbas.signals.trigger('exam ready');
+        exam.begin();
+      
+        const exam_promise = this.get_exam(id);
+        console.log("LOADED", id);
+        exam_promise.resolve(exam);
+    });
+  }
+}
+
+const numbas_embedder = window.numbas_embedder = new NumbasEmbedder();
+
+class ElmHTMLElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode:'open'});
+  }
+  static get observedAttributes() { return ['html'] };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if(name == 'html') {
+      this.html = newValue;
+    }
+  }
+
+  set html(value) {
+    if(typeof value == 'string') {
+      this.shadowRoot.innerHTML = value;
+    } else {
+      this.shadowRoot.innerHTML = '';
+      this.shadowRoot.append(value);
+    }
+  }
+}
+customElements.define('elm-html', ElmHTMLElement);
+
+class NumbasPartElement extends HTMLElement {
+  constructor() {
+    super();
+    
+    this.attachShadow({mode:'open'});
+
+    const style = document.createElement('link');
+    style.rel = 'stylesheet';
+    style.href = 'numbas-part.css';
+    this.shadowRoot.append(style);
+
+    this.init_app();
+  }
+  
+  async init_app() {
+    const exam_id = this.getAttribute('exam');
+    const mode = this.getAttribute('mode');
+    const questionNumber = parseInt(this.getAttribute('question'));
+    const partPath = this.getAttribute('part');
+
+    const exam = await numbas_embedder.get_exam(exam_id).promise;
+    const container = document.createElement('div');
+    this.shadowRoot.append(container);
+    const app = Elm.App.init({
+      node: container, 
+      flags: {exam: exam, view_mode: {mode, questionNumber, partPath}}
+    });
+
+
+    const message_handlers = {
+      'question': ({questionNumber, msg}) => {
+        const question = exam.questionList[questionNumber];
+        question.display.handle_message(msg);
+      }
+    }
+
+    app.ports.sendMessage.subscribe(data => {
+      const fn = message_handlers[data.msgtype];
+      if(fn) {
+        fn(data);
+      }
+    })
+
+    exam.events.on('update app', ({type, arg}) => {
+      //type != 'showTiming' && console.log('update app', {type,arg});
+      app.ports.receiveMessage.send({type, arg});
+    });
+  
+  }
+}
+
+customElements.define('numbas-part', NumbasPartElement);