javascriptvariablesarticulate-storyline

Set javascript variable equal to Storyline variable?


So I've got a javascript with a pie chart and 5 slices. I want to implement this chart into a Storyline slide. In this Storyline project I've got 5 variables that has got specific values. When a user answers some questions, these values change. At the end of the project these values will be visualized with this Pie Chart.

The Pie chart works perfectly, but now I have to connect these slices with the Storyline variables. How can I do this?

Here you can see how the pie chart is build.

// This gives the pie slices a name. //
var myPersoonlijkheid = {
    "Categorie1": 10,
    "Categorie2": 44,
    "Categorie3": 32,
    "Categorie4": 12,
    "Categorie5": 8

Can I just say var=Categorie1 where the numbers are? Or is it more complicated than that? I;ve searched on the internet for some answers, but I couldn't found something, Obviously otherwhise I wouldn't be asking this now. Haha!

So.. Is there someone who can help me? :D I would appriciate it! Thank you!


Solution

  • I managed to make it work :D

    What I did:

    I made a Storyline project where I have 5 sliders. Those sliders have each their own variable (var1, var2, var3, var4 and var5). I created a blank slide where this pie chart is going to be.

    Then I made an index.html file. This file contains

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

    I saved this file into a map on the server.

    After that I put this Javascript together:

    // 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 = window.parent.GetPlayer(); //this piece was missing.//
    
            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 retrieves the value of the Storyline variable 
               (the one between the quote symbols). */
                    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");
    
            // This gives the slices the value from above. //
                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,
                colors: ["#f2f2f2", "#b3dcff", "#1b96ff", "#004682", "#002341"]
            });
            myPiechart.draw();
            }
    

    After that I published the Storyline file. And now it works perfectly!

    Thanks Mustafa for your help. I appriciate it :D