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
Hi Nurdianna
Thank you so much for your help with this. I really do appreciate it. You now have legendary status in my office!
I follow most of what you have said there, but please could you clarify how I go about achieving the above?
I have a survey question with the possible answers 1-5, please could you talk me through this stage?
connect the answers of your category to a number variable. The amount of variables is equal to the amount of categories you have.
I am really sorry to ask more of you, you have already been so helpful - but once I understand that bit, I think I'm good to go.
Jon
Oh sorry! I forgot to tell you that part. :'D
So you got all your questions set, right? and you got your variables that goes parallel with the JS.You need to connect the answer to those variables. So for each answer you need to create a trigger like this:
Adjust variable
Add 1 to var1
When the user clicks Submit button
If Radiobutton1 is equal to Selected
Though this is only possible when you're building a custom slide, so no graded question or survey question slide. Because then you won't be able to connect each answer to each varable.
I'm really sorry that I brought this up just now. But then it would work perfectly.Attached is a screenshot with how the trigger should look like.
