Activity Builder


Building Blocks are the ‘tools’ with which the educator can build an e-Learning Activity. Examples are a simple text, a question or an embed block. They’re the core blocks that can ‘connect’ the ‘historical thinking’ blocks together. Examples are the Sorting, the Prioritising and the Analysing Tool. Every Block contains once placed in the e-Learning Activity sequence line contains basic functionalities delete and edit. Clicking the edit icon opens the Activity Builder and leads to the Building Block.

Developing a Building Block

Requirements for developing a Building Block

The most important requirement for external webdevelopers is that they know Javascript and HTML. All interaction within one single Building Block should be developed as part of the tool.

Tech specs


The anatomy of an Building Block frontend

The white area in the middle, the canvas, is developed by the external party. The orange buttons in the upper left corner are used to add interaction (Add images, Add background, etc.) to a Building Block. There are Building Blocks which work with multiple images or as in the Analysing Block that is based on one images where annotations can be added.

Beware that the Builder is transitioning to a more conclusive interface. As soon as they are implemented in the code this section will be updated.

Page navigation

Breadcrumbs and sidenav


We aim for creating a more responsive site. The present maximal width is based on the idea that Activity Builder and eLearning Tools should be usable on a tablet and not on a mobile. In this screendump you also see the future plan for creating a new navigational layout. Pagination and next/previous on top, overarching buttons (add sources, assigments) on the right, interaction buttons on the canvas.

On the wishlist:

Clicking an action button (Add sources, Choose Background, …) [Teacherview]

Clicking ‘Add source’ [Teacherview]

…opens an image layer where a user can select a source

Clicking the magnifier icon on a source placed on the canvas…

…opens an image layer with information on the source

The anatomy of an Building Block backend

A Building Block that is part of the e-Activity Builder is written in Vue.js.

Questions to be documented

The best workflow

We learned that building a ‘tool’ in javascript disconnected from Historiana gave us the opportunity to focus solely on the concept. User testing and testing was simple and straight forward. As soon as the concept was finalised Paul and the external developer started working together to find the best way to embed the code within the Historiana environment.

Lessons learned so far

The BuildingBlock environment was the first complex Vue implementation we did. We had quite some existing code from our prototyping stage which we wanted to re-use. The fact that the code was jQuery based added an additional layer of complexity. From all the hoops and loops we went through we have learned quite a few things. Later when most of the dust was settled and we had more insights we created a new block from scratch. The way that was done was a lot more efficient.

Later we will work out an example based on the code of that block.

Things to note: