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. 🙂
