Wij zoeken een nieuwe collega

Ben jij opleidingskundige of onderwijskundige en heb je wel zin in een nieuwe uitdaging? Lees dan verder!

Wat Innowijs doet

Bij Innowijs maken we leermiddelen die worden aangeboden via een digitale omgeving. E-learnings waarin we proberen een nuttige verbinding te maken tussen technische innovaties en educatie in de praktijk. Zo maken we voor onze klanten content op maat, ondersteund door trainingen in de praktijk.

Jouw functie binnen Innowijs:

  • Informeren en adviseren over passende opleidingstrajecten, waarbij gebruik gemaakt wordt van innovatieve leermiddelen.
  • Ontwerpen van leermiddelen.
  • Begeleiden van professionaliseringstrajecten van nieuwe leermiddelen.
  • Trainingen ontwerpen en begeleiden bij klanten.
  • Projectmanagement.

Wanneer en hoeveel?

Startdatum en aantal uren in overleg.

Opleiding:

Opleiding tot opleidingskundige/onderwijskundige of vergelijkbaar.

Minimaal HBO denk- en werkniveau.

Kernwoorden die jou aanspreken:

  • innovaties en veranderingen
  • technologie in het onderwijs
  • media
  • e-learning
  • authoring tools (Storyline / Rise)
  • leeromgevingen (Moodle)
  • out-of-the box denken (en doen!)
  • gezellige werkomgeving
  • werktijden in overleg
  • open cultuur
  • flexibiliteit

Zin in deze leuke baan?

Stuur dan je motivatie en CV naar aniek@innowijs.nl

Sluitingsdatum 25-06-20

En een gloednieuwe website!

Bij een nieuw kantoor hoort ook een nieuwe website, dachten wij. En naar het resultaat van die gedachte zit je nu te kijken. We hopen dat we hier een kleine indruk kunnen geven van wat Innowijs doet en wat wij belangrijk vinden. Ook zie je hier hoe je ons kunt bereiken als je méér wilt weten. 

Nieuw kantoor!

Het was een spannende tijd voor Innowijs. Een oude veestal op het terrein bij het huis van Erik en Aniek werd omgetoverd in twee mooie bed en breakfastverblijven én een fantastisch nieuw kantoor. In juli 2019 gingen de deuren open en verkasten we van Boxtel naar Den Dungen. Gloednieuwe bureaus die ook naar stahoogte kunnen, een mooie studio annex spreekkamer, een knus lunchhoekje en een echte cooker maken onderdeel uit van onze nieuwe werkplek. Leuk om te bedenken dat op de plek waar wij onze e-learnings bouwen ooit de koeien stonden te herkauwen…

Interactieve taartdiagram in Storyline

Interactieve diagram in Storyline

Er zijn heel veel mogelijkheden binnen Articulate Storyline. Één van deze mogelijkheden is het maken van een interactieve taartdiagram.
Dit artikel gaat over hoe je met behulp van Javascripting een taartdiagram kunt maken met behulp van een aantal variabelen.

Wat kun je ermee?

Een taartdiagram kan visueel snel duidelijk maken hoe een vragenlijst is ingevuld of hoe een toets is gemaakt. 

Wat heb je nodig?

  • Storyline
  • Een texteditor programma (Notepad ++ of Atom)

Hoe werkt het?

Storyline

Maak in Storyline een project aan. Maak een Custom slide aan (dit is vereist omdat een Survey-question slide jouw antwoorden niet afzonderlijk van elkaar met de variabelen kan koppelen) en voeg daar een aantal “Number” variabelen aan toe die straks moeten communiceren met het Javascript bestand. In dit geval maken we sliders aan met de variabelen StorylineVar1, StorylineVar2, StorylineVar3, StorylineVar4 en StorylineVar5

Voor nu ben je klaar met Storyline, sla het project op.

HTML

We beginnen met het index.html bestand. Dit zorgt ervoor dat jouw Javascript opgeroepen wordt binnen jouw Storyline project.
Typ het volgende in het HTML bestand:

<body> 
	<canvas id="myCanvas"></canvas>
	<script type="text/javascript"src="pie-chart.js"></script>
</body>

e HTML bestand is opgemaakt, sla deze op als index.html in een mapje op een server waar hij online komt.

!Let op! Maak hiervoor een nieuwe map aan. Dit is van belang omdat er anders een hoop bestanden die zich ook in deze map bevinden mee geëxporteerd worden in jouw Storyline project. Dit zorgt voor onnodig veel data.

Javascript

We gaan nu verder met het Javascript.
Open een nieuwe texteditor bestand en typ het volgende:

