WYSIWYG ENRICHING CONTENT OF DIGITAL BOOKS IN

SCHOOLTAS

@afkatja

Katja Hollaar

https://www.youtube.com/watch?v=01Ca4ExJzUo

Student

Teacher

Editor

User

Book

Note

Drawing

Text annotation

Navigator

Notebook

Student

Teacher

Editor

User

StudentEditor

Teacher

Video

Audio

Shape

Gallery

Exercise

Shared pin

Link

Bookmark

Document

Image with hotspots

Pin

Book

Note

Drawing

Text annotation

Navigator

Notebook

User

Demo

INTRODUCING EDITOR 34 var vm = new Vue({ 35 el: $editor[0], 36 37 data: {}, 45 46 computed: { 47 title: function() { 48 return _i8n.s(this.iType); 50 } 57 }, 58 59 methods: { 60 save: function() { 61 me.save(); 62 }, 68 cancel: function() { 69 me.closeEditor(); 70 } 71 } 72 });

PINS CONSTRUCTOR printNotes: function(pageNr, type, userId) { var toPrint = this.storeFilter(pageNr, type, userId); for(var i=0;i<toPrint.length;i++) { var prikker = new Prikker(toPrint[i], pageNr, type); } }

case enums.noteTypes.SHAPE: this.enrichmentMarker = new ShapeMarkerPrikker(this);

}

switch(this.type) {

instantiateAttachmentsForMarker(this);

if(!this.$el.hasClass('active')) { this.showAllAttachments(); } else { this.hideAllAttachments(); }

var textMarkerForm = Vue.extend({ template: require('html!./text-marker-form.html'), twoWay: true, deep: true, data: function(){ return { hasBackground: true, lineHeightValid: true }; }, methods: function(){

…Vue.component(‘text-marker-form', textMarkerForm);

<text-marker-form v-with="enrichment: enrichment”></text-marker-form>

require('./marker-forms/text-marker-form/text-marker-form.js');// Editor

VUE.JS COMPONENTS

THE LEARNINGS

• Simple interface - complex to develop

• Reducing complexity by splitting the code

• Advantage of component-based development

@afkatja

Katja Hollaar