From 8153bf94fca0573c364116bd96214f438cadf4c8 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 10 May 2021 14:17:01 -0700
Subject: [PATCH] Basic QTI zip loading prototype.

---
 kolibri/core/assets/src/core-app/urls.js      |   4 +
 .../migrations/0028_qti_format_preset.py      |  79 +++++++++++
 kolibri/plugins/qti_viewer/__init__.py        |   0
 .../qti_viewer/assets/src/mixins/domMixin.js  |  19 +++
 .../plugins/qti_viewer/assets/src/module.js   |  13 ++
 .../assets/src/views/AssessmentItem.vue       |  46 +++++++
 .../assets/src/views/AssessmentItemRef.vue    |  58 ++++++++
 .../assets/src/views/AssessmentSection.vue    |  55 ++++++++
 .../assets/src/views/AssessmentTest.vue       |  58 ++++++++
 .../qti_viewer/assets/src/views/HTML.vue      | 105 +++++++++++++++
 .../qti_viewer/assets/src/views/ItemBody.vue  |  41 ++++++
 .../qti_viewer/assets/src/views/QTIViewer.vue | 124 ++++++++++++++++++
 .../views/interactions/ChoiceInteraction.vue  |  88 +++++++++++++
 .../src/views/interactions/ChoiceMultiple.vue |  62 +++++++++
 .../assets/src/views/interactions/Prompt.vue  |  28 ++++
 kolibri/plugins/qti_viewer/buildConfig.js     |   6 +
 kolibri/plugins/qti_viewer/kolibri_plugin.py  |  19 +++
 kolibri/plugins/qti_viewer/package.json       |   9 ++
 requirements/base.txt                         |   2 +-
 yarn.lock                                     |  15 ++-
 20 files changed, 829 insertions(+), 2 deletions(-)
 create mode 100644 kolibri/core/content/migrations/0028_qti_format_preset.py
 create mode 100644 kolibri/plugins/qti_viewer/__init__.py
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/mixins/domMixin.js
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/module.js
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/AssessmentItem.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/AssessmentItemRef.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/AssessmentSection.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/AssessmentTest.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/HTML.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/ItemBody.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/QTIViewer.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceInteraction.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceMultiple.vue
 create mode 100644 kolibri/plugins/qti_viewer/assets/src/views/interactions/Prompt.vue
 create mode 100644 kolibri/plugins/qti_viewer/buildConfig.js
 create mode 100644 kolibri/plugins/qti_viewer/kolibri_plugin.py
 create mode 100644 kolibri/plugins/qti_viewer/package.json

diff --git a/kolibri/core/assets/src/core-app/urls.js b/kolibri/core/assets/src/core-app/urls.js
index 8c054779acf..cb155775a9f 100644
--- a/kolibri/core/assets/src/core-app/urls.js
+++ b/kolibri/core/assets/src/core-app/urls.js
@@ -48,6 +48,10 @@ const urls = {
     }
     return generateUrl(this.__mediaUrl, { url });
   },
