将JavaScript变量设置为等于Storyline变量？
[英]Set javascript variable equal to Storyline variable?
问题描述
So I've got a javascript with a pie chart and 5 slices. 
所以我有一个带有饼图和5片的javascript。 I want to implement this chart into a Storyline slide. 我想将此图表实施到故事情节幻灯片中。 In this Storyline project I've got 5 variables that has got specific values. 在这个Storyline项目中，我有5个具有特定值的变量。 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. 饼图工作正常，但现在我必须将这些切片与Storyline变量关联。 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? 我可以说var=Categorie1数字在哪里？ 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? 所以..有人可以帮助我吗？ :DI would appriciate it! ：DI会喜欢的！ Thank you! 谢谢！
2 个解决方案
解决方案1
3 已采纳 2017-08-21 14:22:32
I managed to make it work :D 我设法使其工作：D
What I did: 我做了什么：
I made a Storyline project where I have 5 sliders. 我创建了一个Storyline项目，其中有5个滑块。 Those sliders have each their own variable (var1, var2, var3, var4 and var5). 这些滑块各自具有自己的变量（var1，var2，var3，var4和var5）。 I created a blank slide where this pie chart is going to be. 我在此饼图所在的位置创建了一张空白幻灯片。
Then I made an index.html file. 然后，我做了一个index.html文件。 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: 之后，我将以下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();
}
After that I published the Storyline file. 之后，我发布了Storyline文件。 And now it works perfectly! 现在，它可以完美运行！
Thanks Mustafa for your help. 感谢Mustafa的帮助。 I appriciate it :D 我称赞它：D
解决方案2
0 2017-08-15 12:18:00
To get storyline variables in your Javascript code you do something like this: 要在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);
}
You can use a javascript trigger to run the function above. 您可以使用JavaScript触发器来运行上述功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.