设置javascript变量等于Storyline变量？

问题描述：

所以我有一个饼图和5片的JavaScript。我想将此图表实现为故事情节幻灯片。在这个Storyline项目中，我有5个具有特定值的变量。当用户回答一些问题时，这些值会改变。在项目结束时，这些值将用这张饼图显示出来。设置javascript变量等于Storyline变量？

饼图工作完美，但现在我必须将这些切片与故事情节变量连接起来。我怎样才能做到这一点？

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

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

可我只是说var=Categorie1，其中数字是？还是比这更复杂？我在互联网上搜索了一些答案，但我找不到什么东西，很明显，别的我现在不会问这个问题。哈哈！

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

你在哪里尝试饼图？目前尚不清楚您是否能够将幻灯片放入您的幻灯片中。有一些入门教材[在这里]（https://articulate.com/support/article/javascript-best-practices-and-examples）。看看例子，看看是否有帮助。 – Mustafa

嗨穆斯塔法，我做了一个index.html和一个.js文件的文件，并将其作为一个web对象在Storyline中导入。但是现在我想连接这两个变量 – Nurdianna

答

我设法使其工作：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(); 
     }

之后，我出版了故事情节的文件。现在它完美的工作！

感谢穆斯塔法的帮助。我appriciate它：D

甜！你能否给你的答案增加一些背景知识（即项目结构，配置等），以便读者了解情况。请记住，你最初对这些事情有怀疑。和快乐的SOING！ :) – Mustafa

是的，我会更新这个答案:)再次感谢！ – Nurdianna

答

为了让故事情节变量在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触发运行上面的功能。

也许是一个愚蠢的问题..但是，我把这个放在.js文件或者Storyline的Execute Javascript触发器中吗？ – Nurdianna

我会尝试在自己的js文件中添加这段代码，并将它包括在storyline story_content文件夹中。然后，您可以使用

我仍然无法让它们以某种方式连接..我已经在_story.html_中放置了' _pie-chart.js_位于story_content地图中。它仍然不会对项目中的输入做出回应。我现在应该做什么？ – Nurdianna

设置javascript变量等于Storyline变量？

相关推荐