+  rawStorageUrl(fileId, extension) {
+    const filename = `${fileId}.${extension}`;
+    return generateUrl(this.__contentUrl, { url: `${filename[0]}/${filename[1]}/${filename}` });
+  },
   storageUrl(fileId, extension, embeddedFilePath = '') {
     const filename = `${fileId}.${extension}`;
     if (['zip', 'h5p'].includes(extension)) {
diff --git a/kolibri/core/content/migrations/0028_qti_format_preset.py b/kolibri/core/content/migrations/0028_qti_format_preset.py
new file mode 100644
index 00000000000..4bfc0da8b5d
--- /dev/null
+++ b/kolibri/core/content/migrations/0028_qti_format_preset.py
@@ -0,0 +1,79 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.29 on 2021-05-10 21:49
+from __future__ import unicode_literals
+
+from django.db import migrations
+from django.db import models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("content", "0027_channelmetadata_tagline"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="file",
+            name="preset",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("high_res_video", "High Resolution"),
+                    ("low_res_video", "Low Resolution"),
+                    ("video_thumbnail", "Thumbnail"),
+                    ("video_subtitle", "Subtitle"),
+                    ("video_dependency", "Video (dependency)"),
+                    ("audio", "Audio"),
+                    ("audio_thumbnail", "Thumbnail"),
+                    ("audio_dependency", "audio (dependency)"),
+                    ("document", "Document"),
+                    ("epub", "ePub Document"),
+                    ("document_thumbnail", "Thumbnail"),
+                    ("exercise", "Exercise"),
+                    ("exercise_thumbnail", "Thumbnail"),
+                    ("exercise_image", "Exercise Image"),
+                    ("exercise_graphie", "Exercise Graphie"),
+                    ("channel_thumbnail", "Channel Thumbnail"),
+                    ("topic_thumbnail", "Thumbnail"),
+                    ("html5_zip", "HTML5 Zip"),
+                    ("html5_dependency", "HTML5 Dependency (Zip format)"),
+                    ("html5_thumbnail", "HTML5 Thumbnail"),
+                    ("h5p", "H5P Zip"),
+                    ("h5p_thumbnail", "H5P Thumbnail"),
+                    ("qti", "QTI Zip"),
+                    ("qti_thumbnail", "QTI Thumbnail"),
+                    ("slideshow_image", "Slideshow Image"),
+                    ("slideshow_thumbnail", "Slideshow Thumbnail"),
+                    ("slideshow_manifest", "Slideshow Manifest"),
+                ],
+                max_length=150,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="localfile",
+            name="extension",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("mp4", "MP4 Video"),
+                    ("webm", "WEBM Video"),
+                    ("vtt", "VTT Subtitle"),
+                    ("mp3", "MP3 Audio"),
+                    ("pdf", "PDF Document"),
+                    ("jpg", "JPG Image"),
+                    ("jpeg", "JPEG Image"),
+                    ("png", "PNG Image"),
+                    ("gif", "GIF Image"),
+                    ("json", "JSON"),
+                    ("svg", "SVG Image"),
+                    ("perseus", "Perseus Exercise"),
+                    ("graphie", "Graphie Exercise"),
+                    ("zip", "HTML5 Zip"),
+                    ("h5p", "H5P"),
+                    ("epub", "ePub Document"),
+                ],
+                max_length=40,
+            ),
+        ),
+    ]
diff --git a/kolibri/plugins/qti_viewer/__init__.py b/kolibri/plugins/qti_viewer/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/kolibri/plugins/qti_viewer/assets/src/mixins/domMixin.js b/kolibri/plugins/qti_viewer/assets/src/mixins/domMixin.js
new file mode 100644
index 00000000000..9a6d8bd4271
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/mixins/domMixin.js
@@ -0,0 +1,19 @@
+export default {
+  props: {
+    dom: {
+      required: true,
+    },
+    qtiFile: {
+      required: true,
+    },
+    filePath: {
+      required: true,
+      type: String,
+    },
+  },
+  computed: {
+    children() {
+      return Array.from(this.dom.children);
+    },
+  },
+};
diff --git a/kolibri/plugins/qti_viewer/assets/src/module.js b/kolibri/plugins/qti_viewer/assets/src/module.js
new file mode 100644
index 00000000000..a08157c166b
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/module.js
@@ -0,0 +1,13 @@
+import QTIViewer from './views/QTIViewer';
+import ContentRendererModule from 'content_renderer_module';
+
+class QTIViewerModule extends ContentRendererModule {
+  get rendererComponent() {
+    QTIViewer.contentModule = this;
+    return QTIViewer;
+  }
+}
+
+const qtiViewer = new QTIViewerModule();
+
+export { qtiViewer as default };
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItem.vue b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItem.vue
new file mode 100644
index 00000000000..4d6fe364ebf
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItem.vue
@@ -0,0 +1,46 @@
+<template>
+
+  <div>
+    {{ title }}
+
+    <ItemBody
+      v-if="itemBody"
+      :key="identifier"
+      :dom="itemBody"
+      :qtiFile="qtiFile"
+      :filePath="filePath"
+      @submit="$emit('submit', $event)"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import domMixin from '../mixins/domMixin';
+  import ItemBody from './ItemBody';
+
+  export default {
+    name: 'AssessmentItem',
+    components: {
+      ItemBody,
+    },
+    mixins: [domMixin],
+    computed: {
+      itemBody() {
+        return this.dom && this.dom.getElementsByTagName('itemBody')[0];
+      },
+      identifier() {
+        return this.dom && this.dom.getAttribute('identifier');
+      },
+      title() {
+        return (this.dom && this.dom.getAttribute('title')) || '';
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped></style>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItemRef.vue b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItemRef.vue
new file mode 100644
index 00000000000..f0a9bbf58bf
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItemRef.vue
@@ -0,0 +1,58 @@
+<template>
+
+  <AssessmentItem
+    v-if="assessmentItem"
+    :dom="assessmentItem"
+    :qtiFile="qtiFile"
+    :filePath="filePath"
+  />
+
+</template>
+
+
+<script>
+
+  import domMixin from '../mixins/domMixin';
+  import AssessmentItem from './AssessmentItem';
+
+  export default {
+    name: 'AssessmentItemRef',
+    components: {
+      AssessmentItem,
+    },
+    mixins: [domMixin],
+    data() {
+      return {
+        assessmentItem: null,
+      };
+    },
+    computed: {
+      href() {
+        const relativeHref = this.dom && this.dom.getAttribute('href');
+        if (relativeHref) {
+          const path = new URL(
+            relativeHref,
+            new URL(this.filePath, 'http://b.b/')
+          ).pathname.substring(1);
+          return path;
+        }
+        return '';
+      },
+    },
+    created() {
+      const resourceFile = this.qtiFile.file(this.href);
+      if (!resourceFile) {
+        throw new ReferenceError(`file ${this.href} not found`);
+      }
+      resourceFile.async('string').then(qtiXML => {
+        const parser = new DOMParser();
+        const DOM = parser.parseFromString(qtiXML.trim(), 'text/xml');
+        this.assessmentItem = DOM.getElementsByTagName('assessmentItem')[0];
+      });
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped></style>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/AssessmentSection.vue b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentSection.vue
new file mode 100644
index 00000000000..2b6c2666e13
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentSection.vue
@@ -0,0 +1,55 @@
+<template>
+
+  <div>
+    <AssessmentItem
+      v-if="assessmentItem"
+      :dom="assessmentItem"
+      :qtiFile="qtiFile"
+      :filePath="filePath"
+    />
+    <AssessmentItemRef
+      v-else-if="assessmentItemRef"
+      :dom="assessmentItemRef"
+      :qtiFile="qtiFile"
+      :filePath="filePath"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import domMixin from '../mixins/domMixin';
+  import AssessmentItem from './AssessmentItem';
+  import AssessmentItemRef from './AssessmentItemRef';
+
+  export default {
+    name: 'AssessmentSection',
+    components: {
+      AssessmentItem,
+      AssessmentItemRef,
+    },
+    mixins: [domMixin],
+    data() {
+      return {
+        assessmentItemIndex: 0,
+      };
+    },
+    computed: {
+      assessmentItems() {
+        return this.dom && Array.from(this.dom.getElementsByTagName('assessmentItem'));
+      },
+      assessmentItem() {
+        return this.assessmentItems && this.assessmentItems[this.assessmentItemIndex];
+      },
+      assessmentItemRefs() {
+        return this.dom && Array.from(this.dom.getElementsByTagName('assessmentItemRef'));
+      },
+      assessmentItemRef() {
+        return this.assessmentItemRefs && this.assessmentItemRefs[this.assessmentItemIndex];
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/AssessmentTest.vue b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentTest.vue
new file mode 100644
index 00000000000..5cee132c0d8
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentTest.vue
@@ -0,0 +1,58 @@
+<template>
+
+  <div>
+    <AssessmentSection
+      v-if="assessmentSection"
+      :dom="assessmentSection"
+      :qtiFile="qtiFile"
+      :filePath="filePath"
+    />
+    <KButton @click="previous">
+      Back
+    </KButton>
+    <KButton @click="next">
+      Continue
+    </KButton>
+  </div>
+
+</template>
+
+
+<script>
+
+  import domMixin from '../mixins/domMixin';
+  import AssessmentSection from './AssessmentSection';
+
+  export default {
+    name: 'AssessmentTest',
+    components: {
+      AssessmentSection,
+    },
+    mixins: [domMixin],
+    data() {
+      return {
+        testPartIndex: 0,
+        sectionIndex: 0,
+      };
+    },
+    computed: {
+      testParts() {
+        return this.dom && Array.from(this.dom.getElementsByTagName('testPart'));
+      },
+      testPart() {
+        return this.testParts && this.testParts[this.testPartIndex];
+      },
+      assessmentSections() {
+        return Array.from(this.testPart.getElementsByTagName('assessmentSection'));
+      },
+      assessmentSection() {
+        return this.assessmentSections[this.sectionIndex];
+      },
+    },
+    methods: {
+      next() {},
+      previous() {},
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/HTML.vue b/kolibri/plugins/qti_viewer/assets/src/views/HTML.vue
new file mode 100644
index 00000000000..eb6bfbd1e09
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/HTML.vue
@@ -0,0 +1,105 @@
+<template>
+
+  <!-- eslint-disable vue/no-v-html -->
+  <div v-html="html">
+    <!-- eslint-enable -->
+  </div>
+
+</template>
+
+
+<script>
+
+  import { filterXSS, safeAttrValue as baseSafeAttrValue, escapeAttrValue } from 'xss';
+  import domMixin from '../mixins/domMixin';
+
+  const mimetypes = {
+    mp3: 'audio/mpeg',
+    m4a: 'audio/x-m4a',
+    ogg: 'audio/ogg',
+    wav: 'audio/x-wav',
+    bmp: 'image/x-ms-bmp',
+    gif: 'image/gif',
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+  };
+
+  function createBlobUrl(uint8array, fileName) {
+    let type = '';
+    const fileNameExt = fileName.split('.').slice(-1)[0];
+    if (fileNameExt) {
+      const ext = fileNameExt.toLowerCase();
+      type = mimetypes[ext];
+    }
+    const blob = new Blob([uint8array.buffer], { type });
+    return URL.createObjectURL(blob);
+  }
+
+  function safeAttrValue(tag, name, value, cssFilter) {
+    const newValue = baseSafeAttrValue(tag, name, value, cssFilter);
+    if (name === 'href' || name === 'src') {
+      if (value.substring(0, 5) === 'blob:') {
+        return escapeAttrValue(value);
+      }
+    }
+    return newValue;
+  }
+
+  export default {
+    name: 'HTML',
+    mixins: [domMixin],
+    data() {
+      return {
+        html: '',
+      };
+    },
+    created() {
+      this.htmlSerialize();
+    },
+    methods: {
+      htmlSerialize() {
+        const serializer = new XMLSerializer();
+        return Promise.all([this.substituteBloblUrls('img', 'src', this.dom)]).then(() => {
+          const html = filterXSS(serializer.serializeToString(this.dom), {
+            safeAttrValue,
+            stripIgnoreTag: true,
+            stripIgnoreTagBody: true,
+          });
+          if (html.trim() === '[removed]') {
+            this.html = '';
+          } else {
+            this.html = html;
+          }
+        });
+      },
+      substituteBloblUrls(tagName, attribute, htmlElement) {
+        const promises = [];
+        for (let tag of htmlElement.getElementsByTagName(tagName)) {
+          if (tag.getAttribute(attribute)) {
+            const path = new URL(
+              tag.getAttribute(attribute),
+              new URL(this.filePath, 'http://b.b/')
+            ).pathname.substring(1);
+            const file = this.qtiFile.file(path);
+            if (file) {
+              promises.push(
+                file.async('uint8array').then(uint8array => {
+                  const url = createBlobUrl(uint8array, path);
+                  tag.setAttribute(attribute, url);
+                })
+              );
+            }
+          }
+        }
+        return Promise.all(promises);
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/ItemBody.vue b/kolibri/plugins/qti_viewer/assets/src/views/ItemBody.vue
new file mode 100644
index 00000000000..d9ef2cf3599
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/ItemBody.vue
@@ -0,0 +1,41 @@
+<template>
+
+  <div>
+    <div v-for="(child, index) in children" :key="index">
+      <component
+        :is="child.tagName"
+        v-if="isSupportedInteraction(child.tagName)"
+        :dom="child"
+        :filePath="filePath"
+        :qtiFile="qtiFile"
+        @submit="$emit('submit', $event)"
+      />
+      <HTML :dom="child" :filePath="filePath" :qtiFile="qtiFile" />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import domMixin from '../mixins/domMixin';
+  import ChoiceInteraction from './interactions/ChoiceInteraction';
+  import HTML from './HTML';
+
+  const SupportedInteractions = {
+    ChoiceInteraction,
+  };
+
+  export default {
+    name: 'ItemBody',
+    components: { ChoiceInteraction, HTML },
+    mixins: [domMixin],
+    methods: {
+      isSupportedInteraction(tagName) {
+        return Boolean(SupportedInteractions[tagName]);
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/QTIViewer.vue b/kolibri/plugins/qti_viewer/assets/src/views/QTIViewer.vue
new file mode 100644
index 00000000000..c08e5a1998e
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/QTIViewer.vue
@@ -0,0 +1,124 @@
+<template>
+
+  <div>
+    <component
+      :is="child.tagName"
+      v-for="(child, index) in children"
+      :key="index"
+      :dom="child"
+      :qtiFile="qtiFile"
+      :filePath="resource.href"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import JSZip from 'jszip';
+  import client from 'kolibri.client';
+  import logger from 'kolibri.lib.logging';
+  import urls from 'kolibri.urls';
+  import AssessmentItem from './AssessmentItem';
+  import AssessmentSection from './AssessmentSection';
+  import AssessmentTest from './AssessmentTest';
+
+  const logging = logger.getLogger(__filename);
+
+  function parseIMSManifest(IMSPackage) {
+    const manifestFile = IMSPackage.file(`imsmanifest.xml`);
+    if (manifestFile) {
+      return manifestFile.async('string').then(manifest => {
+        const parser = new DOMParser();
+        const DOM = parser.parseFromString(manifest.trim(), 'text/xml');
+        return Array.prototype.map.call(DOM.getElementsByTagName('resource'), resource => {
+          return {
+            identifier: resource.getAttribute('identifier'),
+            href: resource.getAttribute('href'),
+            files: Array.prototype.map.call(resource.getElementsByTagName('file'), f =>
+              f.getAttribute('href')
+            ),
+          };
+        });
+      });
+    }
+    return Promise.reject('Manifest file not found');
+  }
+
+  export default {
+    name: 'QTIViewer',
+    components: {
+      AssessmentItem,
+      AssessmentSection,
+      AssessmentTest,
+    },
+    data: () => ({
+      children: [],
+      // Is the qti viewer loading?
+      loading: true,
+      resource: null,
+    }),
+    created() {
+      this.loadAssessmentTest();
+    },
+    methods: {
+      loadQtiFile() {
+        if (this.defaultFile) {
+          const url = urls.rawStorageUrl(this.defaultFile.checksum, this.defaultFile.extension);
+          this.loading = true;
+          if (!this.qtiFile) {
+            return client({
+              method: 'get',
+              url,
+              responseType: 'arraybuffer',
+              cacheBust: false,
+            })
+              .then(response => {
+                return JSZip.loadAsync(response.data);
+              })
+              .then(qtiFile => {
+                this.qtiFile = qtiFile;
+                return parseIMSManifest(this.qtiFile).then(manifest => {
+                  if (!manifest.length) {
+                    return Promise.reject('IMS Package has no resources');
+                  }
+                  const resource = manifest.find(m => m.identifier === this.options.entry);
+                  if (resource) {
+                    this.resource = resource;
+                  } else {
+                    this.resource = manifest[0];
+                  }
+                });
+              });
+          } else {
+            return Promise.resolve();
+          }
+        }
+      },
+      loadAssessmentTest() {
+        if (this.defaultFile && this.defaultFile.storage_url) {
+          this.loading = true;
+          this.loadQtiFile()
+            .then(() => {
+              const resourceFile = this.qtiFile.file(this.resource.href);
+              if (resourceFile) {
+                return resourceFile.async('string');
+              }
+              return Promise.reject(`file ${this.resource.href} not found`);
+            })
+            .then(qtiXML => {
+              const parser = new DOMParser();
+              const DOM = parser.parseFromString(qtiXML.trim(), 'text/xml');
+              this.children = Array.from(DOM.children);
+            })
+            .catch(reason => {
+              logging.debug('There was an error loading the QTI XML: ', reason);
+              this.$emit('itemError', reason);
+            });
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceInteraction.vue b/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceInteraction.vue
new file mode 100644
index 00000000000..3a6f0c0b7e8
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceInteraction.vue
@@ -0,0 +1,88 @@
+<template>
+
+  <form @submit.prevent="$emit('submit', $event)">
+    <Prompt v-for="prompt in prompts" :key="prompt.id" :dom="prompt" />
+
+    <ChoiceMultiple v-if="isMultiple" :dom="dom" :choices="choices" />
+
+    <KRadioButton
+      v-for="(choice) in choices"
+      v-else
+      :key="choice.attributes.identifier.value"
+      :label="choice.textContent"
+      :value="choice.attributes.identifier.value"
+      :currentValue="response"
+      @change="response = choice.attributes.identifier.value"
+    />
+
+  </form>
+
+</template>
+
+
+<script>
+
+  import shuffled from 'kolibri.utils.shuffled';
+  import domMixin from '../../mixins/domMixin';
+  import Prompt from './Prompt';
+  import ChoiceMultiple from './ChoiceMultiple';
+
+  const SHUFFLEABLE_CHILDREN_MAP = {
+    choiceInteraction: ['simpleChoice'],
+  };
+
+  export default {
+    name: 'ChoiceInteraction',
+    components: {
+      Prompt,
+      ChoiceMultiple,
+    },
+    mixins: [domMixin],
+    data() {
+      return {
+        response: '',
+      };
+    },
+    computed: {
+      prompts() {
+        // Not sure there could ever be more than one.
+        return Array.from(this.children).filter(element => element.tagName === 'prompt');
+      },
+      choices() {
+        // const interaction = Array.from(this.dom.children).filter(e =>
+        //   SHUFFLEABLE_INTERACTION_TAGS.includes(e.tagName)
+        // )[0];
+
+        const shuffleableElements = Array.from(this.dom.children).filter(c => {
+          return SHUFFLEABLE_CHILDREN_MAP[this.dom.tagName].includes(c.tagName);
+        });
+        const fixedIndices = shuffleableElements.map(c => c.attributes.getNamedItem('fixed'));
+        const shuffledItems = shuffled(
+          shuffleableElements.filter(e => !e.attributes.getNamedItem('fixed'))
+        );
+        return fixedIndices.map((isFixed, idx) => {
+          if (isFixed) {
+            return shuffleableElements[idx];
+          } else {
+            return shuffledItems.pop();
+          }
+        });
+      },
+      isMultiple() {
+        return this.dom && this.dom.getAttribute('cardinality') === 'multiple';
+      },
+    },
+    watch: {
+      response() {
+        this.saveResponse();
+      },
+    },
+    mounted() {
+      this.response = this.responseForCurrentItem || '';
+    },
+  };
+
+</script>
+
+
+<style></style>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceMultiple.vue b/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceMultiple.vue
new file mode 100644
index 00000000000..cb71cc53cb8
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceMultiple.vue
@@ -0,0 +1,62 @@
+<template>
+
+  <div>
+    <em>Max choices: {{ maxChoices }} </em>
+    <KCheckbox
+      v-for="(choice) in choices"
+      :key="choice.attributes.identifier.value"
+      :label="choice.textContent"
+      :value="choice.attributes.identifier.value"
+      :checked="responses.includes(choice.attributes.identifier.value)"
+      :disabled="isDisabled(choice)"
+      @change="toggleResponseSelection(choice.attributes.identifier.value)"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ChoiceMultiple',
+    props: {
+      choices: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        responses: [],
+      };
+    },
+    computed: {
+      maxChoices() {
+        return 0;
+      },
+    },
+    methods: {
+      isDisabled(choice) {
+        return (
+          this.responses.length === this.maxChoices &&
+          !this.responses.includes(choice.attributes.identifier.value)
+        );
+      },
+      toggleResponseSelection(response) {
+        const responseIndex = this.responses.indexOf(response);
+        if (responseIndex === -1) {
+          if (this.responses.length === this.maxChoices) {
+            return;
+          }
+          this.responses = [...this.responses, response];
+        } else {
+          const responses = Array.from(this.responses);
+          responses.splice(responseIndex, 1);
+          this.responses = responses;
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/interactions/Prompt.vue b/kolibri/plugins/qti_viewer/assets/src/views/interactions/Prompt.vue
new file mode 100644
index 00000000000..e746f5f4648
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/interactions/Prompt.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <p> {{ prompt }} </p>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'Prompt',
+    props: {
+      dom: {
+        type: Element,
+        default: null,
+      },
+    },
+    computed: {
+      prompt() {
+        return this.dom && this.dom.textContent;
+      },
+    },
+  };
+
+</script>
+
+
+<style></style>
diff --git a/kolibri/plugins/qti_viewer/buildConfig.js b/kolibri/plugins/qti_viewer/buildConfig.js
new file mode 100644
index 00000000000..860f9b46554
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/buildConfig.js
@@ -0,0 +1,6 @@
+module.exports = {
+  bundle_id: 'main',
+  webpack_config: {
+    entry: './assets/src/module.js',
+  },
+};
diff --git a/kolibri/plugins/qti_viewer/kolibri_plugin.py b/kolibri/plugins/qti_viewer/kolibri_plugin.py
new file mode 100644
index 00000000000..6f9f9df2983
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/kolibri_plugin.py
@@ -0,0 +1,19 @@
+from __future__ import absolute_import
+from __future__ import print_function
+from __future__ import unicode_literals
+
+from le_utils.constants import format_presets
+
+from kolibri.core.content import hooks as content_hooks
+from kolibri.plugins import KolibriPluginBase
+from kolibri.plugins.hooks import register_hook
+
+
+class QTIViewerPlugin(KolibriPluginBase):
+    pass
+
+
+@register_hook
+class QTIViewerAsset(content_hooks.ContentRendererHook):
+    bundle_id = "main"
+    presets = (format_presets.QTI_ZIP,)
diff --git a/kolibri/plugins/qti_viewer/package.json b/kolibri/plugins/qti_viewer/package.json
new file mode 100644
index 00000000000..5159a2c2fd7
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/package.json
@@ -0,0 +1,9 @@
+{
+  "version": "0.1.0",
+  "name": "qti-viewer",
+  "description": "A plugin for rendering QTI questions",
+  "private": true,
+  "dependencies": {
+    "xss": "^1.0.9"
+  }
+}
diff --git a/requirements/base.txt b/requirements/base.txt
index 00695874f57..4d22b89a6ab 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -12,7 +12,7 @@ cheroot==8.5.2
 magicbus==4.1.2
 futures==3.1.1  # Temporarily pinning this until we can do a Python 2/3 compatible solution of newer versions # pyup: <=3.1.1
 more-itertools==5.0.0  # Last Python 2.7 friendly release # pyup: <6.0
-le-utils==0.1.24
+le-utils==0.1.30
 kolibri_exercise_perseus_plugin==1.3.5
 jsonfield==2.0.2
 requests-toolbelt==0.8.0
diff --git a/yarn.lock b/yarn.lock
index 8e4dae4d6c7..4e9e1393f66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4114,7 +4114,7 @@ commander@2.6.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
   integrity sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=
 
-commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.9.0:
+commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, commander@^2.9.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4546,6 +4546,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfilter@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
+  integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
+
 csslint@0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/csslint/-/csslint-0.10.0.tgz#3a6a04e7565c8e9d19beb49767c7ec96e8365805"
@@ -15238,6 +15243,14 @@ xmldom@^0.1.27:
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
   integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
 
+xss@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.9.tgz#3ffd565571ff60d2e40db7f3b80b4677bec770d2"
+  integrity sha512-2t7FahYnGJys6DpHLhajusId7R0Pm2yTmuL0GV9+mV0ZlaLSnb2toBmppATfg5sWIhZQGlsTLoecSzya+l4EAQ==
+  dependencies:
+    commander "^2.20.3"
+    cssfilter "0.0.10"
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"