将 javascript 变量设置为故事情节变量？

Question

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

饼图效果很好，但现在我必须将这些切片与故事情节变量联系起来。我该怎么做？

在这里您可以看到饼图是如何构建的。

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

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

那么..有人可以帮助我吗？ :D 我会appriciate它！谢谢！

Answer 1

要在您的 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 触发器来运行上面的函数。

Answer 2

我成功了:D

我做了什么：

我制作了一个故事情节项目，其中有 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();
        }

之后我发布了故事情节文件。现在它完美运行了！

感谢穆斯塔法的帮助。我很感激 :D

将 javascript 变量设置为故事情节变量？

Set javascript variable equal to Storyline variable?

javascript

variables

articulate-storyline