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/jsonMixin.js b/kolibri/plugins/qti_viewer/assets/src/mixins/jsonMixin.js
new file mode 100644
index 00000000000..e0765a92892
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/mixins/jsonMixin.js
@@ -0,0 +1,7 @@
+export default {
+  props: {
+    json: {
+      required: true,
+    },
+  },
+};
diff --git a/kolibri/plugins/qti_viewer/assets/src/mixins/qtiMixin.js b/kolibri/plugins/qti_viewer/assets/src/mixins/qtiMixin.js
new file mode 100644
index 00000000000..293ea39a584
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/mixins/qtiMixin.js
@@ -0,0 +1,3 @@
+export default {
+  inject: ['getFile', 'getFileString', 'getFilePath', 'getDom'],
+};
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/utils/xml.js b/kolibri/plugins/qti_viewer/assets/src/utils/xml.js
new file mode 100644
index 00000000000..517a4e08c34
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/utils/xml.js
@@ -0,0 +1,26 @@
+import xmlParser from 'fast-xml-parser';
+
+const xmlOptions = {
+  attributeNamePrefix: '@',
+  attrNodeName: false,
+  textNodeName: '#text',
+  ignoreAttributes: false,
+  ignoreNameSpace: false,
+  allowBooleanAttributes: true,
+  parseNodeValue: true,
+  parseAttributeValue: true,
+  trimValues: true,
+  parseTrueNumberOnly: false,
+  arrayMode: true, //"strict",
+};
+
+export default function(xml) {
+  console.log(xmlParser.parse(xml.trim(), xmlOptions));
+  return xmlParser.parse(xml.trim(), xmlOptions);
+}
+
+const jsonToXMLParser = new xmlParser.j2xParser(xmlOptions);
+
+export function jsonToXML(json) {
+  return jsonToXMLParser.parse(json);
+}
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..7ad62a3d18d
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItem.vue
@@ -0,0 +1,45 @@
+<template>
+
+  <div>
+    {{ title }}
+
+    <ItemBody
+      v-if="itemBody"
+      :key="identifier"
+      :json="itemBody"
+      @submit="$emit('submit', $event)"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import jsonMixin from '../mixins/jsonMixin';
+  import qtiMixin from '../mixins/qtiMixin';
+  import ItemBody from './ItemBody';
+
+  export default {
+    name: 'AssessmentItem',
+    components: {
+      ItemBody,
+    },
+    mixins: [jsonMixin, qtiMixin],
+    computed: {
+      itemBody() {
+        return this.json && this.json.itemBody && this.json.itemBody[0];
+      },
+      identifier() {
+        return this.json && this.json['@identifier'];
+      },
+      title() {
+        return (this.json && this.json['@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..dc472676c2a
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentItemRef.vue
@@ -0,0 +1,65 @@
+<template>
+
+  <AssessmentItem
+    v-if="assessmentItem"
+    :json="assessmentItem"
+  />
+
+</template>
+
+
+<script>
+
+  import jsonMixin from '../mixins/jsonMixin';
+  import qtiMixin from '../mixins/qtiMixin';
+  import xmlParse from '../utils/xml';
+  import AssessmentItem from './AssessmentItem';
+
+  const domParser = new DOMParser();
+
+  export default {
+    name: 'AssessmentItemRef',
+    components: {
+      AssessmentItem,
+    },
+    mixins: [jsonMixin, qtiMixin],
+    provide() {
+      return {
+        getDom: this.getAssessmentItemDom,
+      };
+    },
+    data() {
+      return {
+        assessmentItem: null,
+      };
+    },
+    computed: {
+      href() {
+        const relativeHref = this.json && this.json['@href'];
+        if (relativeHref) {
+          return new URL(
+            relativeHref,
+            new URL(this.getFilePath(), 'http://b.b/')
+          ).pathname.substring(1);
+        }
+        return '';
+      },
+    },
+    created() {
+      this.getFileString(this.href).then(qtiXML => {
+        const json = xmlParse(qtiXML);
+        this.assessmentItemDom = domParser.parseFromString(qtiXML.trim(), 'text/xml');
+        this.assessmentItem = json.assessmentItem && json.assessmentItem[0];
+      });
+    },
+    methods: {
+      getAssessmentItemDom() {
+        return this.assessmentItemDom;
+      },
+    },
+  };
+
+</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..3453fc101d0
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentSection.vue
@@ -0,0 +1,54 @@
+<template>
+
+  <div>
+    <AssessmentItem
+      v-if="assessmentItem"
+      :json="assessmentItem"
+    />
+    <AssessmentItemRef
+      v-else-if="assessmentItemRef"
+      :json="assessmentItemRef"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import jsonMixin from '../mixins/jsonMixin';
+  import qtiMixin from '../mixins/qtiMixin';
+  import AssessmentItem from './AssessmentItem';
+  import AssessmentItemRef from './AssessmentItemRef';
+
+  export default {
+    name: 'AssessmentSection',
+    components: {
+      AssessmentItem,
+      AssessmentItemRef,
+    },
+    mixins: [jsonMixin, qtiMixin],
+    data() {
+      return {
+        assessmentItemIndex: 0,
+      };
+    },
+    computed: {
+      assessmentItem() {
+        return (
+          this.json &&
+          this.json.assessmentItem &&
+          this.json.assessmentItem[this.assessmentItemIndex]
+        );
+      },
+      assessmentItemRef() {
+        return (
+          this.json &&
+          this.json.assessmentItemRef &&
+          this.json.assessmentItemRef[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..aa878699074
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/AssessmentTest.vue
@@ -0,0 +1,55 @@
+<template>
+
+  <div>
+    <AssessmentSection
+      v-if="assessmentSection"
+      :json="assessmentSection"
+    />
+    <KButton @click="previous">
+      Back
+    </KButton>
+    <KButton @click="next">
+      Continue
+    </KButton>
+  </div>
+
+</template>
+
+
+<script>
+
+  import jsonMixin from '../mixins/jsonMixin';
+  import qtiMixin from '../mixins/qtiMixin';
+  import AssessmentSection from './AssessmentSection';
+
+  export default {
+    name: 'AssessmentTest',
+    components: {
+      AssessmentSection,
+    },
+    mixins: [jsonMixin, qtiMixin],
+    data() {
+      return {
+        testPartIndex: 0,
+        sectionIndex: 0,
+      };
+    },
+    computed: {
+      testPart() {
+        return this.json && this.json.testPart && this.json.testPart[this.testPartIndex];
+      },
+      assessmentSection() {
+        return (
+          this.testPart &&
+          this.testPart.assessmentSection &&
+          this.testPart.assessmentSection[this.sectionIndex]
+        );
+      },
+    },
+    methods: {
+      next() {},
+      previous() {},
+    },
+  };
+
+</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..4efa274c729
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/ItemBody.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <div>
+    <div v-for="(child, index) in children" :key="index">
+      <component
+        :is="child.tagName"
+        v-if="child.isInteraction"
+        :json="child.json"
+        @submit="$emit('submit', $event)"
+      />
+      <ZipHTML v-else :node="child.node" />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import jsonMixin from '../mixins/jsonMixin';
+  import qtiMixin from '../mixins/qtiMixin';
+  import ItemLoadingError from './ItemLoadingError.vue';
+  import ChoiceInteraction from './interactions/ChoiceInteraction';
+  import ZipHTML from './ZipHTML';
+
+  const SupportedInteractions = {
+    choiceInteraction: () => import('./interactions/ChoiceInteraction'),
+  };
+
+  for (let interaction in SupportedInteractions) {
+    SupportedInteractions[interaction] = () => ({
+      // The component to load (should be a Promise)
+      component: SupportedInteractions[interaction],
+      // A component to use while the async component is loading
+      loading: 'ContentRendererLoading',
+      // A component to use if the load fails
+      error: ItemLoadingError,
+      // Delay before showing the loading component. Default: 200ms.
+      delay: 200,
+      // The error component will be displayed if a timeout is
+      // provided and exceeded. Default: Infinity.
+      timeout: 30000,
+    });
+  }
+
+  export default {
+    name: 'ItemBody',
+    components: { ZipHTML, ChoiceInteraction },
+    mixins: [jsonMixin, qtiMixin],
+    computed: {
+      children() {
+        if (this.json && this.getDom()) {
+          let DOM;
+          if (this.json['@id']) {
+            DOM = this.getDom().querySelector(`itemBody#${this.json['@id']}`);
+          } else {
+            DOM = this.getDom().querySelector('itemBody');
+          }
+          return Array.from(DOM.children).map(node => {
+            const tagName = node.tagName;
+            const isInteraction = this.isSupportedInteraction(tagName);
+            const output = {
+              isInteraction,
+              node,
+              tagName,
+            };
+            if (isInteraction) {
+              const id = node.getAttribute('id');
+              output.json = this.json[tagName].find(item => item['@id'] === id);
+            }
+            return output;
+          });
+        }
+        return [];
+      },
+    },
+    methods: {
+      isSupportedInteraction(tagName) {
+        return Boolean(SupportedInteractions[tagName]);
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/qti_viewer/assets/src/views/ItemLoadingError.vue b/kolibri/plugins/qti_viewer/assets/src/views/ItemLoadingError.vue
new file mode 100644
index 00000000000..590ccc376df
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/ItemLoadingError.vue
@@ -0,0 +1,21 @@
+<template>
+
+  <KLabeledIcon :label="$tr('error')" icon="error" />
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ItemLoadingError',
+    $trs: {
+      error: {
+        message: 'Kolibri is unable to load this question, try refreshing',
+        context:
+          '\nThis message is displayed when Kolibri is unable to properly load or display the request question in QTI, this is probably a network issue.',
+      },
+    },
+  };
+
+</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..4a1d4754a99
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/QTIViewer.vue
@@ -0,0 +1,182 @@
+<template>
+
+  <div>
+    <component
+      :is="componentName"
+      v-if="componentName"
+      :json="childJson"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { unzip, strFromU8 } from 'fflate';
+  import get from 'lodash/get';
+  import client from 'kolibri.client';
+  import logger from 'kolibri.lib.logging';
+  import xmlParse from '../utils/xml';
+  import AssessmentItem from './AssessmentItem';
+  import AssessmentSection from './AssessmentSection';
+  import AssessmentTest from './AssessmentTest';
+
+  const logging = logger.getLogger(__filename);
+
+  const domParser = new DOMParser();
+
+  class Zip {
+    constructor(file) {
+      this.zipfile = file;
+    }
+
+    _getFiles(filter) {
+      return new Promise((resolve, reject) => {
+        unzip(this.zipfile, { filter }, (err, unzipped) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          if (!unzipped) {
+            reject('No files found');
+            return;
+          }
+          resolve(Object.entries(unzipped).map(([name, obj]) => ({ name, obj })));
+        });
+      });
+    }
+
+    file(filename) {
+      return this._getFiles(file => file.name === filename).then(files => files[0]);
+    }
+    files(path) {
+      return this._getFiles(file => file.name.startsWith(path));
+    }
+
+    fileString(filename) {
+      return this.file(filename).then(file => strFromU8(file.obj));
+    }
+  }
+
+  function parseIMSManifest(IMSPackage) {
+    return IMSPackage.fileString(`imsmanifest.xml`)
+      .then(manifest => {
+        const json = xmlParse(manifest);
+        return get(json, ['manifest', '0', 'resources', '0', 'resource'], []);
+      })
+      .catch(() => Promise.reject('Manifest file not found'));
+  }
+
+  export default {
+    name: 'QTIViewer',
+    components: {
+      AssessmentItem,
+      AssessmentSection,
+      AssessmentTest,
+    },
+    data: () => ({
+      json: null,
+      dom: null,
+      // Is the qti viewer loading?
+      loading: true,
+      resource: null,
+    }),
+    provide() {
+      return {
+        getFile: this.getFile,
+        getFileString: this.getFileString,
+        getFilePath: this.getFilePath,
+        getDom: this.getDom,
+      };
+    },
+    computed: {
+      rootName() {
+        return ['assessmentTest', 'assessmentSection', 'assessmentItem'].find(
+          a => this.json && this.json[a]
+        );
+      },
+      componentName() {
+        if (this.rootName) {
+          return this.rootName.slice(0, 1).toUpperCase() + this.rootName.slice(1);
+        }
+        return null;
+      },
+      childJson() {
+        return this.json && this.rootName && get(this.json, [this.rootName, '0'], {});
+      },
+    },
+    created() {
+      this.loadAssessmentTest();
+    },
+    methods: {
+      getFile(filePath) {
+        if (!this.qtiFile) {
+          return Promise.reject('QTI File has not been loaded');
+        }
+        return this.qtiFile.file(filePath);
+      },
+      getFileString(filePath) {
+        if (!this.qtiFile) {
+          return Promise.reject('QTI File has not been loaded');
+        }
+        return this.qtiFile.fileString(filePath);
+      },
+      getFilePath() {
+        return this.resource['@href'];
+      },
+      getDom() {
+        return this.dom;
+      },
+      loadQtiFile() {
+        if (this.defaultFile) {
+          if (!this.qtiFile) {
+            return client({
+              method: 'get',
+              url: this.defaultFile.storage_url,
+              responseType: 'arraybuffer',
+              cacheBust: false,
+            }).then(response => {
+              this.qtiFile = new Zip(new Uint8Array(response.data));
+              return this.setResource();
+            });
+          } else {
+            return Promise.resolve();
+          }
+        }
+      },
+      setResource() {
+        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];
+          }
+        });
+      },
+      loadAssessmentTest() {
+        if (this.defaultFile && this.defaultFile.storage_url) {
+          this.loading = true;
+          this.loadQtiFile()
+            .then(() => {
+              return this.getFileString(this.getFilePath());
+            })
+            .then(qtiXML => {
+              this.json = xmlParse(qtiXML);
+              this.dom = domParser.parseFromString(qtiXML.trim(), 'text/xml');
+              this.loading = false;
+            })
+            .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/ZipHTML.vue b/kolibri/plugins/qti_viewer/assets/src/views/ZipHTML.vue
new file mode 100644
index 00000000000..13e9020012f
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/ZipHTML.vue
@@ -0,0 +1,116 @@
+<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 logger from 'kolibri.lib.logging';
+  import qtiMixin from '../mixins/qtiMixin';
+
+  const logging = logger.getLogger(__filename);
+
+  const serializer = new XMLSerializer();
+
+  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: 'ZipHTML',
+    mixins: [qtiMixin],
+    props: {
+      node: {
+        required: true,
+        type: Element,
+      },
+    },
+    data() {
+      return {
+        html: '',
+      };
+    },
+    created() {
+      this.htmlSerialize();
+    },
+    methods: {
+      htmlSerialize() {
+        return this.substituteBloblUrls('img', 'src', this.node).then(() => {
+          const html = filterXSS(serializer.serializeToString(this.node), {
+            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.getFilePath(), 'http://b.b/')
+            ).pathname.substring(1);
+            promises.push(
+              this.getFile(path)
+                .then(file => {
+                  const url = createBlobUrl(file.obj, path);
+                  tag.setAttribute(attribute, url);
+                })
+                .catch(() => {
+                  logging.error(`Could not load ${path}`);
+                })
+            );
+          }
+        }
+        return Promise.all(promises);
+      },
+    },
+  };
+
+</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..f9c86e7d36e
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/assets/src/views/interactions/ChoiceInteraction.vue
@@ -0,0 +1,92 @@
+<template>
+
+  <form>
+    <p v-for="prompt in prompts" :key="prompt['@id']">
+      {{ prompt['#text'] }}
+    </p>
+
+    <component
+      :is="choiceComponent"
+      v-for="choice in choices"
+      :key="choice.value"
+      :label="''"
+      :showLabel="false"
+      :value="choice.value"
+      :currentValue="response"
+      @change="response = choice.value"
+    >
+      <ZipHTML v-for="(node, index) in choice.nodes" :key="index" :node="node" />
+    </component>
+
+  </form>
+
+</template>
+
+
+<script>
+
+  import shuffled from 'kolibri.utils.shuffled';
+  import jsonMixin from '../../mixins/jsonMixin';
+  import qtiMixin from '../../mixins/qtiMixin';
+  import ZipHTML from '../ZipHTML';
+
+  export default {
+    name: 'ChoiceInteraction',
+    components: {
+      ZipHTML,
+    },
+    mixins: [jsonMixin, qtiMixin],
+    data() {
+      return {
+        response: '',
+      };
+    },
+    computed: {
+      choiceComponent() {
+        return this.isMultiple ? 'KCheckBox' : 'KRadioButton';
+      },
+      prompts() {
+        // Not sure there could ever be more than one.
+        return this.json.prompts || [];
+      },
+      choices() {
+        let shuffle = this.json['@shuffle'];
+
+        const choices = this.json.simpleChoice.map(choice => {
+          shuffle = shuffle && !choice['@fixed'];
+          const id = choice['@id'];
+          let DOM;
+          if (id) {
+            DOM = this.getDom().querySelector(`simpleChoice#${id}`);
+          } else {
+            DOM = this.getDom().querySelector('simpleChoice');
+          }
+          return {
+            value: choice['@identifier'],
+            nodes: Array.from(DOM.children || []),
+            textContent: DOM.textContent,
+          };
+        });
+        if (shuffle) {
+          return shuffled(choices);
+        }
+        return choices;
+      },
+      isMultiple() {
+        return this.json && this.json['@maxChoices'] > 1;
+      },
+    },
+    watch: {
+      response() {
+        this.$emit('$submit', this.response);
+      },
+    },
+    mounted() {
+      this.response = this.responseForCurrentItem || '';
+    },
+  };
+
+</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..60d59343000
--- /dev/null
+++ b/kolibri/plugins/qti_viewer/package.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.1.0",
+  "name": "qti-viewer",
+  "description": "A plugin for rendering QTI questions",
+  "private": true,
+  "dependencies": {
+    "fast-xml-parser": "^3.19.0",
+    "fflate": "^0.7.1",
+    "xss": "^1.0.9"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 7d983eec27d..d4b438a1763 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4145,7 +4145,7 @@ commander@2.6.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
   integrity sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=
 
-commander@^2.19.0, commander@^2.20.0, commander@^2.9.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==
@@ -4483,6 +4483,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"
@@ -5724,6 +5729,11 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-xml-parser@^3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz#cb637ec3f3999f51406dd8ff0e6fc4d83e520d01"
+  integrity sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg==
+
 fastest-levenshtein@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
@@ -13085,6 +13095,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"
+
 xstate@^4.20.2:
   version "4.20.2"
   resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.20.2.tgz#a22e6e63fc327b8d707494be3bf4897fb7890b37"