設置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它！謝謝！

來源

2017-08-15 Nurdianna

你在哪裏嘗試餅圖？目前尚不清楚您是否能夠將幻燈片放入您的幻燈片中。有一些入門教材[在這裏]（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

來源

2017-08-21 14:22:32 Nurdianna

甜！你能否給你的答案增加一些背景知識（即項目結構，配置等），以便讀者瞭解情況。請記住，你最初對這些事情有懷疑。和快樂的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觸發運行上面的功能。

來源

2017-08-15 12:18:00 Mustafa

也許是一個愚蠢的問題..但是，我把這個放在.js文件或者Storyline的Execute Javascript觸發器中嗎？ – Nurdianna

我會嘗試在自己的js文件中添加這段代碼，並將它包括在storyline story_content文件夾中。然後，您可以使用' _pie-chart.js_位於story_content地圖中。它仍然不會對項目中的輸入做出迴應。我現在應該做什麼？ – Nurdianna

設置javascript變量等於Storyline變量？

回答

相關問題