Установить переменную javascript равной переменной Storyline?

Итак, у меня есть JavaScript с круговой диаграммой и 5 ломтиками. Я хочу внедрить этот график в слайд Storyline. В этом проекте Storyline у ​​меня есть 5 переменных, которые имеют определенные значения. Когда пользователь отвечает на некоторые вопросы, эти значения меняются. В конце проекта эти значения будут визуализированы с помощью этой круговой диаграммы.

Круговая диаграмма работает отлично, но теперь мне нужно связать эти кусочки с переменными Storyline. Как я могу это сделать?

Здесь вы можете увидеть, как строится круговая диаграмма.

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

Могу ли я просто сказать var=Categorie1 где цифры? Или это сложнее, чем это? Я искал в Интернете некоторые ответы, но я не мог найти что-то, очевидно, иначе я бы не стал спрашивать об этом сейчас. Ха-ха!

Итак... Есть кто-то, кто может мне помочь?:D Я бы оценил это! Спасибо!

Источник

2 ответа

Решение

Мне удалось заставить его работать: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. И теперь это работает отлично!

Спасибо Мустафе за вашу помощь. Я ценю это:D

Источник

Чтобы получить переменные сюжетной линии в вашем коде 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 для запуска вышеуказанной функции.

Источник
Другие вопросы по тегам