window.onload = function() {

Dit zorgt ervoor dat de javascript functie wordt opgeroepen.
Vervolgens moeten we de code vertellen waar hij de variabelen vandaan moet halen, in dit geval het project waarin het script zich bevindt:

var player = window.parent.GetPlayer();

Nu komt het stukje taart diagram:

var myCanvas = document.getElementById("myCanvas"); 
myCanvas.width = 300; myCanvas.height = 300; var ctx = myCanvas.getContext("2d");

// Deze regel zorgt voor de scheidingslijnen van de taartpunten. //
function drawLine(ctx, startX, startY, endX, endY) { 
ctx.beginPath(); 
ctx.moveTo(startX, startY); 
ctx.lineTo(endX, endY); 
}
 
// Deze regel tekent een boog tussen de lijnen van de taartpunten. //
function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) { 
ctx.beginPath(); 
ctx.arc(centerX, centerY, radius, startAngle, endAngle); 
ctx.stroke(); 
}
// Deze regel zorgt voor een vulkleur tussen de lijnen van de taartpunten. // 
function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) { 
ctx.fillStyle = color; 
ctx.beginPath(); 
ctx.moveTo(centerX, centerY); 
ctx.arc(centerX, centerY, radius, startAngle, endAngle); 
ctx.closePath(); 
ctx.fill();
}

Ok, de taart is gevormd. 
Nu gaan we de variabelen koppelen aan de taartpunten.

// Deze regels haalt de variabelen van Storyline naar dit script.
   !Let op! De variabelen tussen de aanhalingstekens moet gelijk zijn aan jouw Storyline variabelen. // 
var JsVar1 = player.GetVar("StorylineVar1"); 
var JsVar2 = player.GetVar("StorylineVar2"); 
var JsVar3 = player.GetVar("StorylineVar3"); 
var JsVar4 = player.GetVar("StorylineVar4"); 
var JsVar5 = player.GetVar("StorylineVar5");
 

// Deze regels zorgt ervoor dat elke taartpunt toegekend wordt aan de variabel. De PieSlices1 is gelijk aan de bovenstaande variabel // 
var myPieChart = { 
"Categorie1": JsVar1, 
"Categorie2": JsVar2, 
"Categorie3": JsVar3, 
"Categorie4": JsVar4, 
"Categorie5": JsVar5 
};

Als laatst zorgen we ervoor dat de variabelen op de juiste manier opkomen, dit doen we als volgt:

var Piechart = function(options) { 
this.options = options; this.canvas = options.canvas; 
this.ctx = this.canvas.getContext("2d"); 
this.colors = options.colors; 
this.draw = function() { 
var total_value = 0; 
var color_index = 0; 
for (var categ in this.options.data) { 
var val = this.options.data[categ]; 
total_value += val; 
} 
var start_angle = 0; 
for (categ in this.options.data) { 
val = this.options.data[categ]; 
var slice_angle = 2 * Math.PI * val / total_value; drawPieSlice(this.ctx, this.canvas.width / 2, this.canvas.height / 2, Math.min(this.canvas.width / 2, this.canvas.height / 2), start_angle, start_angle + slice_angle, this.colors[color_index % this.colors.length]); start_angle += slice_angle; 
color_index++; 
} 
} 
}

Met de onderstaande code geef je aan dat hij de data van bovenstaande waardes moet visualiseren. En dat elke taartvorm een bepaalde kleur heeft. De volgorde van deze kleuren is altijd met de klok mee en start op 15:15. 

var myPiechart = new Piechart({ 
canvas: myCanvas, 
data: myPieChart, 
colors: ["#F9C29D", "#F5A26C", "#F07F3C", "#EA5A0B", "#3F3F3F"] 
}); 

myPiechart.draw(); 
}

De code is klaar, sla deze op als pie-chart.js bestand. Sla dit op in hetzelfde mapje als het index.html bestand.

Storyline

We gaan terug naar het storyline project.
Maak een nieuwe slide aan waar je de taartdiagram wilt plaatsen. Ga naar Insert > Webobject.
Selecteer het mapje waar het index.html bestand zich bevindt. Druk op OK.
Sla het Storyline bestand op, Publish het en kijk wat het doet. Jouw taartdiagram is geheel interactief.

Kom je er niet helemaal uit? Volg dan het onderstaande filmpje.

! Let op! Plaats het project online om het resultaat te zien. 

Klik hier als je een demonstratie wilt zien.

Succes en veel plezier met het ontwikkelen van een interactieve taartdiagram. 🙂