Forum Discussion
Infuence pie chart with variables
Use Javascript in Storyline to create a piechart.
Storyline
Create a custom question slide. Do not use Graded questions or Survey questions. These will limited your options in connecting your answers to the wanted variables.
Set your question in the slide and insert Radiobuttons. (in this case you'll need 5). Add a trigger to the radiobutton:
Adjust variable
Add 1 to var1
When the user clicks Submit button
If Radiobutton1 is equal to Selected
And so on.
You could also do this with sliders. Then your trigger will look like this:
Adjust variable
Add 1 to var1
When the user clicks Submit button
If Slider1 is equal to 1
If you got all the question slides set and the answers linked to the right category, your ready to build a javascript code.
HTML
First you build a HTML file. Open a texteditor program like Notepad++ or Atom. This will call your javascript code. Type the following code in your html file:
<body><canvas id="myCanvas"></canvas><script type="text/javascript"src="pie-chart.js"></script></body>
Save it as index.html and open a new texteditor window. Now we make the piechart. Write down the following code:
// the JS code will first get a reference to the canvas and then set its width and height. To draw on the canvas, we only need a reference to its 2D context which contains all the drawing methods. //
/*global quotes:true, global $*/
window.onload = function() {
var player = GetPlayer();
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
var ctx = myCanvas.getContext("2d");
// Define what the function. //
function drawLine(ctx, startX, startY, endX, endY) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
}
// This function draws an arc between the lines. //
function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.stroke();
}
// This function draws a coloured shape between the lines. //
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();
/* drawLine(_ctx,100,100,200,200);
drawArc(_ctx, 150,150,150, 0, Math.PI/3);
drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000'); */
}
// This gives the pie slices a name. //
function displayChart(){
var var1 = player.GetVar("var1");
var var2 = player.GetVar("var2");
var var3 = player.GetVar("var3");
var var4 = player.GetVar("var4");
var var5 = player.GetVar("var5");
var myPersoonlijkheid = {
"Categorie1": var1,
"Categorie2": var2,
"Categorie3": var3,
"Categorie4": var4,
"Categorie5": var5
};
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++;
}
}
}
var myPiechart = new Piechart({
canvas: myCanvas,
data: myPersoonlijkheid,
//Here you can give the slices their colours//
colors: ["#f2f2f2", "#b3dcff", "#1b96ff", "#004682", "#002341"]
});
myPiechart.draw();
};
}
Note: make sure your variable name in the code is equal to the one you have in Storyline.
Save the file as pie-chart.js
Make sure the index.html and pie-chart.js are located in a new folder.
Now we go back to our storyline project.
Insert a new slide as a result slide and import a webobject. Select the file index.html as webobject and save your project. Publish it online and there you go! Your piechart is at the result slide!
I hope I helped you with it, if you got any questions about this tutorial, feel free to contact me; nurdianna@innowijs.nl
