将JavaScript变量设置为等于Storyline变量？

Question

所以我有一个带有饼图和5片的javascript。 我想将此图表实施到故事情节幻灯片中。 在这个Storyline项目中，我有5个具有特定值的变量。 当用户回答一些问题时，这些值会改变。 在项目结束时，这些值将通过饼图可视化。

饼图工作正常，但现在我必须将这些切片与Storyline变量关联。 我怎样才能做到这一点？

在这里，您可以查看饼图的构建方式。

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

我可以说var=Categorie1数字在哪里？ 还是比这更复杂？ 我已经在互联网上搜索了一些答案，但是我找不到任何东西，显然我现在不会再问这个了。 哈哈！

所以..有人可以帮助我吗？ ：DI会喜欢的！ 谢谢！

Answer 1

我设法使其工作：D

我做了什么：

我创建了一个Storyline项目，其中有5个滑块。 这些滑块各自具有自己的变量（var1，var2，var3，var4和var5）。 我在此饼图所在的位置创建了一张空白幻灯片。

然后，我做了一个index.html文件。 该文件包含

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

我将此文件保存到服务器上的地图中。

之后，我将以下Javascript放在一起：

// 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();
        }

之后，我发布了Storyline文件。 现在，它可以完美运行！

感谢Mustafa的帮助。 我称赞它：D

Answer 2

要在Javascript代码中获取故事情节变量，请执行以下操作：

function displayChart(){
    var thePlayer = GetPlayer();
    var var1 = thePlayer.GetVar("variable1");
    var var2 = thePlayer.GetVar("variable2");
    ...

    var myPersoonlijkheid = {
        "Categorie1": var1,
        "Categorie2": var2,
        "Categorie3": var3,
        "Categorie4": var4,
        "Categorie5": var5
    }
   pieChart(myPersoonlijkheid);
}

您可以使用JavaScript触发器来运行上述功能。

将JavaScript变量设置为等于Storyline变量？

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-08-21 14:22:32

解决方案2
0 2017-08-15 12:18:00

将JavaScript变量设置为等于Storyline变量？

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-08-21 14:22:32

解决方案2 0 2017-08-15 12:18:00

解决方案1
3 已采纳 2017-08-21 14:22:32

解决方案2
0 2017-08-15 12:18:00